Você está na página 1de 13

A Biblioteca do Programador JavaScript

jQuery

jQuery O que ?
A biblioteca jQuery nada mais que um arquivo javascript (.js) que deve ser chamado pela pgina, adicionando a seguinte linha no cabealho:
<script type="text/javascript" src="jquery.js"></script>

jQuery O que ?
H duas opes para a chamada do arquivo:

Baixar o arquivo no site oficial e hosped-lo junto com a pgina. Usar um arquivo remoto pblico: Google e Microsoft mantm em seus sites a biblioteca para acesso pblico.
<script ... src="www.endereco.do/arquivo.js" ...>

jQuery Pra que serve?


adicionar efeitos visuais e animaes acessar e manipular o DOM prover interatividade alterar contedos modificar apresentao e estilizao simplificar tarefas especficas de JavaScript e o que mais sua criatividade permitir

jQuery Como funciona?


JavaScript uma tcnica de programao que funciona percorrendo e buscando seus alvos os elementos de marcao - na rvore do documento ou no DOM.
Portanto, um script s consegue executar sua ao se todo o documento j tiver sido carregado.

jQuery Como funciona?


Nota: DOM (Document Object Model) como o JavaScript v a pgina e o estado do navegador.

jQuery Como funciona?


A biblioteca jQuery no permite misturar script com marcao HTML.
<input type=button onclick=document.getElementById(cor).style.color=#FF0000>

Voc obrigado a inserir seu script incorporado na seo head do documento ou escrev-lo em um arquivo serpado e linkar para os documentos onde ser utilizado.
<script type=text/javascript src=../jquery-1.2.6.js></script> <script type=text/javascript> $().ready(function() { $(#btn-vermelha).click(function() { $(#cor).css(color,#FF0000); }); }); </script> () <h1 id=cor>Cabealho muda de cor</h1> <input id=btn-vermelha type=button value=Vermelha>

jQuery Como utilizar?


Como um script s consegue executar sua ao se todo o documento j tiver sido carregado, precisamos fazer com que o script s seja carregado quando a pgina estiver ponta. Para isso fazemos o seguinte:

JavaScript
window.onload = function() { };

jQuery
$().ready( function() { } );

Nota: Existe uma sintaxe abreviada do mtodo ready(), mostrado acima, que a seguinte:
$(function() { });

jQuery Como utilizar?


A finalidade do uso do jQuery controlar o comportamento de uma pgina. Ento precisamos encontrar os elementos HTML, nos quais usaremos os mtodos do script. Usamos o contrutor $() para encontrar os elementos num documento. Exemplo: $('table') vai encontrar todos os elementos table e armazenar em um objeto array.

jQuery Como utilizar?


Se voc quiser encontrar ocorrncias especficas de um elemento, basta atribuir identidades (atributo id do html). Exemplo: Para se referir ao boto Vermelha
<input id=btn-vermelha type=button value=Vermelha>

Damos um id ao elemento e criamos o construtor


$(#btn-vermelha)

Tambm podemos usar seletores CSS para localizar elementos no documento:


$(body p:nth-child(3))

Nesse exemplo, referenciamos o terceiro pargrafo descendente do elemento body.

jQuery Como utilizar?


Um conceito importante da biblioteca jQuery o encadeamento. Exemplo:
$('div').children('p').fadeOut().addClass('plongo')

Esse cdigo diz o seguinte: Construtor, encontre todos os elementos p que sejam filhos dos elementos div, neles aplique um efeito de de esmaeciemento e adicione a classe plongo.
Nota: Denomina-se encadeamento a caracterstica de se poder encadear diversos mtodos em uma declarao.

jQuery Funes Utilitrias


jQuery prev um conjunto de funes chamadas utilitrias que usa o sinal $ como um identificador tal qual qualquer outro identificador previsto em JavaScript. A sintaxe para as funes utilitrias mostrada no exemplo a seguir:
$.browser

Ou com a opo de uso do identificador jQuery:


jQuery.browser

Que serve para identificar o tipo do navegador do usurio. Nota: O sinal $ um pseudnimo, um atalho, para o identificador da biblioteca. O nosso identificador jQuery. $()
equivale a

jQuery()

jQuery Links teis


http://www.jquery.com http://docs.jquery.com http://jsbin.com http://simplesideias.com.br/usando-jquery-na-pratica