In der Webentwicklung ist häufig bestimmte HTML -Elemente zu finden oder auszuwählen, um sie zu manipulieren. Um dies zu tun, haben Sie durch den DOM -Baum und wählen ein bestimmtes Element aus. JQuery bietet eine riesige Liste von Methoden, die zum Durchqueren des Dom -Baumes verwendet werden. Hier haben wir diese jQuery -Methoden eingetragen.

1. Kinder () Methode
2. jede () Methode
3. find () Methode
4. First () Methode
5. Weiter () Methode
6. Parent () Methode
7. prev () Methode
8. Geschwister () Methode

Diese oben genannten Methoden werden nachstehend ausführlich erläutert.

Kinder () Methode

Um alle unmittelbaren Kinder eines bestimmten Elements zu holen. Diese Methode durchquert nur eine Stufe im Dom -Baum.

Syntax

Filter ist ein optionaler Parameter, mit dem ein Element angegeben wird, um die Suche nach Kindern einzuschränken.

Beispiel

Angenommen, Sie möchten die direkten Kinder eines bestimmten Elements mit der Methode Jquery Children () abrufen. Hier ist ein Beispiel dafür.

Html

ul (direkter Elternteil)

• li (direktes Kind von UL)
  Spannweite (Enkelkind von UL)
  

Wir haben ein Element erstellt, in dem a

Element ist verschachtelt. Weiter im Inneren der
Element
• , und Elemente sind verschachtelt.

  CSS

  .Kinder *
  Bildschirmsperre;
  Grenze: 2px Festgrau;
  Farbe: Grau;
  Polsterung: 5px;
  Rand: 15px;
  

  Der gesamte Körper wurde mit CSS etwas Stil erhalten.

  JQuery

  $ (Dokument).Ready (function ()
  $ ("ul").Kinder().CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
  );

  Hier wird die Kindermethode verwendet, um die direkten Kinder von zu holen

  Element. Außerdem wird die CSS () -Methode an die Kindermethode () gekettet, um die Kinder von hervorzuheben
  .

  Ausgang

  Das direkte Kind von

  wurde erfolgreich abgerufen.

  jede () Methode

  Um eine Funktion anzugeben, die für jedes der angegebenen Elemente ausgeführt werden soll, wird die Methode jeder ()) verwendet.

  Syntax

  $ (Selektor).Jede (Funktion (Index, Element))
  • Die Funktion im Inneren der .Jede () Methode ist eine erforderliche Parameterfunktion, die für jedes der angegebenen Elemente ausgeführt wird.
  • Der Indexparameter gibt die Position des Selektors an.
  • Elementparameter bezieht sich auf das aktuelle Element.

  Beispiel

  Angenommen, Sie möchten den Text für jeden der von jedem ändern

  Element unter Verwendung der jQuery proby () -Methode.

  Html

  Erster Paragraph.

  
  

  Zweiter Absatz.

  
  

  Dritter Absatz.

  
  Ändern Sie den Text jedes Absatzes

  Im obigen HTML -Code haben wir drei erstellt

  Elemente und ein Knopf.

  JQuery

  $ (Dokument).Ready (function ()
  var i = 0;
  $ ("Button").klicken (function ()
  $ ("P").jeder (function ()
  $ (this).Text ('Absatz $ i+= 1')
  );
  );
  );

  Hier verwenden wir jede Methode jeder (), um den Text für jeden der der einzelnen zu ändern

  Elemente. Der Parameter „this“ bezieht sich auf das aktuelle Element, das in diesem Fall das ist

  Element.

  Ausgang

  Der Text ändert sich jedes Mal, wenn Sie auf die Schaltfläche klicken.

  Die Methode jeder () funktioniert ordnungsgemäß.

  find () Methode

  Um alle Nachfolger eines Elements zu finden, wird die Find () -Methode verwendet. Alle Nachfolger eines Elements umfassen; Kinder, Enkelkinder, Urenkel und so weiter.

  Syntax

  $ (Selektor).Finden (Filter)

  Filter ist ein erforderlicher Parameter, der sich entweder auf einen Selektor-, Element- oder JQuery -Objekt bezieht, dessen Kinder zu finden sind.

  Beispiel

  Angenommen, Sie möchten das Kind, das Enkel und das Urenkel eines Elements holen. So machst du es.

  Html

  
  Div (Großeltern)
  
  ul (direkter Elternteil)
  
  • Li (Kind)
    Spannweite (Enkelkind)
    Spannweite (Urenkel)
    
    
  
  
  
  
  

  Im obigen Code wird ein Element erstellt und im Inneren, in dem wir a verschachtelt haben

  Element. Darüber hinaus haben wir verschachtelt
  • und Elemente im Inneren der
    Element. Das Element nistet weiter ein Element. Es wurde mehrere Verschachtelungen durchgeführt, um die Arbeit der Find () -Methode klar zu machen.

    CSS

    .hauptsächlich *
    Bildschirmsperre;
    Grenze: 2px Festgrau;
    Farbe: Grau;
    Polsterung: 5px;
    Rand: 15px;
    

    Wir haben die Klasse „Haupt“ mit CSS gestylt. Diese Klasse ist dem Körper zugeordnet.

    JQuery

    $ (Dokument).Ready (function ()
    $ ("ul").Finden Sie ("li, span").CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
    );

    Hier verwenden wir die Find () -Methode, um sie zu finden

    • und Elemente in der
      Element und später einige CSS -Styling anwenden, um die abgerufenen Nachfolger hervorzuheben.

      Ausgang

      Die Nachfolger der

      Element wurden gefunden.

      First () Methode

      Die erste () Methode holt das erste verschachtelte Element in einem bestimmten Element ab.

      Syntax

      $ (Selektor).Erste()

      Beispiel

      Angenommen, Sie möchten das erste Element in einem abrufen

      Element. Folgen Sie dem folgenden Code.

      Html

      Methode an Traverse Dom Elemente mit jQuery

      Im obigen HTML -Code haben wir eine erstellt

      Element und verschachtelte zwei Elemente darin

      Element.

      JQuery

      $ (Dokument).Ready (function ()
      $ ("H1 span").Erste().CSS ("Hintergrundfarbe", "Pink");
      );

      Hier haben wir die erste () Methode verwendet, um das erste Element der zu finden

      Element verwendet darüber hinaus eine CSS () -Methode, um das abgerufene Element hervorzuheben.

      Ausgang

      Das erste Element der

      Element wird in Pink hervorgehoben.

      Weiter () Methode

      Um das angrenzende Geschwister eines bestimmten Elements zu finden, wird die nächste () Methode verwendet.

      Syntax

      $ (Selektor).Weiter (Filter)

      Filter ist ein optionaler Parameter, mit dem ein Element angegeben wird, um die Suche nach dem angrenzenden Geschwister einzuschränken.

      Beispiel

      Hier haben wir die Arbeit der Jquery Next () -Methode illustriert.

      Html

      Dies ist eine Überschrift

      
      

      Dies ist der erste Absatz.

      
      

      Dies ist der zweite Absatz.

      Hier haben wir einen geschaffen

      Element und zwei

      Elemente.

      JQuery

      $ (Dokument).Ready (function ()
      $ ("H1").nächste().CSS ("Hintergrundfarbe", "Pink");
      )

      Im obigen Code verwenden wir die nächste () -Methode, um das angrenzende Geschwister der zu finden

      Element.

      Ausgang

      Das angrenzende Geschwister der

      Element wurde erfolgreich abgerufen.

      Parent () Methode

      Zum Zweck der Suche nach dem direkten Elternteil eines Elements wird die Parent () -Methode verwendet. Es ist eine integrierte JQuery-Funktion, die nur eine Ebene des angegebenen Elements aufgibt und das unmittelbare übergeordnete Elternteil dieses Elements holt.

      Syntax

      $ (Selektor).Elternteil (Filter)

      Der Filter ist ein optionaler Parameter, mit dem die Suche nach übergeordnetem Element eingehalten wird, indem ein Selektorausdruck angegeben wird.

      Beispiel

      Angenommen, Sie möchten den direkten Elternteil eines Elements holen, das in einem vorhanden ist

      Element, das weiter Teil eines Elements ist.

      Html

      
      div (ich bin ein Urgroßeltern)
      

      ul (ich bin ein Großelternteil)
      
      • li (ich bin ein direkter Elternteil)
        Spanne
        
      
      

      
      
      

      Es gibt insgesamt vier Elemente, die im obigen Code generiert werden ,

      ,
      • , Und . Ihre Hierarchie beobachten, die
      • Element wird als direkter Elternteil des Elements angesehen,
        ist der Großelternteil des Elements und der Urgroßeltern, weil alle Elemente im Element verschachtelt sind.

        CSS

        .hauptsächlich *
        Bildschirmsperre;
        Grenze: 2px Festgrau;
        Farbe: Grau;
        Polsterung: 5px;
        Rand: 15px;
        

        Mit CSS haben wir dem Körper einen gewissen Stil gegeben.

        JQuery

        $ (Dokument).Ready (function ()
        $ ("span").Elternteil().CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
        );

        Wir haben die Parent () -Methode auf das Element angewendet und auch die CSS () -Methode angekettet, um den direkten Elternteil des Elements hervorzuheben und zu überprüfen, ob das übergeordnete Element erfolgreich zugegriffen wird.

        Ausgang

        Das übergeordnete Element wird erfolgreich zugegriffen.

        prev () Methode

        Die Jquery Prev () -Methode wird verwendet, um das vorherige benachbarte Geschwister eines bestimmten Elements abzurufen. Diese Methode durchquert nach hinten im Dom -Baum nach hinten.

        Syntax

        $ (Selektor).vorher (Filter)

        Filter ist ein optionaler Parameter, mit dem ein Element angegeben wird, um die Suche nach dem vorherigen benachbarten Geschwister einzuschränken.

        Beispiel

        Angenommen, Sie möchten das vorherige angrenzende Geschwister eines Elements abrufen. Verwenden Sie den folgenden Code.

        Html

        Überschrift 1

        
        

        Überschrift 2

        
        

        Ein Absatz.

        Im obigen Code haben wir drei Elemente erstellt, die sind;

        ,

        , Und

        .

        JQuery

        $ (Dokument).Ready (function ()
        $ ("H2").prev ().CSS ("Hintergrundfarbe", "SkyBlue");
        )

        Wir haben die jQuery prev () -Methode verwendet, um das vorherige angrenzende Geschwister von zu holen

        Element.

        Ausgang

        Das vorherige angrenzende Geschwister von

        Ist

        .

        Geschwister () Methode

        Um alle Geschwister eines bestimmten Elements abzurufen, wird die Methode der Geschwister () verwendet. Diese Methode durchquert nach hinten und vorwärts im Dom -Baum, um alle Geschwister eines Elements zu holen.

        Syntax

        $ (Selektor).Geschwister (Filter)

        Filter ist ein optionaler Parameter, mit dem ein Element angegeben wird, um die Suche nach den Geschwistern zu beschränken.

        Beispiel

        Dieses Beispiel zeigt die Arbeit der Geschwister () Methode.

        Html

        
        

        UL (Elternteil)
        
        • li (das vorherige angrenzende Geschwister)
        
        
        • li
        
        
        • li (das nächste Geschwister)
        
        
        • li (das nächste Geschwister)
        
        

        
        

        Im obigen Code haben wir ein Element erstellt und ein verschachtelt

        Element in diesem Div. Darüber hinaus haben wir einige verschachtelt
        • Elemente im Inneren der
          Element.

          CSS

          .div *
          Bildschirmsperre;
          Grenze: 2px Festgrau;
          Farbe: Grau;
          Polsterung: 5px;
          Rand: 15px;
          

          Das Element wurde mit CSS einen bestimmten Stil erhalten.

          JQuery

          $ (Dokument).Ready (function ()
          $ ("li.geschwister").geschwister().CSS ("Farbe": "Blue", "Border": "2PX Solid Blue");
          );

          Mit der Methode JQuery Geschwister () werden wir alle Geschwister des

          • Element. Darüber hinaus, um die Geschwister hervorzuheben, haben wir die CSS () -Methode verwendet.

            Ausgang

            Die Methode der Geschwister () funktioniert ordnungsgemäß.

            Abschluss

            JQuery bietet eine Vielzahl von Methoden, die zum Zwecke des Durchquerens von DOM -Elementen verwendet werden. Diese Methoden sind; Children () Methode, jede () Methode, Find () Methode, First () Methode, Next () Methode, Parent () Methode, Prev () Methode und Geschwister () Methode () Methode. Alle diese Methoden erfüllen ihren eigenen Zweck, der in diesem Leitfaden ausführlich erklärt wird, zusammen mit der Hilfe relevanter Beispiele.