jQuery - Traversée DOM

jQuery est un outil très puissant qui fournit une variété de méthodes de traversée DOM pour nous aider à sélectionner des éléments dans un document de manière aléatoire ainsi que par méthode séquentielle. La plupart des méthodes de traversée DOM ne modifient pas l'objet jQuery et sont utilisées pour filtrer les éléments d'un document en fonction de conditions données.

Rechercher des éléments par index

Considérez un document simple avec le contenu HTML suivant -

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

Cela produira le résultat suivant -

  • Au-dessus de chaque liste a son propre index, et peut être localisé directement en utilisant eq(index) méthode comme ci-dessous exemple.

  • Chaque élément enfant commence son index à partir de zéro, ainsi, l' élément de liste 2 serait accessible en utilisant$("li").eq(1) etc.

Exemple

Voici un exemple simple qui ajoute la couleur au deuxième élément de la liste.

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

Cela produira le résultat suivant -

Filtrer les éléments

le filter( selector )peut être utilisée pour filtrer tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas au (x) sélecteur (s) spécifié (s). Le sélecteur peut être écrit en utilisant n'importe quelle syntaxe de sélecteur.

Exemple

Voici un exemple simple qui applique la couleur aux listes associées à la classe moyenne -

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

Cela produira le résultat suivant -

Localisation des éléments descendants

le find( selector )peut être utilisée pour localiser tous les éléments descendants d'un type particulier d'éléments. Le sélecteur peut être écrit en utilisant n'importe quelle syntaxe de sélecteur.

Exemple

Voici un exemple qui sélectionne tous les éléments <span> disponibles dans différents éléments <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>

Cela produira le résultat suivant -

Méthodes de filtrage DOM JQuery

Le tableau suivant répertorie les méthodes utiles que vous pouvez utiliser pour filtrer divers éléments d'une liste d'éléments DOM -

N ° Sr. Méthode et description
1 eq (index)

Réduisez l'ensemble des éléments correspondants à un seul élément.
2 filtre (sélecteur)

Supprime tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas au (x) sélecteur (s) spécifié (s).
3 filtre (fn)

Supprime tous les éléments de l'ensemble des éléments correspondants qui ne correspondent pas à la fonction spécifiée.
4 is (sélecteur)

Vérifie la sélection actuelle par rapport à une expression et renvoie true, si au moins un élément de la sélection correspond au sélecteur donné.
5 map (rappel)

Traduisez un ensemble d'éléments dans l'objet jQuery en un autre ensemble de valeurs dans un tableau jQuery (qui peut ou non contenir des éléments).
6 not (sélecteur)

Supprime les éléments correspondant au sélecteur spécifié de l'ensemble des éléments correspondants.
sept tranche (début, [fin])

Sélectionne un sous-ensemble des éléments correspondants.

Méthodes de traversée JQuery DOM

Le tableau suivant répertorie d'autres méthodes utiles que vous pouvez utiliser pour localiser divers éléments dans un DOM -

N ° Sr. Méthodes et description
1 ajouter (sélecteur)

Ajoute d'autres éléments, correspondant au sélecteur donné, à l'ensemble des éléments correspondants.
2 etSoi ()

Ajoutez la sélection précédente à la sélection actuelle.
3 enfants ([sélecteur])

Obtenez un ensemble d'éléments contenant tous les enfants immédiats uniques de chacun des ensembles d'éléments correspondants.
4 le plus proche (sélecteur)

Obtenez un ensemble d'éléments contenant l'élément parent le plus proche qui correspond au sélecteur spécifié, l'élément de départ inclus.
5 Contenu( )

Recherchez tous les nœuds enfants à l'intérieur des éléments correspondants (y compris les nœuds de texte), ou le document de contenu, si l'élément est une iframe.
6 fin( )

Rétablit l'opération «destructrice» la plus récente, en changeant l'ensemble des éléments correspondants à son état précédent.
sept find (sélecteur)

Recherche les éléments descendants qui correspondent aux sélecteurs spécifiés.
8 suivant ([sélecteur])

Obtenez un ensemble d'éléments contenant les frères et sœurs suivants uniques de chacun des ensembles d'éléments donnés.
9 nextAll ([sélecteur])

Trouvez tous les éléments frères après l'élément actuel.
dix offsetParent ()

Renvoie une collection jQuery avec le parent positionné du premier élément correspondant.
11 parent ([sélecteur])

Obtenez le parent direct d'un élément. S'il est appelé sur un ensemble d'éléments, parent renvoie un ensemble de leurs éléments parents directs uniques.
12 parents ([sélecteur])

Obtenez un ensemble d'éléments contenant les ancêtres uniques de l'ensemble d'éléments correspondant (à l'exception de l'élément racine).
13 prev ([sélecteur])

Obtenez un ensemble d'éléments contenant les frères et sœurs précédents uniques de chacun des ensembles d'éléments correspondants.
14 prevAll ([sélecteur])

Trouvez tous les éléments frères devant l'élément actuel.
15 frères et sœurs ([sélecteur])

Obtenez un ensemble d'éléments contenant tous les frères et sœurs uniques de chacun des ensembles d'éléments correspondants.