INSTITUTO FEDERAL DA BAHIA IFBA

1 - Introduo ao jQuery
O jQuery no nada mais que uma biblioteca de funes do Javascript criada para simplificar diminuir a quantidade de cdigo do Javascript, facilitando o trabalho dos desenvolvedores.

Algumas das funcionalidades do jQuery so: Seletores de elementos HTML Manipulao de elementos HTML Manipulao de CSS Funes de eventos HTML Efeitos e animaes JavaScript

2 - Como usar o jQuery.

Como o jQuery uma biblioteca, primeiro preciso baixa-lo do site oficial: http://jquery.com. Aps baixado, para utilizar em uma pagina HTML preciso inserir ele com a tag script:
<script type=text/javascript src=jquery-1.10.1.min.js></script> * 1.10.1 a verso atual do jQuery.

Desse modo o jQuery, j estar disponvel a pagina HTML, pode ser usado como um Javascript comum.

3 Construtor jQuery
Para fazer a manipulao dos elementos HTML no jQuery, utilizado um construtor (que na verdade uma funo), esse recurso tem o poder de buscar os elementos de forma simples rpida para que possam ser usados como Objetos do jQuery. A forma do construtor a seguinte:
jQuery( ) ou $( )

Com essa funo o jQuery procura elementos HTML na pagina por meio do parmetro passado dentro da string para podermos usar as funes da biblioteca. O parmetro tem a mesma forma dos seletores de CSS1 at o CSS3, exemplos:
$(div)

- Seleciona todos os elementos div da pagina.

$(#janela)

- Seleciona os elementos com o id=janela

$(.porta)

- Seleciona os elementos com a classe=porta Resumindo, os seletores suportados pelo CSS3, tambm so suportados pelo jQuery. A funo retorna um objeto jQuery que contem uma coleo de elementos DOM (Document Object Model), que depois podem ser usados em conjuntos com as funes/eventos do jQuery.

4 Uso de Funes Sintaxe do jQuery

O uso de funes do jQuery simples, a sintaxe bsica a seguinte:
$(seletor).ao()

$ - a criao de Objeto jQuery (seletor) O seletor CSS. ao() a funo que o jQuery vai executar nos elementos selecionados.

O jQuery dispe de centenas de funes que podem ser encontradas na sua documentao online: http://api.jquery.com/
Exemplos:

Por exemplo, quando precisamos do HTML de um elemento usando Javascript preciso realizar esse processo:
Document.getElementById(div1).innerHTML;

J no jQuery:
$(#div1).html();

5 Eventos
Eventos so mtodos que so chamados quando um usurio interage com o navegador. como no Javascript, o jQuery tambm tem suporte a eventos, que em conjunto aos seletores pode vincular os eventos a elementos do HTML. A sintaxe de eventos no jQuery so assim:
$(seletor).evento(function(){ // cdigo executado quando a funo for chamada. });

Onde: seletor = seletor CSS. evento = nome do evento do jQuery. funcion() = definimos que a funo chamada ser a especificada no corpo dentro das chaves {}.

Um dos eventos mais importantes do jQuery, o .ready(), esse evento serve para dizer ao jQuery, que quando a pagina estiver carregada as operaes podem ser executadas. A diferena entre o .ready(), o evento onload do Javascript que o onload, s chamado quando a pagina estiver totalmente carregada, inclusive as imagens, isso pode demorar, se o desenvolvedor quiser executar seus scripts sem precisar carregar a pagina inteira, o ready ajuda nessa funo, porque ela chamada quando a pagina est pronta para executar scripts ou seja quando o DOM est carregado. Exemplo:
$(document).ready(function() { alert(A pagina est pronta para executar scripts); });

O jQuery tambm tem vrios eventos para substiturem os originais do Javascript, todos eles podem ser encontrados aqui: http://api.jquery.com/category/events/ Exemplos de Eventos:
$(#button).click(function() { // Procura o elemento com o id=button $(#button).hide(); // Esconde o elemento button; });

Esse exemplo tambm pode ser simplificado, nesse caso, estamos procurando o elemento button, registrando o evento click (Javascript: onclick), nele, mais depois procuramos o button novamente o escondemos, podemos simplificar o cdigo,

removendo a segunda busca, usando o $(this), que como no Javascript se refere ao objeto encontrado. Usando o this, o cdigo fica assim:
$(#button).click(function() { // Procura o elemento com o id=button $(this).hide(); // Esconde o elemento que chamou o evento. });

Outra facilidade que o uso de jQuery oferece com os Eventos, que no precisamos mais especificar o evento a ser chamado dentro do HTML, por exemplo usando o Javascript para ao clicar em um boto executar um comando teramos que fazer assim:
<html> <head> <script> function modificarTeste(){ document.getElementById("teste").innerHTML="Ol Mundo"; } </script> </head> <body> <button id="button1" onclick="modificarTeste()">Click !</button> <p id="teste">Teste</p> </body> </html> Nesse exemplo do Javascript, foi preciso especificar no HTML, que evento est ligado ao button1. Agora com jQuery: <html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" ></script> <script> $(document).ready(function(){ $("#button1").click(function(){ $("#teste").html("Ol Mundo"); }); }); </script> </head> <body> <button id="button1">Click !</button> <p id="teste">Teste</p> </body> </html>

Com o jQuery no foi preciso especificar qual evento ser chamado no HTML, isso facilita por exemplo, em um site muito grande com muitos eventos espalhados entre o HTML, se for preciso modificar algum deles fica complicado ter que procurar por entre todo o HTML at encontrar onde preciso de modificao.