JQuery遍历
jQuery遍历知识点总结
jQuery提供了多种强大的DOM遍历方法,可以方便地查找和操作HTML元素。以下是主要的jQuery遍历知识点:
1. 基础遍历方法
向上遍历
`parent()` - 返回直接父元素
`parents()` - 返回所有祖先元素
`parentsUntil()` - 返回介于两个元素之间的所有祖先元素
向下遍历
`children()` - 返回所有直接子元素
`find()` - 返回后代元素中匹配选择器的元素
### 同级遍历
`siblings()` - 返回所有同级元素
`next()` - 返回下一个同级元素
`nextAll()` - 返回后面所有同级元素
`nextUntil()` - 返回介于两个元素之间的所有后续同级元素
`prev()` - 返回上一个同级元素
`prevAll()` - 返回前面所有同级元素
`prevUntil()` - 返回介于两个元素之间的所有前面同级元素
2. 过滤方法
基本过滤
`first()` - 返回第一个元素
`last()` - 返回最后一个元素
`eq()` - 返回指定索引位置的元素
`filter()` - 返回匹配选择器或通过函数测试的元素
`not()` - 返回不匹配选择器的元素
### 内容过滤
`has()` - 返回包含特定后代的元素
`contains()` - 返回包含指定文本的元素
`empty()` - 返回没有子元素的元素
`parent()` - 返回至少有一个子元素的元素
可见性过滤
`:visible` - 选择可见元素
`:hidden` - 选择隐藏元素
3. 其他有用的遍历方法
`add()` - 将元素添加到现有集合
`addBack()` - 将堆栈中的前一组元素添加到当前集合
`end()` - 结束当前链中最近的过滤操作
`is()` - 检查当前元素集合是否匹配选择器
`map()` - 将集合中的每个元素传递给函数,构建包含返回值的jQuery对象
`slice()` - 将匹配元素集合缩减为指定范围的子集
4. 遍历示例
javascript
//获取所有li元素的直接父元素
$("li").parent();
// 获取div内所有p元素
$("div").find("p");
// 获取class为active的元素的下一个同级元素
$(".active").next();
// 获取表格中偶数行
$("tr:even");
// 获取包含文本"jQuery"的元素
$(":contains('jQuery')");
// 检查元素是否有特定类
if ($("#myDiv").hasClass("active")) {
// 执行操作
}
// 链式遍历
$("ul")
.find("li")
.first()
.addClass("first-item")
.end()
.last()
.addClass("last-item");
掌握这些遍历方法可以让你更高效地在DOM中导航和操作元素。
更多推荐



所有评论(0)