você está aqui: Home  → Arquivo de Mensagens

jQuery - A Biblioteca do Programador JavaScript

Colaboração: Maurício (Maujor) 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.

Sobre o autor

Maurício Samy Silva também conhecido como "Dinossauro das CSS" ou simplesmente Maujor® é graduado em Engenharia Civil pelo Instituto Militar de Engenharia (IME).

No segundo semestre de 2003, com a pretensão de suprir a falta de material de consulta gratuita, em língua portuguesa, na internet, decidiu criar o site de tutoriais denominado Maujor, hospedado em http://www.maujor.com/ e destinado a divulgar as técnicas de desenvolvimento frontend. Maujor é autor de 15 livros de desenvolvimento web (http://livrosdomaujor.com.br) e está escrevendo mais um sobre CSS Grid Layout com previsão de lançamento em novembro de 2017.

Saiba mais: Facebook , Twitter.



Veja a relação completa dos artigos de Maurício (Maujor) 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