jQuery - Introdução

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

$(function() {
  alert('Página carregada');
});

Adicionar o evento onclick em todos os links ```javascript $(“a”).click(function(){ alert(“Hello World!”); });

A função $(function() {}) é 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!