Extenso post para hablar de los selectores de jQuery que nos ayudan a interactuar con los diferentes elementos que podamos tener en una página web. Además breve repaso para utilizar múltiples selectores.
Unos post que os pueden interesar son:
- jQuery ready(): Repaso a la función $( document ).ready()
- jQuery noConflict(): Como evitar el conflicto y duplicidad del alias $
- jQuery chaining: Aplicar secuencias de efectos
¿Qué es un selector en jQuery?
Los selectores de jQuery nos ayudan a seleccionar los diferentes elementos del DOM, bien sea por su nombre, tipo, valores o propiedades de los atributos. Por ejemplo son muy útiles para combinar con la función each() para recorrer elementos de un mismo tipo.
Comencemos a ver los diferentes selectores extraídos de su web oficial.
Selectores de jQuery CSS básicos
Vamos a comenzar con los más básicos y utilizados, estos son los que intereactuan con ids, clases y etiquetas tal y como se hace en las hojas de estilo CSS.
Con el «.» seleccionamos una clase, con el «#» seleccionamos un id y con el tag de la etiqueta una etiqueta:
|
1 2 3 4 5 6 |
/* Seleccionar etiquetas del DOM */ $("elemento") /* Seleccionar id del DOM */ $("#idelemento") /* Seleccionar clase del DOM */ $(".claseelemento") |
Tal y cómo veis en el código superior podemos seleccionar elementos/etiquetas y elementos con determinados ids o clases.
Unos ejemplos prácticos y sencillos serían los siguientes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
/* seleccionar las etiquetas "p" */ $("p") /* seleccionar los elementos con id="inicio" */ $("#inicio") /* seleccionar los elementos con clase="principal" */ $(".principal") /* seleccionar los elementos con id="inicio" con clase="principal" y que son etiqueta "p" */ $("p#inicio.principal") /* seleccionar las etiquetas "a" con clase="principal" dentro de una etiqueta "p" */ $("p a.principal") /* seleccionar los elementos con id="inicio" o clase ="principal" */ $("#inicio,.principal") /* seleccionar todos los elementos */ $("*") /* seleccionar todas las etiquetas "p", "a" y "div" */ $("p,a,div") |
Selectores de contenedores e hijos
Avanzamos en la materia y vamos a ver unos ejemplos algo más complicados, vamos a ver cómo trabajar con selectores hijo y contenedores:
|
1 |
$("p > a") |
En este ejemplo controlamos los enlaces (etiqueta «a») que están dentro de un párrafo (etiqueta «p»). Es decir, que los enlaces (elemento ‘a’) sean hijos directos de ‘p’. Si hubiese otro elemento/etiqueta como un «div» o «span» que contiene al elemento ‘a’ no se controlaría.
|
1 |
$("ul.miclase li > p > a") |
En este otro ejemplo estaríamos controlando los enlaces que están dentro de un párrafo que a su vez están en un elemento ‘li’ de una lista con clase = «miclase».
|
1 |
$("div + a") |
En el código superior controlamos los enlaces (elemento ‘a’) que son precedidos inmediatamente por el elemento ‘div’, es decir que ‘a’ debe ir justo después de ‘div’ sin que ningún otro elemento se interponga entre ellos.
|
1 |
$("div ~ a") |
Con el código anterior seleccionamos los enlaces (elemento ‘a’) prececidos por cualquier hermano suyo en un ‘div’.
|
1 |
$("*") |
Ahora estaríamos seleccionando cualquier elemento del DOM. Tenéis más info y ejemplos de los selectores hijo en el siguiente post:
Selectores de jQuery de atributos
Veamos cómo podemos seleccionar elementos mediante las propiedades de sus atributos. Comencemos controlando el tipo de atributo:
|
1 2 3 4 5 6 7 8 |
/* seleccionar los elementos con el atributo href */ $("[href]") /* seleccionar los elementos con el atributo src */ $("[src]") /* seleccionar los elementos con el atributo class */ $("[class]") /* seleccionar los elementos con el atributo id */ $("[id]") |
A continuación os dejo unos ejemplos para comprobar los atributos y sus valores:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
/* seleccionar elementos con atributo href=index.html */ $("[href='index.html']") /* seleccionar elementos con atributo href distinto a index.html */ $("[href!='index.html']") /* seleccionar elementos con atributo src que finalicen con .png */ $("[src$='.png']") /* seleccionar elementos con atributo src que comiencen con 'imagen.jpg' o con atributo src ='imagen.jpg' */ $("[src|='imagen.jpg']") /* seleccionar elementos con atributo title que comiencen con 'alergia' */ $("[title^='alergia']") /* seleccionar elementos con atributo title que contengan la palabra específica 'alergia' */ $("[title~='alergia']") /* seleccionar elementos con atributo title que contengan la palabra 'alergia' */ $("[title*='alergia']") |
Selectores de jquery de posición
Ya hemos visto anteriormente cómo controlar los elementos hijo, ahora os pongo 4 sencillos ejemplos para controlar la posición de elementos dentro del DOM:
|
1 2 3 4 5 6 7 8 |
/* seleccionar el primer enlace en la web, elemento 'a' */ $("a:first") /* seleccionar el último enlace en la web, elemento 'a' */ $("a:last") /* seleccionar la fila par de una tabla, elemento tr */ $("tr:even") /* seleccionar la fila impar de una tabla, elemento tr */ $("tr:odd") |
Ahora vamos a ver unos ejemplos más interesantes para realizar más controles sobre posición, tipo…:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
/* seleccionar (elementos 'a') que sean el primer elemento hijo de su elemento padre */ $("a:first-child") /* seleccionar (elementos 'a') que sean el último elemento hijo de su elemento padre */ $("a:last-child") /* seleccionar (elementos 'a') que sean el primer elemento hijo de tipo 'a' de su elemento padre */ $("a:first-of-type") /* seleccionar (elementos 'a') que sean el último elemento hijo de tipo 'a' de su elemento padre */ $("a:first-of-type") /* seleccionar (elementos 'a') que sean el quinto elemento hijo de su elemento padre */ $("a:nth-child(5)") /* seleccionar (elementos 'a') que sean el segundo elemento hijo de su elemento padre comenzando por el final */ $("a:nth-last-child(2)") /* seleccionar (elementos 'a') que sean el segundo elemento hijo de tipo 'a' de su elemento padre */ $("a:nth-of-type(2)") /* seleccionar (elementos 'a') que sean el cuarto elemento hijo de tipo 'a' de su elemento padre comenzando por el final */ $("a:nth-last-of-type(4)") /* seleccionar (elementos 'a') que sean el único elemento hijo de su elemento padre */ $("a:only-child") /* seleccionar (elementos 'a') que sean el único elemento hijo de tipo 'a' de su elemento padre */ $("a:only-of-type") |
Otros controles sobre posición dentro de un elemento padre:
|
1 2 3 4 5 6 7 8 |
/* seleccionar el quinto elemento de una lista, el indice comienza en 0 */ $("ul li:eq(4)") /* seleccionar todos los elementos de una lista a partir de elemento 3, el indice comienza en 0 */ $("ul li:gt(2)") /* seleccionar todos los elementos de una lista anteriores del elemento 4, el indice comienza en 0 */ $("ul li:lt(3)") |
Múltiples selectores
Si necesitamos seleccionar varios elementos debemos separarlos por comas:
|
1 2 |
/* seleccionar varios elementos, parrafos, divs, span... */ $("div, p, span") |
Si necesitamos utilizar múltiples atributos este sería el ejemplo:
|
1 2 |
/* seleccionar el primer elemento que sea un enlace con clase igual a 'texto' y con id igual a 'enlace' ... */ $("a[class='texto'][id='enlace']:first") |
Selectores para inputs
Vamos a ver varios ejemplos para controlar mediante los selectores de jQuery los diferentes inputs que podemos tener en una web:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* seleccionar todos los inputs */ $(":input") /* seleccionar todos los input de tipo text */ $(":text") /* seleccionar todos los input de tipo password */ $(":password") /* seleccionar todos los input de tipo radio */ $(":radio") /* seleccionar todos los input de tipo checkbox */ $(":checkbox") /* seleccionar todos los input de tipo submit */ $(":submit") /* seleccionar todos los input de tipo reset */ $(":reset") /* seleccionar todos los input de tipo button */ $(":button") /* seleccionar todos los elementos de tipo image */ $(":image") /* seleccionar todos los elementos de tipo file */ $(":file") /* seleccionar todos los input habilitados */ $(":enabled") /* seleccionar todos los input deshabilitados */ $(":disabled") /* seleccionar todos los input seleccionados (elementos option) */ $(":selected") /* seleccionar todos los input checkeados (radio button) */ $(":checked") |
Más selectores
Solo nos quedan por repasar los siguientes selectores:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
/* seleccionar todos los input que no sean de tipo button */ $("input:not(:button)") /* seleccionar todas las etiquetas de encabezados <h1>, <h2>, <h3>... */ $(":header") /* seleccionar todos los elmentos animados */ $(":animated") /* seleccionar el elemento en el que está actualmente el foco */ $(":focus") /* seleccionar el elemento en el que está actualmente el foco */ $(":focus") /* seleccionar el elemento que contiene el texto 'Hola' */ $(":contains('Hola')") /* seleccionar todos los párrafos (elemento 'p') que contienen enlaces (elemento 'a') */ $("p:has(a)") /* seleccionar todos los elementos vacíos */ $(":empty") /* seleccionar todos los elementos visibles */ $(":visible") /* seleccionar todos los elementos párrafos (elemento 'p') visibles */ $("p:visible") /* seleccionar todos los elementos no visibles */ $(":hidden") /* seleccionar todos los elementos párrafos (elemento 'p') no visibles */ $("p:hidden") /* seleccionar el elemento padre o raíz */ $(":root") /* seleccionar los elementos con hijos no vacíos */ $(":parent") |
Otros selectores de jQuery
Os pueden resulta útiles estos otros selectores: