Fórum | tutoriais mais recente desenvolvimento web
 

jQuery seletores


jQuery seletores

Use o nosso Selector Tester jQuery para demonstrar as diferentes seletores.

seletor Exemplo Selecciona
* $("*") Todos os elementos
# id $("#lastname") O elemento com id="lastname"
. class $(".intro") Todos os elementos com class="intro"
. class, . class $(".intro,.demo") Todos os elementos com a class "intro" ou "demo"
element $("p") Todos <p> elementos
el1 , el2 , el3 $("h1,div,p") Todos <h1>, <div> <p> <h1>, <div> <p> elementos
   
:first $("p:first") A primeira <p> elemento
:last $("p:last") A última <p> elemento
:even $("tr:even") Todos mesmo <tr> elementos
:odd $("tr:odd") Todos os ímpares <tr> elementos
   
:first-child $("p:first-child") Todos <p> elementos que são o primeiro filho de seu pai
:first-of-type $("p:first-of-type") Todos <p> elementos que são a primeira <p> elemento de sua mãe
:last-child $("p:last-child") Todos <p> elementos que são o último filho de seu pai
:last-of-type $("p:last-of-type") Todos <p> elementos que são a última <p> elemento de sua mãe
:nth-child( n ) $("p:nth-child(2)") Todos <p> elementos que são o segundo filho de seus pais
:nth-last-child( n ) $("p:nth-last-child(2)") Todos <p> elementos que são o segundo filho de seus pais, contados a partir da última criança
:nth-of-type( n ) $("p:nth-of-type(2)") Todos <p> elementos que são a segunda <p> elemento de sua mãe
:nth-last-of-type( n ) $("p:nth-last-of-type(2)") Todos <p> elementos que são a segunda <p> elemento de sua mãe, a contar da última criança
:only-child $("p:only-child") Todos <p> elementos que são o único filho de seus pais
:only-of-type $("p:only-of-type") Todos <p> elementos que são o único filho, de seu tipo, de seu pai
   
parent > child $("div > p") Todos <p> elementos que são um filho direto de um <div> elemento
parent descendant $("div p") Todos <p> elementos que são descendentes de um <div> elemento
element + next $("div + p") O <p> elemento que estão ao lado de cada <div> elementos
element ~ siblings $("div ~ p") Todos <p> elementos que são irmãos de um <div> elemento
   
:eq( index ) $("ul li:eq(3)") O quarto elemento em uma lista (índice começa em 0)
:gt( no ) $("ul li:gt(3)") elementos da lista com um índice superior a 3
:lt( no ) $("ul li:lt(3)") elementos da lista com um índice inferior a 3
:not( selector ) $("input:not(:empty)") Todos os elementos de entrada que não estão vazias
   
:header $(":header") Todos os elementos de cabeçalho <h1>, <h2> ...
:animated $(":animated") Todos os elementos animados
:focus $(":focus") O elemento que atualmente tem o foco
:contains( text ) $(":contains('Hello')") Todos os elementos que contém o texto "Hello"
:has( selector ) $("div:has(p)") Todos os elementos <div> que têm um elemento <p>
:empty $(":empty") Todos os elementos que estão vazias
:parent $(":parent") Todos os elementos que são um pai de um outro elemento
:hidden $("p:hidden") Todos os escondidas <p> elementos
:visible $("table:visible") Todas as tabelas visíveis
:root $(":root") elemento raiz do documento
:lang( language ) $("p:lang(de)") Todos <p> elementos com um valor de atributo lang começando com "de"
   
[ attribute ] $("[href]") Todos os elementos com um href atributo
[ attribute = value ] $("[href='default.htm']") Todos os elementos com um href atributo valor igual a "default.htm"
[ attribute != value ] $("[href!='default.htm']") Todos os elementos com um href atributo valor não igual a "default.htm"
[ attribute $= value ] $("[href$='.jpg']") Todos os elementos com um href valor do atributo terminando com ".jpg"
[attribute|=value] $("[title|='Tomorrow']") Todos os elementos com um título atribuir valor igual a 'Tomorrow' , ou começando com 'Tomorrow' seguido por um hífen
[attribute^=value] $("[title^='Tom']") Todos os elementos com um título atributo de valor começando com "Tom"
[attribute~=value] $("[title~='hello']") Todos os elementos com um valor de atributo de título contendo a palavra específica "hello"
[attribute*=value] $("[title*='hello']") Todos os elementos com um valor de atributo de título contendo a palavra "hello"
   
:input $(":input") Todos os elementos de entrada
:text $(":text") Todos os elementos de entrada com type="text"
:password $(":password") Todos os elementos de entrada com type="password"
:radio $(":radio") Todos os elementos de entrada com type="radio"
:checkbox $(":checkbox") Todos os elementos de entrada com type="checkbox"
:submit $(":submit") Todos os elementos de entrada com type="submit"
:reset $(":reset") Todos os elementos de entrada com type="reset"
:button $(":button") Todos os elementos de entrada com type="button"
:image $(":image") Todos os elementos de entrada com type="image"
:file $(":file") Todos os elementos de entrada com type="file"
:enabled $(":enabled") Todos os enabled elementos de entrada
:disabled $(":disabled") Todos os disabled elementos de entrada
:selected $(":selected") Todos os selected elementos de entrada
:checked $(":checked") Todos os checked elementos de entrada