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中导航和操作元素。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐