Aparte de poder acceder a los diferentes elementos del DOM mediante las formas corrientes (ver selectores básicos y selectores jerárquicos), muy similares a CSS, JQUERY enumera todos los elementos y por tanto podemos acceder a ellos de una forma sencilla mediante una serie de filtros como el primero, el último, elementos pares, etc.
Filtros que facilitan el acceso al DOM
- Selecciona el primer elemento. $(‘p:first’).
- Selecciona el último elemento. $(‘p:last’).
- Selecciona los elementos pares. $(‘p:even’).
- Selecciona los elementos impares. $(‘p:odd’).
- Selecciona un elemento concreto. $(‘p:eq(3)’).
- Selecciona los elementos siguientes a partir de uno concreto. $(‘p:gt(3)’).
- Selecciona los elementos anteriores a partir de uno concreto. $(‘p:lt(3)’).
- Selecciona todos los encabezados (Headers – h1,h2,h3,h4,h5,h6). $(‘:header’).
- Selecciona todos los elementos excepto los indicados. $(‘p:not(.ej3)’).
- Selecciona los elementos indicados en la posición establecida. $(‘p:nth-of-type(2)’) → este ejemplo funciona igual que: eqPero en este caso podemos aplicarle una formula para que la posición se inicie cada vez. Por ejemplo, queremos seleccionar todos los elementos cada 4 elementos: $(‘p:nth-of-type(4n+0)’). En este caso el 0 indica desde que elemento comenzamos, en este ejemplo seleccionaría primero el 3er elemento, si en vez de 0 ponemos un 2, el primer elemento en seleccionarse será el segundo, y el siguiente el 6º.
- Selecciona los elementos indicados en la posición establecida pero de abajo hacia arriba. $(‘p:nth-last-of-type(2)’).El funcionamiento es igual que el anterior solo que comienza a contar los elementos por abajo.
Filtros hijos
- Selecciona el primer hijo. $(‘p a:first-child’). A diferencia de :first devuelve todos los hijos de todos los padres.
- Selecciona el último hijo. $(‘p a:last-child’).
- Selecciona el hijo en la posición indicada. $(‘p a:nth-child(2)’).
- Selecciona hijos pares. $(‘p a:nth-child(even)’).
- Selecciona hijos impares. $(‘p a:nth-child(odd)’).
- Selecciona hijos únicos. $(‘p a:only-child’). Selecciona solo los párrafos con 1 enlace.
Filtros de contenido
- Seleccionar un elemento en función de un texto. $(‘p:contains(“texto”)’). Selecciona todos los párrafos que contienen el texto TEXTO.
- Selecciona un elemento sin elementos (hijos) ni texto. $(‘p:empty’).
- Selecciona los elementos padre. $(‘p:parent’).
- Selecciona los elementos que contienen otros elementos especificados. $(‘p:has(a)’). Selecciona los párrafos que tienen enlaces (1 o más).
Filtros por atributos
- Selecciona todos los elemento que estén ocultos (display:none;). $(‘p:hidden’).
- Selecciona todos los elementos que estén visibles. $(‘p:visible’).
- Selecciona los elementos que tienen un atributo concreto (class, id, type, etc.). $(‘p[class]’). Selecciona todos los párrafos que tienen class, sea cual sea el class.
- Selecciona todos los elementos que tienen un atributo concreto establecido. $(‘input[type=”file”]’), selecciona los input tipo file.
- Selecciona los elementos que tienen un atributo distinto del especificado, $(‘input[type!=”file”]), selecciona los inputs que no sean file.
- Selecciona los elementos con atributos que empiezan por el valor especificado. $(‘a[title^=”Novedades: ”’), selecciona todos los enlaces en los que la etiqueta title comience por Novedades: .
- Selecciona los elementos con atributos que terminan con el valor especificado. $(‘img[alt$=” :panorámica.”’)
- Selecciona los elementos con atributos que contienen el valor especificado. $(‘img[alt*=”Bilbao”’)
Filtros múltiples
Independientemente del potencial de los filtros comentados, es posible combinarlos, como por ejemplo:
$(‘a[title*=”Ejemplo1”] a[href*=”ejemplo-1”] a[class=”Ejemplo1”]’); => Solo se seleccionarían aquellos enlaces que cumplan las 3 condiciones, que el title y el href contengan el texto indicado y que tengan un class=’Ejemplo1′.
Caracteres especiales
Los caracteres que se usan para indicar instrucciones a JQUERY hay que intentar no usarlos en los textos o títulos de los atributos de los elementos. Por ejemplo el carácter *, si lo usamos en un texto JQUERY no sabe interpretarlo, por eso hay que “escaparlo” poniéndolo entre \\, ejemplo:
$('a[title*=”Ejemplo\\*1”] ');
La lista de caracteres especiales de JQUERY son:
# ; & , . + - * ~ ' : “ ! ^ $ [ ] ( ) = > | /
Deja una respuesta