jquery便利
jQuery遍历方法
jQuery提供了多种遍历DOM元素的方法,可以方便地查找和操作元素。
each()方法
each()方法用于遍历jQuery对象中的每个元素。语法如下:
$(selector).each(function(index, element){
// 操作代码
});
index参数表示当前元素的索引,element参数表示当前DOM元素。
find()方法
find()方法用于在当前元素的后代中查找匹配的元素。语法如下:
$(selector).find(filter)
filter参数指定要查找的元素选择器。
children()方法
children()方法返回被选元素的所有直接子元素。语法如下:
$(selector).children(filter)
可选参数filter用于筛选子元素。
parent()方法
parent()方法返回被选元素的直接父元素。语法如下:
$(selector).parent(filter)
可选参数filter用于筛选父元素。
parents()方法
parents()方法返回被选元素的所有祖先元素。语法如下:
$(selector).parents(filter)
可选参数filter用于筛选祖先元素。
siblings()方法
siblings()方法返回被选元素的所有兄弟元素。语法如下:
$(selector).siblings(filter)
可选参数filter用于筛选兄弟元素。
next()和prev()方法
next()方法返回被选元素的下一个兄弟元素,prev()方法返回前一个兄弟元素。语法如下:
$(selector).next(filter)
$(selector).prev(filter)
可选参数filter用于筛选兄弟元素。
filter()方法
filter()方法从匹配元素集合中筛选出符合条件的元素。语法如下:
$(selector).filter(criteria)
criteria可以是选择器、函数或jQuery对象。
not()方法
not()方法从匹配元素集合中移除符合条件的元素。语法如下:
$(selector).not(criteria)
criteria可以是选择器、函数或jQuery对象。

遍历示例
// 遍历所有段落并添加类名
$("p").each(function(){
$(this).addClass("highlight");
});
// 查找div内所有span元素
$("div").find("span").css("color", "red");
// 获取列表项的直接子元素
$("li").children().addClass("child-item");
// 获取按钮的父元素
$("button").parent().addClass("btn-container");
// 获取表单的所有祖先元素
$("form").parents().addClass("form-ancestor");
// 获取当前元素的兄弟元素
$(".active").siblings().removeClass("active");
// 获取下一个元素
$(".current").next().addClass("next-item");
// 筛选具有特定类的元素
$("div").filter(".special").css("border", "1px solid blue");
// 移除特定元素
$("p").not(".exclude").hide();
这些方法可以组合使用,构建复杂的DOM遍历和操作逻辑。






