3.2 Selecionando elementos por seus atributos

O resultado será:

<h1>Principais manchetes do dia</h1>

<h2 class="titulo">Escolha sua opção</h2>

<h3 class="titulo">Mais conteúdos</h3>

3.2 Selecionando elementos por seus atributos Neste tipo de seletor o elemento é procurado pelo valor de seu atributo. Considere o código HTML a seguir que usaremos para demonstrar o resultado para cada tipo de seletor:

<div id="site">

Estado origem:

<input type="text" value="PR"/>

Estado destino:

<input type="text" value="RS"/>

Estado nascimento:

<input type="text" value="TO"/>

Escolha um destino:

<input class="pl_destino" type="text"/>

Escolha um idioma:

<input class="pl_idioma" type="text"/>

Email:

<input class="validate_and_return" type="text"/>

<a href="info.pdf">Arquivo</a>

<a href="index.html">Voltar</a>

</div>

6 Seleciona elemento se value for igual a determinado valor

Por exemplo, vamos selecionar todas as inputs cujo valor do atributo value seja PR:

$("input[value='PR']")

O resultado do seletor será:

<input type="text" value="PR"/>

7 Seleciona se value for diferente de um determinado valor

Por exemplo, precisamos selecionar todas as inputs cujos valores sejam diferentes de PR:

$("input[value!='PR']")

O resultado será todos os inputs com valor diferente de "PR", inclusive as inputs sem valores pré-definidos:

<input type="text" value="RS"/>

<input type="text" value="TO"/>

<input class="pl_destino" type="text"/>

<input class="pl_idioma" type="text"/>

<input class="validate_and_return" type="text"/>

8 Seleciona de acordo com o final do valor do atributo

Por exemplo, vamos selecionar todas as inputs cujo atributo class termina com a string "idioma".

$("input[class$='idioma']")

O resultado será apenas 1 elemento selecionado:

<input class="pl_idioma" type="text"/>

Seleciona todos os links que apontam para um arquivo pdf:

$("a[href$='.pdf'")

O resultado será:

<a href="info.pdf">Arquivo</a>

9 Seleciona de acordo com o início do valor do atributo

Vamos selecionar todas as input cujo atributo class começa com a string "pl". O sinal ^ indica que o valor deve iniciar pela string "pl":

$("input[class^='pl']")

O resultado será duas inputs selecionadas:

<input class="pl_destino" type="text"/>

<input class="pl_idioma" type="text"/>

10 Seleciona elemento se contém uma substring de valor Por exemplo, vamos selecionar todas as inputs cujo atributo class contém a substring "and" em qualquer posição: