Comment utiliser la méthode d'ajout de traversée jQuery

<p>jQuery traverse la méthode add

<p>jQuery est une bibliothèque JavaScript populaire qui encapsule de nombreuses fonctions couramment utilisées par les développeurs, rendant le développement JavaScript plus simple et plus efficace. L'un d'eux est la possibilité de parcourir les éléments du DOM.

<p>Dans jQuery, vous pouvez parcourir les éléments d'un document de plusieurs manières. Une solution consiste à utiliser la méthode .add(). .add() 方法。

什么是 add 方法

<p>.add() 方法是 jQuery 用来合并两个或多个集合的方法。它会将一个集合中的元素添加到另一个集合中。新的集合包括原始集合中的所有元素和新的元素。

<p>.add() 方法可以接受多个参数，其中每个参数都是一个 CSS 选择器、一个 DOM 元素或一组 DOM 元素。这些参数将被添加到原始集合中。

<p>考虑以下 HTML 结构：

<div class="box">
  <p>这里是段落1</p>
</div>
<div class="box">
  <p>这里是段落2</p>
</div>

<p>要选择所有的 <p> 元素和 <div> 元素，然后将它们添加到一个新的集合中，可以这样使用 .add() 方法：

var $newCollection = $('p').add('div');

<p>现在，$newCollection 将包含所有 <p> 和 <div> 元素。

遍历 DOM 元素

<p>jQuery 遍历函数返回 jQuery 对象，包含匹配给定选择器的 DOM 元素。这些函数可以过滤集合、搜索子元素和查找匹配的 DOM 元素。

<p>以下是最常用的 jQuery 遍历方法：

• .children()：返回匹配元素的子元素集合。
• .parent()：返回匹配元素的直接父元素。
• .siblings()：返回匹配元素的兄弟元素集合。
• .next()：返回匹配元素的下一个同级元素。
• .prev()：返回匹配元素的上一个同级元素。

<p>这些方法返回的 DOM 元素集合可以被进一步遍历或使用其他 jQuery 方法处理。

<p>下面的例子演示了如何使用 .siblings() 方法来查找类名为 .red 的所有兄弟元素：

<div class="box">
  <div class="red">红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div class="box">
  <div class="red">红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>

$(document).ready(function() {
  $('.red').siblings().css('background-color', 'gray');
});

<p>这个例子将 .red 元素的所有兄弟元素的背景颜色设置为灰色。

总结

<p>jQuery 提供了许多遍历 DOM 元素的方法来便捷地操作 HTML 和 CSS。.add() 方法可以合并两个或多个元素集合。

<p>以上是 jQuery 遍历和 .add()

Quelle est la méthode add

La méthode .add() est une méthode utilisée par jQuery pour fusionner deux ou plusieurs collections. Il ajoute des éléments d'une collection à une autre collection. Le nouvel ensemble comprend tous les éléments de l’ensemble d’origine ainsi que de nouveaux éléments. La méthode 🎜🎜.add() peut accepter plusieurs paramètres, chaque paramètre étant un sélecteur CSS, un élément DOM ou un ensemble d'éléments DOM. Ces paramètres seront ajoutés à la collection originale. 🎜🎜Considérez la structure HTML suivante : 🎜rrreee🎜Pour sélectionner tous les éléments <p> et <div> et les ajouter à une nouvelle collection, vous pouvez utiliser la méthode .add() comme ceci : 🎜rrreee🎜Maintenant, $newCollection contiendra tous les <p> et &lt ; div>. 🎜

Traverser les éléments DOM

🎜La fonction de traversée jQuery renvoie un objet jQuery contenant les éléments DOM qui correspondent au sélecteur donné. Ces fonctions peuvent filtrer les collections, rechercher des sous-éléments et trouver des éléments DOM correspondants. 🎜🎜Voici les méthodes de parcours jQuery les plus couramment utilisées : 🎜

• .children() : renvoie la collection d'éléments enfants de l'élément correspondant.
• .parent() : renvoie l'élément parent direct de l'élément correspondant.
• .siblings() : renvoie l'ensemble des éléments frères de l'élément correspondant.
• .next() : renvoie l'élément frère suivant de l'élément correspondant.
• .prev() : renvoie l'élément frère précédent de l'élément correspondant.

🎜La collection d'éléments DOM renvoyés par ces méthodes peut être parcourue ou traitée davantage à l'aide d'autres méthodes jQuery. 🎜🎜L'exemple suivant montre comment utiliser la méthode .siblings() pour rechercher tous les éléments frères et sœurs portant le nom de classe .red : 🎜rrreeerrreee🎜Cet exemple . La couleur d'arrière-plan de tous les frères et sœurs de l'élément rouge est définie sur gris. 🎜

Résumé

🎜jQuery fournit de nombreuses méthodes pour parcourir les éléments DOM afin de manipuler facilement HTML et CSS. La méthode .add() peut combiner deux ou plusieurs collections d'éléments. 🎜🎜Ce qui précède est une brève introduction au parcours jQuery et à la méthode .add(). J'espère que cela vous sera utile. 🎜

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!