Primeiramente você deve se perguntar é qual a vantagem em usar os seletores do jQuery? Alguns vão lhe responder que são mais rápidos, mas na verdade depende do seletor que você usar e também em qual browser está executando a aplicação.
Uma boa leitura para essas dúvidas sobre a performance pode ser vista em: 101 on jQuery Selector Performa. Nela o autor testa os usos de seletores usando id, class e tags-name. Mas pelo que entendi dos resultados ele testou esse seletores com uma versão mais antiga do jQuery. Pelo que se nota nas ultimas atualizações os seletores estão cada vez mais rápidos, como vemos no comparativos das versões 1.3.2, 1.4.1 e 1.4.2:
Mas continuando, a baixo segue a lista de seletores que podemos utilizar:
Uma boa leitura para essas dúvidas sobre a performance pode ser vista em: 101 on jQuery Selector Performa. Nela o autor testa os usos de seletores usando id, class e tags-name. Mas pelo que entendi dos resultados ele testou esse seletores com uma versão mais antiga do jQuery. Pelo que se nota nas ultimas atualizações os seletores estão cada vez mais rápidos, como vemos no comparativos das versões 1.3.2, 1.4.1 e 1.4.2:
Mas continuando, a baixo segue a lista de seletores que podemos utilizar:
| Seletor | Exemplo | Descrição |
|---|---|---|
| * | $(’*'); | Este seletor retorna todos os elementos do DOM. |
| #id | $(’#id’); | Este seletor retorna todos os elementos que contenham o mesmo do ID passado. |
| .class | $(’.class’) | Este seletor retorna todos os elementos que possuam o class name passado. |
| element | $(’element’) | Este seletor retorna todos os elementos do mesmo tipo de acordo com o tag name. Ex de tag name: table, ul, li, a etc. |
| a, b, c. … n | $(’th, td, .class, #id’) | Este método pode ser usado para selecionar multiplos elementos. |
| parent child | $(’li a’) | Seleciona todos os "a" elementos que estão contidos no elemento "li". |
| a > b | $(’table > tr’); | Irá selecionar todos "tr" elementos que são filhos de "table". |
| a + b | $(’li + a’); | Seleciona todos os "a" elementos que estão imediatamente após os elementos "li". |
| a ~ b | $(’p ~ ul’); | Seleciona todos os elementos "ul" que vierem depois de "p". |
| :first | $(’ul li:first’); | Retorna o primeiro elemento. |
| :last | $(’ul li:last’); | Retorna o último elemento. |
| :not(a) | $(’input:not(:checked)’); | Retorna todos os "input" elementos que não estão "checked". |
| :has(a) | $(’div:has(p)’); | Retorna todos os "div" elementos que contenham "p". |
| :odd | $(’ul li:odd’); | Retorna todos os elementos impares da lista. |
| :even | $(’ul li:even’); | Retorna todos os elementos pares da lista. |
| :eq(n) | $(’ul li:eq(n)’); | Retorna o "n" elemento. |
| :gt(n) | $(’ul li:gt(n)’); | Retorna todos os elementos que estão após "n". |
| :lt(n) | $(’ul li:lt(n)’); | Retorna todos os elementos que estão antes de "n" |
| :header | $(’:header’); | Retorna todos elementos que são titulos. Ex; h1, h2, etc. |
| :animated | $(’ul:animated’); | Retorna todos os "ul" elementos que são com uma animação em processo. |
| :contains(text) | $(’:contains(hello)’); | Retorna todos os elementos que contenham o texto "hello". |
| :empty | $(’:empty’); | Retorna todos os elementos que não contenham filhos. |
| :parent | $(’li:parent’); | Retorna o elemento pai do elemento "li". |
| :hidden | $(’ul:hidden’); | Retorna todos os "ul" que estão escondidos (hidden)> |
| :visible | $(’ul:visible’); | Retorna todos os "ul" que são visíveis |
| [attribute] | $(’[href]‘); | Retorna todos os elementos que contenham o atributo "href". |
| [attribute=value] | $(’[rel=external]‘); | Retorna todos os elementos que contenham o atributo "ret" com o valor "external". |
| ['attribute!=value'] | $(’[rel!=external]‘); | Retorna todos os elementos que contenham o atributo "ret" sendo que o valor não pode ser "external". |
| [attribute^=value] | $(’[class^=open]‘); | Retorna todos os elementos que contenham o atributo "class" e que valor desse inicie com "open". |
| [attribute$=value] | $(’[id$=-wrapper]‘); | Retorna todos os elementos que contenham o atributo "id" e que valor desse termine com "-wrapper". |
| [attribute*=value] | $(’[class*=offer]‘); | Retorna todos os elementos que contenham o atributo "class" e que valor desse possua a string "offer". |
| :input | $(’:input’); | Retorna somentos os elementos de input, isto é: input, select, textarea e button |
| :text | $(’:text’); | Retorna somente os elementos de tipo "text". |
| :password | $(’:password’); | Retorna somente os elementos de tipo "password". |
| :radio | $(’:radio’); | Retorna somente os elementos de tipo "radio". |
| :checkbox | $(’:checkbox’); | Retorna somente os elementos de tipo "checkbox". |
| :submit | $(’:submit’); | Retorna somente os elementos de tipo "submit" |
| :image | $(’:image’); | Retorna somente os elementos de tipo "image" |
| :reset | $(’:reset’); | Retorna somente os elementos de tipo "rest". |
| :file | $(’:file’); | Retorna somente os elementos de tipo "file". |
| :button | $(’:button’); | Retorna somente os elementos do tipo "button". |
| :enabled | $(’:enabled’); | Retorna todos os elementos que estão "enabled". |
| :selected | $(’:selected’); | Retorna os elementos que está selected da lista de select. |
| :disabled | $(’:disabled’); | Retorna todos os elementos que estão "disabled". |
| :checked | $(’:checked’); | Retorna os elementos que estão "checked" (radio ou checkbox). |
