JQuery选择器
基本选择器
| 基本选择器 | 功能 | 返回值 | 示例 |
| $("#id") | 根据给定id匹配一个元素 | 单个元素 | $("#xdl"):选取id为xdl的元素 |
| $(".class") | 根据给定的类匹配元素 | 元素集合 | $(".xdl"):选择所有class值为xdl的元素 |
| $("element") | 根据给定的元素名匹配元素 | 元素集合 | $("p"):选择所有的 元素 |
| $("*") | 匹配所有元素 | 元素集合 | $("*"):选择所有的元素 |
| $("selector1,selector2,...,selectorn") | 将每个选择器匹配到的元素合并后一起返回 | 元素集合 | $("p,span,.xdl"):选择所有的 元素、元素和class值为xdl的元素 |
层次选择器
| 层级选择器 | 功能 | 返回值 | 示例 |
| $("ancestor descendant") | 根据祖先ancestor元素匹配所有的后代descendant元素 | 元素集合 | $("ul li"):选择
|
| $("parent>child") | 选取parent元素下所有的child元素。（孙子及孙子下的所有元素都不会命中） | 元素集合 | $("ul > li"):选择
|
| $("prev+next") | 选择prev元素后面紧跟的next兄弟元素 | 元素集合 | $("h1 + p"):选择元素后面紧跟的兄弟元素 |
| $("prev~siblings") | 匹配prev元素后面所有的siblings兄弟元素 | 元素集合 | $("h1 ~ p"):选择元素后面所有的兄弟元素 |
基本过滤选择器
| 基本过滤选择器 | 功能 | 返回值 | 示例 |
| :first | 选取第一个元素 | 单个元素 | $(".xdl:first"):选取所有class值为“xdl”中的第一个元素 |
| :last | 选取最后一个元素 | 单个元素 | $(".xdl:last"):选取所有class值为“xdl”中的最后一个元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 元素集合 | $("li:not(.xdl)"):选取所有 |
| :even | 选取索引值偶数的所有元素，索引值从0开始 | 元素集合 | $(".xdl:even"):选取索引是偶数的所有class值为“xdl”的元素 |
| :odd | 选取索引是奇数的所有元素，索引值从0开始 | 元素集合 | $(".xdl:odd"):选取索引是奇数的所有class值为"xdl"的元素 |
| :eq(index) | 选取索引值等于index的元素，索引值从0开始 | 单个元素 | $(“li:eq(1)”):在所有 |
| :gt(index) | 选取索引值大于index的元素，索引值从0开始 | 元素集合 | $(“li:gt(1)”):在所有 |
| :lt(index) | 选取索引值小于index的元素，索引值从0开始 | 元素集合 | $(“li:gt(1)”):在所有 |
| :header | 选取所有的标题元素 | 元素集合 | $(":header"):选取整个网页中所有的、 |
| :animated | 选取当前正在执行动画的所有元素 | 元素集合 | $(“div:animated”):选取正在执行动画的 元素 |
| :lang | 选取指定语言下的所有元素 | 元素集合 | $("div:lang(en)"):选取所有的 或 元素 |
| :focus | 选取当前获取焦点的元素 | 单个元素 | $("input:focus"):选取当前获取焦点的元素 |
| :root | 选取该文档的根元素 | 单个元素 | $(":root"):永远都是选取元素 |
内容过滤选择器
| 内容过滤选择器 | 功能 | 返回值 | 示例 |
| :contains(text) | 选取含有文本内容text的元素 | 元素集合 | $(“div:contains(mlove)”):选取含有文本”mylove”的 元素 |
| :empty | 选择内容为空（不包含子元素或者文本）的元素 | 元素集合 | $(“div:empty”):内容为空的div元素。如 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 元素集合 | $(“div:has(li)”):选取含有 元素 |
| :parent | 选择含有子元素或文本的非空元素 | 元素集合 | $(“div:parent”):选取含有子元素或文本元素的 元素。如 hello |
可见性过滤选择器
| 可见性过滤选择器 | 功能 | 返回值 | 示例 |
| :hidden | 获取所有的不可见元素，包括CSS属性中的display:none和visibility:hidden；input元素属性为type=hidden | 元素集合 | $("input:hidden"):选取所有的不可见元素，包括、和 |
| :visible | 获取所有的可见元素 | 元素集合 | $("input:visible"):选取所有可见的元素 |
属性过滤选择器
| 属性过滤选择器 | 功能 | 返回值 | 示例 |
| [attribute] | 取所有含有此属性attribute的元素 | 元素集合 | $(“div[id]”]:选取所有拥有属性id的 元素 |
| [attribute=value] | 选取属性的值为value的元素 | 元素集合 | $(“div[class='xdl']”]:选取所有class值为"xdl"的 元素 |
| [attribute!=value] | 选取属性的值不等于value的元素 | 元素集合 | $(“div[class!='xdl']”]:选取所有class值不为"xdl"的 元素 |
| [attribute^=value] | 选取属性值以value开头的元素 | 元素集合 | $(“div[class^='xdl']”]:选取所有class值以"xdl"开头的 元素 |
| [attribute$=value] | 选取属性值以value结尾的元素 | 元素集合 | $(“div[class$='xdl']”]:选取所有class值以"xdl"结尾的 元素 |
| [attribute*=value] | 取属性值包含value的元素 | 元素集合 | $(“div[class*='xdl']”]:选取所有class值包含"xdl"的 元素 |
| [selector1][selector2][selectorN] | 获取同时满足多个属性的元素 | 元素集合 | $("div[class="xdl][page]"):获取所有class值为"xdl"并包含page属性的 元素 |
子元素过滤选择器
| 子元素过滤选择器 | 功能 | 返回值 | 示例 |
| :first-child | 获取每个父元素的第一个元素 | 元素集合 | $("ul li:first-child"):获取每个
|
| :first-of-child | 获取每个元素的所有同级同名元素的第一个兄弟元素 | 元素集合 | $("li:first-of-type"):获取每个 |
| :last-child | 获取每个父元素的最后一个元素 | 元素集合 | $("ul li:last-child"):获取每个
|
| :last-of-type | 获取每个元素的所有同级同名元素的最后一个兄弟元素 | 元素集合 | $("li:last-of-type"):获取每个 |
| :nth-child(index/even/odd/formula) | 1.获取每个父元素下的第index个子元素(index从1开始) 2.获取每个父元素下的奇偶元素 3.获取每个父元素下与“带n参数的表达式”相关的元素 |
元素集合 | 1.$("ul li:nth-child(3)"):获取每个
|
| :nth-last-child(index/even/odd/formula) | 同:nth-child(),不同点是:nth-last-child计数顺序为从最后一个元素开始到第一个元素 | 元素集合 | 同上 |
| :nth-of-type(index/even/odd/formula) | 同:nth-child(),不同点是:nth-of-type获取每个元素的所有同级同名的第index个元素、奇偶元素或formula相关元素 | 元素集合 | 1.$("li:nth-of-type(3)"):获取每个 2.$("li:nth-of-type(even)"):获取每个 3.$("li:nth-of-type(3n)"):获取每个 |
| :nth-last-of-type(index/even/odd/formula) | 同:nth-of-type,不同点是:nth-last-of-type计数是从最后一个元素开始到第一个元素 | 元素集合 | 同上 |
| :only-child | 获取所有父元素中只有唯一一个子元素的元素集合 | 元素集合 | $("ul li:only-child"):获取每个
|
| :only-of-type | 获取在同一级下只有唯一一个同名元素的元素集合 | 元素集合 | $("li:only-of-type"):获取所有在同一级下只拥有唯一一个 |
表单对象属性过滤选择器
| 表单对象属性过滤选择器 | 功能 | 返回值 | 示例 |
| :enabled | 获取所有可用元素 | 元素集合 | $("#form:enabled"):选取id值为form的表单中所有可用的元素 |
| :disabled | 获取所有不可用元素 | 元素集合 | $("#form:disabled"):选取id值为form的表单中所有不可用元素 |
| :checked | 获取所有被选中的元素(包括单选框、复选框) | 元素集合 | $("input:checked"):获取所有被选中的元素 |
| :selected | 获取所有被选中的选项元素 | 元素集合 | $("select:selected"):获取所有被选中的 |
表单属性过滤选择器
- 荔枝
- 芒果
- 桂圆
- 菠萝
表单选择器
| 表单选择器 | 功能 | 返回值 | 示例 |
| :input | 选取所有的、 |