Seletores
Os seletores em jQuery são baseados nos seletores de CSS e são uma forma de selecionar elementos da página sobre os quais queremos trabalhar.
Seletor de elemento
O selector elemento seleciona elementos com base no nome dos elementos. $(“p”) seleciona todos os elementos <p> da página.
. $("div").hide() seleciona os elementos <div> e esconde-os.
Seletor de #id
O selector de id seleciona elementos com base no id dos elementos.
$("#test") seleciona o elemento com o id “test”.
$("#test").css("background-color", "yellow") seleciona o elemento com o id “test” e muda-lhe a cor de fundo para amarelo.
Seletor de .class
O selector de classe seleciona elementos com base na classe dos elementos.
$(".test") seleciona os elementos com a classe “test”.
$(".test").css("background-color", "yellow") seleciona todos os elementos com a classe “test” e muda-lhes a cor de fundo para amarelo.
Lista completa dos seletores de jQuery
| Seletor | Exemplo | Seleciona |
| * | $(“*”) | Todos os elementos |
| #id | $(“#lastname”) | O elemento com o id “lastname” |
| .class | $(“.intro”) | Todos os elementos com a classe “intro” |
| .class,.class | $(“.intro,.demo”) | Todos os elementos com a classe “intro” ou “demo” |
| element | $(“p”) | Todos os elementos <p> |
| el1,el2,el3 | $(“h1,div,p”) | Todos os elementos <h1>, <div> e <p> |
| :first | $(“p:first”) | O primeiro elemento <p> |
| :last | $(“p:last”) | O ultimo elemento <p> |
| :even | $(“tr:even”) | Todos os elementos <tr> pares |
| :odd | $(“tr:odd”) | Todos os elementos <tr> impares |
| :first-child | $(“p:first-child”) | Todos os elementos <p> que são o primeiro filho do seu elemento pai |
| :first-of-type | $(“p:first-of-type”) | Todos os elementos <p> que são o primeiro elemento <p> do seu elemento pai |
| :last-child | $(“p:last-child”) | Todos os elementos <p> que são o ultimo filho do seu elemento pai |
| :last-of-type | $(“p:last-of-type”) | Todos os elementos <p> que são o ultimo elemento <p> do seu elemento pai |
| :nth-child(n) | $(“p:nth-child(2)”) | Todos os elementos <p> que são o segundo filho do seu elemento pai |
| :nth-last-child(n) | $(“p:nth-last-child(2)”) | Todos os elementos <p> que são o segundo filho do seu elemento pai, contando a partir do ultimo filho |
| :nth-of-type(n) | $(“p:nth-of-type(2)”) | Todos os elementos <p> que são o segundo elemento <p> do seu elemento pai |
| :nth-last-of-type(n) | $(“p:nth-last-of-type(2)”) | Todos os elementos <p> que são o segundo elemento <p> do seu elemento pai, contando a partir do ultimo filho |
| :only-child | $(“p:only-child”) | Todos os elementos <p> que são o unico filho do seu elemento pai |
| :only-of-type | $(“p:only-of-type”) | Todos os elementos <p> que são o unico filho do tipo <p>, do seu elemento pai |
| parent > child | $(“div > p”) | Todos os elementos <p> que são um filho direto de um elemento <div>. |
| parent descendant | $(“div p”) | Todos os elementos <p> que são descendentes de um elemento <div> |
| element + next | $(“div + p”) | Todos os elementos <p> que estão a seguir a um elemento <div> |
| element ~ siblings | $(“div ~ p”) | Todos os elementos <p> que são irmãos de um elemento <div> |
| :eq(index) | $(“ul li:eq(3)”) | O quarto elemento de uma lista(a partir do 0) |
| :gt(no) | $(“ul li:gt(3)”) | Elementos <li> com indice superior a 3 |
| :lt(no) | $(“ul li:lt(3)”) | Elementos <li> com indice inferior a 3 |
| :not(selector) | $(“input:not(:empty)”) | Todos os elementos de input que não estão vazios |
| :header | $(“:header”) | Todos os elementos header: <h1>, <h2> … |
| :animated | $(“:animated”) | Todos os elementos animados |
| :focus | $(“:focus”) | O elemento que tem o foco |
| :contains(text) | $(“:contains(‘Hello’)”) | Todos os elementos que têm o texto “Hello” |
| :has(selector) | $(“div:has(p)”) | Todos os elementos <div> que têm pelo menos um elemento <p> |
| :empty | $(“:empty”) | Todos os elementos vazios |
| :parent | $(“:parent”) | Todos os elementos que são pais de outro elemento |
| :hidden | $(“p:hidden”) | Todos os elementos <p> escondidos |
| :visible | $(“table:visible”) | Todas as tabelas visiveis |
| :root | $(“:root”) | O elemento root da página |
| :lang(language) | $(“p:lang(de)”) | Todos os elementos <p> com um valor do atributo lang a começar por “de” |
| [attribute] | $(“[href]”) | Todos os elementos que têm um atributo href |
| [attribute=value] | $(“[href=’default.htm’]”) | Todos os elementos com um atributo href igual a default.html |
| [attribute!=value] | $(“[href!=’default.htm’]”) | Todos os elementos com um atributo href diferente de default.html |
| [attribute$=value] | $(“[href$=’.jpg’]”) | Todos os elementos com um atributo href que termina por .jpg |
| [attribute|=value] | $(“[title|=’Tomorrow’]”) | Todos os elementos com um valor do atributo title igual a “Tomorrow” ou que começa por “Tomorrow seguido de um hifen. |
| [attribute^=value] | $(“[title^=’Tom’]”) | Todos os elementos com um valor do atributo title que começa por “Tom” |
| [attribute~=value] | $(“[title~=’hello’]”) | Todos os elementos com um valor do atributo title que contem a palavra “hello” |
| [attribute*=value] | $(“[title*=’hello’]”) | Todos os elementos com um valor do atributo title que contem a palavra “hello” |
| :input | $(“:input”) | Todos os elementos <input> |
| :text | $(“:text”) | Todos os elementos <input> do tipo “text” |
| :password | $(“:password”) | Todos os elementos <input> do tipo “password” |
| :radio | $(“:radio”) | Todos os elementos <input> do tipo “radio” |
| :checkbox | $(“:checkbox”) | Todos os elementos <input> do tipo “checkbox” |
| :submit | $(“:submit”) | Todos os elementos <input> do tipo “submit” |
| :reset | $(“:reset”) | Todos os elementos <input> do tipo “reset” |
| :button | $(“:button”) | Todos os elementos <input> do tipo “button” |
| :image | $(“:image”) | Todos os elementos <input> do tipo “image” |
| :file | $(“:file”) | Todos os elementos <input> do tipo “file” |
| :enabled | $(“:enabled”) | Todos os elementos <input> habilitados (enabled) |
| :disabled | $(“:disabled”) | Todos os elementos <input> desabilitados (disabled) |
| :selected | $(“:selected”) | Todos os elementos <input> selecionados |
| :checked | $(“:checked”) | Todos os elementos <input> checados |