Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos, Tutoriais, Simulados e Projetos. Agradecemos a sua colaboração.

Curso de JQuery - Aula 4
Um Exemplo em JQuery

JQuery foi desenvolvido pelo Google. Para criar o primeiro exemplo de jQuery, você precisa usar o arquivo JavaScript para jQuery. Você pode baixar o arquivo jQuery em jquery.com ou usar a URL absoluta do arquivo jQuery.
Neste exemplo de jQuery, estamos usando a URL absoluta do arquivo jQuery. O exemplo jQuery é escrito dentro da tag do script.
Vejamos um exemplo simples de jQuery:

Copie e cole o código a seguir no seu Editor de Texto e salve-o como: exemplo-jquery-4.1.html.
<!DOCTYPE html> <html> <head> <title>Primeiro Exemplo em JQuery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(document).ready(function() { $("p").css("background-color", "cyan"); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Primeiro parágrafo.</p> <p>Segundo parágrafo.</p> <p>Terceiro parágrafo.</p> </body> </html>
Agora execute esse exemplo no seu navegador. A saída desse código é a seguinte:

Figura 4.1 – Resultado do código acima.
Onde:
$document().ready() e $)
O código inserido entre $(document).ready() é executado apenas uma vez quando a página está pronta para o código JavaScript ser executado.
No lugar de $(document).ready(), você pode usar a notação abreviada $() apenas.
Por exemplo:
$(document).ready(function() { $("p").css("color", "red"); });
O código acima é equivalente a este código:
$(function() { $("p").css("color", "red"); });
Vejamos o exemplo completo de jQuery usando a notação abreviada: $().
Copie e cole o código a seguir no seu Editor de Texto e salve-o como: exemplo-jquery-4.2.html.
<!DOCTYPE html> <html> <head> <title>Segundo Exemplo em jQuery</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"> </script> <script type="text/javascript" language="javascript"> $(function() { $("p").css("color", "blue"); }); </script> <script src='/google_analytics_auto.js'></script></head> <body> <p>Primeiro parágrafo.</p> <p>Segundo parágrafo.</p> <p>Terceiro parágrafo.</p> </body> </html>
A saída para esse código é a seguinte:

Figura 4.2 – Resultado do código acima.
Onde:
function() {$("p").css ("background-color", "blue");}

Muda a cor de fundo de todas as tags ou parágrafos para azul.

*****

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino