jQuery - Seletores

A biblioteca jQuery aproveita o poder dos seletores Cascading Style Sheets (CSS) para nos permitir acessar de forma rápida e fácil elementos ou grupos de elementos no Document Object Model (DOM).

Um jQuery Selector é uma função que faz uso de expressões para encontrar elementos correspondentes de um DOM com base nos critérios fornecidos. Você pode simplesmente dizer que os seletores são usados para selecionar um ou mais elementos HTML usando jQuery. Depois que um elemento é selecionado, podemos executar várias operações nesse elemento selecionado.

A função de fábrica $ ()

Os seletores jQuery começam com o cifrão e parênteses - $(). A função de fábrica$() faz uso dos seguintes três blocos de construção ao selecionar elementos em um determinado documento -

Sr. Não.	Seletor e descrição
1	Tag Name Representa um nome de tag disponível no DOM. Por exemplo$('p') seleciona todos os parágrafos <p> no documento.
2	Tag ID Representa uma tag disponível com o ID fornecido no DOM. Por exemplo$('#some-id') seleciona o único elemento no documento que possui um ID de some-id.
3	Tag Class Representa uma tag disponível com a classe fornecida no DOM. Por exemplo$('.some-class') seleciona todos os elementos no documento que possuem uma classe de alguma classe.

Todos os itens acima podem ser usados sozinhos ou em combinação com outros seletores. Todos os seletores jQuery são baseados no mesmo princípio, exceto alguns ajustes.

NOTE - A função de fábrica $() é um sinônimo de jQuery()função. Portanto, caso você esteja usando qualquer outra biblioteca JavaScript onde$ sinal está em conflito com outra coisa, então você pode substituir $ assinar por jQuery nome e você pode usar a função jQuery() ao invés de $().

Exemplo

A seguir está um exemplo simples que faz uso do Tag Selector. Isso selecionaria todos os elementos com um nome de tagp.

Demonstração ao vivo

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

Isso produzirá o seguinte resultado -

Como usar seletores?

Os seletores são muito úteis e seriam necessários em todas as etapas do jQuery. Eles obtêm o elemento exato que você deseja do seu documento HTML.

A tabela a seguir lista alguns seletores básicos e os explica com exemplos.

Sr. Não.	Seletor e descrição
1	Nome Seleciona todos os elementos que correspondem ao elemento dado Name.
2	#EU IRIA Seleciona um único elemento que corresponde ao dado ID.
3	.Classe Seleciona todos os elementos que correspondem ao dado Class.
4	Universal (*) Seleciona todos os elementos disponíveis em um DOM.
5	Elementos múltiplos E, F, G Seleciona os resultados combinados de todos os seletores especificados E, F ou G.

Exemplos de seletores

Semelhante à sintaxe e aos exemplos acima, os exemplos a seguir fornecerão uma compreensão sobre o uso de diferentes tipos de outros seletores úteis

Aqui, você tem diferentes tipos de outros seletores úteis -

Sr. Não.	Seletor e descrição
1	*$('')** Este seletor seleciona todos os elementos do documento.
2	*$("p > ")** Este seletor seleciona todos os elementos que são filhos de um elemento de parágrafo.
3	$("#specialID") Esta função de seletor obtém o elemento com id = "specialID".
4	$(".specialClass") Este seletor obtém todos os elementos que possuem a classe de specialClass .
5	$("li:not(.myclass)") Seleciona todos os elementos correspondidos por <li> que não possuem class = "myclass".
6	$("a#specialID.specialClass") Este seletor combina links com um id de specialID e uma classe de specialClass .
7	$("p a.specialClass") Este seletor combina links com uma classe de specialClass declarada dentro de elementos <p>.
8	$("ul li:first") Este seletor obtém apenas o primeiro <li> elemento do <ul>.
9	$("#container p") Seleciona todos os elementos correspondidos por <p> que são descendentes de um elemento que possui um id de contêiner .
10	$("li > ul") Seleciona todos os elementos correspondidos por <ul> que são filhos de um elemento correspondido por <li>
11	$("strong + em") Seleciona todos os elementos correspondidos por <em> que seguem imediatamente um elemento irmão correspondido por <strong>.
12	$("p ~ ul") Seleciona todos os elementos correspondidos por <ul> que seguem um elemento irmão correspondido por <p>.
13	$("code, em, strong") Seleciona todos os elementos correspondidos por <code> ou <em> ou <strong>.
14	$("p strong, .myclass") Seleciona todos os elementos correspondidos por <strong> que são descendentes de um elemento correspondido por <p>, bem como todos os elementos que têm uma classe de myclass .
15	$(":empty") Seleciona todos os elementos que não têm filhos.
16	$("p:empty") Seleciona todos os elementos correspondidos por <p> que não têm filhos.
17	$("div[p]") Seleciona todos os elementos correspondidos por <div> que contêm um elemento correspondido por <p>.
18	$("p[.myclass]") Seleciona todos os elementos correspondidos por <p> que contêm um elemento com uma classe de myclass .
19	$("a[@rel]") Seleciona todos os elementos correspondidos por <a> que possuem um atributo rel.
20	$("input[@name = myname]") Seleciona todos os elementos correspondidos por <input> que têm um valor de nome exatamente igual a myname.
21	$("input[@name^=myname]") Seleciona todos os elementos correspondidos por <input> que têm um valor de nome começando com myname .
22	$("a[@rel$=self]") Seleciona todos os elementos correspondidos por <a> que têm relvalor de atributo terminando em self .
23	*$("a[@href=domain.com]")** Seleciona todos os elementos correspondidos por <a> que possuem um valor href contendo domain.com.
24	$("li:even") Seleciona todos os elementos correspondidos por <li> que têm um valor de índice par.
25	$("tr:odd") Seleciona todos os elementos correspondidos por <tr> que possuem um valor de índice ímpar.
26	$("li:first") Seleciona o primeiro <li> elemento.
27	$("li:last") Seleciona o último elemento <li>.
28	$("li:visible") Seleciona todos os elementos correspondidos por <li> que são visíveis.
29	$("li:hidden") Seleciona todos os elementos correspondidos por <li> que estão ocultos.
30	$(":radio") Seleciona todos os botões de opção no formulário.
31	$(":checked") Seleciona todas as caixas marcadas no formulário.
32	$(":input") Seleciona apenas os elementos do formulário (entrada, seleção, área de texto, botão).
33	$(":text") Seleciona apenas elementos de texto (entrada [tipo = texto]).
34	$("li:eq(2)") Seleciona o terceiro elemento <li>.
35	$("li:eq(4)") Seleciona o quinto elemento <li>.
36	$("li:lt(2)") Seleciona todos os elementos correspondidos por <li> elemento antes do terceiro; em outras palavras, os dois primeiros <li> elementos.
37	$("p:lt(3)") seleciona todos os elementos correspondidos por elementos <p> antes do quarto; em outras palavras, os três primeiros elementos <p>.
38	$("li:gt(1)") Seleciona todos os elementos correspondidos por <li> após o segundo.
39	$("p:gt(2)") Seleciona todos os elementos correspondidos por <p> após o terceiro.
40	$("div/p") Seleciona todos os elementos correspondidos por <p> que são filhos de um elemento correspondido por <div>.
41	$("div//code") Seleciona todos os elementos correspondidos por <code> que são descendentes de um elemento correspondido por <div>.
42	$("//p//a") Seleciona todos os elementos correspondidos por <a> que são descendentes de um elemento correspondido por <p>
43	$("li:first-child") Seleciona todos os elementos correspondidos por <li> que são os primeiros filhos de seus pais.
44	$("li:last-child") Seleciona todos os elementos correspondidos por <li> que são os últimos filhos de seus pais.
45	$(":parent") Seleciona todos os elementos que são pais de outro elemento, incluindo texto.
46	$("li:contains(second)") Seleciona todos os elementos correspondidos por <li> que contêm o segundo texto.

Você pode usar todos os seletores acima com qualquer elemento HTML / XML de maneira genérica. Por exemplo, se seletor$("li:first") funciona para o elemento <li> então $("p:first") também funcionaria para o elemento <p>.