En développement Web, il est souvent nécessaire de trouver ou de sélectionner certains éléments HTML afin de les manipuler. Dans le but de le faire, vous avez traversé l'arbre Dom et sélectionnez un élément particulier. JQuery fournit une énorme liste de méthodes utilisées pour traverser l'arbre Dom. Ici, nous avons enrôlé ces méthodes jQuery.

1. Méthode des enfants ()
2. chaque () méthode
3. Find () Méthode
4. Méthode First ()
5. Méthode suivante ()
6. Méthode parent ()
7. méthode prev ()
8. Méthode frères et sœurs ()

Ces méthodes susmentionnées sont expliquées en détail ci-dessous.

Méthode des enfants ()

Dans le but de récupérer tous les enfants immédiats d'un élément spécifié, la méthode jQuery Children () est utilisée. Cette méthode ne traverse qu'un niveau sur l'arbre Dom.

Syntaxe

Le filtre est un paramètre facultatif utilisé pour spécifier un élément pour restreindre la recherche d'enfants.

Exemple

Supposons que vous souhaitiez récupérer les enfants directs d'un certain élément en utilisant la méthode jQuery Children (). Voici un exemple de le faire.

Html

UL (parent direct)

• Li (enfant direct de UL)
  Span (petit-enfant d'UL)
  

Nous avons créé un élément dans lequel un

L'élément est imbriqué. Plus loin à l'intérieur du
élément
• , et les éléments sont imbriqués.

  CSS

  .enfants *
  bloc de visualisation;
  Border: 2px gris massif;
  couleur: gris;
  rembourrage: 5px;
  marge: 15px;
  

  Le corps entier a reçu un peu de style en utilisant CSS.

  jquery

  $ (document).ready (function ()
  $ ("ul").enfants().CSS ("Color": "Blue", "Border": "2px Solid Blue");
  );

  Ici, la méthode des enfants () est utilisée pour aller chercher les enfants directs

  élément. En outre, la méthode CSS () est enchaînée à la méthode des enfants () afin de mettre en évidence les enfants des enfants
  .

  Sortir

  L'enfant direct de

  a été récupéré avec succès.

  chaque () méthode

  Afin de spécifier une fonction à exécuter pour chacun des éléments spécifiés, la méthode chaque () est utilisée.

  Syntaxe

  $ (sélecteur).chacun (fonction (index, élément))
  • La fonction à l'intérieur du .chaque méthode () est une fonction de paramètre requise qui sera exécutée pour chacun des éléments spécifiés.
  • Le paramètre d'index spécifie la position du sélecteur.
  • Le paramètre de l'élément se réfère à l'élément actuel.

  Exemple

  Supposons que vous souhaitiez changer le texte pour chacun des

  élément utilisant la méthode jQuery chaque ().

  Html

  Premier paragraphe.

  
  

  La deuxième paragraphe.

  
  

  Troisième paragraphe.

  
  Changer le texte de chaque paragraphe

  Dans le code HTML ci-dessus, nous en avons créé trois

  éléments et un bouton.

  jquery

  $ (document).ready (function ()
  var i = 0;
  $ ("bouton").cliquez sur (fonction ()
  $ ("p").chaque (fonction ()
  $ (ceci).text ('paragraphe $ i + = 1')
  );
  );
  );

  Ici, nous utilisons la méthode chaque () pour changer de texte pour chacun des

  éléments. Le paramètre «ce» fait référence à l'élément actuel, qui dans ce cas est le

  élément.

  Sortir

  Le texte change à chaque fois que vous cliquez sur le bouton.

  La méthode chaque () fonctionne correctement.

  Find () Méthode

  Dans le but de trouver tous les successeurs d'un élément, la méthode find () est utilisée. Tous les successeurs d'un élément comprennent; enfants, petits-enfants, arrière-petits-enfants, etc.

  Syntaxe

  $ (sélecteur).trouver (filtre)

  Le filtre est un paramètre requis qui fait référence à un sélecteur, un élément ou un objet jQuery dont les enfants sont trouvés.

  Exemple

  Supposons que vous vouliez aller chercher l'enfant, le petit-enfant et l'arrière-petit-enfant d'un élément. Voici comment tu fais.

  Html

  
  Div (grand-parent)
  
  UL (parent direct)
  
  • Li (enfant)
    Span (petit-enfant)
    Span (arrière-petit-enfant)
    
    
  
  
  
  
  

  Dans le code ci-dessus, un élément est créé et à l'intérieur que nous avons imbriqué un

  élément. De plus, nous avons imbriqué
  • et des éléments à l'intérieur du
    élément. L'élément niche en outre un élément. La nidification multiple a été effectuée afin de rendre le fonctionnement de la méthode find () claire.

    CSS

    .principal *
    bloc de visualisation;
    Border: 2px gris massif;
    couleur: gris;
    rembourrage: 5px;
    marge: 15px;
    

    Nous avons stylé la classe «Main» en utilisant CSS. Cette classe est affectée au corps.

    jquery

    $ (document).ready (function ()
    $ ("ul").trouver ("li, span").CSS ("Color": "Blue", "Border": "2px Solid Blue");
    );

    Ici, nous utilisons la méthode find () pour trouver

    • et des éléments dans le
      élément et appliquant plus tard un style CSS pour mettre en évidence les successeurs récupérés.

      Sortir

      Les successeurs du

      élément a été trouvé.

      Méthode First ()

      La première méthode () récupère le premier élément imbriqué à l'intérieur d'un élément spécifié.

      Syntaxe

      $ (sélecteur).d'abord()

      Exemple

      Supposons que vous souhaitiez récupérer le premier élément qui se trouve à l'intérieur d'un

      élément. Suivez le code ci-dessous.

      Html

      Méthode pour traverser Dom Éléments Utilisation de jQuery

      Dans le code HTML ci-dessus, nous avons créé un

      élément et imbriqué deux éléments à l'intérieur de cela

      élément.

      jquery

      $ (document).ready (function ()
      $ ("H1 Span").d'abord().CSS ("fond-couleur", "rose");
      );

      Ici, nous avons utilisé la première méthode () pour trouver le premier élément du

      élément, en outre, utilisé la méthode CSS () pour mettre en surbrillance l'élément récupéré.

      Sortir

      Le premier élément du

      L'élément est mis en évidence en rose.

      Méthode suivante ()

      Afin de trouver le frère adjacent d'un élément spécifié, la méthode suivante est utilisée.

      Syntaxe

      $ (sélecteur).Suivant (filtre)

      Le filtre est un paramètre facultatif utilisé pour spécifier un élément pour restreindre la recherche du frère adjacent.

      Exemple

      Ici, nous avons illustré le fonctionnement de la méthode jQuery Next ().

      Html

      C'est une rubrique

      
      

      C'est le premier paragraphe.

      
      

      C'est le deuxième paragraphe.

      Ici, nous en avons créé un

      élément et deux

      éléments.

      jquery

      $ (document).ready (function ()
      $ ("H1").suivant().CSS ("fond-couleur", "rose");
      )

      Dans le code ci-dessus, nous utilisons la méthode suivante () pour trouver le frère adjacent du

      élément.

      Sortir

      Le frère adjacent du

      L'élément a été récupéré avec succès.

      Méthode parent ()

      Afin de trouver le parent direct d'un élément, la méthode parent () est utilisée. Il s'agit d'une fonction jQuery intégrée qui ne monte à un niveau en haut de l'élément spécifié et récupère le parent immédiat de cet élément.

      Syntaxe

      $ (sélecteur).parent (filtre)

      Le filtre est un paramètre facultatif qui est utilisé pour restreindre la recherche d'élément parent en spécifiant une expression de sélecteur.

      Exemple

      Supposons que vous souhaitiez récupérer le parent direct d'un élément qui est présent dans un

      élément qui fait en outre partie d'un élément.

      Html

      
      Div (je suis un arrière-grand-parent)
      

      ul (je suis un grand-parent)
      
      • li (je suis un parent direct)
        portée
        
      
      

      
      
      

      Il y a un total de quatre éléments générés dans le code ci-dessus; ,

      ,
      • , et . Observant leur hiérarchie, le
      • L'élément est considéré comme un parent direct de l'élément,
        est le grand-parent de l'élément, et est l'arrière-grand-parent parce que tous les éléments sont imbriqués à l'intérieur de l'élément.

        CSS

        .principal *
        bloc de visualisation;
        Border: 2px gris massif;
        couleur: gris;
        rembourrage: 5px;
        marge: 15px;
        

        En utilisant CSS, nous avons donné un peu de style au corps.

        jquery

        $ (document).ready (function ()
        $ ("span").parent().CSS ("Color": "Blue", "Border": "2px Solid Blue");
        );

        Nous avons appliqué la méthode parent () sur l'élément et avons également enchaîné la méthode CSS () afin de mettre en surbrillance le parent direct de l'élément et de vérifier que l'élément parent est accessible avec succès.

        Sortir

        L'élément parent est accessible avec succès.

        méthode prev ()

        La méthode jQuery Prev () est utilisée pour récupérer le frère adjacent précédent d'un élément spécifié. Cette méthode traverse de manière arrière dans l'arbre Dom.

        Syntaxe

        $ (sélecteur).prev (filtre)

        Le filtre est un paramètre facultatif utilisé pour spécifier un élément pour restreindre la recherche du frère adjacent précédent.

        Exemple

        Supposons que vous souhaitiez récupérer le frère adjacent précédent d'un élément. Utilisez le code suivant.

        Html

        En-tête 1

        
        

        En-tête 2

        
        

        Un paragraphe.

        Dans le code ci-dessus, nous avons créé trois éléments qui sont;

        ,

        , et

        .

        jquery

        $ (document).ready (function ()
        $ ("h2").prev ().CSS ("fond-couleur", "SkyBlue");
        )

        Nous avons utilisé la méthode jQuery prev () pour récupérer le frère adjacent précédent de

        élément.

        Sortir

        Le frère adjacent précédent de

        est

        .

        Méthode frères et sœurs ()

        Afin de récupérer tous les frères et sœurs d'un élément spécifié, la méthode des frères et sœurs () est utilisé. Cette méthode traverse vers l'arrière et vers l'avant dans l'arbre Dom pour récupérer tous les frères et sœurs d'un élément.

        Syntaxe

        $ (sélecteur).frères et sœurs (filtre)

        Le filtre est un paramètre facultatif utilisé pour spécifier un élément pour restreindre la recherche des frères et sœurs.

        Exemple

        Cet exemple démontre le fonctionnement de la méthode des frères et sœurs ().

        Html

        
        

        ul (parent)
        
        • Li (le frère adjacent précédent)
        
        
        • li
        
        
        • Li (le prochain millon)
        
        
        • Li (le prochain millon)
        
        

        
        

        Dans le code ci-dessus, nous avons créé un élément et imbriqué un

        élément à l'intérieur de cette div. De plus, nous en avons imbriqué
        • éléments à l'intérieur du
          élément.

          CSS

          .div *
          bloc de visualisation;
          Border: 2px gris massif;
          couleur: gris;
          rembourrage: 5px;
          marge: 15px;
          

          L'élément a reçu un certain style en utilisant CSS.

          jquery

          $ (document).ready (function ()
          $ ("li.frères et sœurs").frères et sœurs().CSS ("Color": "Blue", "Border": "2px Solid Blue");
          );

          En utilisant la méthode jQuery Siles (), nous allons récupérer tous les frères et sœurs du

          • élément. De plus, afin de mettre en évidence les frères et sœurs, nous avons utilisé la méthode CSS ().

            Sortir

            La méthode des frères et sœurs () fonctionne correctement.

            Conclusion

            JQuery fournit une vaste gamme de méthodes qui sont utilisées dans le but de traverser les éléments DOM. Ces méthodes sont; Méthode pour enfants (), chaque () méthode, find () Méthode, First () Method, Next () Method, Parent () Method, Prev () Method, and si frères () Méthode. Toutes ces méthodes servent leur propre objectif qui est expliqué en profondeur dans ce guide ainsi que l'aide d'exemples pertinents.