De acordo com as Leis 12.965/2014 e 13.709/2018, que regulam o uso da Internet e o tratamento de dados pessoais no Brasil, ao me inscrever na newsletter do portal DICAS-L, autorizo o envio de notificações por e-mail ou outros meios e declaro estar ciente e concordar com seus Termos de Uso e Política de Privacidade.

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('
Olá mundo
');
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('A ').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.