jQuery选择器速查表
Posted 楚弋川
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery选择器速查表相关的知识，希望对你有一定的参考价值。
| 分类 | 选择器 | 描述 | 示例 |
| 基本选择器 | #id | 根据给定的id匹配一个元素 | $("#test")选取id为test的元素，返回单个元素 |
| .class | 根据给定的类名匹配元素 | $(".test")选取所有class为test的元素 | |
| element | 根据给定元素名匹配元素 | $("p")选取所有的<p>元素 | |
| * | 匹配所有元素 | $("*")选取所有元素 | |
| selected1，…,selectedN | 将每一个选择器匹配到元素合并后一起返回 | $("div,span,p.myClass")选取所有的<div>，<span>和拥有class为myClass的<p>标签的一组数据 | |
| 层次选择器 | $("ancestor descendant") | 选取ancestor（祖先）元素里的所有descendant（后代）元素 | $("div span")选取<div>里的所有<span>元素 |
| $("parent>child") | 选取parent（父）元素下的child（子）元素 | $("div>span")选取<div>元素下元素名为<span>的子元素 | |
| $("prev+next")等价于$(".one").next("div") | 选取紧接在prev元素后的next元素 | $(".one+div")选取紧接在class为one的下一个兄弟<div>元素 | |
| $("prev～siblings")等价于$("#prev").nextAll("div") | 选取prev元素之后的所有siblings元素 | $("#two～div")选取id为two的元素后面的所有<div>元素 | |
|
|
| ||
| 过滤选择器 | :first | 选取第一个元素 | $("div:first")选取所有的<div>中的第一个<div>元素 |
| :last | 选取最后一个元素 | $("div:last")选取所有的<div>中的最后一个<div>元素 | |
| :not(selector) | 去除所有与给定的选择器匹配的元素 | $("input:not(.myClass)")选取class不是myClass的<input>的元素 | |
| :even | 选取索引是偶数的所有元素，索引从0开始 | $("input:even")选取索引是偶数的<input>元素 | |
| :odd | 选取索引是奇数的所有元素，索引从0开始 | $("input:even")选取索引是奇数的<input>元素 | |
| :eq(index) | 选取索引等于index的元素（index从0开始） | $("input:eq(1)")选取索引等于1的<input>元素 | |
| :gt(index) | 选取索引大于的index元素（index从0开始） | $("input:eq(1)")选取索引大于1的<input>元素 | |
| :lt(index) | 选取索引小于的index元素（index从0开始） | $("input:eq(1)")选取索引小于1的<input>元素 | |
| :header | 选取所有标题元素，例如：h1,h2,h3等 | $(":header")选取网页中的所有的<h1><h2><h3>… | |
| :animated | 选取当前正在执行动画的所有元素 | $("div:animated")选取正在执行动画的<div>元素 | |
| :contains(text) | 选取含有文本内容为“text”的元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 | |
| :empty | 选取不包含子元素或者文本的空元素 | $("div:empty")选取不包含子元素（包含文本元素）的<div>空元素 | |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | $("div:has(p)")选取含有<p>元素的<div>元素 | |
| :parent | 选取含有子元素或者文本的元素 | $("div:parent")选取拥有子元素（包括文本元素）的<div>元素 | |
| :hidden | 选取所有不可见的元素 | $(":hidden")选取所有不可见元素。包括<input type="hidden"/>,<div style="display:none;">和<div style="visibility:hidden;">等元素 | |
| :visible | 选区所有可见的元素 | $("div:visible")选区所有可见的<div>元素 | |
| :nth-child | 选取每个父元素下的(index/even/odd/equation)元素 | :eq(index)只匹配一个元素，且index从0开始；:nth-child(index)为每一个父元素匹配子元素，且index从1开始 | |
| :first-child | 选取每个父元素的第一个子元素 | :first只返回单个元素，而:first-child为每个父元素匹配第一个子元素。例如：$("ul li:first-child")选取每个<ul>中的第一个<li>元素 | |
| :last-child | 选取每个父元素的最后一个子元素 | :last只返回单个元素，而:last-child为每个父元素匹配最后一个子元素。例如：$("ul li:last-child")选取每个<ul>中的最后一个<li>元素 | |
| :only-child | 如果某个元素是它父元素中唯一的子元素，那么它将会被匹配。如果父元素中含有不止一个子元素，则不会被匹配 | $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素 | |
| :enabled | 选取所有可用元素 | $("#from1:enabled")选取id为from1的表单内所有可用的元素 | |
| :disabled | 选取所有不可用元素 | $("#from1:disabled")选取id为from1的表单内所有可用的元素 | |
| :checked | 选取所有被选中的元素（单选框、复选框） | $("input:checked")选取所有被选中的<input>元素 | |
| :selected | 选取所有被选中的选项元素（下拉列表框） | $("select：selected")选取所有被选中的选项元素 | |
| [attribute] | 选取拥有此属性的元素 | $("div[id]")选区拥有属性id的元素 | |
| [attribute=value] | 选取属性值为value的元素 | $("div[title=test]")选取属性title为“test”的<div>元素 | |
| [attribute!=value] | 选取属性值不等于value的元素 | $("div[title!=test]")选取属性title不为“test”的<div>元素，没有属性title的<div>元素也会被选中 | |
| [attribute^=value] | 选取属性值以value开始的元素 | $("div[title=^value]")选取属性以“test”开始的<div>元素 | |
| [attribute$=value] | 选取属性值以value结束的元素 | $("div[title=$value]")选取属性以“test”结束的<div>元素 | |
| [attribute*=value] | 选取属性值含有value的元素 | $("div*=value")选取属性title含有“test”的<div>元素 | |
| [selector1]，…，[selectorN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。 | $("div[id][title$='test']")选取拥有属性id并且title以“test”结束的<div>元素 | |
|
|
| ||
| 表单选择器 | :input | 选取所有的<input>、<select>、<textarea>和<button>元素 | $(":input")选取所有的<input>、<select>、<textarea>和<button>元素 |
| :text | 选取所有单行文本框 | $(":text")选取所有单行文本框 | |
| :password | 选取所有密码框 | $(":password")选取所有密码框 | |
| :radio | 选区所有单选框 | $(":radio")选区所有单选框 | |
| :checkbox | 选取所有多选框 | $("checkbox")选取所有多选框 | |
| :submit | 选取所有提交按钮 | $("submit")选取所有提交按钮 | |
| :image | 选取所有图像按钮 | $("image")选取所有图像按钮 | |
| :reset | 选取所有重置按钮 | $("reset")选取所有重置按钮 | |
| :button | 选取所有的按钮 | $("button")选取所有的按钮 | |
| :file | 选取所有上传域 | $("file")选取所有上传域 | |
| :hidden | 选取所有不可见元素 | $("hidden")选取所有不可见元素 | |
|
|
|
以上是关于jQuery选择器速查表的主要内容，如果未能解决你的问题，请参考以下文章
超级实用的最新前端速查表集合（css3 Flexbox/CSS动画/Bootstrap4）