jQuery获取父级元素、同级元素、子元素、过滤

[size=medium][b]父级元素:[/b][/size]

<body>body (曾曾祖父)
<div>div (曾祖父)
<ul>ul (祖父)
<li>li (直接父)
<span>span</span>
</li>
</ul>
</div>
</body>

1.parent() 方法返回被选元素的直接父元素。
2.parents() 方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
3.parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。

$(document).ready(function(){
$("span").parentsUntil("div");
});

4.closest()
closest会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。
closest和parents的主要区别是:1,前者从当前元素开始匹配寻找,后者从父元素开始匹配寻找;2,前者逐级向上查找,直到发现匹配的元素后 就停止了,后者一直向上查找直到根元素,然后把这些元素放进一个临时集合中,再用给定的选择器表达式去过滤;3,前者返回0或1个元素,后者可能包含0 个,1个,或者多个元素。
closest对于处理事件委派非常有用。

[size=medium][b]同级元素:[/b][/size]

1.siblings() 方法返回被选元素的所有同胞元素。

$("h2").siblings();

返回 <h2> 的所有同胞元素
$("h2").siblings("p");

返回属于 <h2> 的同胞元素的所有 <p> 元素
2.next() 方法返回被选元素的下一个同胞元素。
3.nextAll() 方法返回被选元素的所有跟随的同胞元素。
4.nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
$("h2").nextUntil("h6");

返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
5.prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似,只不过方向相反而已

[size=medium][b]子元素:[/b][/size]

1.children() 方法返回被选元素的所有直接子元素。
也可以使用可选参数来过滤对子元素的搜索。
$("div").children("p.select");

返回类名为 "select" 的所有 <p> 元素,并且它们是 <div> 的直接子元素
2.find() 方法返回被选元素的后代元素,一路向下直到最后一个后代。

[size=medium][b]过滤:[/b][/size]

1.first() 方法返回被选元素的首个元素。
2.last() 方法返回被选元素的最后一个元素。
3.eq() 方法返回被选元素中带有指定索引号的元素。
4.filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。

$("p").filter(".intro");

返回带有类名 "intro" 的所有 <p> 元素
5.not() 方法返回不匹配标准的所有元素。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值