communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français

Traversée jQuery

Qu'est-ce que le parcours ?

Le parcours jQuery, signifiant « déplacer », est utilisé pour « trouver » (ou sélectionner) des éléments HTML en fonction de leur relation avec d'autres éléments. Commencez par une sélection et avancez dans cette sélection jusqu'à atteindre l'élément souhaité.

L'image ci-dessous montre un arbre généalogique. Avec le parcours jQuery, vous pouvez facilement vous déplacer vers le haut (ancêtres), vers le bas (descendants) et horizontalement (frères et sœurs) dans l'arbre généalogique, en commençant par l'élément sélectionné (actuel). Ce mouvement est appelé traversée du DOM.

img_travtree.png

Analyse de l'illustration :

  • <div> ce ancêtres. L'élément

  • <ul> est l'élément parent de l'élément <li> et est l'élément enfant de

  • <🎜. > à gauche L'élément <li> est l'élément parent de <span>, l'élément enfant de <ul> et le descendant de <div>. L'élément

  • <span> est un élément enfant de <li> et un descendant de <ul>

  • Deux éléments <li> sont frères (ont le même élément parent).

  • L'élément <li> à droite est l'élément parent de <b>, l'élément enfant de <ul> et le descendant de <div>. L'élément

  • <b> est un enfant de <li> à droite et est un descendant de <ul>




L'ancêtre est le père, le grand-père, l'arrière-grand-père, etc. Les descendants sont les enfants, petits-enfants, arrière-petits-enfants, etc. Les frères et sœurs partagent le même parent.


jQuery fournit une variété de méthodes pour parcourir le DOM.

Le plus grand type de méthode de traversée est la traversée d'arbres (tree-traversal).

Le prochain chapitre expliquera comment monter, descendre et atteindre le même niveau dans l'arborescence DOM.



Formation continue
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .ancestors * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px; } </style> <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("span").parent().css({"color":"red","border":"2px solid red"}); }); </script> </head> <body> <div class="ancestors"> <div style="width:300px;">div (曾祖父元素) <ul>ul (祖父元素) <li>li (父元素) <span>span</span> </li> </ul> </div> <div style="width:300px;">div (祖父元素) <p>p (父元素) <span>span</span> </p> </div> </div> </body> </html>
soumettreRéinitialiser le code
Section précédente section suivante
Liste des didacticiels
obtenir de l'aide
  • Recommandations de cours
  • Téléchargement du didacticiel
Le didacticiel n'est pas disponible au téléchargement pour le moment. Le staff est actuellement en train de l'organiser. Veuillez prêter plus d'attention à ce cours à l'avenir ~

Les étudiants qui ont regardé ce cours apprennent également

Le dernier didacticiel vidéo ThinkPHP 5.1 en première mondiale (60 jours pour devenir un expert PHP en ligne)  492412 joue