jQuery-遍历

  jQuery 遍历,在DOM树中移动,用于根据其相对于其他元素的关系来 查找 或 选取 HTML元素,以某项选择开始,并沿着这个选择移动,直到你想要的元素上。

 遍历祖先

  遍历祖先,就是向上遍历DOM树,

  • parent() - 返回被选元素的直接父元素,只会向上一级对DOM树进行遍历。
  • parents() - 返回被选元素的所有祖先与那苏,一路向上直到文档的根节点<html>。
  • parentsUntil() - 返回介于两个给定元素之间的所有祖先元素。

 

1 //parents方法可以传递想要指定的祖先元素ul。如果不传的话,则默认是所有的祖先元素。
2 $("span").parents("ul").css({"color":"red","border":"2px solid red"});
3 
4 //这是查找span  --  div 之间的所有的祖先元素。如果祖先元素中含有多个div,则是向上查找遇到的第一个div之间的所有祖先元素。
5 $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"});

 

 遍历后代

  遍历后代,是向下遍历DOM树,以查找元素的后代。

  • children() - 返回被选元素的所有直接子元素,该方法只会向下一级对DOM树遍历。
  • find() - 返回被选元素的所有后代元素,一路向下,直到最后一个后代。
1 //查找div元素的后代元素,也可以传进去参数进行过滤,使其查找后代元素中的 类名 为 test 的 p 标签
2 $("div").children("p.text");
3 
4 //返回属于 <div> 后代的所有 <span> 元素。也可以传递一个通配符 * 
5 $("div").find("span");

 遍历兄弟

  在DOM树中遍历具有相同父元素的兄弟节点。

  • siblings() - 返回被选元素的所有兄弟元素。
  • next() - 返回被选元素的下一个兄弟元素。
  • nextAll() - 返回被选元素的之后的所有兄弟元素。
  • nextUntil() - 返回介于给定两个参数之间的所有跟随的兄弟元素。
  • prev() - 返回被选元素的上一个兄弟元素。
  • prevAll() - 返回被选元素的之前的所有兄弟元素。
  • prevUntil() - 返回介于给定两个参数之间的所有前面的兄弟元素。
1 //默认返回被选元素的所有兄弟元素,也可以传递一个参数来指定兄弟元素
2  $("h2").siblings(”div“);
3 
4 //返回 <h2> 的下一个同胞元素
5 $("h2").next();
6 
7 //返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
8 $("h2").nextUntil("h6");

 过滤-缩小搜索元素的范围

  几个最基本的过滤方法是:

  • first() - 返回被选元素的 匹配的 首个元素
  • last() - 返回被选元素的 匹配的 最后一个元素
  • eq() - 返回被选元素中带有指定索引号的元素,索引是从0开始的。
  • filter() - 规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
  • not() - 返回不匹配标准的所有元素
//返回带有类名test的所有p元素
 $("p").filter(".test");

//返回不带有类名 "test" 的所有 <p> 元素:
$("p").not(".test");

 

posted @ 2020-09-02 10:43  梦为湘子  阅读(113)  评论(0编辑  收藏  举报