学习笔记《锋利的jQuery》-jQuery选择器
选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。
一、jQuery选择器是什么
1、CSS选择器
在开始学习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中方式，即行间样式表、内部样式表和外部样式表。
2、jQuery选择器
jQuery选择器完全继承了CSS选择器的风格。利用jQuery选择器，可以非常便捷和快速地找出特定的DOM元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器。
CSS获取到元素的代码如下：
.demo{
...
}
jQuery获取元素的代码如下：
$(".demo")
...
二、jQuery选择器的优势
1、简洁的写法
2、支持CSS1到CSS3选择器 多种浏览器的兼容
3、完善的处理机制
三、jQuery选择器
1、基本选择器
| 选择器 | 示例 |
|---|---|
| #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>标签的一组元素 |
2、层次选择器
| 选择器 | 示例 |
|---|---|
| $("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>兄弟元素 |
3、过滤选择器
| 选择器 | 示例 |
|---|---|
| :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")选取所有被选中的选项元素（下拉列表） |
4、表单选择器
| 选择器 | 示例 |
|---|---|
| :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")选取所有的不可见元素 |
四、选择器中的一些注意事项
1、选择器中含有特殊符号的注意事项
选择器中含有”.“、”#“、”（“或”]“等特殊字符。例如：
$('#id#b') 这样写会出错。正确的写法：$('#id\\#b') //转义特殊字符”#“
2、选择器中含有空格的注意事项
var $t_a = $(".test :hidden");//带空格 后代选择器
var $t_b = $(".test:hidden");//不带空格 过滤选择器
五、jQuery常用方法
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) 用于按钮交替一组动作
六、其它选择器
1、jQuery提供了选择器的扩展
虽然jQuery提供了很多的选择器，但还是可能不能满足各种多变的业务需要，不过jQuery选择器是可以进一步扩展的。
MoreSelectors for jQuery，这是一个jQuery插件，用于增加更多的选择器。例如：.color可以匹配颜色。插件地址：http://plugins.jquery.com/project/moreSelectors/
Basic XPath 这个插件可以让用户使用基本的XPath。为了提高效率，jQuery把XPath选择器改为插件实现。插件地址：http://plugins.jquery.com/project/xpath
2、其它使用CSS选择器的方法
document.getElementsBySelector() 通过选择器来获取文档元素。
cssQuery() 利用CSS选择器来查找元素。
querySelectorAll()利用CSS选择器来查找元素。