jQuery选择器介绍：eq（）、next（）、nextAll（）、prev（）、prevAll（）、parents（）、siblings（）、children（）、find（）、index（）

陌依依

已于 2022-11-11 10:48:49 修改

阅读量1.2k

点赞数

分类专栏： web前端开发文章标签：前端 javascript jquery 开发语言

于 2022-11-10 14:30:43 首次发布

本文链接：https://blog.youkuaiyun.com/a1598452168YY/article/details/127782307

版权

本文详细介绍了jQuery的选择器，包括基本选择器、特殊选择器和二次筛选方法。在基本选择器中，jQuery支持CSS选择器。特殊选择器如`first`, `last`, `eq()`等提供了更灵活的元素选取方式。二次筛选方法如`next()`, `nextAll()`, `prev()`, `prevAll()`, `parents()`, `siblings()`, `children()`, `find()`, `index()`等则允许在已选取的元素集合上进行进一步操作。文中通过示例代码展示了这些方法的使用场景和效果。" 112519141,10296352,CentOS 7内核升级踩坑与解决：从问题到复现,"['CentOS', '内核升级', '系统管理', '服务器运维', '故障排查']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、 jQuery基本选择器介绍：

jQuery选择器分为：基本选择器、特殊选择器、筛选方法；
选择器选择出来的标签，返回值是伪数组；
基本选择器：
基本选择器格式：$(“css选择器格式”) ；
这里jQuery选择器括号里面，css样式选择方式在这里都可以用，比如css里面选择器方式有：“#box”（id选择器）、“.box”(class选择器）、“ul li”（选择父标签下面的子标签）等等；

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
    <div id="box"></div>
    <script src="./lib/jquery-3.6.1.js"></script>
    <script>
        console.log($("ul li"))//选择所以li标签，返回伪数组
        console.log($("#box"))//返回伪数组
    </script>
</body>

结果：

2、特殊选择器

特殊选择器指的是不能用css选择器样式了，而且css选择器选择子标签是索引值是从1开始；
而jQuery和js一样，选择器索引值是从0开始算起；
特殊选择器有自己一套选择机制；
拿“选择ul下的li标签”为例：

选择ul下第一个li标签：first

console.log($("ul li:first"))//选择第一个标签

选择ul下最后一个li标签：last

console.log($("ul li:last"))//选择最后一个标签

选择ul下任意一个孩子li：eq（选择孩子的索引）

console.log($("ul li:eq(索引)"))//选择索引为0的li标签

eq的用法：传变量来选择子标签：

let index = 2
console.log($(`ul li:eq(${index})`))//eq的用法

eq括号里不仅仅是固定索引，也可以通过这种传变量的方式确实索引，选择标签；

选择ul下“索引为奇数”的li标签：

最低0.47元/天解锁文章