English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Os seletores do jQuery permitem que você selecione e opere elementos HTML.
Esta seção contém a lista completa de seletores do jQuery JavaScript library mais recente.
Todos os seletores são divididos em várias categorias.
| Selecionador | Exemplo | Descrição |
|---|---|---|
| * | $("*") | Selecionar todos os elementos (seletor universal) |
| #id | $("#demo") | Selecionar um elemento com id “demo” |
| .class | $(".demo") | Selecionar todos os elementos com classe “demo” |
| elemento | $("p") | Selecionar todos os elementos <p> |
| selector1, selector2 | $("p, div") | Selecionar todos os elementos <p> e <div> |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| ancestor descendant | $("div p") | Selecionar todos os elementos <p> dentro do elemento <div> |
| parent > child | $("div > p") | Selecionar todos os elementos <p> cujo pai é o elemento <div> |
| prev + next | $("div" + p") | Selecionar todos os elementos <p> que sejam imediatamente após o elemento <div> |
| prev ~ siblings | $("div ~ p") | Selecionar todos os elementos <p> que sejam同级元素 de <div> |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| [attribute] | $("[target]") | Selecionar todos os elementos com atributo target |
| [attribute=value] | $("a[href=\u0026quot;]39;CSS3']) | Selecionar todos os elementos com atributo href igual a “CSS”3"do elemento <a> |
| [attribute!=value] | $("a[href!=\u0026quot;]39;CSS3']) | Selecione todos os elementos cujo valor de atributo href não é “CSS3"do elemento <a> |
| [atributo~=value] | $('[alt~=Parrot]') | Selecione todos os elementos que têm o atributo alt e contêm a palavra “Parrot” |
| [atributo|=value] | $('[lang|=en]') | Selecione todos os elementos cujo valor de atributo lang começa com “en” |
| [atributo^=value] | $('a[href^=https]') | Selecione todos os elementos cujo valor de atributo href começa com “https” |
| [atributo$=value] | $('a[href$='.org']) | Selecione cada elemento <a> cujo valor de atributo href termina com “.org” |
| [atributo*=value] | $('a[href*=example]) | Selecione cada elemento <a> cujo valor de atributo href contém a substring “example” |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| :first | $('p:first') | Selecione o primeiro elemento <p> |
| :last | $('p:last') | Selecione o último elemento <p> |
| :even | $('tr:even') | Selecione todos os elementos <tr> de índice zero que são pares |
| :odd | $('tr:odd') | Selecione todos os elementos <tr> de índice zero que são ímpares |
| :not() | $('p:not(.demo)') | Selecione todos os elementos <p> exceto aqueles que têm class="demo" |
| :eq() | $('tr:eq('2)") | Selecione o terceiro elemento <tr> começando pelo índice zero na coleção correspondente |
| :lt() | $('tr:lt('5)") | Selecione todos os elementos cujo índice de índice é menor que5do elemento <tr>, índice começando em zero |
| :gt() | $('tr:gt('5)") | Selecione todos os elementos cujo índice de índice é maior que5do elemento <tr>, índice começando em zero |
| :header | $(':header') | Selecione todos os elementos de cabeçalho, por exemplo, <h1>，《h2>，《h3>etc |
| :lang() | $('div:lang(en)') | Selecione todos os elementos <div> que têm o valor de idioma “en”, ou seja, lang="en", lang="en-us"etc |
| :root | $(':root') | Selecione o elemento raiz do documento, que sempre é o elemento <html> do documento HTML |
| :animated | $(':animated') | O seletor escolhe todos os elementos animados ao executar o seletor |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| :first-child | $("p:first-child) | Selecione todos os elementos <p> que são o primeiro filho do pai |
| :last-child | $("p:last-child) | Selecione todos os elementos <p> que são o último filho do pai |
| :only-child | $("p:only-child) | Escolher todos os elementos <p> que são o único filho do pai |
| :first-of-type | $("p:first-of-type) | Escolher todos os elementos <p> que são o primeiro filho do pai |
| :last-of-type | $("p:last-of-type) | Escolher todos os elementos <p> que são o último filho do pai |
| :only-of-type | $("p:only-of-type) | Escolher todos os elementos <p> que não têm同级 e têm o mesmo nome de elemento |
| :nth-child(n) | $("p:nth-child(3)") | Escolher todos os elementos <p> que são o terceiro filho direto |
| :nth-last-child(n) | $("p:nth-last-child(4)") | Escolher todos os elementos <p> do pai que são o quarto filho |
| :nth-of-type(n) | $("span:nth-of-type(3)") | Escolher todos os elementos <span> dentro do pai que são o terceiro <span> |
| :nth-last-of-type(n) | $("span:nth-last-of-type(4)") | Escolher o elemento do pai na posição4Todos os elementos <span> dentro de um <span>, contando do último para o primeiro |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| :contains() | $("p:contains('is')") | Escolher todos os elementos <p> que contenham o texto "is" |
| :empty | $(":empty") | Escolher todos os elementos vazios, ou seja, sem elementos filhos (inclusive texto) |
| :has() | $("p:has(span)") | Escolher todos os elementos <p> que contenham pelo menos um elemento <span> |
| :parent | $(":parent") | Escolher todos os elementos que tenham pelo menos um nó filho (elemento ou texto) |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| :input | $(":input") | Escolher todos os elementos de entrada, áreas de texto, seleções e botões |
| :text | $(":text") | Escolher todos os elementos de entrada do tipo "text" |
| :password | $(":password") | Escolher todos os elementos de entrada do tipo "password" |
| :radio | $(":radio") | Escolher todos os elementos de entrada do tipo "radio" |
| :checkbox | $(":checkbox") | Escolher todos os elementos de entrada do tipo "checkbox" |
| :button | $(":button") | Escolher todos os elementos de entrada e botão do tipo "button" |
| :submit | $(":submit") | Escolher todos os elementos de entrada e botão do tipo "submit" |
| :reset | $(":reset") | Selecionar todos os elementos de entrada e botões do tipo "reset" |
| :image | $(":image") | Selecionar todos os elementos de entrada do tipo "image" |
| :file | $(":file") | Selecionar todos os elementos de entrada do tipo type="file" |
| :enabled | $(":enabled") | Selecionar todos os elementos ativados |
| :disabled | $(":disabled") | Selecionar todos os elementos desativados |
| :selected | $(":selected") | Selecionar todos os elementos selecionados, aplicável apenas a elementos <option> |
| :checked | $(":checked") | Selecionar todos os elementos selecionados ou selecionáveis, aplicável a caixas de seleção, botões de opção e elementos de seleção |
| :focus | $(":focus") | Selecionar o elemento que está no estado de foco |
| Selecionador | Exemplo | Descrição |
|---|---|---|
| :hidden | $("p:hidden") | Selecionar todos os <p> elementos ocultos |
| :visible | $("p:visible") | Selecionar todos os <p> elementos visíveis |