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 -

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>.