jQuery选择器
|
选择器 |
语法 |
描述 |
示例 |
|
标签选择器 |
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选择器选择器的分类
2 基本选择器 (basic)
2 层次选择器 (level)
2 过滤选择器 (filter)
2 表单选择器 (form)
2 基本选择器 (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>标签的一组元素 |
2 层次选择器 (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>兄弟元素 |
v 等价关系
|
|
选择器 |
方法 |
|
等价关系 |
$(".one + div") |
$(".one ").next("div") |
|
等价关系 |
$("#prev ～ div") |
$("#prev").nextAll("div") |
$("#prev ～ div")选择器只能选择"#prev"元素后面的同辈<div>元素,而siblings()方法与前后位置无关,只要是同辈节点就都能匹配
$("#prev ～ div").css("background","#bbffaa")//选取#prev之后的所有同辈div元素
("#prev ").nextAll("div").css("background","#bbffaa")//同上
("#prev ").siblings("div").css("background","#bbffaa")//选取#prev所有的同辈div元素,无论前后位置
2 过滤选择器 (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")选取所有被选中的选项元素 |
2 表单选择器(form)
|
选择器 |
描述 |
返回 |
示例 |
|
: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元素(层次选择器)
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
