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