第二章 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版本后放弃之前的属性前加@。
- 选择器对空格敏感。
原标题：【锋利的jQuery】学习笔记02
关键词：jquery
我知道了 