Na edição anterior, apresentamos a biblioteca de Javascript jQuery, explicando recursos básicos como seletores, mudança de aparência (css) e manipulação de atributos. Nessa segunda parte, concluímos a série ensinando um pouco mais sobre filtros, mudança de conteúdo na página, interação com o usuário, animações e Ajax. No final do artigo comentamos sobre plugins e projetos de extensão baseados nessa biblioteca.

Se você não teve a oportunidade de conhecer esse projeto ainda, o jQuery é uma solução completa para o desenvolvimento de páginas web, utilizando uma sintaxe simples e elegante, além de abstrair problemas de compatibilidade entre navegadores. Tudo nessa biblioteca gira em torno da função $, que serve para encapsular elementos do DOM (Document Object Model) e manipulá-los de forma padronizada e consistente.

O jQuery possui um conjunto de seletores (strings) que podemos passar como parâmetro para a função $, permitindo localizar elementos em uma página HTML. Embora a primeira parte do artigo já tenha abordado o assunto de seletores, existem alguns filtros que complementam essa funcionalidade e adicionam mais flexibilidade ao seu código. Precisamos explicar um pouco mais sobre esses filtros para um melhor entendimento do assunto.

Filtros complementares

O jQuery define diferentes métodos que, na maioria das vezes, são redundantes com relação aos seletores. Por exemplo (e relembrando o artigo anterior), podemos pegar todos os parágrafos que contêm a classe “menu” com $(“p.menu”). Também podemos selecionar esses mesmos elementos com $(“p”).filter(“.menu”). Os dois casos são idênticos, mas o método filter (que recebe um seletor como parâmetro) é vantajoso em casos onde você precisa trabalhar sobre um subconjunto dos elementos já selecionados. A Tabela 1 apresenta uma lista com esses métodos que complementam o trabalho dos seletores.

Seletor Descrição Exemplos
hasClass(class) Retorna true se pelo menos um dos elementos selecionados possui a classe indicada. Retorna false caso contrário. $(“#m2”).hasClass(“menu”): Retorna true se o elemento #m2 possuir a classe “menu” definida. Retorna false caso contrário.
filter(seletor) Remove todos os elementos que não atendem ao seletor especificado. $(“p”).filter(“.lado”): Seleciona os parágrafos que possuem a classe lado definida.
filter(funcao) Utiliza uma função para remover os elementos indesejados. A função deve retornar true para os elementos desejados e false para os indesejados. $(“p”).filter(function(i) { return i==3; }): Seleciona o quarto parágrafo.
is(seletor) Retorna true se pelo menos um dos elementos se enquadra na condição do seletor. Retorna false caso contrário. $(“div.menu”).is(“:contains(‘java’)”): Retorna true se algum dos divs (que possuem classe “menu”) contém o texto “java”.
map(funcao) Retorna um array de valores, onde cada valor está ligado a um elemento selecionado. Os valores são retornados pela função passada como parâmetro. $(“div”).map(function(){ return $(this).attr(‘id’);}): Retorna um array com os ids (strings) de todos os divs da página (ex.: [‘id1’, ‘id2’, ...]).
not(seletor) Remove os elementos que satisfazem à condição do seletor. $(“div”).not(“.menu, .top”): Retorna um objeto jQuery que encapsula todos os divs da página, menos aqueles que possuem as classes “menu” ou “top” definidas.
slice(inicio, fim) Retorna um objeto jQuery contendo um sub-conjunto da seleção atual, começando no índice inicio (o primeiro elemento possui índice zero) e terminando no índice fim (exclusivo). O segundo parâmetro é opcional. Se esse não for informado, a seleção vai até o último elemento. $(“div”).slice(3, 6): Retorna um objeto jQuery com os elementos de índice 3, 4 e 5 da seleção atual. $(“div”).slice(4): Retorna um objeto jQuery com os elementos de índice 4 em diante.
add(seletor) Adiciona mais elementos à seleção atual, onde os novos elementos atendem ao seletor. $(“div”).add(“p”): Adiciona todos os parágrafos à seleção de todos os divs da página.
children(seletor) Retorna um objeto jQuery com os filhos imediatos dos elementos atuais. É possível passar um seletor para filtrar esses filhos. $(“#menu”).children(): Retorna todos os filhos do elemento que possui id=“menu”. $(“#menu”).children(“.submenu”): Retorna os filhos do elemento #menu que possuem a classe submenu definida.
contents() Seleciona todos os descendentes da seleção atual (incluindo texto). $(“#p1”).contents(): Seleciona todos os descendentes do elemento #p1, incluindo textos, links, etc.
find(seletor) Seleciona elementos descendentes que satisfazem ao seletor. $(“p”).find(“span”): Seleciona todos os elementos que estão dentro de parágrafos.
next([seletor]) Seleciona os elementos únicos que vêm logo após os elementos da seleção atual (ou seja, o próximo elemento irmão). Você pode passar um seletor para filtrar esse conjunto. $(“#menu”).next(): Seleciona o elemento que vem logo após o elemento que possui id=“menu”. $(“p”).next(“.item”): Seleciona os elementos que possuem a classe “item” e estão logo após um parágrafo.
nextAll(seletor) Seleciona todos os irmãos imediatamente após os elementos atuais. Você pode passar um seletor para filtrar esse conjunto. $(“div:first”).nextAll(): Seleciona todos os divs irmãos do primeiro div da página.
parent(seletor) Seleciona os pais de todos os elementos da seleção atual. Você pode passar um seletor para filtrar esse conjunto. $(“p”).parent(): Seleciona os elementos que são pai dos parágrafos da página.
...
Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo