jQuery高级选择器

Posted 2020-10-06

高级选择器方法：

find()、children()、next()、nextAll()、prev()、prevAll()、siblings()、nextUntil()、prevUntil()

这些方法如果不传递参数，相当于传递了(‘*‘)，即所有节点。如果传递了参数，例如

find(‘p‘), next(‘a‘)，则表示选择指定的标签元素。

find()：选择正在处理的元素的后代元素

find(‘p‘)：选择正在处理的元素的后代元素中的p元素

children()： 选择正在处理的元素的所有儿子元素，不包含孙子元素和重孙子元素

children(‘p‘)： 选择正在处理的元素的所有儿子元素中的<p></p>元素，不包含孙子元素中的p元素和重孙子元素中的p元素

next()： 选择正在处理的元素的同级元素的下一个元素，遇到则停止选择

next(‘p’)： 选择正在处理的元素的同级元素下一个元素，如果该元素是p元素，则选择，如果没有下级元素或者下级元素第一个不是p元素，则不选择

例如：

$(‘#box‘).next(‘p‘).css(‘color‘, ‘red‘)

nextAll()：选择正在处理元素的同级下的所有元素，相当于nextAll(‘*’)

nextAll(‘p‘)：选择正在处理元素的同级下的所有p元素

prev()和prevAll()正好和next()、nextAll()相反,是向上选择

siblings()：选择正在处理的元素的同级的所有上面的元素下面的元素，例如：

$(‘#box‘).siblings(‘p‘).css(‘color‘, ‘red‘)

它等于

$(‘#box‘).prevAll(‘p‘).css(‘color‘, ‘red‘)
$(‘#box‘).nextAll(‘p‘).css(‘color‘, ‘red‘)

nextUntil(‘p’)：选择正在处理元素的同级下的所有元素，直到遇到p元素后停止选择。如果同级下没有p元素，则选择所有元素。

例如：

//html代码
<p>p</p>
<p>p</p>
<div id="box">div</div>
<a href="">aaa</a>
<div>div</div>
<input type="" value="提交">
<p>p</p>
<p>p</p>
<p>p</p>

//JS代码
$(function(){
    $(‘#box‘).nextUntil(‘p‘).css(‘color‘, ‘red‘)
})

搜索到的元素为

<a href="">aaa</a>
<div>div</div>
<input type="" value="提交">

本文出自 “zengestudy” 博客，请务必保留此出处http://zengestudy.blog.51cto.com/1702365/1963490