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