Introdução ao jQuery

Felippe Alex Scheidt · Capítulo 15 de 27

Páginas do PDF

Introdução ao jQuery

3.5 Selecionando elementos pelo status

Seleciona todos os inputs que possuem como irmão um button:

 

$("button ~ input")

 

O resultado será:

<input type="text" id="email"/>

 

É importante observar que esse seletor seleciona apenas os elementos que são irmãos de button, mas somente a partir dele, não considerando os elementos que antecedem ao button. Ambos devem possuir o mesmo ancestral direto (form) em comum.

 

3.5 Selecionando elementos pelo status São seletores do jQuery que permitem selecionar determinados elementos de acordo com seu estado, tais como: marcado, selecionado, desabilitado e com o foco do usuário. Considere o código a seguir para demonstração do uso de cada tipo de seletor:

<div id="site">

<button>voltar</button>

<form>

<span>Salvar login? </span>

<input type="checkbox" checked>

Número protocolo:

<input type="text" id="proto" value="910021"

disabled="disable">

<input type="hidden" id="user_id" value="1949"/>

País destino:

<select>

<option>Brasil</option>

<option selected>Paraguai</option>

<option>Argentina</option>

</select>

<label for="nome">Nome:</label>

<input type="text" id="nome"/>

<label for="cpf">CPF:</label>

<input type="text" id="cpf"/>

</form>

</div>

 

20 Seleciona elemento marcado

 

Este seletor permite localizar apenas os elementos que foram ou estão marcados. No exemplo, temos um seletor que seleciona apenas as inputs marcadas:

$("input:checked")

 

O retorno do seletor será:

<input type="checkbox" checked>

 

21 Seleciona elemento que está selecionado

 

Por exemplo, se quisermos encontrar a opção de um select que foi selecionada pelo usuário, poderíamos definir o seguinte seletor:

$("option:selected")

 

O retorno do seletor será o elemento:

<option selected>Paraguai</option>

 

22 Seleciona elemento que possui o foco

 

No exemplo, procuramos apenas a input que possui o foco do usuário, isto é, aquela que tem o cursor de tela no momento atual:

$("input:focus")

 

23 Seleciona elemento que está desabilitado

 

No exemplo, selecionamos apenas as inputs que estão desabilitadas:

$("input:disabled")

 

O retorno do seletor será o elemento:

<input type="text" id="proto" value="910021" disabled="disable">

 

24 Seleciona elementos visíveis

 

Este seletor permite selecionar apenas as tags visíveis. No exemplo, definimos que apenas as inputs visíveis devem ser selecionadas:

$("input:visible")

 

O retorno do seletor será:

<input type="checkbox" checked>

<input type="text" id="proto" value="910021" disabled="disable">

<input type="text" id="nome"/>