SELETORES JQUERY 2/3

Continuação do post anterior

- Seletores com filtros (cont.) -

* $(seletor:even) - Acessa os elementos pares em um conjunto de elementos indicados pelo seletor. Seletor exclusivo do framework;

* $(seletor:odd) - Acessa os elementos ímpares em um conjunto de elementos indicados pelo seletor.Seletor exclusivo do framework;

* $(seletor:eq(índice)) - Acessa o elemento da posição indicada pelo argumento 'indice' de um conjunto de elementos acessados pelo 'seletor'. Seletor exclusivo do framework;

* $(seletor:gt(índice)) - Acessa todos os elementos selecionados pelo seletor a partir do índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices maiores do que o especificado. Seletor exclusivo do framework;

* $(seletor:lt(índice)) - acessa todos os elementos selecionados pelo seletor anteriores ao índice especificado, ou seja, acessa os elementos do conjunto selecionados pelo seletor com índices inferiores ao que o especificado. Seletor exclusivo do framework;

* $(":header") - acessa todas os elementos do tipo cabeçalho (h1, h2, ..., h6). Seletor exclusivo do framework;

* $(seletor:animated) - acessa os elementos que possuem eventos de animação, que estão no conjunto selecionado pelo seletor;

Aplicando os seletores:

Exemplo 04

Comentando o código

linha 4: Acessa as tags 'tr' pares da tabela e troca a cor de fundo para vermelho;
linha 5: Acessa as tags 'tr' ímpares da tabela e troca a cor de fundo para verde;
linha 6: Acessa a tag 'td' que está na posição 6 na tabela(l.24), lembrando que em javascript o índice começa com 0, e troca a cor de fundo por amarelo;
linha 7: Acessa as tags 'td' apartir da posição 12 da tabela (l.28) e troca a cor de fundo para azul;
linha 8: Acessa as tags 'td' anteriores da posição 1 da tabela (l.17) e troca a cor de fundo para cinza;
linha 9: Acessa as tags 'h3', 'h4' e 'h5' existente no documento(l.13) e troca a cor de fundo para vermelho;

- Seletores de texto -

$(seletor:contains(string)) - Procura pelo texto informado nos elementos selecionados pelo seletor. Este seletor é case sensitive, ou seja, o texto "Valor" é diferente de "valor". Seletor exclusivo do framework;

$(seletor:empty) - Acessa todos os elementos vazios acessados pelo seletor;

$(seletor1:has(seletor2)) - Acessa todos os elementos selecionado pelo seletor1 que possuem os elementos selecionado pelo seletor2. Seletor exclusivo do framework;

$(seletor:parent) - Acessa todos os elementos que tenham filhos, considerando que texto como um nó filho. Seletor exclusivo do framework.

Aplicando os seletores:

Exemplo 05

Comentando o código

linha: Acessa as tags 'div' e procura pelo texto 'framework'(linha tal) dentro delas e troca a cor de fundo por vermelha;
linha: Acessa as tags 'div' e procura por alguma que esteja vazia(linha tal) e troca a cor de funda para velho;
linha: Acessa as tags 'div' procurando por pelo menos uma ocorrência da tag 'span'(linha tal);

Referencias:

http://docs.jquery.com/Selectors

http://pt-br.html.net/tutorials/css/lesson1.asp

jQuery A Biblioteca do programador JavaScript, Maurício Samy Silva, novatec

------------------------------

Bom pessoal é isto ai!! jQuery é uma ferramenta de trabalho bastante ampla e muito útil no dia a dia de desenvolvedores web, ficarei devendo o restante dos seletores para vocês, um abraço e até o proximo post.