Une brève analyse d'exemples de sélecteurs hiérarchiques pour démarrer avec jQuery_jquery

Cet article analyse l'utilisation des sélecteurs hiérarchiques pour démarrer avec jQuery. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

Voici une brève introduction à la différence entre ancêtre descendant et parent>enfant dans le sélecteur hiérarchique jQuery.

parent>child : correspond à tous les éléments enfants en fonction de l'élément parent. La relation hiérarchique est une relation parent-enfant.

ancêtre descendant : correspond à tous les éléments descendants en fonction des éléments ancêtres. La relation hiérarchique est celle des ancêtres et des descendants.

Écrivez du code et testez-le pour distinguer plus clairement la différence entre les deux :

<div id="first">1
  <span>1.1 </span>
  <span>1.2 </span>
  <div>1.3
    <span>1.3.1 </span>
  </div>
 </div>
<script type="text/javascript" src="jquery-1.4.1.min.js">
</script>
<script type="text/javascript">
  $(function () {
    $("#first>span").css("color", "red");
  });
</script>

Après course, il a été trouvé :

La couleur du texte de 1.3.1 n'est pas rouge car parent>enfant est une relation parent-enfant

Si vous changez le sélecteur en :

Copier le code Le code est le suivant :

$("#first span").css("color", "rouge" );

Après avoir couru, on retrouve :

La couleur du texte de 1.3.1 est également rouge, car la relation hiérarchique ancêtre-descendant est celle des ancêtres et des descendants. Autrement dit, toutes les balises span sous l'élément portant l'identifiant « first », qu'il s'agisse d'enfants ou de petits-enfants, deviendront rouges.

J'espère que cet article sera utile à tous ceux qui programment jQuery.