锋利的 jQuery | 第2章_jQuery 选择器
2017-05-17 本文已影响0人
东东少将
选择器是 jQuery 的根基，在 jQuery 中，对事件处理、遍历 DOM 和 Ajax 操作都依赖于选择器。如果能熟练地使用选择器，不仅能简化代码，而且可以达到事半功倍的效果。
jQuery选择器是什么
CSS选择器
| 选择器 | 语法 | 描述 | 示例 |
|---|---|---|---|
| 标签选择器 | E{ CSS 规则 } | 以文档元素作为选择器 | div{ color: #FFF } |
| ID选择器 | #ID{ CSS规则 } | 以文档元素的唯一标识符 ID 作为选择器 | #box{color: #FFF} |
| 类选择器 | E.name{ CSS规则 } | 元素的 class 作为选择器 | div.name{ color: #FFF } .name{ color: #FFF } |
| 群组选择器 | E1,E2,E3 { CSS规则 } | 多个选择符应用同样的样式规则 | a,p,div{ color: #FFF } |
| 后代选择器 | E F { CSS规则 } | 元素 E 的任意后代元素 F | #box a{ color: #FFF } |
| 通配选择符 | *{ CSS规则 } | 该文档的所有元素作为选择符 | *{ font-size：12px } |
jQuery选择器
jQuery中的选择器完全继承了 CSS 的风格。利用 jQuery 选择器，可以非常便捷和快速地找出特定的 DOM 元素，然后为它们添加相应的行为，而无需担心浏览器是否支持这一选择器
jQuery选择器的优势
- 简洁的写法：$("#id")
- 支持CSS 1到CSS 3选择器 :XPath 选择器需要查件
-
完善的处理机制:
- 获取网页中不存在的元素也不会报错
- 获取的永远是对象
//判断元素有无
//根据长度判断
if（$("#id").length>0）{
//
}
//转换成 DOM 对象来判断
if($("#id")[0]){
//
}
jQuery 选择器
基本选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
| #id | 根据给定 id 匹配一个元素 | 单个元素 | $("#test")选取 id 为 test 的元素 |
| .class | 根据给定类名匹配元素 | 集合元素 | $(".test")选取所有 class 为 test 的元素 |
| element | 根据给定元素名匹配元素 | 集合元素 | $("p")选取所有 <p> 元素 |
| * | 匹配所有元素 | 集合元素 | $("*")选取所有的元素 |
| selector1,selector2,... selectorN | 将每个选择器匹配到的元素合并后一起返回 | 集合元素 | $("div,span,p.myCalss")选取所有的<div>,<span>和拥有 class 为 myClass 的<p>标签的一组元素 |
层次选择器
| 选择器 | 描述 | 返回 | 实例 |
|---|---|---|---|
$("ancestor descendant") |
选取 ancestor 元素里的所有 descendant（后代）元素 | 集合元素 | $("div span")选取 div 里所有 span 的元素 |
$("parent>clild") |
选取 parent 元素下的 child（子）元素 | 集合元素 | $("div>span")选取 div 元素下元素名是 span 的子元素 |
$("prev+next") |
选取紧挨在 prev 元素后的 next 元素 | 集合元素 | $(".one+div")选取 class 为 one 的下一个 div 同辈元素 |
$("prev~sibling") |
选取 prev 元素之后的所有 sibling元素 | 集合元素 | $("#two~div")选取 id 为 tow 的元素后面的所有 div 同辈元素 |
等价关系
$("#prev〜div")选择器只能选择“prev”元素后面的同辈
<div>元素。而 siblings()方法与前后位置无关，只要是同辈节点就都能匹配
| 选择器 | 方法 | |
|---|---|---|
| 等价 | $(".one +div") |
$(".one").next("div") |
| 等价 | $("#prev～div") |
$("#prev").nextAll("div") |
过滤选择器
基本过滤选择器
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :first | 选取第一个元素 | 单个元素 | $("div:first")选取 div 元素里第一个 div 元素 |
| :last | 选取最后一个元素 | 单个元素 | $("div:last")选取 div 元素里最后一个 div 元素 |
| :not(selector) | 去除所有与给定选择器匹配的元素 | 集合元素 | $("input:not(.myClass)")选取 class 不是 myClass 的 input 元素 |
| :even | 选取索引是偶数的所有元素，索引从 0 开始 | 集合元素 | $("input:even")选取索引是偶数的 input 元素 |
| :odd | 选取索引是奇数的所有元素，索引从 0 开始 | 集合元素 | $("input:odd")选取索引是奇数的 input 元素 |
| :eq(index) | 选取索引等于 index 的元素（index从0开始） | 单个元素 | $("input:eq(3)")选取索引等于 3 的 input 元素 |
| :gt(index) | 选取索引大于 index 的元素（index从0开始） | 集合元素 | $("input:gt(3)")选取索引大于 3 的 input 元素（大于而不包括） |
| :lt(index) | 选取索引小于 index 的元素（index从0开始） | 集合元素 | $("input:lt(3)")选取索引小于 3 的 input 元素（小于而不包括） |
| :header | 选取所有的标题元素h1~h6 | 集合元素 | $(":header")选取网页中所有的标题元素 |
| :animated | 选取当前正在执行动画的所有元素 | 集合元素 | $("div:animated")选取正在执行动画的 div |
| :focus | 选取当前获取焦点的元素 | 集合元素 | $(":focus")选取当前获取焦点的元素 |
内容过滤选择器
过滤规则主要体现在它所包含的子元素或文本内容上
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :contains(text) | 选取含有文本内容为“text”的元素 | 集合元素 | $("div:contains("我")")选取含有文本“我”的 div 元素 |
| :empty | 选取不包含子元素或文本内容的空元素 | 集合元素 | $("div:empty")选取不包含子元素（包括文本）的 div 元素 |
| :has(selector) | 选取含有选择器所匹配的元素的元素 | 集合元素 | $("div:has(p)")选取含有 p 标签的 div 元素 |
| :parent | 选取含有子元素或者文本的元素 | 集合元素 | $("div:parent")选取拥有子元素（包括文本）的 div 元素 |
可见性过滤选择器
根据元素的可见和不可见状态来选择相应的元素
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :hidden | 选取所有不可见的元素 | 集合元素 | $(":hidden")选取所有不可见的元素（包括 display:none;visibility:hidden） |
| :visible | 选取所有可见的元素 | 集合元素 | $("div:visible")选取所有可见的 div |
属性过滤选择器
过滤规则是通过元素的属性来获取相应的元素
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| [attribute] | 选取拥有此属性的元素 | 集合元素 | $("div[id]")选取拥有属性 id 的元素 |
| [attribute=value] | 选取属性值为 value 的元素 | 集合元素 | $("div[title=test]")选取属性 title 为 test 的 div 元素 |
| [attribute!=value] | 选取属性值不等于 value 的元素 | 集合元素 | $("div[title!=test]")选取属性 title 不等于 test 的 div 元素（没有属性 title 的 div 也选取） |
| [attribute^=value] | 选取属性值以 value 开始的元素 | 集合元素 | $("div[title^=test]")选取属性 title 以 test 开始的 div 元素 |
[attribute$=value] |
选取属性值以 value 结束的元素 | 集合元素 |
$("div[title$=test]")选取属性title 以 test 结束的 div 元素 |
[attribute*=value] |
选取属性值包含 value 的元素 | 集合元素 |
$("div[title*=test]")选取属性 title 含有 test 的 div 元素 |
[attribute l=value] |
选取属性等于给定字符串或者以该字符串为前缀的元素 | 集合元素 | $("div[title l='en']")选取属性 title 等于或以 en 为前缀的 div 元素（等于或为前缀('-')） |
[attribute-=value] |
选取属性用空格分隔的值中包含一个给定值得元素 | 集合元素 |
$("div[title-="uk"]")选取属性 title 用空格分隔的值中包含字符 uk 的元素 |
[attribute1][attribute2][attributeN] |
用属性选择器合并成一个复合属性选择器,满足多个条件 | 集合元素 |
$("div[id][title$='test']")选取拥有属性 id，并且属性title以 test 结束的 div 元素 |
子元素过滤选择器
过滤规则相对于其它的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素区分清楚，那么使用起来也非常简单
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :nth-child(index/even/odd/equation) | 选取每一个父元素下的第 index 个子元素或者奇偶元素（index 从 0 开始） | 集合元素 | nth-child(index)从 1 开始匹配所有 eq(index)从 0 开始，只匹配一个元素 |
| :first-child | 选取每个父元素的第一个子元素 | 集合元素 | :first 只返回单个元素；:first-child 选择符将返回每一个父元素匹配的第一个子元素 |
| :last-child | 选取每一个父元素的最后一个子元素 | 集合元素 | 同上 |
| :only-child | 如果某个元素是父元素唯一的子元素，就会被匹配；还含有其他元素，就不会匹配 | 集合元素 | $("ul li:only-child" 在 ul 中选取是唯一子元素的 li 元素) |
注意：eq(index)只匹配一个元素，而 :nth-child 将为每一个符合条件的父元素匹配子元素。同时应该注意到 nth-child(index) 的 index 是从 1 开始的，而 :eq(index) 是从 0 开始的。同理 :first 和 :first-child，:last 和 :last-child 也类似。
表单对象属性过滤选择器
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :enabled | 选取所有可用元素 | 集合元素 | $("#form1:enabled")选取 id 为 form1 的表单内所有可用元素 |
| :disabled | 选取所有不可用的元素 | 集合元素 | $("#form1:disabled")选取 id 为 form1 的表单内所有不可用元素 |
| :checked | 选取所有被选中的元素(单选、复选) | 集合元素 | $("input:checked")选取所有被选中的 input 元素 |
| :selected | 选取所有被选中的选项元素 | 集合元素 | $("select option:selected") 选取所有被选中的选项元素 |
表单选择器
| 选择器 | 描 述 | 返回 | 实例 |
|---|---|---|---|
| :input | 选取 input、textarea、select、button 元素 | 集合元素 | $(":input")选取所有的 input、textarea、select、button 元素 |
| :text | 选取所有单行文本框 | 集合元素 | $(":text")选取所有的单行文本框 |
| :password | 选取所有密码框 | 集合元素 | $(":password")选取所有的密码框 |
| :radio | 选取所有单选框 | 集合元素 | $(":radio")选取所有的单选框 |
| :checkbox | 选取所有多选框 | 集合元素 | $(":checkbox")选取所有的多选框 |
| :submit | 选取所有提交按钮 | 集合元素 | $(":submit")选取所有的提交按钮 |
| :image | 选取所有图像按钮 | 集合元素 | $(":image")选取所有的图像按钮 |
| :reset | 选取所有重置按钮 | 集合元素 | $(":reset")选取所有的重置按钮 |
| :button | 选取所有的按钮 | 集合元素 | $(":button")选取所有的按钮 |
| :file | 选取所有的上传域 | 集合元素 | $(":file")选取所有的上传域 |
| :hidden | 选取所有不可见得元素 | 集合元素 | $(":hidden")选取所有的不可见得元素 |
注意
$(":input")和$("input")的区别
选择器中的注意事项
选择器中含有特殊符号的注意事项
- 选择器中含有"．"、"#"、"("或"]"等特殊字符
//W3C的规定，属性值中是不能含有这些特殊字符的
<div id="id#d">aa</div>
<div id="id[1]">bb</div>
//正确获取方式 转义特殊字符
$("#\\#b");
$("#id\\[1\\]");
- 属性选择器的@符号问题
//1.1.0 版本遗留问题
$("div[@title='test']")
//1.3.1 版本
$("div[title='test']")
选择器中含有空格的注意事项
选择器中的空格也是不容忽视的，多一个空格或少一个空格也许会得到截然不同的结果
//结果会截然不同
$(".test :hidden")
$(".test:hidden")
其他选择器
jQuery提供的选择器的扩展
-
MoreSelectors for jQuery
- .color可以匹配颜色，
- :colIndex可以匹配表格中的列
- :focus可以匹配获取焦点的元素
-
Basic XPath
- 支持XPath选择器
- 降低选择器匹配的效率
其他使用CSS选择器的方法
- document.getElementsBySelector()
- cssQuery()
- querySelectorAll()
