Selectores basados en atributos, hijos y contenedores padres. Como seleccionar un conjunto de elementos del DOM

Siguiendo con la línea de post sobre JQuery, hoy vamos a continuar con los selectores. Vamos a ver cómo realizar selecciones en base a atributos, hijos y contenedores, pero antes, recordemos que hace la función $ (el alias del objeto JQuery).

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Como he dicho vamos a seguir hablando sobre cómo seleccionar un conjunto de elementos del DOM. JQuery, para seleccionar elementos lo realiza por medio de las siguientes acciones:

• Selección básica con selectores CSS.
• Selecciones por medio de atributos, hijos y contenedores.
• Selecciones por medio de la posición.
• Selecciones gracias a los selectores que nos proporciona JQuery.

Selecciones por medio de atributos, hijos y contenedores.

Estos selectores, son más avanzados que los basados en los selectores CSS. Aun así, están basados en la siguiente generación de selectores CSS (que ya esta soportada por Firefox, IE7, Safari etc…). Estos selectores incluyen selección en función de atributos (en base a una condición), e hijos (directos) de un objeto padre.

Vamos a suponer que queremos seleccionar un span que está contenido en un div, si nosotros hacemos una selección del tipo $(«div span»), JQuery nos va devolver todos aquellos span que estén contenidos en un div, aunque los span que devuelve pueden ser hijos directos de otros elementos.

Veamos el HTML:

<div>
<h2><span>Control</span></h2>
<p><span>Drama</span>. Musical. Biográfico / SINOPSIS: Película sobre el final de Ian Curtis, el enigmático cantante líder de la banda Joy Division, icono del post-punk inglés. Un recorrido por los últimos años de Curtis hasta llegar a su trágico suicidio en 1980; el conflicto entre el gran amor que siente por su esposa y una apasionada relación con su amante, sus ataques de epilepsia que cada vez le dejan más deteriorado, su increíble talento y sus arrolladoras actuaciones en directo. Mención Especial en la Cámara de Oro, Premio de la Juventud y Premio Label Europa Cinema en el Festival de Cannes. (FILMAFFINITY)</p>
</div>

Si aplicamos este selector a este bloque de código HTML, nos devolverá dos span, siendo el primer hijo del h2 y el segundo hijo del p. Pero, como podemos conseguir que nos devuelva un span que es hijo directo de un elemento padre.

Muy sencillo, únicamente tenemos que indicarlo con el carácter «>» dentro del selector. La sintaxis sería la siguiente:

$("div > span")

La lista completa de selectores usados para seleccionar elementos en función de padre-hijo es:

• E > F: Seleccionar todos los elementos F que sean hijos directos de E.
• E + F: Selecciona el elemento F que esté precedido directamente (al mismo nivel) por elementos E.
• E ~ F: Selecciona todos los elementos F que estén precedidos al mismo nivel por un elemento E.
• E:has(F): Selecciona todos los elementos E que tengan como hijos a elementos F.

Los selectores basados en atributos, son súper potentes, ya que de una forma muy simple vamos a poder aplicar al selector una sentencia condicional. Supongamos que queremos seleccionar una imagen en cuyo alt, aparezca el texto «Ian». La sintaxis sería la siguiente:

$("*[alt*=Ian])

Como veis, en el selector hemos aplicado una sentencia condicional ([alt*=Ian]) donde estamos indicando que nos devuelva cualquier elemento cuyo alt contenga un Ian. La sintaxis va a ser siempre la misma [atributo[comparador]valor]. Las posibilidades que nos aportan estos selectores son:

• E[A]: Selecciona todos los elementos E que tengan el atributo A.
• E[A=V]: Selecciona todos los elementos E que tengan el atributo A y que este sea igual a V (value).
• E[A^=V]: Selecciona todos los elementos E que tengan el atributo A y cuyo valor empieza por V.
• E[A$=V]: Selecciona todos los elementos E que tengan el atributo A y cuyo valor termina por V.
• E[A*=V]: Selecciona todos los elementos E que tengan el atributo A y cuyo valor contenga la cadena V.

Además, también podemos usar el selector :not para negar a otro selector. Imaginad que queréis seleccionar todos los links internos, la sintaxis necesaria sería:

a:not[href^=http]

Enlaces relacionados:

• Estable el ciclo de vida del código.
• Seleccionar un conjunto de elementos del DOM.
  • Selección básica con selectores CSS.
  • Selecciones por medio de atributos, hijos y contenedores.
  • Selecciones por medio de la posición.
  • Selecciones gracias a los selectores que nos proporciona JQuery.
• Sirve como namespace para usar funciones globales.
• Crea elementos del DOM en base a código HTML.

Descargas / Downloads

• Bajaros el pequeño simulador que he hecho para probar los selectores y usadlo y así seguro que todo os queda más claro.