Cómo usar los selectores avanzados en jQuery

jQuery

En otro post, hablé del DOM y de los selectores básicos en jQuery. En este tutorial enseñaré como usar los selectores avanzados en jQuery para ser más preciso a la hora de seleccionar una etiqueta.

Selector descendiente

Este selector apunta a la etiqueta que está dentro de otra. Un caso común, cómo seleccionar los vínculos de un menú.

XHTML
1
2
3
4
5
<ul id="menu">
<li><a href="#">Vínculo 1</a></li>
<li><a href="#">Vínculo 2</a></li>
<li><a href="#">Vínculo 3</a></li>
</ul>

En este caso vamos hacer que sólo desaparezcan los vínculos.

JavaScript
1
2
3
$(document).ready(function(){
$("#menu a").fadeOut();
});

Con este código desaparecen todos los vínculos que estén dentro del <ul id=»menu»>. Este selector es igual que el selector descendiente en CSS, separado por un espacio.

Selector hijo

La diferencia respecto al selector descendiente es que apunta a los hijos directos de un elemento. Para el caso anterior para seleccionar los <li> sería lo siguiente

JavaScript
1
2
3
$(document).ready(function(){
$("#menu > li").fadeOut();
});

Eso seleccionaría los elementos <li> que sean directos con menú. Si dentro hubiese un <li> con un menú dentro

XHTML
1
2
3
4
5
6
7
<li>Elemento 1
  <ul>
    <li>Elemento anidado 1</li>
    <li>Elemento anidado 2</li>
    <li>Elemento anidado 3</li>
   </ul>
</li>

Los <li> que estuviesen dentro no se seleccionarían ya que no serían hijos directos del <ul> menu.

Selector adyacente

Selecciona el elemento que aparece directamente después de otro elemento. Un ejemplo sería un vínculo que abre un <div> que está oculto.

XHTML
1
2
<a href="#">Abrir</a>
<div style="display:none;">Contenido oculto</div>

Para seleccionar el <div> y hacerlo visible necesitas seleccionarlo de esta forma: $(‘a + div’).

JavaScript
1
2
3
4
5
$(document).ready(function(){
    $("a").click(function(){
       $("a + div").fadeIn();
    });
});

Selector de atributos

Permite seleccionar elementos que tengan un atributo en particular o si tienen un atributo con un valor específico. Hay diferentes formas de seleccionar un elemento por sus atributos.

  • [atributo] – Para seleccionar los elementos que tengan un atributo en particular. Por ejemplo, si quisierámos seleccionar los vínculos que tengan el atributo rel.

JavaScript
1
$("a[rel]")

  • [atributo=»valor»]  – Se selecciona los elementos con un atributo que tiene un valor en concreto.

JavaScript
1
$('input[type="text"]')

  • [atributo^=»valor»]  – El elemento seleccionado tiene un atributo que comienza con un valor especifico. Sólo tiene que coincidir el principio del valor.

JavaScript
1
$('a[href^="http://"]')

  • [atributo$=»valor»] – El elemento seleccionado tiene un atributo que termina con un valor especifico. Sólo tiene que coincidir el final del valor.

JavaScript
1
$('img[src$=".jpg"]')

  • [atributo*=»valor»] – Se selecciona el elemento que tiene un atributo que contiene un valor en cualquier zona del atributo. Tiene que tener un valor que contenga el texto a buscar.

JavaScript
1
$('a[href*="guidacode.com"]')

Esto seleccionaría todos los vínculos cuyo href que contenga «guidacode.com»,es decir, valdría www.guidacode.com, https://guidacode.com, guidacode.com/categoría, etc…

Y hasta aquí los selectores avanzados en jQuery, espero que os haya gustado. A seguir picando 🙂