目录
- 基础概念
- 遍历方法
- 筛选方法
- 高级用法
- 高级遍历与筛选技巧
- 性能优化
- 动态内容处理与事件委托
- 高级特性与插件
学习jQuery的遍历与筛选功能，可以让你更高效地操作DOM元素。以下是一个概览性的教程，逐步介绍jQuery中关键的遍历和筛选方法，并通过示例代码进行说明。
基础概念
jQuery选择器：用于选取页面上的元素，如$("#id")选取ID为id的元素，$(".class")选取所有class为class的元素。
- 遍历：在已选元素集合内移动，访问每个匹配元素。
- 筛选：从已选元素集合中，根据特定条件过滤出新的元素集合。
遍历方法
1. .each()
遍历匹配元素集合，并对每个元素执行函数。
$("p").each(function(index, element){
console.log("第" + (index+1) + "个段落: ", $(element).text());
});
2. .map()
将匹配元素集合转换为新的数组结构，每个元素调用函数返回值作为新数组的一项。
var texts = $("p").map(function(){
return $(this).text();
}).get(); // get()将jQuery对象转换为原生JavaScript数组
console.log(texts);
筛选方法
1. .filter(selector|function)
基于选择器或函数筛选元素。
// 选择文本为"Hello"的段落
$("p").filter(":contains('Hello')").css("color", "red");
2. .not(selector|function)
从匹配元素集合中移除符合选择器或函数条件的元素。
$("p").not(":first").hide(); // 隐藏除了第一个以外的所有段落
3. .has(selector)
筛选含有特定后代元素的元素。
$("div").has("p").addClass("has-paragraph"); // 给包含段落的div添加类
高级用法
- 链式操作：jQuery支持链式调用，可以在一行代码中完成选择、遍历、筛选和操作等多个步骤。
$("ul li").eq(2).addClass("active").siblings().removeClass("active");
- 自定义筛选：通过
.filter()传递函数实现复杂的筛选逻辑。
高级遍历与筛选技巧
1. 多重筛选
结合多个筛选方法，实现更复杂的逻辑筛选。
// 选取class为"container"中索引为偶数且包含文本"example"的段落
$(".container p:even:contains('example')")
.css("background-color", "lightblue");
2. 属性筛选
基于元素的属性值进行筛选。
// 选取所有href属性以"https://"开头的a标签
$("a[href^='https://']").addClass("external-link");
3. 可见性筛选
根据元素的可见性状态进行筛选。
// 显示所有隐藏的段落
$("p:hidden").show();
4. 表单元素筛选
针对表单元素有专门的筛选器，如:checked, :selected等。
// 获取所有被选中的复选框
$("input[type='checkbox']:checked").each(function(){
console.log($(this).val());
});
5. 自定义数据属性筛选
利用HTML5的自定义数据属性(data-*)进行筛选。
<div data-category="news">...</div>
<div data-category="sports">...</div>
// 筛选data-category为'sports'的元素
$("[data-category='sports']").addClass("sports-category");
6. 组合筛选与遍历
结合.each()或.map()进行复杂的处理。
// 对每个具有data-count属性的元素，将其值增加1并更新
$("[data-count]").each(function(){
var count = parseInt($(this).attr("data-count")) + 1;
$(this).attr("data-count", count);
});
性能优化
- 减少DOM操作：尽量合并筛选和操作，避免在同一元素上多次操作。
- 使用ID选择器：ID选择器比类选择器和属性选择器更快，尽可能优先使用。
- 缓存jQuery对象：重复使用的jQuery对象应缓存，避免重复查找。
结合JavaScript原生方法
虽然jQuery提供了强大的API，但在某些性能敏感的场景下，结合JavaScript原生方法（如querySelectorAll, Array.from, forEach等）可能会带来更好的性能表现。
// 使用原生JavaScript配合jQuery
var elements = document.querySelectorAll(".myClass");
Array.from(elements).forEach(function(element){
$(element).doSomething();
});
动态内容处理与事件委托
当处理动态添加的内容时，传统的直接绑定事件的方式可能失效，这时就需要用到事件委托。
1. 事件委托
事件委托允许你将事件监听器绑定到父元素上，该监听器能够捕获其子元素（包括未来动态添加的子元素）触发的事件。
// 假设动态添加<li>到<ul id="list">
$("#list").on("click", "li", function(){
console.log("Clicked on:", $(this).text());
});
2. 链式委托
在某些情况下，你可能需要为不同类型的子元素绑定不同的处理函数，这可以通过链式委托来实现。
$("#list").on({
"click": function(e){
if(e.target.tagName === "BUTTON"){
console.log("Button clicked.");
}
},
"mouseover": function(e){
if(e.target.tagName === "SPAN"){
$(e.target).css("color", "red");
}
}
}, "li button, li span");
高级特性与插件
1. 链式操作优化
虽然链式操作简洁易读，但过度使用可能导致代码难以维护。合理规划，保持每条链的长度适中。
2. 延迟执行（.deferred）
jQuery的.Deferred()对象可用于管理异步操作，如AJAX请求的成功、失败和完成回调。
var dfd = $.Deferred();
dfd.done(function(){ /* 成功处理 */ })
.fail(function(){ /* 失败处理 */ })
.always(function(){ /* 总是执行 */ });
// 模拟异步操作完成
setTimeout(function(){
dfd.resolve(); // 或dfd.reject()表示失败
}, 2000);
3. 插件开发与使用
jQuery插件系统允许你扩展jQuery的功能。编写插件可以封装常用功能，提高代码复用性。
$.fn.myPlugin = function(options){
var settings = $.extend({
color: "red",
size: "14px"
}, options);
return this.each(function(){
$(this).css({
"color": settings.color,
"font-size": settings.size
});
});
};
// 使用插件
$("p").myPlugin({color: "blue", size: "18px"});
