jQuery - Attraversamento DOM

jQuery è uno strumento molto potente che fornisce una varietà di metodi di attraversamento DOM per aiutarci a selezionare gli elementi in un documento in modo casuale così come in un metodo sequenziale. La maggior parte dei metodi di attraversamento DOM non modifica l'oggetto jQuery e vengono utilizzati per filtrare gli elementi da un documento in base a determinate condizioni.

Trova elementi per indice

Considera un semplice documento con il seguente contenuto HTML:

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

  • Sopra ogni elenco ha il proprio indice e può essere individuato direttamente utilizzando eq(index) metodo come nell'esempio seguente.

  • Ogni elemento figlio inizia il suo indice da zero, quindi, si accederà all'elemento 2 dell'elenco utilizzando$("li").eq(1) e così via.

Esempio

Di seguito è riportato un semplice esempio che aggiunge il colore al secondo elemento dell'elenco.

<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() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Filtraggio di elementi

Il filter( selector )può essere utilizzato per filtrare tutti gli elementi dall'insieme di elementi corrispondenti che non corrispondono ai selettori specificati. Il selettore può essere scritto utilizzando qualsiasi sintassi del selettore.

Esempio

Di seguito è riportato un semplice esempio che applica il colore alle liste associate alla classe media:

<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() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

Questo produrrà il seguente risultato:

Individuazione degli elementi discendenti

Il find( selector )può essere utilizzato per individuare tutti gli elementi discendenti di un particolare tipo di elementi. Il selettore può essere scritto utilizzando qualsiasi sintassi del selettore.

Esempio

Di seguito è riportato un esempio che seleziona tutti gli elementi <span> disponibili all'interno di diversi elementi <p> ​​-

<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").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

Questo produrrà il seguente risultato:

Metodi di filtro DOM JQuery

La seguente tabella elenca metodi utili che puoi utilizzare per filtrare vari elementi da un elenco di elementi DOM -

Sr.No. Metodo e descrizione
1 eq (indice)

Riduci l'insieme di elementi corrispondenti a un singolo elemento.
2 filtro (selettore)

Rimuove tutti gli elementi dall'insieme di elementi corrispondenti che non corrispondono ai selettori specificati.
3 filtro (fn)

Rimuove tutti gli elementi dall'insieme di elementi corrispondenti che non corrispondono alla funzione specificata.
4 è (selettore)

Controlla la selezione corrente rispetto a un'espressione e restituisce true, se almeno un elemento della selezione si adatta al selettore specificato.
5 mappa (richiamata)

Traduci un insieme di elementi nell'oggetto jQuery in un altro insieme di valori in un array jQuery (che può o non può contenere elementi).
6 not (selettore)

Rimuove gli elementi che corrispondono al selettore specificato dal set di elementi corrispondenti.
7 slice (inizio, [fine])

Seleziona un sottoinsieme degli elementi corrispondenti.

Metodi di attraversamento JQuery DOM

La tabella seguente elenca altri metodi utili che puoi utilizzare per individuare vari elementi in un DOM -

Sr.No. Metodi e descrizione
1 aggiungi (selettore)

Aggiunge più elementi, abbinati dal selettore dato, alla serie di elementi abbinati.
2 andSelf ()

Aggiungi la selezione precedente alla selezione corrente.
3 bambini ([selettore])

Ottieni un set di elementi contenente tutti gli elementi secondari immediati univoci di ciascuno degli elementi corrispondenti.
4 più vicino (selettore)

Ottieni un set di elementi contenente l'elemento genitore più vicino che corrisponde al selettore specificato, incluso l'elemento iniziale.
5 Contenuti( )

Trova tutti i nodi figlio all'interno degli elementi corrispondenti (inclusi i nodi di testo) o il documento di contenuto, se l'elemento è un iframe.
6 fine( )

Ripristina l'operazione "distruttiva" più recente, modificando l'insieme di elementi corrispondenti al suo stato precedente.
7 trova (selettore)

Cerca gli elementi discendenti che corrispondono ai selettori specificati.
8 successivo ([selector])

Ottieni un set di elementi contenente i prossimi fratelli unici di ciascuno dei set di elementi dati.
9 nextAll ([selector])

Trova tutti gli elementi di pari livello dopo l'elemento corrente.
10 offsetParent ()

Restituisce una raccolta jQuery con il genitore posizionato del primo elemento corrispondente.
11 genitore ([selettore])

Ottieni il genitore diretto di un elemento. Se chiamato su un insieme di elementi, genitore restituisce un insieme dei loro elementi genitore diretti univoci.
12 genitori ([selector])

Ottieni un set di elementi contenente gli antenati univoci del set di elementi corrispondenti (ad eccezione dell'elemento radice).
13 prev ([selector])

Ottieni un set di elementi contenente i fratelli precedenti univoci di ciascuno degli elementi corrispondenti.
14 prevAll ([selector])

Trova tutti gli elementi di pari livello davanti all'elemento corrente.
15 fratelli ([selector])

Ottieni un set di elementi contenente tutti i fratelli univoci di ciascuno dei set di elementi corrispondenti.