本文共 2441 字，大约阅读时间需要 8 分钟。
一、基本选择器
| 选择器 | 示例 | 描述 |
| id选择器 | $("#test") | 选取id为test的元素 |
| 类选择器 | $(".test") | 选取所有class为test的元素 |
| 标签选择器 | $(“div”) | 选取所有的div元素 |
| 通配选择器 | $("*") | 通配选择器，匹配页面中所有元素 |
注意： #####（1） ( " p . i n t r o " ) 选 取 所 有 c l a s s = " i n t r o " 的 p 元 素 （ 2 ） ("p.intro") 选取所有 class="intro" 的 p元素 （2） ("p.intro")选取所有class="intro"的p元素（2）(“p#demo”) 选取所有 id=“demo” 的 p 元素 #####
二、层次选择器
| 选择器 | 示例 | 描述 |
| 后代元素 | $(“div span”) | 查找div元素下面的所有span子节点，包括非直接子节点 |
| 子元素 | $(“div>span”) | 选取div下的span直接子节点，不包括非直接子节点 |
| 相邻元素 | $(".one+div") | 选取class为one的下一个div元素（相邻元素）,包括非直接子节点 |
| 兄弟元素 | $("#two~div") | 选取id为two的元素后面所有div兄弟元素,不包括非直接子节点 |
三、表单选择器
1.表单元素选择器
| 选择器 | 描述 |
| $(":input") | 选择所有的表单输入元素，包括input, textarea, select 和 button |
| $(":text") | 选择所有的text input元素 |
| $(":password") | 选择所有的password input元素 |
| $(":radio") | 选择所有的radio input元素 |
| $(":checkbox") | 选择所有的checkbox input元素 |
| $(":sumbit") | 选择所有的submit input元素 |
| $(":image") | 选择所有的image input元素 |
| $(":button") | 选择所有的button input元素 |
| $(":file") | 选择所有的file input元素 |
| $(“hidden”) | 选择所有类型为hidden的input元素或表单的隐藏域 |
2.表单元素过滤选择器
| 选择器 | 描述 |
| $(":enabled") | 选择所有的可操作的表单元素 |
| $(":disabled") | 选择所有的不可操作的表单元素 |
| $(":checked") | 选择所有的被checked的表单元素 |
| $(“select option:selected”) | 选择所有的select 的子元素中被selected的元素 |
四、过滤选择器
1.基本过滤选择器
| 选择器 | 描述 |
| $(“tr:first”) | 选择所有tr元素的第一个 |
| $(“tr:last”) | 选择所有tr元素的最后一个 |
| $(“tr:even”) | 偶数，选择所有的tr元素的第0，2，4… …个元素 |
| $(“tr:odd”) | 奇数，选择所有的tr元素的第1，3，5… …个元素 |
| $(“td:eq(2)”) | 选择所有的td元素中序号为2的那个td元素 |
| $(“td:gt(4)”) | 选择td元素中序号大于4的所有td元素 |
| $(“td:ll(4)”) | 选择td元素中序号小于4的所有的td元素 |
| $(":header") | 选取网页中所有的h1，h2，h3…… |
| $(“div:animated”) | 选取正在执行动画的div元素 |
2. 内容过滤选择器
| 选择器 | 描述 |
| $(“div:contains(‘John’)”) | 选择所有div中含有John文本的元素 |
| $(“td:empty”) | 选择所有的为空（也不包括文本节点）的td元素的数组 |
| $(“div:has§”) | 选择所有含有p标签的div元素 |
| $(“td:parent”) | 选择所有的以td为父节点的元素数组 |
3. 可视化过滤选择器
| 选择器 | 描述 |
| $(":hidden") | 选择所有的被hidden的div元素 |
| $(":visible") | 选择所有的可视化的div元素 |
4. 属性过滤选择器
| 选择器 | 描述 |
| $(“div[id]”) | 选择所有含有id属性的div元素 |
| $(“input[name=‘newsletter’]”) | 选择所有的name属性等于’newsletter’的input元素 |
| $(“input[name!=‘newsletter’]”) | 选择所有的name属性不等于’newsletter’的input元素 |
| $(“input[name^=‘news’]”) | 选择所有的name属性以’news’开头的input元素 |
| $(“input[name$=‘news’]”) | 选择所有的name属性以’news’结尾的input元素 |
| $(“input[name*=’'news]”) | 选择所有的name属性包含’news’的input元素 |
| $(“input[id][name^=‘man’]”) | 以使用多个属性进行联合选择，该选择器是得到所有的含有id属性并且name属性以man开头的元素 |
5.子元素过滤器
| 选择器 | 描述 |
| $(“div span:first-child”) | 返回所有的div元素中span的第一个子节点的数组 |
| $(“div span:last-child”) | 返回所有的div元素中sapn的最后一个节点的数组 |
| $(“div button:only-child”) | 返回所有的div中button只有唯一一个子节点的所有子节点的数组 |
参考网址
注：文章是经过参考其他的文章然后自己整理出来的，有可能是小部分参考，也有可能是大部分参考，但绝对不是直接转载，觉得侵权了我会删，我只是把这个用于自己的笔记，顺便整理下知识的同时，能帮到一部分人。 ps : 有错误的还望各位大佬指正,小弟不胜感激