jQuery 选择器是 jQuery 库中非常重要的部分之一。它支持网页开发者所熟知的CSS 语法，快速轻松地对页面进行设置
基础选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定的id，匹配一个元素 | 单个元素 | $('#test') 选取id为 test 的元素 |
| .class | 根据给定的类名匹配元素 | 元素集合 | $('.test') 选取所有class为 test的元素 |
| element | 根据给定的元素名匹配元素 | 元素集合 | $('p') 选取所有 p 元素 |
| * | 匹配所有元素 | 元素集合 | $('*') 选取所有元素 |
| selector1,selector2...selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 元素集合 | $('#test,.test,p‘) 选取 id 为 test 的元素，以及 class 为 test的元素和所有的 p 元素 |
层级选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("parent child") | 选取 parent 元素里所有 chilid元素 | 元素集合 | $("div span") 选取div 里的所有 span 元素 |
| $("parent>chilid") | 选取 parent 元素下的 chulid 元素 | 元素集合 | $("div>span") 选取 div 元素下元素名为 span 的子元素 |
| $("prev+next") | 选取紧接在 prev 元素后的 next 元素 | 元素集合 | $(".one+div") 选取 class 为 one 的元素的下一个兄弟 div 元素 |
| $("prev-siblings") | 选取 prev 元素之后的所有 siblings 元素 | 元素集合 | $("#two-div") 选取 id 为 two 的元素后面所有名为 div 的兄弟元素 |
过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第1个元素 | 单个元素 | $(“div:first”) 选取所有元素中第一个 div 元素 |
| :last | 选取最后1个元素 | 单个元素 | $(“div:last”) 选取所有元素中最后一个 div 元素 |
| :not(selector) | 去除所有与给定选择器 匹配的元素 | 元素集合 | $(“span:not(.test)”) 选取所有 class 不是 test 的 span 元素 |
| :even | 选取索引（从0开始）是偶数的所有元素< | 元素集合 | $("span:even") 选取所有 span 元素中 索引是偶数的元素 |
| :odd | 选取索引（从0开始）是奇数的所有元素 | 元素集合 | $("span:odd") 选取所有 span 元素中 索引是奇数的元素 |
| :eq(index) | 选取索引（从0开始）等于 index 的元素 | 单个元素 | $("span:eq(1)") 选取所有 span 元素中 索引等于 1 的 span 元素 |
| :gt(index) | 选取索引（从0开始）大于 index 的元素 | 元素集合 | $("span:gt(1)") 选取所有 span 元素中 索引大于 1 的所有 span 元素 |
| :lt(index) | 选取索引（从0开始）小于 index 的元素 | 元素集合 | $("span:lt(4)") 选取所有 span 元素中 索引小于 4 的所有 span 元素 |
| :header | 选取所有的标题元素，即 h1 到 h6 标签元素 | 元素集合 | $(":header") 选取页面中所有的标题元素 |
| :contains(text) | 选取所有含有文本内容为 text 的元素 | 元素集合 | $("div:contains('test')") 选取所有含有文本内容为 test 的 div 元素 |
| :empty | 选取不包含子元素或文本的空元素 | 元素集合 | $(“div:empty”) 选取所有不包含子元素或文本的空 div 元素 |
| :has(selector) | 选取子元素中 含有给定选择器 的元素 | 元素集合 | $(“div:has(.myClass)”) 选取 子元素中包含了class 为 myClass 的元素的 div 元素 |
| :parent | 选取含有子元素或文本的元素 | 元素集合 | $(“div:parent”) 选取含有子元素或文本的 div 元素 |
| :first-child | 选取第1个子元素 | 元素集合 | $(“div :first-child”) 选取所有第一个子元素为 div 的元素 |
| :last-child | 选取最后1个子元素 | 元素集合 | $(“div :last-child”) 选取所有最后一个子元素为 div 的元素 |
| :only-child | 选取是唯一子元素的元素 | 元素集合 | $(“div :only-child”) 选择 div 是唯一子元素的元素 |
| :nth-child(index/ even/odd/equation) | 选取每个父元素下的第 index（索引值为奇数/ 索引值为偶数/索引值等于某个表达式）个子元素，index 从1开始 | 元素集合 | $(“div:nth-child(1)”) 选取每个 div 中第一个子元素 |
属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 元素集合 | $(“div[id]”) 选取拥有属性 id 的元素 |
| [attribute=value] | 选取属性的值为value的元素 | 元素集合 | $(“div[title=test]”) 选取属性 title 为 test 的 div 元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 元素集合 | $(“div[title!=test]”) 选取属性 title 不等于 test 的 div 元素 |
| [attribute^=value] | 选取属性的值以value开始的元素 | 元素集合 | $(“div[title^=test]”) 选取属性 title 以 test 开始的 div 元素 |
| [attribute$=value] | 选取属性的值以 value结束的元素 | 元素集合 | =test]”) 选取属性 title 以 test 结束的 div 元素 |
| [attribute*=value] | 选取属性的值含有 value 的元素 | 元素集合 | $(“div[title*=test]”) 选取属性 title 含有 test 的 div 元素 |
| [selector1][selector2]...[selectorN] | 选取匹配以上所有属性 选择器的元素 | 元素集合 | $(“div[id][title*=test]”) 选取拥有属性 id ，且属性 title 含有 test 的 div 元素 |
表单选择器
表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型来定义的
下列选择器，只能作用于表单元素上
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 元素集合 | $(“input:enabled") 选取页面内所有可用元素 |
| :disabled | 选取所有不可用元素 | 元素集合 | $(“input:disabled") 选取页面内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框、复选框) | 元素集合 | $(“input:checked”) 选取所有被选中的 input 元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 元素集合 | $("select option:selected") 选取所有被选中的选项元素 |
| :input | 选取所有的 <input>、 <textarea>、 <select>和 <button>元素 | 元素集合 | $(":input") 选取所有的 input、textarea 、select 和 button 元素 |
| :text | 选取所有的单行文本框 | 元素集合 | $(":text") 选取所有的单行文本框 |
| :password | 选取所有的密码框 | 元素集合 | $(":password") 选取所有的密码框 |
| :radio | 选取所有的单选框 | 元素集合 | $(":radio") 选取所有的单选框 |
| :checkbox | 选取所有的多选框 | 元素集合 | $(":checkbox") 选取所有的多选框 |
| :submit | 选取所有的提交按钮 | 元素集合 | $(":submit") 选取所有的提交按钮 |
筛选方法
注意: 上面的选择器只要根据传入字符串不同来区分,而筛选选择器是一些方法
| 名称 | 用法 | 描述 |
|---|---|---|
| children(selector) | $('ul').children('li') | 找到自己的所有符合条件的直接子元素 相当于子代选择器$(“ul>li”); |
| find(selector) | $('ul').find('li') | 找到自己的所有符合条件的后代元素 相当于后代选择器$(“ul li”); |
| siblings(selector) | $(“#first”).siblings(“li”); | 查找兄弟元素，不包括自己本身。 |
| parent() | $(“#first”).parent(); | 查找直接父亲元素 |
| eq(index) | $(“li”).eq(2); | 找到所有符合条件的li里面对应下标的元素,索引从0开始 |
| next() | $('#first').next() | 下一个兄弟 |
| index() | $('li').index() | 返回对应的索引 |
