AI智能应用开发（Java）
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
跨境电商
电商视觉设计
软件测试
新媒体+短视频
集成电路应用开发
C/C++
狂野架构师
IP短视频
jQuery选择器大全【jQuery选择器分类及用法】
更新时间:2021年07月19日15时42分 来源:大阳城app官网入口 浏览次数:
jQuery中的选择器非常多，对于初学者来说，并没有必要全部掌握，只记住常用的选择器即可。当需要使用其他不熟悉的选择器时，可以通过查阅文档查看具体的解释。为了方便读者查阅，接下来简单介绍一些其他在开发中可能会用到的选择器。
1. 获取同级元素
| 选择器 | 功能描述 | 示例 |
|---|---|---|
| prev + next | 获取当前元素紧邻的下一个同级元素 | $("div + .title")获取紧邻 的下一个class名为title的兄弟节点 |
| prev ~ siblings | 获取当前元素后的所有同级元素 | $(".bar ~ li")获取class名为bar的元素后的所有同级元素节点 |
2. 筛选元素
在jQuery中还有一些选择器可以筛选元素，如表2所示。
表2 筛选元素
| 选择器 | 功能描述 | 示例 |
|---|---|---|
| :gt(index) | 获取索引大于index的元素 | $("li:gt(3)")获取索引大于3的所有 |
| :lt(index) | 获取索引小于index的元素 | $("li:lt(3)")获取索引小于3的所有 |
| :not(seletor) | 获取除指定的选择器外的其他元素 | $("li:not(li:eq(3))")获取除索引为3外的所有 |
| :focus | 匹配当前获取焦点的元素 | $("input:focus")匹配当前获取焦点的元素 |
| :animated | 匹配所有正在执行动画效果的元素 | $("div:not(:animated)")匹配当前没有执行动画的 元素 |
| :target | 选择由文档URI的格式化识别码表示的目标元素 | 若URI为http://example.com/#foo，则$("div:target")将获取元素 |
| :contains(text) | 获取内容包含text文本的元素 | $("li:contains('js')")获取内容中含“js”的 |
| :empty | 获取内容为空的元素 | $("li:empty")获取内容为空的 |
| :has(selector) | 获取内容包含指定选择器的元素 | $("li:has('a')")获取内容中含元素的所有 |
| :parent | 选取带有子元素或包含文本的元素 | $("li:parent")选取带有子元素或包含文本的li元素 |
| :hidden | 获取所有隐藏元素 | $("li:hidden")获取所有隐藏的 |
| :visible | 获取所有可见元素 | $("li:visible")获取所有可见的 |
jQuery中还提供了根据元素的属性获取指定元素的方式。例如，含有class属性值为current的
元素。常用的属性选择器如表3所示。
4. 子元素选择器
表3 属性选择器。
| 选择器 | 功能描述 | 示例 |
|---|---|---|
| [attr] | 获取具有指定属性的元素 | $("div[class]")获取含有class属性的所有 元素 |
| [attr=value] | 获取属性值等于value的元素 | $("div[class='current']")获取class等于current的所有 元素 |
| [attr!=value] | 获取属性值不等于value的元素 | $("div[class!='current']")获取class不等于current的所有 元素 |
| [attr^=value] | 获取属性值以value开始的元素 | $("div[class^='box']")获取class属性值以box开始的所有 元素 |
| [attr$=value] | 获取属性值以value结尾的元素 | $("div[class$='er']")获取class属性值以er结尾的所有 元素 |
| [attr*=value] | 获取属性值包含value的元素 | $("div[class*='-']")获取class属性值中含有“-”符号的所有 元素 |
| [attr~=value] | 获取元素的属性值包含一个value，以空格分隔 | $("div[class~='box']")获取class属性值等于“box”或通过空格分隔并含有box的 元素，如“t box” |
| [attr1][attr2]...[attrN] | 获取同时拥有多个属性的元素 | $("input[id][name$='usr']")获取同时含有id属性和属性值以usr结尾的name属性的元素 |
利用子元素选择器可以对子元素进行筛选，常用的如表4所示。
表4 子元素选择器
| 选择器 | 功能描述 |
|---|---|
| :nth-child(index/even/odd/公式) | 索引index默认从1开始，匹配指定index索引、偶数、奇数、或符合指定公式（如2n，n默认从0开始）的子元素 |
| :first-child | 获取第一个子元素 |
| :last-child | 获取最后一个子元素 |
| :only-child | 如果当前元素是唯一的子元素，则匹配 |
| :nth-last-child(index/even/odd/公式) | 选择所有它们父元素的第n个子元素。计数从最后一个元素开始到第一个 |
| :nth-of-type(index/even/odd/公式)) | 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个子元素 |
| :first-of-type | 选择所有相同的元素名称的第一个子元素 |
| :last-of-type | 选择所有相同的元素名称的最后一个子元素 |
| :only-of-type | 选择所有没有兄弟元素，且具有相同的元素名称的元素 |
| :nth-last-of-type(index/even/odd/公式) | 选择属于父元素的特定类型的第n个子元素，计数从最后一个元素到第一个 |
5. 表单选择器
jQuery还提供了针对表单元素的选择器，用来方便表单开发，如表5所示。
表5 表单选择器
| 选择器 | 功能描述 |
|---|---|
| :input | 获取页面中的所有表单元素，包含 |