第二章 jQuery选择器
第二章 jQuery选择器一、jQuery选择器的优势写法简洁 $("div")支持CSS2和css3选择器（对于css3选择器支持这一项，我认为应该是jQuery首先创造并使用这些选择器而后css3将其引入自己的规范）完善的处理机制 $(".demo")获取的永远是对象，即时网页没有这个元素。 由于这种机制，使用jQuery检查某个元素在网页中是否存在时不能使用：
if($(".demo")){//do something}
而是应该根据获取到的长度来判断：
if($(".demo").length>0){//do something}
或者是转为DOM判断。
二、jQuery选择器基本选择器最常用的选择器，通过元素id、class和标签名等查找DOM元素。
选择器
描述
返回
示例
#id
通过id匹配
单个元素
$("#id")
.class
通过类名匹配
集合元素
$(".class")
element
通过元素名匹配
集合元素
$("element")
*
匹配所有元素
集合元素
$("*")
selector1,selector2,……,selectorN
群组选择器
集合元素
$("div,span,p")
层次选择器通过DOM元素之间的层次关系获取特定元素例如：后代元素、子元素、相邻元素和同辈元素等。
选择器
描述
返回
示例
$("ancestor descendant")
选ancestor元素里面所有的descendant
集合元素
$("div span")
$("parent>child")
选parent元素下的子元素
集合元素
$("div>span")
$("PRev+next")
选取紧接在prev后的next元素
集合元素
$("p+div")
$("prev~siblings")
选取prev元素之后的所有siblings元素
集合元素
$("div~div")
对于$("prev+next")选择器一般用next()方法代替，对于$("prev~siblings")一般用nextAll()方法代替。
过滤选择器通过特定的过滤规则筛选所需的DOM元素，选择器已:开头（与css伪类选择器相似）。按照过滤原则可分为：
基本过滤选择器 选择器
描述
返回
示例
:first
获取第一个元素
单个元素
$("div:first")
:last
获取最后一个元素
单个元素
$("div:last")
:not(selector)
去掉selector以外的元素
集合元素
$("div:not(.demo)")
:even
选取索引是偶数的元素，索引从0开始
集合元素
$("input:even")
:odd
选取索引是奇数的元素，索引从0开始
集合元素
$("input:odd")
:eq(index)
选取所有等于index的元素（index从0开始）
单个元素
$("div:eq(0)")
:gt(index)
选取所有大于index的元素（index从0开始）
集合元素
$("div:gt(0)")
:lt(index)
选取所有小于index的元素（index从0开始）
集合元素
$("div:lt(0)")
:header
选取所有标题元素例如：h1,h2等
集合元素
$(":header")
:animated
选取正在动画的元素
集合元素
$("div:animated")
:focus
选取获得焦点的元素
集合元素
$(":focus")
在使用:even、:odd、：eq()、:gt()、:lt()等选择器是一定要注意下标问题
2.内容过滤选择器 过滤规则主要是它包含的子元素和文本
选择器
描述
返回
示例
:contains(text)
包含文本为text的元素
集合元素
$("div:contains('text')")
:empty
选取没有文本或子元素的空元素
集合元素
$("div:empty“)
:has(selector)
选取含有se;ector的元素
集合元素
$("div:has(p)")
:parent
选取含有文本或子元素的元素
集合元素
$("div:parent")
3.可见性过滤选择器 根据元素的可见和不可见状态选择相应元素
选择器
描述
返回
示例
:hidden
选取不可见元素
集合元素
$(":hidden")
:visible
选取可见元素
集合元素
$(":visible")
对于:hidden选择器，不仅可以选择display:none的元素，也可以选择visibility:hidden和文本隐藏域等元素。
4.属性过滤选择器 根据元素属性获取相应元素
选择器
描述
返回
示例
[attribute]
选取有此属性的元素
集合元素
$("div[id]")
[attribute=value]
选取属性值为value的元素
集合元素
$("div[id=test]")
[attribute!=value]
选取属性值不为value的元素
集合元素
$("div[id!=test]")
[attribute^=value]
选取属性值以value开头的元素
集合元素
$("div[id^=test]")
[attribute$=value]
选取属性值以value结束的元素
集合元素
$("div[id$=test]")
[attribute*=value]
选取属性值含有value的元素
集合元素
$("div[id*=test]")
[attribute|=value]
选取属性值为等于value或者以value为前缀的元素
集合元素
$("div[id|=test]")
[attribute~=value]
选取属性值空格分隔的值中有value的元素
集合元素
$("div[id~=test]")
[attribute1][attribute2][attributeN]
选取有给定的多个属性的元素
集合元素
$("div[id=test][class]")
5. 子元素过滤选择器
选择器
描述
返回
示例
:nth-child()
选取每个父元素下的给定条件的元素（index从1开始）
集合元素
$("div:nth-child")
:first-child
选取每个父元素的第一个元素
集合元素
$("div:first-child")
:last:child
选取每个父元素的最后一个元素
集合元素
$("div:last-child")
:only:child
选取只有一个子元素的父元素
集合元素
$("div:only-child")
eq(index)只匹配一个元素，而nth-child将为每一个符合条件的父元素匹配子元素。同时nth-child()的index从1开始，eq()从0开始。同理，:first和:first-child、:last和last:child也类似。
6.表单对象属性过滤选择器
选择器
描述
返回
示例
:enabled
选取可用元素
集合元素
$("#form1:enabled")
:disabled
选取不刻意元素
集合元素
$("#form1:disabled")
:checked
选取被选中元素（单选框、复选框）
集合元素
$("input:checked")
:selected
选取所有被选中的选项元素（下拉列表）
集合元素
$("input:selected")
表单选择器 选择器
描述
返回
示例
:input
选取所有input、textarea、select、button元素
集合元素
$("input")
:text
选取单行文本框
集合元素
$(":text")
:passWord
选取密码框
集合元素
$(":password")
:radio
选取单选按钮
集合元素
$(":radio")
:checkbox
选取复选框
集合元素
$(":checkbox")
:submit
选取提交按钮
集合元素
$(":submit")
:image
选取图片按钮
集合元素
$(":image")
:reset
选取复位按钮
集合元素
$(":reset")
:button
选取按钮
集合元素
$(":button")
:file
选取上传域
集合元素
$("file")
:hidden
选取不可见元素
集合元素
$(":hidden")
三、jQuery选择器注意事项选择器含有”.“，”#“，”（“或”]“等特殊字符时使用转义符转义。jQuery在1.3.1版本后放弃之前的属性前加@。选择器对空格敏感。