Nello sviluppo web, è spesso necessario trovare o selezionare determinati elementi HTML per manipolarli. Ai fini di farlo hai attraversato l'albero DOM e selezionare un elemento particolare. JQuery fornisce un enorme elenco di metodi utilizzati per attraversare l'albero DOM. Qui abbiamo arruolato questi metodi jQuery.

1. Metodo bambini ()
2. ogni () metodo
3. Find () Metodo
4. Primo () metodo
5. Next () Metodo
6. Metodo genitore ()
7. Metodo prev ()
8. Metodo Siblings ()

Questi metodi sopra menzionati sono spiegati in dettaglio di seguito.

Metodo bambini ()

Ai fini di recuperare tutti i bambini immediati di un elemento specificato, viene utilizzato il metodo JQuery Children (). Questo metodo attraversa solo un livello lungo l'albero DOM.

Sintassi

Il filtro è un parametro opzionale che viene utilizzato per specificare un elemento per limitare la ricerca di bambini.

Esempio

Supponiamo di voler prendere i figli diretti di un determinato elemento usando il metodo JQuery Children (). Ecco un esempio di farlo.

Html

UL (genitore diretto)

• Li (figlio diretto di UL)
  Span (nipote di UL)
  

Abbiamo creato un elemento in cui a

L'elemento è nidificato. Più all'interno del
elemento
• , e gli elementi sono nidificati.

  CSS

  .bambini *
  blocco di visualizzazione;
  bordo: 2px grigio solido;
  Colore: grigio;
  imbottitura: 5px;
  Margine: 15px;
  

  L'intero corpo è stato dato un certo stile usando CSS.

  jQuery

  $ (documento).ready (function ()
  $ ("UL").bambini().css ("color": "blu", "bordo": "2px solido blu");
  );

  Qui il metodo Children () viene utilizzato per recuperare i bambini diretti di

  elemento. Oltre a questo, il metodo CSS () è incatenato al metodo Children () per evidenziare i bambini di
  .

  Produzione

  Il figlio diretto di

  è stato recuperato con successo.

  ogni () metodo

  Al fine di specificare una funzione da eseguire per ciascuno degli elementi specificati, viene utilizzato il metodo ciascuno ().

  Sintassi

  $ (selettore).ciascuno (funzione (indice, elemento))
  • La funzione all'interno del .Ogni metodo () è una funzione parametro richiesta che verrà eseguita per ciascuno degli elementi specificati.
  • Il parametro indice Specifica la posizione del selettore.
  • Il parametro dell'elemento si riferisce all'elemento corrente.

  Esempio

  Supponiamo di voler cambiare il testo per ciascuno dei

  Elemento usando il metodo jQuery ogni ().

  Html

  Primo paragrafo.

  
  

  Secondo paragrafo.

  
  

  Terzo paragrafo.

  
  Cambia il testo di ogni paragrafo

  Nel codice HTML sopra, ne abbiamo creati tre

  elementi e un pulsante.

  jQuery

  $ (documento).ready (function ()
  var i = 0;
  $ ("pulsante").Click (function ()
  $ ("p").ciascuno (function ()
  $ (questo).testo ('paragrafo $ i+= 1')
  );
  );
  );

  Qui stiamo usando il metodo ciascuno () per modificare il testo per ciascuno dei

  elementi. Il parametro "questo" si riferisce all'elemento corrente, che in questo caso è il

  elemento.

  Produzione

  Il testo cambia ogni volta che fai clic sul pulsante.

  Il metodo ogni () funziona correttamente.

  Find () Metodo

  Ai fini di trovare tutti i successori di un elemento, viene utilizzato il metodo find (). Tutti i successori di un elemento includono; figli, nipoti, pronipoti e così via.

  Sintassi

  $ (selettore).Trova (filtro)

  Il filtro è un parametro richiesto che si riferisce a un oggetto selettore, elemento o jQuery i cui bambini devono essere trovati.

  Esempio

  Supponiamo di voler prendere il bambino, il nipote e il pronipote di un elemento. Ecco come lo fai.

  Html

  
  Div (nonno)
  
  UL (genitore diretto)
  
  • Li (bambino)
    Span (nipote)
    Span (pronipote)
    
    
  
  
  
  
  

  Nel codice sopra, viene creato un elemento e all'interno che abbiamo nidificato a

  elemento. Inoltre, abbiamo nidificato
  • ed elementi all'interno del
    elemento. L'elemento nidifica ulteriormente un elemento. È stata eseguita la nidificazione multipla per chiarire il metodo di funzionamento ().

    CSS

    .principale *
    blocco di visualizzazione;
    bordo: 2px grigio solido;
    Colore: grigio;
    imbottitura: 5px;
    Margine: 15px;
    

    Abbiamo disegnato la classe "principale" usando CSS. Questa classe è assegnata al corpo.

    jQuery

    $ (documento).ready (function ()
    $ ("UL").trova ("li, span").css ("color": "blu", "bordo": "2px solido blu");
    );

    Qui stiamo usando il metodo find () per trovare

    • ed elementi nel
      Elemento e successivamente applicare alcuni stile CSS per evidenziare i successori recuperati.

      Produzione

      I successori del

      sono stati trovati elementi.

      Primo () metodo

      Il primo () metodo prende il primo elemento nidificato all'interno di un elemento specificato.

      Sintassi

      $ (selettore).Primo()

      Esempio

      Supponiamo di voler prendere il primo elemento che si trova all'interno di un

      elemento. Segui il codice qui sotto.

      Html

      Metodo a attraversare Dom Elementi usando jQuery

      Nel codice HTML sopra, abbiamo creato un

      elemento e nidificato due elementi all'interno di quello

      elemento.

      jQuery

      $ (documento).ready (function ()
      $ ("H1 Span").Primo().CSS ("Colore di sfondo", "rosa");
      );

      Qui abbiamo usato il primo metodo () per trovare il primo elemento del

      Elemento, inoltre, metodo CSS () usato per evidenziare l'elemento recuperato.

      Produzione

      Il primo elemento del

      L'elemento è evidenziato in rosa.

      Next () Metodo

      Per trovare il fratello adiacente di un elemento specificato, viene utilizzato il metodo successivo ().

      Sintassi

      $ (selettore).Next (filtro)

      Il filtro è un parametro opzionale che viene utilizzato per specificare un elemento per limitare la ricerca del fratello adiacente.

      Esempio

      Qui abbiamo illustrato il funzionamento del metodo JQuery Next ().

      Html

      Questa è una voce

      
      

      Questo è il primo paragrafo.

      
      

      Questo è il secondo paragrafo.

      Qui ne abbiamo creato uno

      elemento e due

      elementi.

      jQuery

      $ (documento).ready (function ()
      $ ("H1").Prossimo().CSS ("Colore di sfondo", "rosa");
      )

      Nel codice sopra, stiamo usando il metodo successivo () per trovare il fratello adiacente del

      elemento.

      Produzione

      Il fratello adiacente del

      L'elemento è stato recuperato con successo.

      Metodo genitore ()

      Ai fini di trovare il genitore diretto di un elemento, viene utilizzato il metodo genitore (). È una funzione jQuery incorporata che aumenta solo un livello per l'elemento specificato e recupera il genitore immediato di quell'elemento.

      Sintassi

      $ (selettore).genitore (filtro)

      Il filtro è un parametro opzionale che viene utilizzato per limitare la ricerca dell'elemento genitore specificando un'espressione selettore.

      Esempio

      Supponiamo di voler prendere il genitore diretto di un elemento presente in un

      elemento che è ulteriormente parte di un elemento.

      Html

      
      Div (Sono un bisnonno)
      

      Ul (sono un nonno)
      
      • li (sono un genitore diretto)
        arco
        
      
      

      
      
      

      Ci sono un totale di quattro elementi generati nel codice sopra; ,

      ,
      • , E . Osservando la loro gerarchia, il
      • L'elemento è considerato un genitore diretto dell'elemento,
        è il nonno dell'elemento ed è il bisnonno perché tutti gli elementi sono nidificati all'interno dell'elemento.

        CSS

        .principale *
        blocco di visualizzazione;
        bordo: 2px grigio solido;
        Colore: grigio;
        imbottitura: 5px;
        Margine: 15px;
        

        Usando CSS, abbiamo dato un po 'di stile al corpo.

        jQuery

        $ (documento).ready (function ()
        $ ("span").genitore().css ("color": "blu", "bordo": "2px solido blu");
        );

        Abbiamo applicato il metodo genitore () sull'elemento e incatenati anche il metodo CSS () per evidenziare il genitore diretto dell'elemento e verificare che sia accessibile l'elemento genitore correttamente.

        Produzione

        L'elemento genitore si accede correttamente.

        Metodo prev ()

        Il metodo JQuery Prev () viene utilizzato per recuperare il fratello adiacente precedente di un elemento specificato. Questo metodo attraversa in modo arretrato nell'albero DOM.

        Sintassi

        $ (selettore).Prev (filtro)

        Il filtro è un parametro opzionale che viene utilizzato per specificare un elemento per limitare la ricerca del fratello adiacente precedente.

        Esempio

        Supponiamo di voler prendere il fratello precedente di un elemento adiacente. Usa il seguente codice.

        Html

        Intestazione 1

        
        

        Intestazione 2

        
        

        Qualche paragrafo.

        Nel codice sopra, abbiamo creato tre elementi che sono;

        ,

        , E

        .

        jQuery

        $ (documento).ready (function ()
        $ ("H2").prev ().CSS ("Background-color", "Skyblue");
        )

        Abbiamo usato il metodo JQuery Prev () per recuperare il fratello adiacente precedente di

        elemento.

        Produzione

        Il fratello precedente adiacente di

        È

        .

        Metodo Siblings ()

        Al fine di recuperare tutti i fratelli di un elemento specificato, viene utilizzato il metodo dei fratelli (). Questo metodo attraversa all'indietro e in avanti nell'albero DOM per recuperare tutti i fratelli di un elemento.

        Sintassi

        $ (selettore).fratelli (filtro)

        Il filtro è un parametro opzionale che viene utilizzato per specificare un elemento per limitare la ricerca dei fratelli.

        Esempio

        Questo esempio dimostra il funzionamento del metodo Siblings ().

        Html

        
        

        UL (genitore)
        
        • Li (il fratello precedente adiacente)
        
        
        • li
        
        
        • li (il fratello successivo)
        
        
        • li (il fratello successivo)
        
        

        
        

        Nel codice sopra, abbiamo creato un elemento e nidificato a

        elemento all'interno di quel div. Inoltre, ne abbiamo nidificati alcuni
        • elementi all'interno del
          elemento.

          CSS

          .div *
          blocco di visualizzazione;
          bordo: 2px grigio solido;
          Colore: grigio;
          imbottitura: 5px;
          Margine: 15px;
          

          All'elemento è stato dato un certo stile usando CSS.

          jQuery

          $ (documento).ready (function ()
          $ ("Li.fratelli").fratelli().css ("color": "blu", "bordo": "2px solido blu");
          );

          Usando il metodo jQuery Siblings () stiamo per recuperare tutti i fratelli del

          • elemento. Inoltre, al fine di evidenziare quei fratelli abbiamo usato il metodo CSS ().

            Produzione

            Il metodo Siblings () funziona correttamente.

            Conclusione

            JQuery fornisce una vasta gamma di metodi utilizzati allo scopo di attraversare elementi DOM. Questi metodi sono; Metodo Children (), ciascuno () Metodo, Find () Metodo First (), Next () Metodo, Metodo Parent (), Metodo prev () e Metodo dei fratelli (). Tutti questi metodi servono al proprio scopo che è spiegato in modo approfondito in questa guida insieme all'aiuto di esempi pertinenti.