jQuery 遍历方法学习笔记
1. each() 方法
each() 方法可以用来遍历数组或对象中的所有元素，对每个元素执行指定的函数。
语法：
Copy Code$(selector).each(function(index,element){
// 在这里编写需要执行的代码
});
参数说明：
index：表示当前遍历的元素在集合中的索引。element：表示当前遍历的元素本身。
实例代码：
Copy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var arr = ['apple', 'banana', 'orange'];
$.each(arr, function(index, value){
console.log(index + ': ' + value);
});
});
</script>
</head>
<body>
</body>
</html>
输出结果：
Copy Code0: apple
1: banana
2: orange
2. map() 方法
map() 方法可以用来遍历数组或对象中的所有元素，并通过函数处理后返回新的数组。
语法：
Copy Code$(selector).map(function(index, element){
// 在这里编写需要执行的代码
});
参数说明：
index：表示当前遍历的元素在集合中的索引。element：表示当前遍历的元素本身。
实例代码：
Copy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var arr = [1, 2, 3];
var newArr = $.map(arr, function(value, index){
return value * 2;
});
console.log(newArr);
});
</script>
</head>
<body>
</body>
</html>
输出结果：
Copy Code[2, 4, 6]
3. grep() 方法
grep() 方法可以用来过滤数组中的元素，并返回符合条件的元素。
语法：
Copy Code$.grep(array, function(element, index){
// 在这里编写需要执行的代码
});
参数说明：
array：表示要遍历的数组。element：表示当前遍历的元素本身。index：表示当前遍历的元素在集合中的索引。
实例代码：
Copy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var arr = [1, 2, 3, 4, 5];
var newArr = $.grep(arr, function(element, index){
return element > 2;
});
console.log(newArr);
});
</script>
</head>
<body>
</body>
</html>
输出结果：
Copy Code[3, 4, 5]
4. find() 方法
find() 方法可以用来查找符合指定选择器的后代元素。
语法：
Copy Code$(selector).find(subSelector);
参数说明：
selector：表示要查找的元素。subSelector：表示要查找的后代元素的选择器。
实例代码：
Copy Code<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
var liEle = $("ul").find("li");
console.log(liEle.text());
});
</script>
</head>
<body>
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橘子</li>
</ul>
</body>
</html>
输出结果：
Copy Code苹果 香蕉 橘子
以上是 jQuery 遍历方法的主要学习笔记，希望对你有所帮助。