jQuery（二）高级选择器

最新推荐文章于 2024-09-06 10:19:06 发布

Se7en丶

最新推荐文章于 2024-09-06 10:19:06 发布

阅读量291

点赞数

分类专栏：学习笔记 jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/u012492764/article/details/53085375

版权

学习笔记同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery中高级选择器的使用方法，包括prev(), prevAll(), nextUntil(), siblings()等选择器的具体应用实例，以及如何通过这些选择器精确地定位DOM元素。

摘要由CSDN通过智能技术生成

jQuery高级选择器

1、prev() & prevAll()

//
$('#box').prev('p').css('color','red');    //选取同级上一个元素
$('#box').prevAll('p').css('color','red'); //选取id='box'的元素之前的所有同级p元素

2、prevUntil() & nextUntil()

//同级上非指定元素选定，遇到p则停止（选择id='box'元素和p元素之间的元素）
$('#box').prevUntil('p').css('color','red');   
//同级下非指定元素选定，遇到则停止（选择id='box'元素和p元素之间的元素）
$('#box').nextUntil('p').css('color','red');

3、siblings()集成了prevAll()好nextAll()的功能

//同级上下所有元素选定
$('#box').siblings('p').css('color','red');    
//          ||  等价于
$('#box').prevAll('p').css('color','red'); 
$('#box').nextAll('p').css('color','red');

4、过滤选择器

//选择元素li的第三个元素，eq等于|gt大于|lt小鱼
$('li:eq(2)').css('background','#ccc');    
//或
$('li').eq(2).css('background','#ccc');    

//选取li元素不含class为red的元素
$('li').not('.red').css('background','#ccc');
//或
$('li：not(.red)').css('background','#ccc');

//has()选择子元素含有某属性的元素
$('ul').has('.red').css('background','#ccc');