Seletor jQuery
- Página anterior Sintaxe jQuery
- Próxima página Eventos jQuery
O seletor permite que você opere em grupos de elementos ou em elementos individuais.
Seletor jQuery
Nos capítulos anteriores, mostramos alguns exemplos de como selecionar elementos HTML.
O ponto crucial é aprender como o seletor jQuery seleciona exatamente o elemento que você deseja aplicar o efeito.
Os selectores de elemento do jQuery e os selectores de atributo permitem que você selecione elementos HTML através de nomes de tags, nomes de atributo ou conteúdo.
Os selectores permitem que você realize operações em grupos de elementos HTML ou em um único elemento.
Em termos do HTML DOM:
Os selectores permitem que você realize operações em grupos de elementos DOM ou em um único nó DOM.
Selectores de elemento do jQuery
O jQuery usa selectores CSS para selecionar elementos HTML.
$("p") seleciona os elementos <p>.
$("p.intro") seleciona todos os elementos <p> com class="intro".
$("p#demo") seleciona todos os elementos <p> com id="demo".
Selectores de atributo do jQuery
O jQuery usa expressões XPath para selecionar elementos com propriedades dadas.
$("[href]") seleciona todos os elementos que têm a propriedade href.
$("[href='#']") seleciona todos os elementos cujo valor href é "#".
$("[href!='#']") seleciona todos os elementos cujo valor href não é "#".
$("[href$='.jpg']") seleciona todos os elementos cujo valor href termina com ".jpg".
Selectores CSS do jQuery
Os selectores CSS do jQuery podem ser usados para alterar as propriedades CSS dos elementos HTML.
O exemplo a seguir muda a cor de fundo de todos os elementos <p> para vermelho:
Exemplo
$("p").css("background-color","red");
Mais exemplos de selectores
| Sintaxe | Descrição |
|---|---|
| $(this) | O elemento HTML atual |
| $("p") | Todos os elementos <p> |
| $("p.intro") | Todos os elementos <p> com class="intro" |
| $(".intro") | Todos os elementos com class="intro" |
| $("#intro") | O elemento com id="intro" |
| $("ul li:first") | O primeiro <li> de cada <ul> |
| $("[href$='.jpg']") | Todos os atributos href terminando com ".jpg" |
| $("div#intro .head") | Todos os elementos class="head" dentro do elemento <div> com id="intro" |
Para uma referência completa, acesse nossa Manual de Selectores jQuery.
- Página anterior Sintaxe jQuery
- Próxima página Eventos jQuery
