Cómo usar los selectores avanzados en 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ú.

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

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

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

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.

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

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.

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

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

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

  • [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.

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

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