jquery 选择器
高级选择器方法:
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="提交">
来源: http://www.bubuko.com/infodetail-2296945.html