3
Seletores CSS Básicos suportados pelo jQuery Selecionando pela Tag: Seletor Descrição * Coincide com qualquer elemento E Coincide com todos os elementos de marca E E F Coincide com todos os elementos com nome de marca F que sejam descendentes de E E>F Coincide com todos os elementos com nome de marca F que sejam filhos diretos de E E+F Coincide com todos os elemento E imediatamente precedidos pro qualquer irmão E E~F Coincide com todos os elementos F precedidos por qualquer irmão E E:has(F) Coincide com todos os elementos com nome de marca E que tenham pelo menos um descendente com nome de marca F E.C Coincide com todos os elementos E com nome de classe C. Omitir o E é o mesmo que *.C E#I Coincide com o elemento E com id I. Omitir o E é o mesmo que *#I. E[A] Coincide com todos elementos E com atributo A de qualquer valor. E[A=V] Coincide com todos os elementos E com atributo A cujo valor seja exatamente V E[A^=V] Coincide com todos elementos E com atributo A cujo valor comece com V E[A$=V] Coincide com todos os elementos E com atributo A cujo valor terminne com V E[A*=V] Coincide com todos os elementos E com atributo A cujo valor contenha V. Selecionando por posicionamento: Seletor Descrição :first A primeira coincidência da pag. li a:first devolde o primeiro link também sob um item de listagem :last A última coincidência da página. li a:last devolve o último link também sob um item de listagem :first-child O primeiro elemento filho. li:first-child devolve o primeiro item de cada listagem do documento :last-child O último elemento filho. li:last-child devolve o último item de cada listagem. :only-child Devolve todos elementos que não tenham irmãos :nth-child O enésimo elmento filho. li:nth-child(2) devolve o segundo item de listagem de cada listagem

Seletores JQuery

Embed Size (px)

Citation preview

Page 1: Seletores JQuery

Seletores CSS Básicos suportados pelo jQuery

Selecionando pela Tag:

Seletor Descrição

* Coincide com qualquer elemento

E Coincide com todos os elementos de marca E

E F Coincide com todos os elementos com nome de marca F que sejam descendentes de E

E>F Coincide com todos os elementos com nome de marca F que sejam filhos diretos de E

E+F Coincide com todos os elemento E imediatamente precedidos pro qualquer irmão E

E~F Coincide com todos os elementos F precedidos por qualquer irmão E

E:has(F)Coincide com todos os elementos com nome de marca E que tenham pelo menos um descendente com nome de marca F

E.C Coincide com todos os elementos E com nome de classe C. Omitir o E é o mesmo que *.C

E#I Coincide com o elemento E com id I. Omitir o E é o mesmo que *#I.

E[A] Coincide com todos elementos E com atributo A de qualquer valor.

E[A=V] Coincide com todos os elementos E com atributo A cujo valor seja exatamente V

E[A^=V] Coincide com todos elementos E com atributo A cujo valor comece com V

E[A$=V] Coincide com todos os elementos E com atributo A cujo valor terminne com V

E[A*=V] Coincide com todos os elementos E com atributo A cujo valor contenha V.

Selecionando por posicionamento:

Seletor Descrição

:firstA primeira coincidência da pag. li a:first devolde o primeiro link também sob um item de listagem

:lastA última coincidência da página. li a:last devolve o último link também sob um item de listagem

:first-childO primeiro elemento filho. li:first-child devolve o primeiro item de cada listagem do documento

:last-child O último elemento filho. li:last-child devolve o último item de cada listagem.

:only-child Devolve todos elementos que não tenham irmãos

:nth-child O enésimo elmento filho. li:nth-child(2) devolve o segundo item de listagem de cada listagem

:nth-child(even|odd) Filhos pares ou ímpares. li:nth-child(even) devolvem os filhos pares de cada listagem.

:nth-child(Xn+Y)O enésimo elemento filho computado pela fórmula fornecida. Se Y é 0, ele pode ser omitido. li:nth-child(3n) devolve cada terceiro item, enquanto li:nth-child(5n+1) devolve o item depois de cada quinto elemento

:even e :oddElementos pares e ímpares coincidentes ao longo da pag. li:even devolvem cada item de listagem par

:eq(n) O enésimo elemento coincidente.

:lt(n) Elementos coincidentes antes (e excluindo-se) o enésimo elemento conicidente.

:gt(n) Elementos coincidentes depois (e excluindo-se) o enésimo elemento coincidente.

Page 2: Seletores JQuery

Seletores de Filtro Personalizados do jQuery

Seletor Descrição

:animated Seleciona elementos que estejam atualmento sob controle de animação.

:button Seleciona qualquer botão (input[type=submit], input[type=reset], input[type=button] ou button)

:checkbox Seleciona apenas elementos checkbox (input[type=checkbox])

:checked Seleciona apenas checkbox ou botões de radio que estejam marcados (suportado por CSS)

:contains(foo) Seleciona apenas elementos contendo o texto ‘foo’

:disabled Seleciona apenas elementos de formulário que estejam desabilitados na interface (suportado pelo CSS)

:enabled Seleciona apenas elementos de formulário que estejam habilitados na interface (suportado pelo CSS)

:file Seleciona todos elmentos de arquivo (input[type=file])

:header Seleciona apenas elementos que são cabeçalhos, por exemplo <h1> a <h6>

:hidden Seleciona apenas elementos que estão escondidos

:image Seleciona imagens de formulários (input[type=image])

:input Seleciona apenas elementos de formulários (input, selecionar, área de texto, botões)

:not(filter) Nega o filtro especificado. input:not(:checkbox) seleciona elementos inputs que não sejam checkbox

:parent Seleciona apenas elementos que tenham filhos (incluindo texto), mas não elementos vazios

:password Seleciona apenas elemento de senha (input[type=password])

:radio Seleciona apenas elementos de radio (input[type=radio])

:reset Seleciona botões de reiniciar (input[type=reset] ou button[type=reset])

:selected Seleciona elementos de opção que estão selecionados

:submit Seleciona botões de enviar (button[type=submit] ou input[type=submit])

:text Seleciona apenas elementos de texto (input[type=text])

:visible Seleciona apenas elementos que são visíveis

Muitos dos seletores são relacionados ao estado do elemento.

Pode-se selecionar os checkbox habilitados e marcados de maneira simples:

1 $('input:checkbox:checked:enabled')Os seletores de filtros atenuam um conjunto de elementos e os seletores de busca encontram alguma relação com elementos que já foram selecionados.

Seletores de filtro podem ser identificados pelo :  ou [ . Dentro do filtro not só podem ser utilizados seletores de filtro.

Então:

1$('form input:not(:hidden)') //funciona perfeitamente. Seleciona apenas os inputs que estão habilitados

2$('form :not(input:hidden)') // Não funciona pois a sintaxe do filtro 'not' está incorreta