você está aqui: Home  → Arquivo de Mensagens

jQuery - A Biblioteca do Programador JavaScript

Colaboração: Maurício Samy Silva

Data de Publicação: 27 de November de 2008

jQuery é uma biblioteca JavaScript lançada em janeiro de 2006 que vem fazendo sucesso na comunidade de programadores JavaScript. É a completa revitalização dessa linguagem, que teve sua fase áurea à época da guerra dos browsers, e, estava completamente relegada a um segundo a plano.

Disse John Resing, o criador de jQuery: "o foco principal da biblioteca é a simplicidade. Por que submeter os desenvolvedores ao martírio de escrever longos e complexos códigos para criar simples efeitos?"

Dois mecanismos intrínsecos da biblioteca lhe dão um caráter único e diferenciado:

  • O acesso ao DOM se faz com uso dos poderosos seletores das CSS 2.1 e CSS 3.
  • O encadeamento, que sempre retorna um novo objeto.

A entediosa e as vezes complexa tarefa de acessar o DOM com sintaxe JavaScript padrão tornou-se, eu diria, ridiculamente simples. Considere a simples tarefa de criar e inserir um parágrafo, com seu respectivo texto, em uma div existente no documento e compare os scripts mostrados a seguir:

Acesso ao DOM

Com JavaScript puro:

  1.  window.onload = function(){
  2.  	var paragrafo = document.createElement('p');
  3.  	var container = document.getElementById('container');
  4.  	container.appendChild(paragrafo);
  5.  	var mensagem = document.createTextNode('Olá mundo');
  6.  	paragrafo.appendChild(mensagem); 
  7.  	}

Com JavaScript + jQuery:

  1.  $(document).ready(function(){
  2.  	$('#container').append('<p>Olá mundo</p>');
  3.  });

O construtor $(parâmetro) seleciona todos os elementos do DOM que casem com parâmetro. E, a grande "sacada" de John Resing foi possibilitar parâmetro = seletores CSS, simplificando o acesso ao DOM.

Encadeamento

Observe o código a seguir:

  $('ul[title="lista-um"]  li:nth-child(2n)').prepend('<span>A </span>').css('color', 'red');

O script mostrado acessa todos os elementos li de ordem par que sejam elementos filho do elemento ul cujo atributo title é lista-um (belo exemplo de seletores CSS!). Insere no início dos elementos encontrados, um elemento span contendo a letra A e aplica a regra CSS para tornar o texto na cor vermelha.

Este é o princípio de encadeamento, segundo o qual poderíamos continuar encadeando métodos no script, em um processo infinito. Sem dúvida isso simplifica a sintaxe.

Quer saber mais sobre jQuery? Leia o artigo do autor: Introdução à Biblioteca jQuery.

Maurício Samy Silva é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME). Fundador e ex-diretor presidente da Planep Engenharia, lecionou Geometria Descritiva e Matemática ao longo de 25 anos. É um obstinado divulgador dos Padrões Web e desenvolve o site CSS para web design (www.maujor.com) e o Blog do Maujor (www.maujor.com/blog). É autor do livro jQuery - A Biblioteca do Programador JavaScript, publicado pela Editora Novatec


 

 

Veja a relação completa dos artigos de Maurício Samy Silva

Opinião dos Leitores

GuTheR
14 Abr 2011, 23:46
quanta baboseira...
Nao considero JQuery uma biblioteca, pois a definicao de biblioteca é outra. JQuery nao eh nada mais que um serie de funcoes que tem um escopo de acesso mais simples, porem internamente fazem a mesma coisa que vc poderia fazer sem usar elas.

O exemplo acima eh tendencioso, pois o meu exemplo abaixo faz exatamente a mesma coisa e com apenas 1 linha de codigo.

window.onload = function() { document.getElementById('container').innerHTML = '<p>Olá mundo</p>';
*Nome:
Email:
Me notifique sobre novos comentários nessa página
Oculte meu email
*Texto:
 
  Para publicar seu comentário, digite o código contido na imagem acima
 


Powered by Scriptsmill Comments Script