选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练的使用选择器,不仅能简化代码,而且可以达到事半功倍的效果。
在开始学习jQuery选择器之前,有必要简单了解下CSS(Cascading Style Sheets,层叠样式表)技术。
CSS是一项出色的技术,它使得网页的结构和表现的样式完全分离。利用CSS选择器能轻松的对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以得到各种不同样式的网页。
要使某个样式运用于特定的HTML元素,首先需要找到改元素。在CSS中,执行这一任务的表现规则称为CSS选择器。
选择器 | 语法 | 描述 | 示例 |
---|---|---|---|
标签选择器 | E{ CSS规则 } | 以文档元素作为选择符 | td{ font-size:14px; } a{ text-decoration:none; } |
ID选择器 | #ID{ CSS规则 } | 以文档元素的唯一标识符ID作为选择符 | #note{ font-size:14px; } |
类选择器 | E.className{ CSS规则 } | 以文档元素的class作为选择符 | div.note{ font-size:14px; } .dream{ font-size:14px; } |
群组选择器 | E1,E2,E3{ CSS规则 } | 多个选择符应用同样的样式规则 | td,p,div.a{ fone-size:14px;} |
后代选择器 | E F{ CSS规则 } | 元素E的任意后代元素F | #links a{ color:red;} |
通配选择器 | *{ CSS规则 } | 以文档的所有元素作为选择符 | *{ fone-size:14px;} |
注:把CSS应用到网页中有3中方式,即行间样式表、内部样式表和外部样式表。
jQuery选择器完全继承了CSS选择器的风格。利用jQuery选择器,可以非常便捷和快速地找出特定的DOM元素,然后为它们添加相应的行为,而无需担心浏览器是否支持这一选择器。
CSS获取到元素的代码如下:
.demo{
...
}
jQuery获取元素的代码如下:
$(".demo")
...
选择器 | 示例 |
---|---|
#id | 根据给定的id匹配一个元素,eg:$("#test")选取id为test的元素 |
.class | 根据给定的类名匹配元素,eg:$(".test")选取所有class为test的元素 |
element | 根据给定的元素名匹配元素,eg:$("p")选取所有的<p>元素 |
* | 匹配所有元素,eg: $("*")选取所有的元素 |
selector1,selector2,......,selectorN | 将每一个选择器匹配到的元素, 合并后一起返回,eg:$("div,span,p.myClass")选取所有<div>,<span>和拥有class为myClass的<p>标签的一组元素 |
选择器 | 示例 |
---|---|
$("ancestor descendant") | $("div span")选取<div>里的所有<span>(后代)元素,多级 |
$("parent>child") | $("div > span")选取<div>元素下的元素名为<span>的(子)元素,一级 |
$("prev+next") | $(".one + div")选取class为one的下一个<div>元素 |
$("prev~siblings") | $("#two ~ div")选取class为two的元素后面的所有<div>兄弟元素 |
选择器 | 示例 |
---|---|
:first | $("div:first")选取所有<div>元素中的 第一个<div>元素 |
:last | $("div:first")选取所有<div>元素中的 最后一个<div>元素 |
:not(selector) | $("input:not(.myClass)")选取class 不是myClass的<input>元素 |
:even | $("input:even")选取索引是偶数的<input>元素 |
:odd | $("input:odd")选取索引是奇数的<input>元素 |
:eq(index) | $("input:eq(1)")选取索引等于1的<input>元素,索引从0开始 |
:gt(index) | $("input:gt(1)")选取索引大于1的<input>元素,索引从0开始 |
:lt(index) | $("input:lt(1)")选取索引小于1的<input>元素,索引从0开始 |
:header | $(":header")选取网页中所有的标题元素,例如:H1,H2 |
:animated | $("div:animated")选取正在执行动画的<div>元素 |
选择器 | 示例 |
---|---|
:contains(text) | $(div:contains('我')")选取含有文本 “我”的<div>元素 |
:empty | $(div:empty")选取不含子元素 (包括文本元素)的<div>元素 |
:has(selector) | $(div:has(p)")选取含有<p>元素的<div>元素 |
:parent | $(div:parent")选取含子元素(包括文本元素)的<div>元素 |
选择器 | 示例 |
---|---|
:hidden | $(":hidden")选取所有不可见的元素 |
:visible | $(div:visible")选取所有可见的<div>元素 |
选择器 | 示例 |
---|---|
[attribute] | $(div[id]")选取拥有属性id的<div>元素 |
[attribute=value] | $(div[title=test]")选取title属性 为“test”的<div>元素 |
[attribute!=value] | $(div[title!=test]")选取title属性 不等于“test”的<div>元素, 注意:没有属性title的<div>元素 也会被选取 |
[attribute^=value] | $(div[title^=test]")选取title属性 以“test”开始的<div>元素 |
[attribute$=value] | $(div[title$=test]")选取title属性 以“test”结束的<div>元素 |
[attribute*=value] | $(div[title*=test]")选取title属性 含有“test”的<div>元素 |
[selector1][selector2] [selectorN] | $(div[id][title*=test]")选取拥有属性id, 且title属性含有“test”的<div>元素 |
选择器 | 示例 |
---|---|
:nth-chlid (index/even /odd/equation) | :nth-chlid(even)能选取每个父元素 下的索引值是偶数的元素 :nth-chlid(odd)能选取每个父元素 下的索引值是奇数的元素 :nth-chlid(2)能选取每个父元素 下的索引值等于2的元素 :nth-chlid(3n)能选取每个父元素 下的索引值是3的倍数的元素 (索引值从0开始) :nth-chlid(3n+1)能选取每个父元素 下的索引值是(3n+1)的元素 (索引值从0开始) |
:first-child | $(ul li:first-child")选取每个<ul>中 第1个<li>元素 :first只返回单个元素, 而:first-child返回每个父元素 匹配的第一个子元素。 |
:last-child | $(ul li:last-child")选取每个<ul>中 最后1个<li>元素 |
:only-child | $(ul li:only-child")选取每个<ul>中 是唯一子元素 的<li>元素 |
选择器 | 示例 |
---|---|
:enabled | $("#form1 :enabled")选取id为form1的表单内 所有可用的元素 |
:disabled | $("#form2 :disabled")选取id为form2的表单内 所有不可用的元素 |
:checked | $(“input:checked")选取所有被选中的<input>元素(单选框、复选框) |
:selected | $(“select:selected")选取所有被选中的选项元素(下拉列表) |
选择器 | 示例 |
---|---|
:input | $(":input") 选取所有的<input>、<textarea>、 <select>和<buttion>元素 |
:text | $("#form1 :text")选取id为form1的表单内 所有的单行文本框元素 |
:password | $(":password")选取所有的密码框元素 |
:radio | $(":radio")选取所有的单选框元素 |
:checkbox | $(":checkbox")选取所有的复选框元素 |
:submit | $(":submit")选取所有的提交按钮元素 |
:image | $(":image")选取所有的图像按钮元素 |
:reset | $(":reset")选取所有的重置按钮元素 |
:button | $(":button")选取所有的按钮元素 |
:file | $(":file")选取所有的文件上传域元素 |
:hidden | $(":hidden")选取所有的不可见元素 |
选择器中含有”.“、”#“、”(“或”]“等特殊字符。例如:
$('#id#b') 这样写会出错。正确的写法:$('#id\\#b') //转义特殊字符”#“
var $t_a = $(".test :hidden");//带空格 后代选择器
var $t_b = $(".test:hidden");//不带空格 过滤选择器
1、show() 显示隐藏元素
2、css(name,value) 给元素设置样式
3、text(string) 设置所有匹配元素的文本内容
4、filter(expr) 筛选出与指定表达式匹配的元素集合,其中expr可以是多个选择器的组合
5、addClass(class) 为匹配的元素添加指定的类名
6、removeClass(class) 为匹配的元素删除指定的类名
7、end() 重新定位上次操作的元素
8、toggle(fn1,fn2) 用于按钮交替一组动作
虽然jQuery提供了很多的选择器,但还是可能不能满足各种多变的业务需要,不过jQuery选择器是可以进一步扩展的。
MoreSelectors for jQuery,这是一个jQuery插件,用于增加更多的选择器。例如:.color可以匹配颜色。插件地址:http://plugins.jquery.com/project/moreSelectors/
Basic XPath 这个插件可以让用户使用基本的XPath。为了提高效率,jQuery把XPath选择器改为插件实现。插件地址:http://plugins.jquery.com/project/xpath
document.getElementsBySelector() 通过选择器来获取文档元素。
cssQuery() 利用CSS选择器来查找元素。
querySelectorAll()利用CSS选择器来查找元素。