Los últimos tutoriales de desarrollo web
 

jQuery selectores


Los selectores de jQuery

Utilice nuestro probador del selector de jQuery para demostrar los diferentes selectores.

Selector Ejemplo Selecciona
* $("*") todos los elementos
# id $("#lastname") El elemento con id="lastname"
. class $(".intro") Todos los elementos con class="intro"
. class, . class $(".intro,.demo") Todos los elementos con la class "intro" o "demo"
element $("p") Todos los <p> elementos
el1 , el2 , el3 $("h1,div,p") Todo <h1>, <div> <p> <h1>, <div> <p> elementos
   
:first $("p:first") El primer <p> elemento
:last $("p:last") La última <p> elemento
:even $("tr:even") Todos los pares <tr> elementos
:odd $("tr:odd") Todos los impares <tr> elementos
   
:first-child $("p:first-child") Todos los <p> elementos que son el primer hijo de su padre
:first-of-type $("p:first-of-type") Todos los <p> elementos que son el primer <p> elemento de su padre
:last-child $("p:last-child") Todos los <p> elementos que son el último hijo de su padre
:last-of-type $("p:last-of-type") Todos los <p> elementos que son la última <p> elemento de su padre
:nth-child( n ) $("p:nth-child(2)") Todos los <p> elementos que son el segundo hijo de su padre
:nth-last-child( n ) $("p:nth-last-child(2)") Todos los <p> elementos que son el segundo hijo de su padre, a contar desde el último hijo
:nth-of-type( n ) $("p:nth-of-type(2)") Todos los <p> elementos que son el segundo <p> elemento de su padre
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") Todos los <p> elementos que son el segundo <p> elemento de su padre, a contar desde el último hijo
:only-child $("p:only-child") Todos los <p> elementos que son el único hijo de su padre
:only-of-type $("p:only-of-type") Todos los <p> elementos que son el único hijo, de su tipo, de su padre
   
parent > child $("div > p") Todos los <p> elementos que son un hijo directo de un <div> elemento
parent descendant $("div p") Todos los <p> elementos que son descendientes de un <div> elemento
element + next $("div + p") La <p> elemento que están uno al lado <div> elementos
element ~ siblings $("div ~ p") Todos los <p> elementos que son hermanos de un <div> elemento
   
:eq( index ) $("ul li:eq(3)") El cuarto elemento en una lista (índice comienza en 0)
:gt( no ) $("ul li:gt(3)") elementos de la lista con un índice mayor que 3
:lt( no ) $("ul li:lt(3)") elementos de la lista con un índice inferior al 3
:not( selector ) $("input:not(:empty)") Todos los elementos de entrada que no están vacías
   
:header $(":header") Todos los elementos de encabezado <h1>, <h2> ...
:animated $(":animated") Todos los elementos animados
:focus $(":focus") El elemento que está seleccionado actualmente
:contains( text ) $(":contains('Hello')") Todos los elementos que contiene el texto "Hello"
:has( selector ) $("div:has(p)") Todos los elementos <div> que tienen un elemento <p>
:empty $(":empty") Todos los elementos que están vacíos
:parent $(":parent") Todos los elementos que son uno de los padres de otro elemento
:hidden $("p:hidden") Todos los ocultos <p> elementos
:visible $("table:visible") Todas las tablas visibles
:root $(":root") elemento raíz del documento
:lang( language ) $("p:lang(de)") Todos los <p> elementos con un valor de atributo lang comenzando con "de"
   
[ attribute ] $("[href]") Todos los elementos con un href atributo
[ attribute = value ] $("[href='default.htm']") Todos los elementos con un href valor de atributo igual a "default.htm"
[ attribute != value ] $("[href!='default.htm']") Todos los elementos con un href valor de atributo no es igual a "default.htm"
[ attribute $= value ] $("[href$='.jpg']") Todos los elementos con un href valor de atributo que termina con ".jpg"
[attribute|=value] $("[title|='Tomorrow']") Todos los elementos con un título valor de atributo igual a 'Tomorrow' , o comenzar con 'Tomorrow' seguido de un guión
[attribute^=value] $("[title^='Tom']") Todos los elementos con un título atributo de valor a partir de "Tom"
[attribute~=value] $("[title~='hello']") Todos los elementos con un valor de atributo de título que contiene la palabra específica "hello"
[attribute*=value] $("[title*='hello']") Todos los elementos con un valor de atributo del título que contienen la palabra "hello"
   
:input $(":input") Todos los elementos de entrada
:text $(":text") Todos los elementos de entrada con type="text"
:password $(":password") Todos los elementos de entrada con type="password"
:radio $(":radio") Todos los elementos de entrada con type="radio"
:checkbox $(":checkbox") Todos los elementos de entrada con type="checkbox"
:submit $(":submit") Todos los elementos de entrada con type="submit"
:reset $(":reset") Todos los elementos de entrada con type="reset"
:button $(":button") Todos los elementos de entrada con type="button"
:image $(":image") Todos los elementos de entrada con type="image"
:file $(":file") Todos los elementos de entrada con type="file"
:enabled $(":enabled") Todos los enabled elementos de entrada
:disabled $(":disabled") Todos los disabled elementos de entrada
:selected $(":selected") Todos los selected elementos de entrada
:checked $(":checked") Todos checked elementos de entrada