学习笔记《锋利的jQuery》-jQuery选择器

选择器是jQuery的根基，在jQuery中，对事件处理、遍历DOM和Ajax操作都依赖于选择器。如果能熟练的使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。

一、jQuery选择器是什么

1、CSS选择器

在开始学习jQuery选择器之前，有必要简单了解下CSS（Cascading Style Sheets，层叠样式表）技术。

CSS是一项出色的技术，它使得网页的结构和表现的样式完全分离。利用CSS选择器能轻松的对某个元素添加样式而不改动HTML结构，只需通过添加不同的CSS规则，就可以得到各种不同样式的网页。

要使某个样式运用于特定的HTML元素，首先需要找到改元素。在CSS中，执行这一任务的表现规则称为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选择器来查找元素。