Résumé des méthodes de traversée de nœuds jQuery

Cet article rassemble et organise principalement les méthodes de traversée des nœuds jQuery, afin que tout le monde puisse avoir une compréhension plus claire des nœuds traversants jQuery. Il est très bon et a une valeur de référence. J'espère que les amis qui en ont besoin pourront s'y référer. peut aider tout le monde.

Méthode 1.children() : $('p').children()---Parcourez et trouvez tous les nœuds d'éléments enfants de l'élément p

<p>Hello</p>
<p>
  <span>Hello Again</span>
  <p class="box">您好!</p>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').children();   //<span>Hello Again</span><p class="box">您好!</p>
  $('p').children('.box')  //<p class="box">您好!</p>
</script>

2.next( ) méthode :$('p').next() --- Rechercher les éléments frères adjacents après l'élément p mais pas tous les éléments frères

　[Méthodes associées]

　(1)nextAll () méthode : $('p').nextAll() ---- Trouver tous les éléments frères après p

　 (2) méthode nextUntil() : $('p').nextUntil(' p')- ---Trouver tous les éléments frères et sœurs après p jusqu'à p élément

<p>Hello</p>
<p class="box">Hello Again</p>
<p>
  <span>And Again</span>
</p>
<script type="text/javascript">
  $('p').next();   //<p>Hello Again</p><p><span>And Again</span></p>
  $('p').next('.box');  //<p class="box">Hello Again</p>
</script>

Méthode 3.prev() : $('p').prev() ---- Rechercher p éléments frères et sœurs adjacents précédents

[Les méthodes associées incluent]

(1) méthode prevAll() : $('p').prevAll() ---- Rechercher les éléments avant p Tous les éléments frères

　(2) méthode prevUntil() : $('p').prevUntil('p') --- Rechercher tous les éléments avant p jusqu'à p élément

<p>Hello</p>
<p>
  <span>Hello Again</span>
</p>
<p>And Again</p>
<script type="text/javascript">
  $('p').prev();  //<p><span>Hello Again</span></p>
</script>

Méthode 4.siblings() : $('p').siblings()---- Trouver tous les éléments frères et sœurs avant et après p

Méthode 5.find() : $('p') .find('span') - --- Trouvez le sous-élément dans l'élément p et c'est un élément span

Méthode 6.eq() : $('p').eq(1) --- Trouvez les deuxièmes éléments p (l'indice d'index commence à 0)

Méthode 7.first() : $('li').first() --- Obtenez le premier élément li

Méthode 8 .last() : $('li').last() --- Récupère le dernier élément li

Méthode 9.filter() : $('p').filter('.box' ) --- Récupère l'élément p avec le nom de classe box

Méthode 10.is() : $('.box').is('p') ---- Déterminer si .box est un élément p

11.map() : $('p').map(callback) --- Exécuter la fonction de rappel pour chaque p

Exemple : Parcourir l'élément d'entrée pour obtenir sa valeur à "," séparation est ajouté à la fin de l'élément p

<p><b>Values: </b></p>
<form>
 <input type="text" name="name" value="John"/>
 <input type="text" name="password" value="password"/>
 <input type="text" name="url" value="http://ejohn.org/"/>
</form>
<script type="text/javascript">
  $("p").append( $("input").map(function(){
     return $(this).val();
    }).get().join(", ") );  //<p>John, password, http://ejohn.org/</p> 
</script>

Méthode 12.hasClass() : $('p').hasClass('box') ---- Trouvez la boîte de nom de classe p

Méthode 13.has() : $('p').has('span') ---- Trouver p éléments qui contiennent des éléments span

Méthode 14.not( ) : $( 'p').not('span') ---- Rechercher les éléments p qui ne contiennent pas d'éléments span

Méthode 15.slice() : $('p').slice (0,2) ---- Trouver le 1er élément p jusqu'au 3ème élément p

Méthode 16.offsetParent() : $('p').offsetParent() --- Trouver l'élément p Le premier élément ancêtre positionné

Méthode 17.parent() : $('p').parent() ---- Renvoie la collection d'éléments contenant le nœud parent unique de l'élément p

18.parents() méthode : $('p').parent() ---- Renvoie tous les nœuds ancêtres contenant l'élément p (à l'exclusion du nœud racine)

19.méthode parentUntil() :$('p'). parentUntil('#box') ---- Recherchez les éléments ancêtres de l'élément p jusqu'à la méthode #box

20.contents() : $('p' contents() --- Renvoie tout. nœuds enfants (y compris les nœuds de texte) dans l'élément p

Méthode 21.end() : $('p').find('span').end() - --- Changer le corps du retour à l'état précédent, c'est-à-dire : après avoir trouvé l'élément span, le focus revient à l'élément p

<p>
  <span>Hello</span>,
  how are you?
</p>
<script type="text/javascript">
  $('p').find('span').addClass('test').end().attr('title','title1');
  //span添加class=test;p添加title=title1
</script>

Recommandations associées :

Explication détaillée de jQuery Implémenter les fonctions d'ajout dynamique de nœuds et de traversée de nœuds

Un petit ensemble de méthodes permettant à Jquery de traverser nodes_jquery

Traversée de boucle jQuery à modifier le href d'un tag Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!