Desmistificando o jQuery (Parte 1)

Em um post anterior, falei sobre o poder e versatilidade do jQuery, sem todavia apresentá-lo na prática, o que ficou prometido e desejo cumprir neste post.

Por muito tempo, há não muito tempo, ouvi falar sobre jQuery e pensei tratar-se de um "bicho de sete cabeças".

Conforme mencionei nesse post anterior, minha habilidade com front-end era bem rasa, fluindo mais com frameworks component-based (como Primefaces) que já me traziam tudo praticamente pronto (e bonito!).

Inconformado com essa lacuna, busquei algumas boas literaturas e acabei sendo alocado em um projeto PHP. Nas boas-vindas já indicaram a toda a equipe que o conhecimento de jQuery seria muito mais importante que o de PHP. Então, não perdi tempo, mergulhei na literatura e, para minha surpresa, descobri que jQuery é muito simples. Tem uma imensidão de recursos, talvez essa seja a parte mais difícil (menos fácil) de aprender, mas a forma de empregá-los em sua aplicação é simples demais! Descobri que o bicho das sete cabeças não existia (ou pelo menos não era o jQuery!).

Minha expectativa é que você descubra a mesma coisa ao concluir a leitura deste post!

Seguindo a definição do site oficial, jQuery é uma biblioteca JavaScript concisa e rápida que simplifica  a forma de percorrer um documento HTML, tratar eventos, animações, e interações assíncronas (Ajax) para um rápido desenvolvimento de aplicações web.

É open source, estando disponível no GitHub, onde qualquer um pode visualizar seu código fonte e ainda colaborar com sua implementação.

Para começar a trabalhar, o primeiro passo é fazer o download da biblioteca pelo site oficial. A forma de adicionar o jQuery em sua aplicação é a mesma de qualquer outra biblioteca JavaScript e varia de acordo com a plataforma que você está utilizando (Java, Rails, PHP, etc.), por isso não vou detalhar este passo aqui, até para não estender além do foco do post.

Antes de continuar, é importante fazer uma observação:

Se você é daqueles que ainda têm aquela visão de 10 ou 15 anos atrás, de que JavaScript é uma "bugueira" só, que deve ser evitado ao máximo, que basta mudar o browser (ou sua versão) e tudo para de funcionar, é hora de rever seus conceitos! Os seus aplicativos on-line favoritos de webmail , rede social, vídeos, etc., utilizam muito JavaScript e não existiriam sem essa linguagem. Os browsers têm amadurecido muito para alcançar máxima compatibilidade (tudo bem, nem todos...), especialmente seguindo os padrões definidos pela W3C, além de oferecer poderosas ferramentas de depuração. E bibliotecas atuais, como o jQuery, têm ainda maior foco na compatibilidade cross-browser! Ou seja, hoje em dia, utilizar JavaScript pode ser uma tarefa muito natural e que oferece uma gama de recursos muito maior e atraente para seu cliente, além de explorar o poder de processamento do cliente (cada vez maior) e reduzir o processamento necessário no servidor, que em alguns casos tem que atender milhares ou até milhões de requisições.

Como disse antes, jQuery é simples demais, e vamos começar a ver isso já!

Obtendo elementos

A forma de obter os elementos do HTML é a mesma utilizada pelo CSS:

Sustenido/cerquinha para acessar um elemento pelo id:

#id_do_elemento

Ponto para acessar um ou mais elementos pela classe CSS:

.classe_css

Nome do seletor (tag HTML) sem prefixo nenhum para acessar todos os elementos desse tipo:

body
div
form
input
a

Também é possível combinar os meios de busca para focá-la melhor e poupar processamento desnecessário:

input.campo-obrigatorio

O trecho acima indica que você deseja obter todos os elementos input do seu HTML que possuem a classe "campo-obrigatorio".

Desta forma, os campos Nome e Profissão abaixo seriam recuperados:

<input type="text" id="nome" value="Daniel Adornes" class="campo-obrigatorio"/>

<input type="text" id="profissao" value="Desenvolvedor" class="campo-obrigatorio"/>

<input type="text" id="cidade" value="Porto Alegre" class="campo-nao-obrigatorio"/>

Mas onde se coloca esse código? Dentro de $(), que é o chamado jQuery object.

$("input")   Recupera todos os elementos input do documento HTML

$("#nome")  Recupera pontualmente o elemento cujo atributo id é "nome"

$(".campo-obrigatorio")  Recupera todos os elementos que possuem a classe "campo-obrigatorio"

$("input.campo-obrigatorio")   Recupera mais objetivamente os elementos input que possuem a classe "campo-obrigatorio"

Ainda seguindo o padrão CSS, é possível encontrar elementos de maneiras mais avançadas, sem perder a simplicidade e concisão do código:

$("#div_principal a")   Recupera todos os elementos a que são descendentes (filhos diretos ou indiretos) do elemento cujo ID é div_principal.

$("#form_principal > input")   Recupera todos os elementos input que são filhos diretos do elemento cujo ID é form_principal.

$("form + div")   Recupera todos os elementos div que estão diretamente após algum elemento form.

$("input[name]")   Recupera todos os elementos input que possuem um atributo name setado.

$("input[type='text']")   Recupera todos os elementos input que possuem um atributo type igual a 'text'.



E se você deseja obter todos os elementos que possuem determinado atributo cujo valor inicia com determinado valor? Ou que termina com determinado valor? Ou além, que possui determinado valor?

Aí não tem jeito, você tem que recorrer a um JavaScript malucão!! Mentira! Tem sim um jeito que jQuery já oferece rápido e fácil:

$("a[href^='http://']")   Recupera todos os elementos a (links) que apontam para algum site (começando com 'http://').

$("a[href^='mailto:']")   Recupera todos os elementos a (links) que apontam para algum e-mail (começando com 'mailto:').

$("a[href$='.com.br']")   Recupera todos os elementos a (links) que apontam para algum site que termina com '.com.br'.

$("a[href*='@gmail']")   Recupera todos os elementos a (links) que apontam para algum e-mail do gmail (que possuem a string @gmail').


Também é possível combinar:

$("a[href^='http'][href$='gmail.com']")   Recupera todos os elementos a (links) que apontam para algum e-mail do gmail (que possuem a string @gmail').


Para recuperar primeiro ou último:

$("input:first")   Recupera o primeiro elemento input da tela.

$("input:last")   Recupera o último elemento input da tela.

$("#form_principal > input:last")   Recupera o último elemento input que é filho direto do elemento cujo ID é form_principal.


E para todas as formas de busca apresentadas até aqui, há a possibilidade de utilizar negação:

$("input:not(.campo-obrigatorio)")  Recupera todos os elementos input que não possuem a classe "campo-obrigatorio".

$("a:not([href*='@gmail'])")  Recupera todos os elementos a (links) que não apontam para um e-mail do gmail (não possuem "@gmail").


Também é possível buscar elementos por seu conteúdo.

<div>
    <p>Conteúdo é o que fica aqui entre a abertura e o fechamento da tag</p>
</div>

$("div:has(p)")  Recupera todos os elementos div que possuem em seu conteúdo algum elemento p. Retornaria o div do exemplo acima.

$("p:contains('abertura')")  Recupera todos os elementos p que possuem em seu conteúdo o texto 'abertura'. Retornaria o p do exemplo acima.


Há ainda outras formas mais específicas de se obter elementos do documento HTML, mas que não vou detalhar aqui, afinal isso é só um post e não um livro.

Mas após obter os elementos que desejamos, fazemos o quê com eles??

Aí entram as funções oferecidas pelo jQuery, que são muitas, e, para não estender demais este post, vou deixar para a Parte 2. Até lá!