Resumen de Selectores JQuery

Una de las partes fundamentales a la hora de programar en jQuery es seleccionar correctamente el área que queremos tratar.

A continuación vamos ver un resumen de selectores jQuery:

Selectores jQuery básicos

---

$("a") >  Selecciona todos los enlaces del documento
$("#menu") > Selecciona el elemento con la id menu
$(".menu") > Selecciona el elemento con la clase menu
$("div.menu") > Selecciona todos los elementos div que tengan la clase menu
$("*")  > Selector universal  > Selecciona todos los elementos

Selectores  jQuery con filtros

---

:first > Ejemplo: $("p:first-child") > Selecciona todos los párrafos que sean el primer descendiente de su elemento padre
:last > Ejemplo: $("p:last-child") > Selecciona todos los párrafos que sean el último descendiente de su elemento padre
:even > Ejemplo: $("p:even") > Selecciona todos los párrafos pares
:odd > Ejemplo: $("p:odd") > Selecciona todos los párrafos impares
:eq(n),  :gt(n) y :lt(n) - Están basados en índice 0, es decir eq(0) es el primer párrafo y eq(1) es el segundo párrafo.
:eq(n) > Ejemplo: $("p:eq(1)") > Selecciona el párrafo número 1
:gt(n) > Ejemplo: $("p:gt(1)") > Selecciona todos los párrafos mayores que el párrafo 1 (el 2, 3, 4, ..)
:lt(n) > Ejemplo: $("p:lt(1)") > Selecciona todos los párrafos menores que el párrafo 1 (el párrafo 0)

Selectores  jQuery de atributos

---

p[class] > Ejemplo: $("p[class]"): Selecciona todos los párrafos que tienen el atributo class

p[id=menu] > Ejemplo: $("p[id=menu]"): Selecciona todos los párrafos que tienen un atributo id con el valor "menu"

p[id!=menu] >  Ejemplo: $("p[id!=menu]"):  Selecciona todos los párrafos que tienen un atributo id con un valor no igual o distinto al valor "menu"

p[id^=menu] >  Ejemplo: $("p[id^=menu]"): Selecciona todos los párrafos que tienen un atributo id cuyo valor comienza con el texto "menu"

p[id$=menu] >  Ejemplo: $("p[id$=menu]"): Selecciona todos los párrafos que tienen un atributo id cuyo valor termina con el texto "menu" --> Ejemplo: $("a[href$=.pdf]") --> Selecciona todos los enlaces que terminan en .pdf (se puede usar, por ejemplo, para añadir una imagen a todos los enlaces pdf)

p[id*=menu] >  Ejemplo: $("p[id*=menu]"): Selecciona todos los párrafos que tienen un atributo id cuyo valor contiene el texto "menu"

p[id^=menu] [lang*=en-] > Ejemplo: $("p[id^=menu] [lang*=en-]"):  Selecciona todos los párrafos que coincidan con estos dos filtros, es decir, que tengan un atributo cuyo valor comience por el texto "menu" y además tengan un atributo lang cuyo valor contenga el texto "en-"

Selectores  jQuery  de Contenido y visibilidad

---

:contains > Ejemplo: $("p:contains('texto a buscar')") > Selecciona todos los párrafos que contengan el texto "texto a buscar"

:empty > Ejemplo: $("p:empty()") > Selecciona todos los párrafos que no contengan texto

:has(selector) > Ejemplo: $("p:has('.boton')") > Selecciona todos los párrafos que tengan algún descendiente que tenga la clase "boton"

:parent > Ejemplo: $("p:parent") > Selecciona los padres de todos los párrrafos 

:visible > Ejemplo: $("p:visible") > Selecciona todos los párrafos que son visibles

:hidden > Ejemplo: $("p:hidden") > Selecciona todos los párrafos que están ocultos

Selectores  jQuery  de Filtros de hijos

---

:nth-child (indice) > Ejemplo: $("p:nth-child(1)") > Selecciona todos los párrafos que sean el primer hijo de su padre (aquí el índice empieza en 1 en lugar de en 0, que es lo normal -por ejemplo, en arrays-)

:even > Ejemplo: $("p:even") > Selecciona todos los párrafos pares

:odd > Ejemplo: $("p:parent") > Selecciona todos los párrafos impares

:eq(índice) > Ejemplo: $("p:eq(0)") > Selecciona todos los párrafos que sean el primero (aquí el índice comienza en 0, al contrario que con nth-child())

:first-child > Ejemplo: $("p:first-child") > Selecciona todos los elementos que son el primer hijo de su padre

:last-child > Ejemplo: $("p:last-child") > Selecciona todos los elementos que son el último hijo de su padre 

:only-child > Ejemplo: $("p:parent") > Selecciona todos los elementos que sean un elemento-hijo-único, es decir, que no tenga hermanos (elementos al mismo nivel que él)

Selectores  jQuery  de Filtros de formularios

---

:input > Selecciona todos los elementos input
:text > Selecciona todos los elementos input de tipo texto
:password > Selecciona todos los elementos input de tipo password
:radio > Selecciona todos los elementos input de tipo radio
:checkbox > Selecciona todos los elementos input de tipo checkbox
:submit > Selecciona todos los elementos input de tipo submit
:reset > Selecciona todos los elementos input de tipo reset
:button > Selecciona todos los elementos button

:image > Selecciona todos los elementos input de tipo imagen

:file > Selecciona todos los elementos input de tipo file

También tenemos selectores especiales para los estados de los elementos de formulario:

:enabled > Selecciona todos los elementos input que están habilitados (para input de tipo texto)

:disabled > Selecciona todos los elementos input que están deshabilitados (para input de tipo texto)

:checked > Selecciona todos los elementos input que están checked (para input de tipo radio o de tipo checkbox) 

:selected > Selecciona todos los elementos option que están seleccionados dentro del elemento select

Ejemplos

$("form:input") > Selecciona todos los elementos input dentro de todos los elementos de formulario 'form'

$("form:text:enabled") > Selecciona todos los input de tipo texto que están habilitados (dentro de todos los elementos de formulario 'form')  

$("form:checked") > Selecciona todos los elementos que están checked  (dentro de todos los elementos de formulario 'form') 

$("form:checkbox:checked") > Selecciona todos los input de tipo checkbox que están checked  (dentro de todos los elementos de formulario 'form')

Selectores  jQuery avanzados - Traversing Document Information

---

Atributos size y lenght > Ejemplo: alert("hay "+$("p").length + "parrafos"); > cuenta la cantidad de párrafos que hay en el documento

get () > Ejemplo: var elementos = $('li').get() > coge todos los li

get(index) > Selecciona el elemento con índice que le pasemos como parámetro a 'get' > Ejemplo:  alert ($('li').get(0).text()) > Nos da un alert con el texto dentro del primer 'li' 

find(selector) > Encuentra elementos dentro de una selección > Ejemplo: $("ul").find("li.b") > encuentra los li con clase b que estén dentro de un elemento ul

each(fn) > Es como el forEach de JavaScript, lo que hace es iterar dentro de un bucle

Ejemplo > var leftmargin=0,

                        border=3;

                  $("p").each(function (){

                        $(this).css("border", border + "px solid red");

                        border +=2; leftmargin +=10;

                        });

---

Desde elmaquetadorweb  os animamos a comentar algún selector que os haya sido muy útil.