Jquery 컬렉션을 탐색하는 방법

jQuery는 HTML 문서 및 DOM 요소 작업을 더 간단하고 빠르며 쉽게 유지 관리할 수 있게 해주는 인기 있는 JavaScript 라이브러리입니다. 선택기와 작업 방법을 통해 개발자는 페이지의 요소에 빠르게 액세스하고 작업할 수 있어 개발자의 개발 효율성이 향상됩니다. 개발 중에는 속성 수정, 노드 추가 또는 삭제 등 페이지의 요소 배치를 처리해야 하는 경우가 많습니다. 이때 배치 작업을 구현하기 위해 jQuery 컬렉션 순회를 사용해야 합니다. 그렇다면 jQuery 컬렉션을 탐색하는 방법은 무엇입니까?

jQuery 컬렉션은 다양한 선택기를 통해 얻을 수 있는 DOM 요소 개체의 배열입니다. 다음과 같습니다:

var $list = $('ul li'); // 获取所有ul下的li元素

jQuery 객체를 얻은 후 jQuery에서 제공하는 몇 가지 메서드를 사용하여 컬렉션을 탐색하여 원하는 효과를 얻을 수 있습니다. 다음은 일반적으로 사용되는 jQuery 컬렉션 순회 메서드입니다.

1. each()

each()

each()方法用于遍历数组或对象，它可以迭代以上获取到的$list集合，对每个元素执行指定的函数。

语法：

$.each(array, function(index, value) {
  // 处理函数体
});

示例代码：

$list.each(function(index) {
  console.log(index + ": " + $(this).text());
});

其中，each()方法的参数是一个函数，该函数将在each()方法中遍历的每个元素上执行。该函数提供两个参数：

• index：当前元素的索引。
• value：当前元素的值。

2. map()

map()方法也可以用于遍历数组，它将一个数组转换成另一个数组，执行函数后返回一个新数组。

语法：

$.map(array, function(value, indexOrkey) {
  // 处理函数体
});

示例代码：

var newArr = $list.map(function(index) {
  return $(this).text();
});
console.log(newArr);

3. filter()

filter()方法用于筛选集合中满足指定条件的元素。它可以根据回调函数返回的值来确定是否将该元素包含在新的集合中。

语法：

$(selector).filter(function(index){
  // 处理函数体
});

示例代码：

var $filtered = $list.filter(function(index) {
  return $(this).hasClass('active');
});
console.log($filtered);

filter()方法会返回满足条件的元素，这些元素可以是与原来的集合中的元素相同的对象，也可以是一个新的jQuery对象。

4. not()

not()方法排除集合中指定的元素，返回一个不包含指定元素的新的集合。

语法：

$(selector).not(selector);

示例代码：

var $notFiltered = $list.not('.disabled');
console.log($notFiltered);

not()方法还可以接受一个函数作为参数，该函数将运行在每个元素上，如果返回的值是true，那么该元素将会被包含在新的集合中。

var $notFiltered = $list.not(function(index) {
  return $(this).hasClass('active');
});
console.log($notFiltered);

5. find()

find()方法筛选当前集合中的所有后代元素，返回匹配指定选择器的元素集合。

语法：

$(selector).find(selector);

示例代码：

var $found = $list.find('a');
console.log($found);

在这些示例中，我们看到jQuery提供了多种方法来遍历集合，这使得在处理一个jQuery集合时，代码编写更加简单。既然这些方法都是从Array.prototype和Object.prototypeeach() 메서드는 배열을 순회하는 데 사용됩니다. 위에서 얻은 $list 컬렉션을 반복하고 각 요소에 대해 지정된 함수를 실행할 수 있습니다.

🎜Syntax: 🎜rrreee🎜샘플 코드: 🎜rrreee🎜그 중 each() 메서드의 매개변수는 Each() 메서드에서 탐색되는 각 요소에 대해 실행되는 함수입니다. 이 함수는 두 가지 매개변수를 제공합니다: 🎜

🎜index: 현재 요소의 인덱스. 🎜value: 현재 요소의 값입니다.

🎜map()

🎜map() 메소드도 가능합니다. 배열을 순회하는 경우 한 배열을 다른 배열로 변환하고 함수 실행 후 새 배열을 반환하는 데 사용됩니다. 🎜🎜구문: ​​🎜rrreee🎜샘플 코드: 🎜rrreee

🎜filter()

🎜filter() 메서드는 지정된 조건을 충족하는 컬렉션의 요소를 필터링하는 데 사용됩니다. 콜백 함수에서 반환된 값을 기반으로 새 컬렉션에 요소를 포함할지 여부를 결정할 수 있습니다. 🎜🎜구문: ​​🎜rrreee🎜샘플 코드: 🎜rrreee🎜 filter() 메서드는 조건을 충족하는 요소를 반환합니다. 이러한 요소는 원래 컬렉션의 요소와 동일한 개체일 수 있습니다. 새로운 jQuery 객체일 수 있습니다. 🎜

🎜not()

🎜not() 메서드는 컬렉션에서 지정된 요소를 제외하고 지정된 요소를 포함하는 새 컬렉션이 아닙니다. 🎜🎜구문: ​​🎜rrreee🎜샘플 코드: 🎜rrreee🎜 not() 메서드는 함수를 매개변수로 허용할 수도 있으며, 반환된 값이 true이면 각 요소에서 실행됩니다. 요소가 새 컬렉션에 포함됩니다. 🎜rrreee

🎜find()

🎜find() 메서드는 현재 컬렉션의 모든 하위 요소를 필터링합니다. 지정된 선택기와 일치하는 요소 컬렉션을 반환합니다. 🎜🎜구문: ​​🎜rrreee🎜샘플 코드: 🎜rrreee🎜이 예제에서 jQuery는 컬렉션을 반복하는 다양한 방법을 제공하므로 jQuery 컬렉션을 처리할 때 코드 작성이 더 간단해집니다. 이러한 메서드는 Array.prototype 및 Object.prototype에서 상속되므로 jQuery에서 기본 JavaScript와 동일한 방식으로 작동합니다. 따라서 일단 마스터하면 jQuery에서 컬렉션으로 작업할 수 있을 뿐만 아니라 이를 사용하여 기본 JavaScript에서 작업할 수도 있습니다. 🎜

위 내용은 Jquery 컬렉션을 탐색하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!