Selecionando elementos com jQuery

Olá,

O jQuery usa a sintaxe XPath para selecionar elementos do DOM.

Portanto, como você usa CSS ou já usou XPath para selecionar nós em XML, você já sabe como selecionar elementos com jQuery!

Vamos usá-los com jQuery 🚀

O elemento que possui a classe desejada é selecionado usando o operador ponto (.).

No exemplo abaixo, serão selecionados todos os elementos que possuem a classe title, e sua cor será alterada. 

<p class="title">Hello</p>
<p class="title">CoddyKit</p>
<p class="title">Learning</p>
<p class="title">jQuery</p>

<script>
$('.title').css('color','pink')
</script>

Apresentaremos o método css() nas lições seguintes. 

Por enquanto, saiba apenas que o método css() é usado para definir o estilo do elemento

O elemento que possui o id desejado pode ser selecionado usando o operador # (cerquilha). Como sabemos, tsomente um elemento da página HTML pode receber o mesmo valor de id.

No exemplo abaixo, será selecionado o elemento que possui o id title, e sua cor será alterada.

<p id="title">Hello</p>
<p id="title1">CoddyKit</p>
<p id="title2">Learning</p>
<p id="title3">jQuery</p>

<script>
$('#title').css('color','pink')
</script>

O elemento que possui a tag desejada pode ser selecionado usando apenas o nome da tag

No exemplo abaixo, será selecionado o elemento que possui a tag span, e sua cor será alterada.

<p>Hello</p>
<span>Hello</span>
<span>CoddyKit</span>

<script>
$('span').css('color','pink')
</script>

Se quisermos selecionar os filhos de um elemento, usamos o operador maior que (>).

No exemplo abaixo, serão selecionados todos os filhos do elemento desejado.

<p>
  <span>Hello</span>
  <span>CoddyKit</span>
</p>

<script>
$('p>span').css('color','pink')
</script>

Podemos selecionar o elemento desejado verificando se o atributo de um elemento possui um valor.

No exemplo abaixo, serão selecionados os elementos que possuem a tag <a> e o atributo target com o valor _blank.

<a target="_blank" 
     href="http://coddykit.com">
   CoddyKit
 </a>

<script>
$ ('a[target = "_blank"]').css('color','pink')
</script>

O jQuery facilita a seleção no DOM ao fornecer alguns métodos, além de seletores XPath.

Vamos conhecê-los.

Método parent()

Podemos selecionar o elemento pai do elemento desejado usando o método parent() fornecido pelo jQuery.

No exemplo abaixo, será selecionado o elemento pai do elemento, e a cor do texto do elemento pai será alterada.

<div>
Parent Element Text
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
</div>

<script>
$ ('a').parent().css('color','pink')
</script>

Método children()

Podemos selecionar todos os filhos do elemento desejado usando o método children() fornecido pelo jQuery.

No exemplo abaixo, serão selecionados todos os filhos do elemento, e a cor do texto dos filhos será alterada.

<div>
<a target="_blank"  href="http://coddykit.com">
   CoddyKit
 </a>
<span>Children Element Text</span>
</div>

<script>
$ ('div').children().css('color','pink')
</script>

Método parents()

Podemos selecionar os elementos ancestrais do elemento desejado usando o método parents() fornecido pelo jQuery.

No exemplo abaixo, será selecionado o ancestral do elemento, e a cor do texto do elemento pai será alterada.

A diferença entre esse método e os outros que aprendemos é que ele pode receber um parâmetro.

Assim, enviamos um seletor XPath como parâmetro para definir qual ancestral deve ser escolhido.

<div class="wrapper">
Hello
<p>
<span>CoddyKit</span>
<p>
</div>

<script>
$ ('span').parents('.wrapper').css('color','pink')
</script>

Método next()

O método next() seleciona o próximo irmão do elemento desejado.

No exemplo abaixo, será selecionado o primeiro irmão seguinte do elemento com a tag a.

<a href="http://coddykit.com">CoddyKit</a>
<span>I am first sibling of a element</span>

<script>
$ ('a').next().css('color','pink')
</script>

Método nextAll()

O método nextAll() é usado para selecionar os irmãos seguintes do elemento desejado.

No exemplo abaixo, serão selecionados todos os irmãos posteriores do elemento com a tag div.

<span>I'm previous sibling<span>
<div></div>
<span>I'm next sibling<span>
<span>I'm next sibling too<span>


<script>
$ ('div').nextAll().css('color','pink')
</script>

Método siblings()

Você pode selecionar todos os irmãos do elemento desejado usando o método siblings().

No exemplo abaixo, serão selecionados todos os irmãos dos elementos com a tag p.

<p>Hello</p>
<div>jQuery</div>
<div>Methods</div>

<script>
$ ('p'). siblings().css('color','pink')
</script>

Método prev()

O método prev() é usado para selecionar o irmão anterior de um elemento.

Seleciona o primeiro irmão anterior do elemento com a tag a.

<span>Hello Coddy</span>
<div class="test"></div>

<script>
$ ('.test').prev().css('color','pink')
</script>

Método prevAll()

O método prevAll() é usado para selecionar os irmãos anteriores do elemento desejado.

No exemplo abaixo, serão selecionados todos os irmãos anteriores do elemento com a tag div.

<span>I'm previous sibling</span>
<span>I'm previous sibling too</span>
<div></div>
<span>I'm next sibling</span>

<script>
$('div').prevAll().css('color','pink')
</script>

Parabéns 🎉

Nesta seção, aprendemos a selecionar elementos do DOM.

Na próxima seção, continuaremos aprendendo sobre manipulações do DOM.