English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Los selectores de jQuery le permiten seleccionar y operar elementos HTML.
Esta sección contiene una lista completa de los selectores del paquete JavaScript jQuery más reciente.
Todos los selectores se dividen en varias categorías.
| Selector | Ejemplo | Descripción |
|---|---|---|
| * | $("*") | Seleccionar todos los elementos (seleccionador universal) |
| #id | $("#demo") | Seleccionar un elemento con el id “demo” |
| .class | $(".demo") | Seleccionar todos los elementos con la clase “demo” |
| elemento | $("p") | Seleccionar todos los elementos <p> |
| selector1, selector2 | $("p, div") | Seleccionar todos los elementos <p> y todos los elementos <div> |
| Selector | Ejemplo | Descripción |
|---|---|---|
| ancestor descendant | $("div p") | Seleccionar todos los elementos <p> dentro del elemento <div> |
| parent > child | $("div > p") | Seleccionar todos los elementos <p> cuyos elementos padres son <div> |
| prev + next | $("div" + p") | Seleccionar todos los elementos <p> que sigan inmediatamente postreros al elemento <div> |
| prev ~ siblings | $("div ~ p") | Seleccionar todos los elementos <p> que sean同级元素 de <div> |
| Selector | Ejemplo | Descripción |
|---|---|---|
| [attribute] | $("[target]") | Seleccionar todos los elementos con el atributo target |
| [attribute=value] | $("a[href=\u0026quot;]39;CSS3']) | Seleccionar todos los elementos con el atributo href igual a “CSS”3"del<a>elemento" |
| [attribute!=value] | $("a[href!=\u0026quot;]39;CSS3']) | Seleccione todos los elementos cuyos valores de atributo href no son " CSS"3"del<a>elemento" |
| [atributo~=value] | $('[alt~=Parrot]') | Seleccione todos los elementos que tienen el atributo alt y contienen la palabra "Parrot" |
| [atributo|=value] | $('[lang|=en]') | Seleccione todos los elementos cuyos valores de atributo lang comiencen con " en" |
| [atributo^=value] | $('a[href^=https]') | Seleccione todos los elementos cuyos valores de atributo lang comiencen con " https" |
| [atributo$=value] | $('a[href$='.org']) | Seleccione cada elemento <a> cuyo valor de atributo href termine en " .org" |
| [atributo*=value] | $('a[href*=example]) | Seleccione cada elemento <a> cuyo valor de atributo href contenga la subcadena "example" |
| Selector | Ejemplo | Descripción |
|---|---|---|
| :first | $('p:first') | Seleccione el primer elemento <p> |
| :last | $('p:last') | Seleccione el último elemento <p> |
| :even | $('tr:even') | Seleccione todos los elementos <tr> con un índice cero que son números pares |
| :odd | $('tr:odd') | Seleccione todos los elementos <tr> con un índice cero que son números impares |
| :not() | $('p:not(.demo)') | Seleccione todos los elementos <p> excepto los que tienen class="demo" |
| :eq() | $('tr:eq('2)") | Seleccione el tercer elemento <tr> en la colección coincidente, desde el índice cero |
| :lt() | $('tr:lt('5)") | Seleccione todos los elementos <tr> con un índice menor que5de los elementos <tr>, desde el índice cero |
| :gt() | $('tr:gt('5)") | Seleccione todos los elementos <tr> con un índice mayor que5de los elementos <tr>, desde el índice cero |
| :header | $(':header') | Seleccione todos los elementos de encabezado, por ejemplo, <h1>, <h2>, <h3>y otros |
| :lang() | $('div:lang(en)') | Seleccione todos los elementos <div> que tienen el valor de idioma "en", es decir, lang="en", lang="en-us"y otros |
| :root | $(':root') | Seleccione el elemento raíz del documento, que siempre es el elemento <html> del documento HTML |
| :animated | $(':animated') | El selector selecciona todos los elementos animados al ejecutar el selector |
| Selector | Ejemplo | Descripción |
|---|---|---|
| :first-child | $("p:first-child) | Seleccione todos los elementos <p> que son el primer hijo de su padre |
| :last-child | $("p:last-child) | Seleccione todos los elementos <p> que son el último hijo de su padre |
| :only-child | $("p:only-child) | Seleccione todos los elementos <p> que pertenecen al único hijo de su padre |
| :first-of-type | $("p:first-of-type) | Seleccione todos los elementos <p> que pertenecen al primer elemento <p> de su padre |
| :last-of-type | $("p:last-of-type) | Seleccione todos los elementos <p> que pertenecen al último elemento <p> de su padre |
| :only-of-type | $("p:only-of-type) | Seleccione todos los elementos <p> que no tengan elementos gemelos y tengan el mismo nombre de elemento |
| :nth-child(n) | $("p:nth-child(3)") | Seleccione todos los elementos <p> que pertenecen al tercer nivel de subelementos |
| :nth-last-child(n) | $("p:nth-last-child(4)") | Seleccione todos los elementos <p> desde el elemento anterior al primero, que sean el cuarto hijo de su padre |
| :nth-of-type(n) | $("span:nth-of-type(3)") | Seleccione todos los elementos <span> que pertenecen al tercer elemento <span> de su padre |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | Seleccione el elemento de su elemento padre en el lugar4Todos los elementos <span> dentro de un <span> elemento, contando desde el último al primero |
| Selector | Ejemplo | Descripción |
|---|---|---|
| :contains() | $("p:contains('is')") | Seleccione todos los elementos <p> que contengan el texto "is" |
| :empty | $(":empty") | Seleccione todos los elementos vacíos, es decir, aquellos sin elementos hijos (incluido texto) |
| :has() | $("p:has(span)") | Seleccione todos los elementos <p> que contengan al menos un elemento <span> |
| :parent | $(":parent") | Seleccione todos los elementos que tengan al menos un nodo hijo (elemento o texto) |
| Selector | Ejemplo | Descripción |
|---|---|---|
| :input | $(":input") | Seleccione todos los elementos de entrada, áreas de texto, selecciones y botones |
| :text | $(":text") | Seleccione todos los elementos de entrada de tipo "text" |
| :password | $(":password") | Seleccione todos los elementos de entrada de tipo "password" |
| :radio | $(":radio") | Seleccione todos los elementos de entrada de tipo "radio" |
| :checkbox | $(":checkbox") | Seleccione todos los elementos de entrada de tipo "checkbox" |
| :button | $(":button") | Seleccione todos los elementos de entrada y botón de tipo "button" |
| :submit | $(":submit") | Seleccione todos los elementos de entrada y botón de tipo "submit" |
| :reset | $(":reset") | Seleccionar todos los elementos de entrada y botones de tipo "reset" |
| :image | $(":image") | Seleccionar todos los elementos de entrada de tipo "image" |
| :file | $(":file") | Seleccionar todos los elementos de entrada de tipo "file" |
| :enabled | $(":enabled") | Seleccionar todos los elementos activados |
| :disabled | $(":disabled") | Seleccionar todos los elementos desactivados |
| :selected | $(":selected") | Seleccionar todos los elementos seleccionados, solo adecuado para elementos <option> |
| :checked | $(":checked") | Seleccionar todos los elementos seleccionados o seleccionables, adecuado para casillas de verificación, botones de opción y elementos de selección |
| :focus | $(":focus") | Seleccionar el elemento que esté en estado de foco |
| Selector | Ejemplo | Descripción |
|---|---|---|
| :hidden | $("p:hidden") | Seleccionar todos los elementos <p> ocultos |
| :visible | $("p:visible") | Seleccionar todos los elementos <p> visibles |