Selección de elementos con jQuery

Hola:

jQuery utiliza la sintaxis XPath para seleccionar elementos del DOM.

Por lo tanto, si utiliza CSS o ha utilizado XPath para seleccionar nodos en XML, ¡ya sabe cómo seleccionar elementos con jQuery!

Usémoslos con jQuery 🚀

El elemento de la clase deseada se selecciona mediante el operador punto(.).

En el ejemplo siguiente, se seleccionarán todos los elementos que tengan la clase title y se cambiará su color. 

<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>

En las siguientes lecciones presentaremos el método css() 

Por ahora, solo debe saber que el método css() se utiliza para definir el estilo del elemento

El elemento con el id deseado se puede seleccionar mediante el operador #(signo de almohadilla). Como sabemos, tel mismo valor de id solo se puede asignar a un elemento de la página HTML.

En el ejemplo siguiente, se seleccionará el elemento que tenga el id title y se cambiará su color.

<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>

El elemento de la etiqueta deseada se puede seleccionar utilizando únicamente el nombre de la etiqueta

En el ejemplo siguiente, se seleccionará el elemento que tenga la etiqueta span y se cambiará su color.

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

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

Si queremos seleccionar los hijos de un elemento, utilizamos el operador mayor que(>).

En el ejemplo siguiente, se seleccionarán todos los hijos del elemento deseado.

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

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

Podemos seleccionar el elemento deseado comprobando si el atributo de un elemento tiene un valor.

En el ejemplo siguiente, se seleccionan los elementos que tienen la etiqueta <a> y el atributo target con el valor _blank.

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

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

jQuery facilita la selección en el DOM al proporcionar algunos métodos, además de selectores XPath.

Aprendamos sobre ellos.

Método parent()

Podemos seleccionar el elemento padre del elemento deseado mediante el método parent() proporcionado por jQuery.

En el ejemplo siguiente, se selecciona el elemento padre y se cambia el color del texto del elemento padre.

<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 seleccionar todos los hijos del elemento deseado mediante el método children() proporcionado por jQuery.

En el ejemplo siguiente, se seleccionan todos los hijos del elemento y se cambia el color del texto de los hijos.

<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 seleccionar los elementos ascendientes del elemento deseado mediante el método parents() proporcionado por jQuery.

En el ejemplo siguiente, se selecciona el elemento ascendiente y se cambia el color del texto del elemento padre.

La diferencia entre este método y los otros que hemos aprendido es que puede recibir un parámetro.

Por ello, enviamos un selector XPath como parámetro para definir qué ancestro se debe seleccionar.

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

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

Método next()

El método next() selecciona el siguiente elemento hermano del elemento deseado.

En el ejemplo siguiente, se selecciona el primer hermano siguiente del elemento con la etiqueta 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()

El método nextAll() se utiliza para seleccionar los elementos hermanos siguientes del elemento deseado.

En el ejemplo siguiente, se seleccionan todos los hermanos posteriores del elemento con la etiqueta 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()

Puede seleccionar todos los elementos hermanos del elemento deseado mediante el método siblings().

En el ejemplo siguiente, se seleccionan todos los hermanos de los elementos con la etiqueta p.

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

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

Método prev()

El método prev() se utiliza para seleccionar el elemento hermano anterior de un elemento.

Selecciona el primer hermano anterior del elemento con la etiqueta a.

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

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

Método prevAll()

El método prevAll() se utiliza para seleccionar los elementos hermanos anteriores del elemento deseado.

En el ejemplo siguiente, se seleccionan todos los hermanos anteriores del elemento con la etiqueta 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>

Enhorabuena 🎉

En esta sección aprendimos a seleccionar elementos del DOM.

En la siguiente sección continuaremos aprendiendo sobre la manipulación del DOM.