Navegando No DOM - Jquery

Navegando no DOM jQuery
11 de junho de 2013 por William Bruno Ns j entendemos o que o this ? javascript, e agora vou explicar melhor como navegar no DOM. Bom, nada melhor do que comear com a documentao oficial sobre os mtodos jQuery. Vou me focar em apenas alguns mais importantes e mais usados, pois entendendo o conceito fica fcil usar qualquer um deles.
A rvore DOM
Para entendermos como navegar no DOM, temos que nos lembrar da rvore:
Fazendo uma leitura rpida, da direita para a esquerda: o elemento em (em roxo) filho do pargrafo p, que irmo do h1 e do outro p, que so filhos diretos do body, que por sua vez filho do html. Simples assim. Da esquerda para a direita, vemos que o head e o body,so irmos entre si e filhos do html. Tranquilo, n?!
$(seletor).find()
Esse mtodo procura elementos filhos a partir do elemento $(seletor). Imagine o seguinte html: 1clique 2clique 3clique 4clique
aqui aqui aqui aqui para para para para ler: ler: ler: ler: em em em em 1 2 3 4
Quero clicar na palavra clique aqui, e mostrar em um alert o valor da tag em. Como o em filho da tag p, posso usar o mtodo .find(), a partir do this (o prprio pargrafo, pois o evento foi disparado nele). 1 2 3 <!doctype html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> <title>Document</title> 7 8 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 9 10<script type="text/javascript"> 11jQuery(document).ready(function(){ 12jQuery('p').on('click', function(){ var $this = $(this);//o proprio pargrafo 13 14alert( $this.find('em').text() ); 15}); 16}); 17</script> 18<style type="text/css"> span { text-decoration: underline; color: #05f; cursor: pointer; } 19em { border: 1px solid #000; padding: 0 5px; } 20</style> 21</head> 22<body> aqui para ler: em 1 23clique clique aqui para ler: em 2 24clique aqui para ler: em 3 25clique aqui para ler: em 4 26</body> 27</html> 28 29 Ir aparecer na tela um alert com o texto de cada em. Note o cdigo: 1$this.find('em').text() Da direita para a esquerda novamente:

.text() retorna o texto dentro uma tag html. (em) a tag em si. .find a funo que estamos falando nesse tpico. Ela procura filhos. $this o elemento pargrafo, pois o click foi disparado nele: jQuery(p).on(click, function(){
$(seletor).next()
Esse mtodo pega o prximo elemento na rvore do DOM. Ou seja, o irmo da direita, levando em considerao a ordem em que escrevemos o nosso html. 1clique aqui para ler: em 1 Nesse html acima, o span irmo do em. Ento, a partir do span, o em o next dele. 1jQuery('span').on('click', function(){ 2var $this = $(this); 3 4alert( $this.next('em').text() ); 5}); Aqui como o click foi disparado no span, o this o prprio span, e o next a partir do span o em.
$(seletor).parent()
Bem simples at aqui. Nos cdigos acima, eu busquei o elemento diretamente a partir da tag alvo do evento click. Mas, em situaes um pouco mais complicadas, no d para usar o find() e nem o next() to diretamente assim. A soluo voltar para o pai, e a partir dele achar o que est precisando. 1jQuery('span').on('click', function(){ 2var $this = $(this); 3 4alert( $this.parent('p').find('em').text() ); 5}); 1 Continuo disparando o click no span, ento o this o span. Mas primeiro eu volto para o pargrafo pai do span, e a partir do pargrafo eu procuro o em que filho dele. Note que as trs verses do cdigo produzem a mesma sada. Ao clicar em clique aqui, aparece no alert o texto do elemento em.
$(seletor).parents()
O mtodo .parents() volta mais de um pai, ou seja, sobe vrios nveis na rvore DOM. O html do meu exemplo era bem simples, sendo o span filho direto do pargrafo, ento s o .parent() j resolvia. Mas se eu tivesse que subir vrios nveis, procurando tags avs e bisavs, ento o mtodo .parents() que resolve a questo. Vale lembrar que o .find() acha filhos, netos e bisnetos sem problema. Ento, para entrar vrios nveis filhos, o .find() serve tambm.
$(seletor).siblings()
O mtodo .siblings() retorna os elementos irmos do elemento $(seletor). 1 2 3 <!doctype html> 4 <html lang="en"> 5 <head> 6 <meta charset="UTF-8"> <title>Document</title> 7 8 <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 9 10<script type="text/javascript"> 11jQuery(document).ready(function(){ 12jQuery('p').on('click', function(){ var $this = $(this); 13 14$this.addClass('red'); 15$this.siblings('p').removeClass('red'); 16}); 17}); 18</script> <style type="text/css"> 19.red { color: #f00; } 20</style> 21</head> 22<body> ipsum - clique aqui 23lorem lorem ipsum - clique aqui 24lorem ipsum - clique aqui 25lorem ipsum - clique aqui 26</body> 27</html> 28 29 Note que eu adiciono a classe red no elemento clicado: 1$this.addClass('red'); e removo a classe red de todos os irmos dele: 1$this.siblings('p').removeClass('red'); Assim apenas o clicado fica com a cor vermelha.
Concluso
Voc pode combinar .parent() com .siblings(), para pegar os irmos do pai do elemento em que voc estava, pode usar .parents() para voltar mais de um nvel, usar .find() para entrar quantos nveis de filhos precisar, e ento interagir melhor com o seu DOM.

Navegando No DOM - Jquery

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Navegando No DOM - Jquery

Enviado por

Direitos autorais:

Formatos disponíveis

Navegando no DOM jQuery

Você também pode gostar