jQuery遍历基础知识梳理

什么是遍历?
jQuery遍历,意为“移动”,用于根据其相对于其他元素的关系来“查找”(或选取)HTML元素。以某项选择开始,并沿着这个选择移动,直到抵达期望的元素为止。
通过jQuery遍历,能够从被选(当前)元素开始,在家族树向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对DOM进行遍历。
家族树:
这里写图片描述

祖先
向上遍历DOM树
parent()-方法返回被选元素的直接父元素。只向上一级对DOM树进行遍历。
parents()-方法返回被选元素的所有祖先元素,一路向上直到文档的根元素(<html>)。也可以使用可选参数来过滤对祖先元素的搜索。
例如:$("span").parents("ul");
解释:返回所有<span>元素的所有祖先,并且它是<ul>元素。
parentsUntil()-方法返回介于两个给定元素之间的所有祖先元素。
例如:$("span").parentsUntil("div");
解释:返回介于<span><div>元素之间的<span>的所有祖先元素。

后代
向下遍历DOM树
children()-方法返回被选元素的所有直接子元素。只向下一级DOM树进行遍历。
例如:$("div").children();
解释:返回每个<div>元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
例如:$("div").children("p.1");
解释:返回类名为“1”的所有<p>元素,并且他们是<div>的直接子元素。
find()-方法返回被选元素的后代元素,一路向下直到最后一个后代。
例子:$("div").find("span");//返回属于<div>后代的所有<span>元素
例子:$("div").find("*");//返回<div>的所有后代

同胞
在DOM树中水平遍历
siblings()-方法返回被选元素的所有同胞元素。
例子:$("h2").siblings();//返回<h2>所有同胞元素
可以使用可选参数来过滤对同胞元素的搜索。
例子:$("h2").siblings("p");//返回属于<h2>的同胞元素的所有<p>元素

next()-方法返回被选元素的下一个同胞元素。只返回一个元素。
例子:$("h2").next();
nextAll()-方法返回被选元素的所有跟随的同胞元素。
nextUntil()-方法返回介于两个给定参数之间的所有跟随的同胞元素(不包含)
prev()、prevAll()和prevUntil()方法与上边的方法和工作方式相似,向前。

过滤
最基本的三个过滤方法:first(),last()和eq(),允许基于其在一组元素中的位置来选择一个特定的元素。
其他过滤方法:filter()和not()允许选取匹配或不匹配某项指定标准的元素。

first()-方法返回被选元素的首个元素。
例子:$("div p").first();//选取首个<div>元素内部的第一个<p>元素
last()-方法返回被选元素的最后一个元素。
例子:$("div p").last();//选择最后一个<div>元素中的最后一个<p>元素
eq()-方法返回被选元素中带有指定索引号的元素。
例子:$("p").qe(1);//选取第二个<p>元素(索引号1)

filter()-方法允许规定一个标准,不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
例子:$("p").filter(".intro");//返回带有类名"intro"的所有<p>元素
not()-方法返回不匹配标准的所有元素。与filter()方法相反。
例子:$("p").not(".intro");//返回不带有类名"intro"的所有<p>元素

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值