jQuery - Introdução

16/01/2007

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!

Publicado em jQuery, javascript com

8 Comentários

  1. Israel Cefrin escreveu em 21 de março de 2007 as 10:54:

    Ola Felipe
    Muito boa essa dica, tive um problema com um site de um cliente e usei a lib do prototype que é meio ‘pesadinha’. Esse jQuery vai entrar para os favoritos.

    []´s

  2. Felipe Diesel escreveu em 21 de março de 2007 as 17:32:

    Ela é muito boa e tem muita documentação. Dá uma olhada no site oficial.

    Abraços

  3. Ferdinando escreveu em 02 de maio de 2007 as 17:28:

    Apartir de voce e do pessoal da jQueryBrasil, comecei o meu blog tambem, ja que terei que converter um projeto inteiro que tenho, a cada dor de cabeça e conquista, vou postando. Assim dou minha parcela de contribuição tambem.
    o blog eh http://jquerypassoapasso.blogspot.com

    Abraços a todos

  4. Fred escreveu em 02 de julho de 2007 as 15:50:

    Olá, blz?

    Cara estou usando aqui de teste o jquery 1.1.3 mas parece que não esta legal. Estou seguindo esses seus conselhos mas parece que não esta bom. Vou dar uma olhada no site oficial e baixar a versão novamente. Valeu!

  5. Enilton escreveu em 03 de julho de 2007 as 00:14:

    Parabéns!
    Realmente esse Blog é muito produtivo LoL
    Tem conteúdo Super Legais.
    =)

    []’s

  6. Fred escreveu em 03 de julho de 2007 as 08:44:

    ei Felipe, tudo bom?

    ei Valeu… descobri aqui o que era.

    Eu simplesmente baixei novamente a biblioteca e substitui ela, acho que a que eu tinha baixado não estava legal pq toda vez que eu iniciava algum evento acusava erro no arquivo js.

    Agora esta ok.

    Valeu

  7. Micox escreveu em 14 de novembro de 2007 as 10:43:

    Opa, acabei de ver que a biblioteca Ext tem um equivalente ao ready: o onReady
    Não sei se implantou antes ou depois do jquery, mas fica aí a informação pra quem precisar.

    Fiz uma onready no javascriptão mesmo pra quem não usa frameworks. Em breve blogo ela.

    té.

  8. Evento body onReady sem o uso de libs » El Micox escreveu em 14 de novembro de 2007 as 13:39:

    [...] ou seja, assim que estiver carregado todo o HTML ela é executada! Muito útil! […] - jQuery Introdução - Felipe Diesel […]onReady é um método automaticamente chamado quando o DOM estiver completamente [...]

Deixe seu comentário