jQuery - Selettori

La libreria jQuery sfrutta la potenza dei selettori CSS (Cascading Style Sheets) per consentirci di accedere rapidamente e facilmente a elementi o gruppi di elementi nel DOM (Document Object Model).

Un jQuery Selector è una funzione che fa uso di espressioni per trovare elementi corrispondenti da un DOM in base ai criteri dati. Puoi semplicemente dire che i selettori vengono utilizzati per selezionare uno o più elementi HTML utilizzando jQuery. Una volta selezionato un elemento, possiamo eseguire varie operazioni su quell'elemento selezionato.

La funzione di fabbrica $ ()

I selettori jQuery iniziano con il segno del dollaro e le parentesi - $(). La funzione di fabbrica$() fa uso dei seguenti tre elementi costitutivi durante la selezione degli elementi in un dato documento:

Sr.No.	Selettore e descrizione
1	Tag Name Rappresenta un nome di tag disponibile nel DOM. Per esempio$('p') seleziona tutti i paragrafi <p> nel documento.
2	Tag ID Rappresenta un tag disponibile con l'ID fornito nel DOM. Per esempio$('#some-id') seleziona il singolo elemento nel documento che ha un ID di qualche id.
3	Tag Class Rappresenta un tag disponibile con la classe data nel DOM. Per esempio$('.some-class') seleziona tutti gli elementi nel documento che hanno una classe di una classe.

Tutti gli elementi di cui sopra possono essere utilizzati da soli o in combinazione con altri selettori. Tutti i selettori jQuery si basano sullo stesso principio tranne alcune modifiche.

NOTE - La funzione di fabbrica $() è sinonimo di jQuery()funzione. Quindi, nel caso in cui utilizzi qualsiasi altra libreria JavaScript in cui$ il segno è in conflitto con qualcos'altro che puoi sostituire $ firmare da jQuery nome e puoi usare function jQuery() invece di $().

Esempio

Di seguito è riportato un semplice esempio che utilizza Tag Selector. Questo selezionerebbe tutti gli elementi con un nome di tagp.

Dimostrazione dal 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>

Questo produrrà il seguente risultato:

Come utilizzare i selettori?

I selettori sono molto utili e sarebbero necessari ad ogni passaggio durante l'utilizzo di jQuery. Ottengono l'elemento esatto che desideri dal tuo documento HTML.

La tabella seguente elenca alcuni selettori di base e li spiega con esempi.

Sr.No.	Selettore e descrizione
1	Nome Seleziona tutti gli elementi che corrispondono a un dato elemento Name.
2	#ID Seleziona un singolo elemento che corrisponde al dato ID.
3	.Classe Seleziona tutti gli elementi che corrispondono al dato Class.
4	Universale (*) Seleziona tutti gli elementi disponibili in un DOM.
5	Elementi multipli E, F, G Seleziona i risultati combinati di tutti i selettori specificati E, F o G.

Esempi di selettori

Simile alla sintassi e agli esempi sopra, i seguenti esempi ti darebbero una comprensione sull'uso di diversi tipi di altri selettori utili -

Qui hai diversi tipi di altri selettori utili:

Sr.No.	Selettore e descrizione
1	*$('')** Questo selettore seleziona tutti gli elementi nel documento.
2	*$("p > ")** Questo selettore seleziona tutti gli elementi che sono figli di un elemento di paragrafo.
3	$("#specialID") Questa funzione del selettore ottiene l'elemento con id = "specialID".
4	$(".specialClass") Questo selettore ottiene tutti gli elementi che hanno la classe specialClass .
5	$("li:not(.myclass)") Seleziona tutti gli elementi corrispondenti a <li> che non hanno class = "myclass".
6	$("a#specialID.specialClass") Questo selettore abbina i collegamenti con un id di specialID e una classe di specialClass .
7	$("p a.specialClass") Questo selettore confronta i collegamenti con una classe di specialClass dichiarata all'interno di <p> elementi.
8	$("ul li:first") Questo selettore ottiene solo il primo elemento <li> di <ul>.
9	$("#container p") Seleziona tutti gli elementi corrispondenti a <p> che sono discendenti di un elemento che ha un ID contenitore .
10	$("li > ul") Seleziona tutti gli elementi corrispondenti a <ul> che sono figli di un elemento corrispondente a <li>
11	$("strong + em") Seleziona tutti gli elementi corrispondenti a <em> che seguono immediatamente un elemento di pari livello corrispondente a <strong>.
12	$("p ~ ul") Seleziona tutti gli elementi corrispondenti a <ul> che seguono un elemento di pari livello corrispondente a <p>.
13	$("code, em, strong") Seleziona tutti gli elementi corrispondenti a <code> o <em> o <strong>.
14	$("p strong, .myclass") Seleziona tutti gli elementi corrispondenti a <strong> che sono discendenti di un elemento corrispondente a <p> nonché tutti gli elementi che hanno una classe di myclass .
15	$(":empty") Seleziona tutti gli elementi che non hanno figli.
16	$("p:empty") Seleziona tutti gli elementi corrispondenti a <p> che non hanno figli.
17	$("div[p]") Seleziona tutti gli elementi corrispondenti a <div> che contengono un elemento corrispondente a <p>.
18	$("p[.myclass]") Seleziona tutti gli elementi corrispondenti a <p> che contengono un elemento con una classe di myclass .
19	$("a[@rel]") Seleziona tutti gli elementi corrispondenti a <a> che hanno un attributo rel.
20	$("input[@name = myname]") Seleziona tutti gli elementi corrispondenti a <input> che hanno un valore nome esattamente uguale a myname.
21	$("input[@name^=myname]") Seleziona tutti gli elementi corrispondenti a <input> che hanno un valore di nome che inizia con myname .
22	$("a[@rel$=self]") Seleziona tutti gli elementi corrispondenti a <a> che hanno relvalore dell'attributo che termina con self .
23	*$("a[@href=domain.com]")** Seleziona tutti gli elementi corrispondenti a <a> che hanno un valore href contenente dominio.com.
24	$("li:even") Seleziona tutti gli elementi corrispondenti a <li> che hanno un valore di indice pari.
25	$("tr:odd") Seleziona tutti gli elementi corrispondenti a <tr> che hanno un valore di indice dispari.
26	$("li:first") Seleziona il primo elemento <li>.
27	$("li:last") Seleziona l'ultimo elemento <li>.
28	$("li:visible") Seleziona tutti gli elementi corrispondenti a <li> che sono visibili.
29	$("li:hidden") Seleziona tutti gli elementi corrispondenti a <li> che sono nascosti.
30	$(":radio") Seleziona tutti i pulsanti di opzione nel modulo.
31	$(":checked") Seleziona tutte le caselle selezionate nel modulo.
32	$(":input") Seleziona solo gli elementi del modulo (input, select, textarea, button).
33	$(":text") Seleziona solo elementi di testo (input [type = text]).
34	$("li:eq(2)") Seleziona il terzo elemento <li>.
35	$("li:eq(4)") Seleziona il quinto elemento <li>.
36	$("li:lt(2)") Seleziona tutti gli elementi corrispondenti all'elemento <li> prima del terzo; in altre parole, i primi due elementi <li>.
37	$("p:lt(3)") seleziona tutti gli elementi corrispondenti a <p> elementi prima del quarto; in altre parole i primi tre elementi <p>.
38	$("li:gt(1)") Seleziona tutti gli elementi corrispondenti a <li> dopo il secondo.
39	$("p:gt(2)") Seleziona tutti gli elementi corrispondenti a <p> dopo il terzo.
40	$("div/p") Seleziona tutti gli elementi corrispondenti a <p> che sono figli di un elemento corrispondente a <div>.
41	$("div//code") Seleziona tutti gli elementi corrispondenti a <code> che sono discendenti di un elemento corrispondente a <div>.
42	$("//p//a") Seleziona tutti gli elementi corrispondenti a <a> discendenti di un elemento corrispondente a <p>
43	$("li:first-child") Seleziona tutti gli elementi corrispondenti a <li> che sono il primo figlio del loro genitore.
44	$("li:last-child") Seleziona tutti gli elementi corrispondenti a <li> che sono l'ultimo figlio del loro genitore.
45	$(":parent") Seleziona tutti gli elementi che sono il genitore di un altro elemento, incluso il testo.
46	$("li:contains(second)") Seleziona tutti gli elementi corrispondenti a <li> che contengono il testo secondo.

Puoi utilizzare tutti i selettori di cui sopra con qualsiasi elemento HTML / XML in modo generico. Ad esempio, se selector$("li:first") allora funziona per l'elemento <li> $("p:first") funzionerebbe anche per l'elemento <p>.