Seletores jQuery – parte II

Dando continuidade ao artigo de seletores.
Para todos os exemplos será utilizado o mesmo código JavaScript, variando apenas o código para acessar o elemento. Código que se encontra na linha 5. Abaixo veja o código completo.
Para disparar a ação usamos um botão.

<script type="text/javascript" src="../jquery-1.2.6.js"></script>
<script type="text/javascript">
    $(function(){
            $('button').click(function () {
            /*linha dos exemplos*/
            });
        });
</script>

Seletor anterior irmão

Esse seletor está previsto para as CSS 3. Esse seletor tem como objetivo acessar todos os elementos irmãos que se seguem ao elemento declarado como anterior.

$('h2 ~ p').css('background', 'red');

HTML

<button type="button">Vermelha</button>
    <p>Parágrafo antes do cabeçalho h2</p>
 
<h2>Cabeçalho h2</h2>
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
<div>conteúdo da primeira div</div>
    <p>Terceiro parágrafo</p>
 
<div>
    <p>Quarto parágrafo, dentro da segunda div</p>
</div>
<p>Quinto parágrafo</p>

No exemplo acima todos os parágrafos que estão fora das divs serão afetados, já que ele vem após o elemento h2 e são irmãos, são filhos do elemento body. Os que estão dentro das divs, não são afetados, porque seguem ao elemento div e não h2.
Um rápido teste. Se trocarmos o seletor para:

$('div ~ p').css('background', 'red');

Você seria capaz de dizer qual o efeito final. Quem será alvo da estilização?

Seletores filtros

Utilizado para fazer um filtro com uma condição. Podemos usar seletor simples e composto.

Seletor first, last e not

É alvo o primeiro elemento do conjunto de elementos selecionados.

$('p:first').css('background', 'red');

HTML

<button type="button">Vermelha</button>
<div>
    <p>Primeiro parágrafo</p>
    <p>Segundo parágrafo</p>
    <p>Terceiro parágrafo</p>
</div>

O alvo será o primeiro parágrafo.
Se trocarmos o seletor por:

$('p:last').css('background', 'red');

O alvo será o último parágrafo.

Temos também a opção de selecionarmos um conjunto e excluirmos uma instancia desse conjunto.

$('p:not(p:last)').css('background', 'red');

Acima estamos dizendo: selecione todos os p, não (not) o último p (p:last).

Seletor even e odd

Este é um seletor da biblioteca jQuery e não das CSS. Esse seletor acessa as ocorrências pares do conjunto de elementos selecionados. Em JavaScript a contagem inicia em 0 (zero).

$('li:even').css('background', 'red');

HTML

<ul>
    <li>Ítem 0</li>
    <li>Ítem 1</li>
    <li>Ítem 2</li>
    <li>Ítem 3</li>
    <li>Ítem 4</li>
</ul>

O seletor vai afetar os seguintes itens da lista: 0, 2 e 4. Como explicado anteriormente a contagem JavaScript começa em 0 (zero) por isso o primeiro item da lista é afetado.
O Seletor odd faz tem a mesma função, só que acessa as ocorrências impares.

$('li:odd').css('background', 'red');

Seletor eq(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Com esse seletor podemos dizer quem queremos acessar.

$('li:eq(3)').css('background', 'red');

O item 4 da lista será selecionado (já que a contagem inicia em 0).

Seletor gt(índice)

Este é um seletor da biblioteca jQuery e não das CSS. Acessa todas os elementos acima do valor passado no índice. Com o seletor acima será selecionado o item 3 e 4 da lista.

$('li:gt(2)').css('background', 'red');

Seletor lt(índice)

Faz o mesmo que o seletor gt(índice), só que acessa os elementos menores quem o valor passado para índice.

$('li:lt(2)').css('background', 'red');

Essa foi a segunda parte dos seletores. Em breve seletores jQuery parte III. Abraço a todos.

Seletores jQuery – parte II

Seletor anterior irmão

Seletores filtros

Seletor first, last e not

Seletor even e odd

Seletor eq(índice)

Seletor gt(índice)

Seletor lt(índice)

Comentários

Uma resposta para “Seletores jQuery – parte II”