Vamos a indicar en un listado como referenciar un elemento en JQuery: SELECTORES Básicos
php
Selecciona cualquier elemento cuya id contenga en este ejemplo la palabra 'tab_' : $("[id*=tab_]")
* : Selecciona todos los elementos - $("*")
#id : Selección por identificador - $("#lastname")
.class : Selección por clase - $(".intro")
element : Selección por elemento - $("p")
s1,s2,s3 : Selección por múltiples selectores - $("p, #lastname, .intro")
SELECTORES por Atributo
php
[attribute="value"] : Selecciona los elementos que tienen el atributo especificado,con un valor exáctamente igual a un cierto valor - $("[ href='default.htm' ]")
[attribute!="value"] : Selecciona los elementos que o no tienen el atributo especificado, o tiene el atributo especificado,pero no con un determinado valor - $("[ href!='default.htm' ]"). Este selector es equivalente a la pseudo-clase: :not([attr="value"])
[attribute|= "value"] : Selecciona los elementos que tienen el atributo especificado, con un valor ya sea igual a una cadena determinada o que comience con esa cadena seguida de un guión (-). " - $("a[hreflang|='es']")
[attribute*= "value"] : Selecciona los elementos que tienen el atributo especificado, con un valor que contenga la subcadena indicada - $("input[name*='man']")
[attribute~="value"] : Selecciona los elementos que tienen el atributo especificado, con un valor que contenga una palabra dada, delimitada por espacios - $("[name~='ejemplo' ]")
[attribute$="value"] : Selecciona los elementos que tienen el atributo especificado, con un valor que finalice con una palabra dada - $(" [href$='.jpg' ]")
[attribute^="value"] : Selecciona los elementos que tienen el atributo especificado, con un valor que empiece exáctamente con una palabra dada - $(" [href^='new']")
[attribute] : Selecciona los elementos que tienen el atributo especificado, con cualquier valor - $(" div[id]")
[attribute1="value1"][attribute2="value2"] : Selección por múltiples atributos - $("input[id][name$='man']")
SELECTORES de Filtros Básicos
php
:animated : Selecciona todos los elementos que se encuentran en el progreso de una animación en el momento de ejecutar el selector - $("div:animated")
:eq() : Selecciona el elemento con el índice especificado (empieza desde 0) - $("td:eq(2)") En este ejemplo será la tercera etiqueta < td >
:even : Selecciona los elementos pares (empieza desde 0) - $("tr:even").El primero es el 0,el siguiente es el 2 etc.
:first : Selecciona el primer elemento del selector especificado - $("div:first").Es equivalente a la pseudo-clase :eq(0) O también puede ser escrito :lt(1).En este caso :first-child puede coincidir más de uno,uno para cada padre.
:focus : Selecciona los elementos cuando reciben el foco - $("input:focus")
:gt() : Selecciona todos los elementos con un índice mayor que el indicado (empieza desde 0) - $("td:gt(2)") En este ejemplo será a partir de la cuarta etiqueta < td > ,esta inclusive.
:header : Selecciona todos los elementos de cabecera,como
,
,
.Y así sucesivamente - $(":header")
:last : Selecciona el último elemento del selector especificado - $("div:last")
:lt() : Selecciona todos los elementos con un índice menor que el indicado (empieza desde 0) - $("td:gt(2)") En este ejemplo serán las dos primeras etiquetas < td > .
:not() : Selecciona todos los elementos que no coinciden con el selector dado - $("input:not(:checked)")
:odd : Selecciona los elementos impares (empieza desde 0) - $("tr:odd").El primero es el 1,el siguiente es el 3 etc.
SELECTORES de Filtros Hijo
php
:first-child : Selecciona todos los elementos que son el primer hijo de su padre - $("div span:first-child")
:last-child: Selecciona todos los elementos que son el último hijo de su padre - $("div span:last-child")
:nth-child(): Selecciona el elemento hijo con el índice especificado - $("ul li:nth-child(1)").En este ejemplo será la primera etiqueta
.Sin embargo $("ul li:eq(1)") será la segunda etiqueta
.
:only-child: Selecciona todos los elementos que son el único hijo de sus padres - $("div span:only-child")
SELECTORES de Filtros Contenedores
php
:contains() : Selecciona todos los elementos que contienen el texto especificado - $("div:contains('Hola')")
:empty : Selecciona todos los elementos que estén vacíos,incluyendo elementos hijos y / o nodos de texto - $("td:empty")
:has() : Selecciona elementos que contengan al menos un elemento que coincida con el selector especificado - $("div:has(p)")
:parent : Selecciona todos los elementos que tengan algo,incluyendo elementos hijos y / o nodos de texto - $("td:parent")
SELECTORES de Formulario
php
:button : Selecciona todos los elementos
SELECTORES por Jerarquía
php
parent > child : Selecciona todos los elementos secundarios directos especificados por hijo de los elementos especificados por el padre - $("ul.intro > li")
ancestor descendant : Selecciona todos los elementos que son descendientes de un ancestro determinado - $("form input")
prev + next : Selecciona todos los siguientes elementos que coincidan con ese elemento, que son inmediatamente precedidos por un hermano anterior - $("label + input")
prev ~ siblings : Selecciona todos los elementos del mismo nivel que siguen después del elemento anterior,y además tienen el mismo padre,y también coinciden con las selecciones de filtrado de sus hermanos - $("#lastname ~ div")
SELECTORES de Filtros por visibilidad
php
:hidden : Selecciona todos los elementos que están ocultos - $("div:hidden")
Los elementos se consideran oclutos por cuatro razones:
Tienen especificado en el CSS display:none
Son elementos de formulario de type="hidden"
Su anchura y altura se establece de forma explícita a 0
Su elemento ancestro está oculto, por lo que el elemento no se muestra en la página
:visible: Selecciona todos los elementos que son visibles - $("div:visible").Los elementos se consideran visibles si consumen espacio en el documento, es decir,tienen una anchura o una altura que es mayor que cero.