jQuery - Introdução

ARTIGO PUBLICADO POR Felipe Diesel ORIGINALMENTE EM:

http://felipediesel.net/blog/jquery-introducao/

Quem começa a usar a jQuery se pergunta como conseguia programar em javascript puro, tamanha a facilidade da jQuery.

Claro que existe Prototype, Dojo e a Yahoo! UI, mas nenhuma facilita a vida tanto quanto a jQuery, além de ela ser muito menor que os concorrentes, apenas 19Kb (já com o módulo Ajax).

Ainda para mostrar a facilidade da jQuery, vamos fazer um comparativo entre javascript, prototype e jQuery. A tarefa será colocar uma classe nas linhas de uma tabela para zebrá-la:

Javascript

É enorme. Tão grande que precisa de um artigo só pra ela, confira no A List Apart

Prototype (versão 1.5)

$$(”table”).each(function(table){

Selector.findChildElements(table, [”tr”])

.findAll(function(row,i){ return i % 2 == 1; })

.invoke(”addClassName”, “odd”);

});

JQuery (versão 1.1)

$(”tbody>tr:nth-child(odd)”).addClass(”odd”);

Simples, fácil e eficiente. A jQuery tem como base a função $(). É ela que gerencia tudo o que você quiser implementar. Alguns exemplos de uso:

Executar comandos ao carregar a página

$(document).ready(function(){

alert(’Página carregada’);

});

Adicionar o evento onclick em todos os links

$(”a”).click(function(){

alert(”Hello World!”);

});

A função $(document).ready() é algo que (até onde eu sei) nenhuma outra biblioteca ou framework javascript faz! É semelhante ao onload do body, porém ele não espera carregar imagens e objects, ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil!

No próximo artigo falarei um pouco sobre jQuery expressions, que é o modo como os elementos da página são encontrados pela jQuery!