jQuery选择器
2015-12-30 11:56
435 查看
| 选择器 | 语法 | 描述 | 示例 |
| 标签选择器 | E{ CSS规则 } | 以文档元素作为选择符 | td { font-size:14px; } a { font-size:14px; } |
| ID选择器 | #D{ CSS规则 } | 以文档元素的唯一标识符ID作为选择符 | #note { font-size:14px; width:120px; } |
| 类选择器 | E.className{ CSS规则 } | 以文档元素的class作为选择符 | Div. note { font-size:14px; } .dream{ font-size:14px; } |
| 群组选择器 | E1,E2,E3{ CSS规则 } | 多个选择符应用同样的样式规则 | td,p,div.a{ font-size:14px } |
| 后代选择器 | E F{ CSS规则 } | 元素E的任意后代元素F | #linkes a{ font-size:14px } |
| 通配选择器 | *{ CSS规则 } | 以文档的所有元素作为选择符 | *{ font-size:14px } |
$()函数在很多javaScript类库中都被作为一个选择器函数来使用,在jQuery中也不例外.
其中,$("#ID")用来代替document.getElementById()函数,即通过ID获取元素;
$("tagName")用来代替document.getElementsByTagName()函数,即通过标签名获取HTML元素;
jQuery选择器选择器的分类
² 基本选择器 (basic)
² 层次选择器 (level)
² 过滤选择器 (filter)
² 表单选择器 (form)
² 基本选择器 (basic)
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
| selector ,selector2, ....,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p,myClass")选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素 |
² 层次选择器 (level)
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取<div>里的所有<span>元素 |
| $("parent > child") | 选取parent元素下的child(子)元素,与$("ancestor descendant") 有区别,其选择的是【后代】元素 | 集合元素 | $("div > span")选取<div>下元素名是<span>的子元素 |
| $("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one + div")选取class为one的下一个<div>元素 |
| $("prev ～ siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two ～ div")选取id为two的元素后面的所有<div>兄弟元素 |
| | 选择器 | 方法 |
| 等价关系 | $(".one + div") | $(".one ").next("div") |
| 等价关系 | $("#prev ～ div") | $("#prev").nextAll("div") |
$("#prev ～ div").css("background","#bbffaa")//选取#prev之后的所有同辈div元素
("#prev ").nextAll("div").css("background","#bbffaa")//同上
("#prev ").siblings("div").css("background","#bbffaa")//选取#prev所有的同辈div元素,无论前后位置
² 过滤选择器 (filter)
Ø 基本过滤
Ø 内容过滤
Ø 可见性过滤
Ø 属性过滤
Ø 子元素过滤
Ø 表单对象属性过滤
Ø 基本过滤
| 选择器 | 描述 | 返回 | 示例 |
| :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:odd")选取索引是奇数的<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")选取网页中所有<h2><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;">如果只想选取<input>元素,可以使用$("input:hidden") |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
Ø 属性过滤
| 选择器 | 描述 | 返回 | 示例 |
| [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^=test]")选取属性title以"test"开始的<div>元素 |
| [attribute $=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=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 | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取id为"form1"的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为"form2"的表单内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select:selected")选取所有被选中的选项元素 |
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选取所有的<input><textarea><select><button> | 集合元素 | $(":input")选取所有的<input><textarea><select><button> |
| :text | 选取所有的单行文本框 | 集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(":password")选取所有的密码框 |
| :checkbox | 选取所有的多选框 | 集合元素 | $(":checkbox")选取所有的多选框 |
| :submit | 选取所有的提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有的图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 | 集合元素 | $(":reset")选取所有的重置按钮 |
| :button | 选取所有的按钮 | 集合元素 | $(":button")选取所有的按钮 |
| :file | 选取所有的上传域 | 集合元素 | $(":file")选取所有的上传域 |
| :hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden")选取所有的不可见元素 |
| :radio | 选取所有的单选框 | 集合元素 | $(":radio")选取所有的单选框 |
$("#myform :input")与
$("#myform input"")的区别
$("#myform :input")会获取到所有的input textarea select及button元素
$("#myform input"")会获取到所有的input元素(层次选择器)
| 选择器 | 语法 | 描述 | 示例 |
| 标签选择器 | E{ CSS规则 } | 以文档元素作为选择符 | td { font-size:14px; } a { font-size:14px; } |
| ID选择器 | #D{ CSS规则 } | 以文档元素的唯一标识符ID作为选择符 | #note { font-size:14px; width:120px; } |
| 类选择器 | E.className{ CSS规则 } | 以文档元素的class作为选择符 | Div. note { font-size:14px; } .dream{ font-size:14px; } |
| 群组选择器 | E1,E2,E3{ CSS规则 } | 多个选择符应用同样的样式规则 | td,p,div.a{ font-size:14px } |
| 后代选择器 | E F{ CSS规则 } | 元素E的任意后代元素F | #linkes a{ font-size:14px } |
| 通配选择器 | *{ CSS规则 } | 以文档的所有元素作为选择符 | *{ font-size:14px } |
$()函数在很多javaScript类库中都被作为一个选择器函数来使用,在jQuery中也不例外.
其中,$("#ID")用来代替document.getElementById()函数,即通过ID获取元素;
$("tagName")用来代替document.getElementsByTagName()函数,即通过标签名获取HTML元素;
jQuery选择器选择器的分类
² 基本选择器 (basic)
² 层次选择器 (level)
² 过滤选择器 (filter)
² 表单选择器 (form)
² 基本选择器 (basic)
| 选择器 | 描述 | 返回 | 示例 |
| #id | 根据给定的id匹配一个元素 | 单个元素 | $("#test")选取id为test的元素 |
| .class | 根据给定的类名匹配元素 | 集合元素 | $(".test")选取所有class为test的元素 |
| element | 根据给定的元素名匹配元素 | 集合元素 | $("p")选取所有的<p>元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有元素 |
| selector ,selector2, ....,selectorN | 将每一个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p,myClass")选取所有<div>,<span>,和拥有class为myClass的<p>标签的一组元素 |
² 层次选择器 (level)
| 选择器 | 描述 | 返回 | 示例 |
| $("ancestor descendant") | 选取ancestor元素里所有descendant(后代)元素 | 集合元素 | $("div span")选取<div>里的所有<span>元素 |
| $("parent > child") | 选取parent元素下的child(子)元素,与$("ancestor descendant") 有区别,其选择的是【后代】元素 | 集合元素 | $("div > span")选取<div>下元素名是<span>的子元素 |
| $("prev + next") | 选取紧接在prev元素后的next元素 | 集合元素 | $(".one + div")选取class为one的下一个<div>元素 |
| $("prev ～ siblings") | 选取prev元素之后的所有siblings元素 | 集合元素 | $("#two ～ div")选取id为two的元素后面的所有<div>兄弟元素 |
| | 选择器 | 方法 |
| 等价关系 | $(".one + div") | $(".one ").next("div") |
| 等价关系 | $("#prev ～ div") | $("#prev").nextAll("div") |
$("#prev ～ div").css("background","#bbffaa")//选取#prev之后的所有同辈div元素
("#prev ").nextAll("div").css("background","#bbffaa")//同上
("#prev ").siblings("div").css("background","#bbffaa")//选取#prev所有的同辈div元素,无论前后位置
² 过滤选择器 (filter)
Ø 基本过滤
Ø 内容过滤
Ø 可见性过滤
Ø 属性过滤
Ø 子元素过滤
Ø 表单对象属性过滤
Ø 基本过滤
| 选择器 | 描述 | 返回 | 示例 |
| :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:odd")选取索引是奇数的<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")选取网页中所有<h2><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;">如果只想选取<input>元素,可以使用$("input:hidden") |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的<div>元素 |
Ø 属性过滤
| 选择器 | 描述 | 返回 | 示例 |
| [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^=test]")选取属性title以"test"开始的<div>元素 |
| [attribute $=value] | 选取属性的值以value结束的元素 | 集合元素 | $("div[title$=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 | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取id为"form1"的表单内的所有可用元素 |
| :disabled | 选取所有不可用元素 | 集合元素 | $("#form2:disabled")选取id为"form2"的表单内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选框,复选框) | 集合元素 | $("input:checked")选取所有被选中的<input>元素 |
| :selected | 选取所有被选中的选项元素(下拉列表) | 集合元素 | $("select:selected")选取所有被选中的选项元素 |
| 选择器 | 描述 | 返回 | 示例 |
| :input | 选取所有的<input><textarea><select><button> | 集合元素 | $(":input")选取所有的<input><textarea><select><button> |
| :text | 选取所有的单行文本框 | 集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有的密码框 | 集合元素 | $(":password")选取所有的密码框 |
| :checkbox | 选取所有的多选框 | 集合元素 | $(":checkbox")选取所有的多选框 |
| :submit | 选取所有的提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有的图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
| :reset | 选取所有的重置按钮 | 集合元素 | $(":reset")选取所有的重置按钮 |
| :button | 选取所有的按钮 | 集合元素 | $(":button")选取所有的按钮 |
| :file | 选取所有的上传域 | 集合元素 | $(":file")选取所有的上传域 |
| :hidden | 选取所有的不可见元素 | 集合元素 | $(":hidden")选取所有的不可见元素 |
| :radio | 选取所有的单选框 | 集合元素 | $(":radio")选取所有的单选框 |
$("#myform :input")与
$("#myform input"")的区别
$("#myform :input")会获取到所有的input textarea select及button元素
$("#myform input"")会获取到所有的input元素(层次选择器)
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jQuery的each实现为什么分为数组和对象两种情况
- 转：jquery对象跟dom对象之间有什么不同
- Jquery清除style样式
- jquery ajaxStart() ajaxComplete()
- jquery ajaxStart() ajaxComplete()
- jQuery JavaScript Library v2.1.4源码翻译
- jQuery的三种$()
- 自写jquery网页回到顶部效果，渐隐图标，引用js文件就可以
- jQuery源码分析15--迭代器
- HTML5中类jQuery选择器querySelector的使用
- jQuery源码分析14--get与eq的区别
- noConflict() 方法处理jQuery 命名冲突
- 分享两款带遮罩的jQuery弹出框
- Jquery轮播图制作
- jQuery源码分析13--仿栈与队列的操作(数组的操作)
- 前端（js/jquery） 日期和时间戳的转换
- jQuery拖动元素并对元素进行重新排序
- jquery mobile常用类型参数
- jQuery给元素添加样式的方法详解
- jquery.SuperSlide