No artigo de hoje “Filtrando, selecionando elementos no DOM com JQuery”, vamos rever ou aprender algumas funções básicas da biblioteca JQuery que todo programador deve conhecer para ter um domínio maior em seus projetos, para manipular os elementos na tela, ou seja, manipular o DOM.

Muitas vezes, quando trabalhamos com a biblioteca jQuery, temos a necessidade de filtrar ou selecionar certos elementos da página com características ou valores específicos. Apesar de ser possível utilizar seletores CSS para realizar boa parte desses filtros, existem funções nativas de sintaxe mais simples que podem tornar esta tarefa ainda mais fácil com JQuery.

Cada função será apresentada individualmente e consequentemente explicada. É muito importante salientar, é que o programador no caso obtenha conhecimento básico sobre JQuery e seus seletores, como também sempre utilizar a biblioteca mais recente disponível no site https://jquery.com/ .

DOM Document

O Modelo de Objeto de Documento (Document Object Model - DOM) é uma convenção multiplataforma e independente de linguagem para representação e interação com objetos em documentos HTML, XHTML e XML.

Quando um documento HTML é carregado em um navegador da Web, torna-se um Objeto de Documento. Os nós de cada documento são organizados em uma estrutura de árvore, chamada de árvore DOM. Os objetos na árvore DOM podem ser endereçados e manipulados pelo uso de métodos sobre os objetos, ou seja, podemos utilizar o JavaScript para manipular o DOM do Documento.

Um exemplo bem prático, é quando vemos esse trecho de código abaixo, que significa no português claro, faça isso quando o Documento estiver pronto. E outro logo abaixo que significa, faça somente quando o Documento for carregado por completo, ou seja, um será executado logo quando a página abrir e outro somente após a página e todos os seus elementos forem carregados no Documento.

 $(document).ready(function(){ //INSTRUÇÕES }); $(document).load(function(){ //INSTRUÇÕES }); 

Funções JQuery para filtrar elementos no DOM

Parent()

O parent() sempre retorna imediatamente o elemento pai anterior, por isso precisamos usar o parent() até chegar no objeto que queremos. A grande desvantagem de utilizar o parent() é que se for um conteúdo dinâmico e/ou cujo html sofra modificações, nós precisamos dar manutenção no código js também, sem falar que não é um código muito legível com essa quantidade de parent().

Parents()

Já o parents() é uma forma um pouco mais bonita, ou melhorada de se utilizar, pois ele retorna o elemento pai de todos os elementos, não importando a quantidade de níveis que se deve subir na árvore, por exemplo:

Vamos supor que precisamos subir três níveis na árvore para filtrarmos um elemento pai , certo, utilizando parent() ficaria assim:

 $(this).parent().parent().parent(‘seletor’);

Já com o parents() ficaria assim:

 $(this).parents(‘seletor’);

Find()

Já a função find() retorna o elemento filho do seletor na árvores do DOM.

No exemplo abaixo, um $('div').filter('.teste') vai encontrar o Bloco 1 e o Sub 3, pois ambos são divs que atendem o filtro pela classe teste.

Por sua vez, um $('div').find('.teste') vai encontrar apenas o Sub 3, pois apenas dentro do seletor div do "Bloco 2" há um descendente cuja classe é teste.

 <div class="teste"> Bloco 1 <div class="limao">Sub 1</div> <div class="trevo">Sub 2</div> </div> <div class="pardo"> Bloco 2 <div class="teste">Sub 3</div> <div class="peixe">Sub 4</div> </div> 

eq()

A função eq() seleciona um único elemento em uma lista de acordo com seu índice. Existem duas possibilidades de chamada: passando um índice positivo ou negativo. Com a passagem de um valor positivo como parâmetro, o elemento é selecionado pelo seu índice real na lista, já com parâmetro negativo, a contagem para seleção é feita de trás para frente. Por exemplo, passando o valor -1, o elemento selecionado seria o último.

Observação 2: apesar de a contagem começar em zero, o último elemento em contagem negativa é o -1, pois não faz sentido usar o zero com valor negativo.

Neste exemplo, estamos filtrando o primeiro elemento span dentro de content:

 $("#content").find(‘span’).eq(1);

first()

Como o próprio nome já diz, a função first() não requer nenhum parâmetro e seleciona o primeiro elemento de uma lista.

Neste exemplo estamos filtrando o primeiro elemento de uma lista UL:

 $(“#content li”).first();

last()

Semelhante à função anterior, mas retorna o último elemento da lista filtrada.

Neste exemplo estamos filtrando o ultimo elemento de uma lista UL:

 $(“#content li”).last();

is()

Esta função, diferente das apresentadas até agora, não seleciona um elemento, ela retorna true ou false caso uma condição seja atendida. Esta condição indica se o elemento filtrado possui ou não certa característica.

Para entendermos vamos fazer um exemplo verificando se um elemento está visível ou não em nosso Document.

 $(“#content nav”).is(“:visible”);

not()

A função not() é utilizada para excluir certo grupo de elementos de uma lista, de acordo com um filtro definido.

Para entendermos seu uso, vamos utilizar uma classe em um formulário, que ao adicionar essa classe no form, eu não quero que ele seja submetido pelo Ajax, veja o exemplo:

 $('form').not('.ajax_off').submit(function () { /INSTRUÇÕES }); 

has()

A nomenclatura dessa função é bastante sugestiva. Do termo em inglês “has” ou “tem” em português, indica que a função retorna os elementos de uma lista que TÊM/POSSUEM um determinado elemento filho.

No exemplo abaixo para você entender, estamos filtrando todos os elementos que tem ou possui span dentro do content:

 $(“#content”).has(‘span’);

text()

A nomenclatura text() irá retornar o texto contido dentro do elemento seletor, ou seja, o seu conteúdo/valor.

No exemplo, vamos pegar o texto contido dentro da tag span:

 $(“#content”).text(‘span’);

next()

A nomenclatura next(), irá retornar o próximo elemento irmão dele, sendo do mesmo nível da árvore no DOM.

Neste exemplo, iremos retornar o elemento irmão de span.

 $(“#content”).next(‘span’);

prev()

Ao contrário de next(), a nomenclatura prev() retornará um elemento irmão anterior ao do seletor no mesmo nível da árvore no DOM.

 $(“#content”).prev(‘span’);

siblings()

A nomenclatura siblings() retornará todos os elementos irmãos a partir do seletor.

Exemplo:

 jQuery('p').on('click', function(){ var $this = $(this); $this.addClass('red'); $this.siblings('p').removeClass('red'); }); 

 <p>lorem ipsum - clique aqui</p> <p>lorem ipsum - clique aqui</p> <p>lorem ipsum - clique aqui</p> <p>lorem ipsum - clique aqui</p> 

Note que eu adiciono a classe red no elemento clicado:

$this.addClass('red');

e removo a classe red de todos os irmãos dele:

$this.siblings('p').removeClass('red');

Assim apenas o clicado fica com a cor vermelha, ideal para usar em menu ativo.

A jQuery ainda implementa algumas chamadas especiais, baseadas no CSS3.

 $('#menu > li') // chama os li's filhos direto de #menu, exclui #menu li li $('label + input') // chama apenas os inputs que tiveram um label antes <label></label> <input /> $('.galeria ~ .fotos') // chama todas as .fotos que estão no mesmo nível e após .galeria $('#menu li:fist') // Chama apenas o primeiro li dentro de #menu $('table tr:even') // Chama apenas os tr's impares $('tr[colspan=2]') // Chama os tr's que contenham o atributo colspan definido como 2 $('form :text') // Chama os inputs com type definido como text, caixas de texto 

A lista completa pode ser encontrada no site oficial da https://jquery.com/  bem documentada e com exemplos para cada caso. Com a seleção na cabeça, podemos aplicar efeitos (hide, show, fadeIn, fadeOut, slideUp, slideDown por exemplo) nos elementos que selecionarmos, colocar atributos para estes elementos como css ou mesmo colocar eventos neles, ou seja, funções que rodam quando você faz alguma coisa com eles, como por exemplo clicar, passar o mouse em cima, dar dois cliques, colocar o cursor na caixa de texto e assim por diante.

Bom por hoje é isso pessoal, qualquer dúvida, crítica, sugestão comentem abaixo que teremos o prazer em ajudá-los. =)