一、jQuery选择器
1. 基本选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
| s1,s2,...sN | 将每个选择器匹配到的元素 合并后一起返回 |
集合元素 | $("#div,span,p.myClass")选取所有的<div>,<span> 和拥有class为myClass的<p>标签的一组元素 |
2. 层次选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| $("ancestor descendant") | 选取ancestor元素里的所有descendant元素 | 集合元素 | $("div span")选取<div>里所有的<span>元素 |
| $("parent>child") | 选取parent元素下的child元素 | 集合元素 | $("div>span")选取<div>下元素名是<span>的子元素 |
| $("prev+next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one+div")选取class为one的下一个<div>同辈元素 |
| $("prev~siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two~div")选取id为two的元素后面的所有<div>同辈元素 |
3. 过滤选择器
3.1 基本过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取所有<div>元素中的第一个<div>元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取所有<div>元素中的最后一个<div>元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 单个元素 | $("input:not(.myClass)")选取class不是myClass的<input>元素 |
| :eq(index) | 选取索引等于index的元素，index从0开始 | 集合元素 | $("input:eq(1)")选取索引等于1的<input>元素 |
| :gt(index) | 选取索引大于index的元素，index从0开始 | 集合元素 | $("input:gt(1)")选取索引大于1的<input>元素 |
| :lt(index) | 选取索引等于index的元素，index从0开始 | 集合元素 | $("input:lt(1)")选取索引小于1的<input>元素 |
| :header | 选取所有的标题元素，例如h1,h2,h3 | 集合元素 | $(":header")选取网页中所有的<h1>,<h2>,...等元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的<div>元素 |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获取焦点的元素 |
3.2 内容过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains('我')")选取含有文本“我”的<div>元素 |
| :empty | 选取不包含子元素或者文本的空元素 | 集合元素 | $("div:empty")选取不包含子元素（包括文本元素）的<div>空元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有<p>元素的<div>元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素（包括文本元素）的<div>元素 |
3.3 可见性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素，包括<input type="hidden" />,<div style="display:none">和<div style="visibility:hidden">等元素 |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
3.4 属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有id属性的<div>元素 |
| [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^=test]")选取属性title的值以“test”开始的<div>元素 |
| [attribute$=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=test]")选取属性title的值以“test”结束的<div>元素 |
| [attribute*=value] | 选取属性的值含有value的元素 | 集合元素 | $("div[title*=test]")选取属性title的值含有“test”的<div>元素 |
| [attribute|=value] | 选取属性等于给定字符串 或以该字符串为前缀（该字符串后跟一个连字符'-'）的元素 |
集合元素 | $("div[title|='en']")选取属性title等于en 或以en为前缀（该字符串后跟一个连字符'-'）的<div>元素 |
| [attribute~=value] | 选取属性用空格分割的值中包含一个给定值的元素 | 集合元素 | $("div[title~='uk']")选取属性title用空格分隔的值中包含字符'uk'的<div>元素 |
| [attr1][attr2][attrN] | 用属性选择器合并成一个复合属性选择器，满足多个条件。 每选择一次，缩小一次范围 |
集合元素 | $("div[id][title=test]")选取拥有属性id且属性title的值为“test”的<div>元素 |
3.5 子元素过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :nth-child(index/even/ odd/equation) | 选取每个父元素下的第index个子元素或者奇偶元素（index从1开始） | 集合元素 | :eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素 |
| :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>元素 |
:nth-child()选择器详细功能
| 选择器 | 描述 | 返回 |
|---|---|---|
| :nth-child(even) | 选取每个父元素下索引值是偶数的元素 | 集合元素 |
| :nth-child(odd) | 选取每个父元素下索引值是奇数的元素 | 集合元素 |
| :nth-child(2) | 选取每个父元素下的索引值等于2的元素 | 集合元素 |
| :nth-child(3n) | 选取每个父元素下的索引值是3的倍数的元素（n从1开始） | 集合元素 |
| :nth-child(3n+1) | 选取每个父元素下的索引值是（3n+1）的元素（n从1开始） | 集合元素 |
3.6 表单对象属性过滤选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("form1 :enabled")选取id为'form1'的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("form2 :enabled")选取id为'form2'的表单内的所有不可用元素 |
| :checked | 选取所有被选中的元素 （单选框、复选框） |
集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素 （下拉列表） |
集合元素 | $("select option:selected")选取所有被选中的选项元素 |
4. 表单选择器
| 选择器 | 描述 | 返回 | 示例 |
|---|---|---|---|
| :input | 选取所有的<input>,<textarea>, <select>和<button>元素 |
集合元素 | $(":input")选取所有的<input>,<textarea>, <select>和<button>元素 |
| :password | 选取所有的密码框 | 集合元素 | $(":password")选取所有的密码框 |
| :radio | 选取所有的单选框 | 集合元素 | $(":radio")选取所有的单选框 |
| :checkbox | 选取所有的复选框 | 集合元素 | $(":checkbox")选取所有的复选框 |
| :submit | 选取所有的提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有的图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 | 集合元素 | $(":text")选取所有的重置按钮 |
| :button | 选取所有的按钮 | 集合元素 | $(":button")选取所有的按钮 |
| :file | 选取所有的上传域 | 集合元素 | $(":file")选取所有的上传域 |
| :hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden")选取所有的不可见元素 |
网友评论