jQuery 순회 추가 메소드를 사용하는 방법

jQuery는 add 메소드를 통과합니다.

jQuery는 개발자가 일반적으로 사용하는 많은 기능을 캡슐화하여 JavaScript 개발을 더 간단하고 효율적으로 만드는 인기 있는 JavaScript 라이브러리입니다. 그 중 하나는 DOM 요소를 순회하는 기능입니다.

jQuery에서는 다양한 방법으로 문서의 요소를 탐색할 수 있습니다. 한 가지 방법은 .add() 메서드를 사용하는 것입니다. .add() 方法。

什么是 add 方法

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

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

考虑以下 HTML 结构：

<div>
  <p>这里是段落1</p>
</div>
<div>
  <p>这里是段落2</p>
</div>

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

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

现在，$newCollection 将包含所有 <p></p> 和 <div> 元素。<h2 id="遍历-DOM-元素">遍历 DOM 元素</h2> <p>jQuery 遍历函数返回 jQuery 对象，包含匹配给定选择器的 DOM 元素。这些函数可以过滤集合、搜索子元素和查找匹配的 DOM 元素。</p> <p>以下是最常用的 jQuery 遍历方法：</p> <ul> <li> <code>.children()：返回匹配元素的子元素集合。

.parent()：返回匹配元素的直接父元素。

.siblings()：返回匹配元素的兄弟元素集合。

.next()：返回匹配元素的下一个同级元素。

.prev()：返回匹配元素的上一个同级元素。

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

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

<div>
  <div>红色盒子</div>
  <div>白色盒子1</div>
  <div>白色盒子2</div>
</div>
<div>
  <div>红色盒子2</div>
  <div>白色盒子3</div>
  <div>白色盒子4</div>
</div>

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

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

总结

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

以上是 jQuery 遍历和 .add()

추가 메소드란 무엇인가요?

.add() 메소드는 jQuery에서 두 개 이상의 컬렉션을 병합하는 데 사용하는 메소드입니다. 한 컬렉션의 요소를 다른 컬렉션에 추가합니다. 새 세트에는 원래 세트의 모든 요소와 새 요소가 포함됩니다. 🎜🎜.add() 메서드는 여러 매개변수를 허용할 수 있으며, 각 매개변수는 CSS 선택기, DOM 요소 또는 DOM 요소 집합입니다. 이러한 매개변수는 원본 컬렉션에 추가됩니다. 🎜🎜다음 HTML 구조를 고려하세요. 🎜rrreee🎜모든 <p></p> 요소와 <div> 요소를 선택하고 새 컬렉션에 추가하려면 다음을 사용하세요. <code>.add() 메소드는 다음과 같습니다: 🎜rrreee🎜이제 $newCollection에는 모든 <p></p> 및 &lt ; div> 요소입니다. 🎜

DOM 요소 탐색

🎜jQuery 탐색 함수는 주어진 선택기와 일치하는 DOM 요소가 포함된 jQuery 객체를 반환합니다. 이러한 함수는 컬렉션을 필터링하고, 하위 요소를 검색하고, 일치하는 DOM 요소를 찾을 수 있습니다. 🎜🎜다음은 가장 일반적으로 사용되는 jQuery 탐색 방법입니다. 🎜

• .children(): 일치하는 요소의 하위 요소 컬렉션을 반환합니다.
• .parent(): 일치하는 요소의 직접 상위 요소를 반환합니다.
• .siblings(): 일치하는 요소의 형제 요소 집합을 반환합니다.
• .next(): 일치하는 요소의 다음 형제 요소를 반환합니다.
• .prev(): 일치하는 요소의 이전 형제 요소를 반환합니다.

🎜이 메서드에서 반환된 DOM 요소 컬렉션은 다른 jQuery 메서드를 사용하여 추가로 탐색하거나 처리할 수 있습니다. 🎜🎜다음 예에서는 .siblings() 메서드를 사용하여 클래스 이름이 .red인 모든 형제 요소를 찾는 방법을 보여줍니다. 🎜rrreeerrreee🎜이 예에서는 . 빨간색 요소의 모든 형제 요소의 배경색은 회색으로 설정됩니다. 🎜

요약

🎜jQuery는 DOM 요소를 탐색하여 HTML과 CSS를 편리하게 조작할 수 있는 다양한 방법을 제공합니다. .add() 메서드는 두 개 이상의 요소 컬렉션을 결합할 수 있습니다. 🎜🎜이상은 jQuery 탐색 및 .add() 메서드에 대한 간략한 소개입니다. 🎜