¿Necesitas Maquetar o Diseñar una web? ... Consulta nuestra sección Maquetación Freelance o solicita presupuesto a elmaquetadorweb@gmail.com

27.3.15

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
:textSelecciona todos los elementos input de tipo texto
:passwordSelecciona todos los elementos input de tipo password
:radioSelecciona todos los elementos input de tipo radio
:checkboxSelecciona todos los elementos input de tipo checkbox
:submitSelecciona todos los elementos input de tipo submit
:resetSelecciona todos los elementos input de tipo reset
:buttonSelecciona todos los elementos button
:imageSelecciona todos los elementos input de tipo imagen
:fileSelecciona todos los elementos input de tipo file

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

:enabledSelecciona todos los elementos input que están habilitados (para input de tipo texto)
:disabledSelecciona todos los elementos input que están deshabilitados (para input de tipo texto)
:checkedSelecciona todos los elementos input que están checked (para input de tipo radio o de tipo checkbox) 
:selectedSelecciona 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 sizelenght > 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.

2 comentarios:

  1. Uno de los mejores post sobre jquery que he leído, es como empezar con jquery desde el principio y eso mola.
    Normalmente cuando escribimos post, empezamos por el nivel intermedio y nos dejamos la base, que es necesario para entender lo que luego hacemos en el nivel avanzado.
    Muchas gracias por este post

    ResponderEliminar
  2. Muy buen resumen. Para favoritos que va

    ResponderEliminar