这篇文章来介绍下jQuery的选择器。浏览器
选择器是jQuery的根基,在jQuery中,对事件处理、遍历DOM和Ajax操做都依 赖于选择器。所以,若是能熟练的使用选择器,不只能简化代码,并且能够达到事半功倍的效果。jQuery选择器彻底继承了CSS的风格。利用jQuery 选择器,能够很是便捷的找出特定的DOM元素,而后为它们添加相应的行为,而无需担忧浏览器是否支持这一选择器。ide
jQuery选择器可简单分为基本选择器、层次选择器、过滤选择器、表单选择器。下面经过表格进行一一介绍。动画
1.基本选择器spa
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
$("#id") | 匹配给定的id | 单个元素 | $(“header”) |
$(".class") | 匹配给定的类名 | 集合元素 | $(“.test”) |
$("E") | 匹配给定的标签名 | 集合元素 | $(“div”) |
$("*") | 匹配全部元素 | 集合元素 | $(“*’) |
$("E1, .class, E2,…") | 并集,等价于$(“E1”) U $(“.class”) U $(“E2”) U ……orm |
集合元素 | $(“span, .tips”)对象 |
$("E.class")(只能继承 是标签名.类名形式)索引 |
交集,等价于$(“E1”) ∩ $(“.class”)。注意它和事件 层次选择器$("E .class")的区别,层次选择器要用ip 空格分开,$("E .class")是在$("E")的后代中查找, 而$(“E.class”)只在$(“E”)元素中查找,不是在其 后代中查找 |
集合元素 | $(“div.test”) |
2.层次选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
$(“ancestor descendant1 descendant2 ……”) |
add by zhj 一、查找知足ancestor条件的元素集,假设元素集为A1 二、从A1的全部后代中查找知足descendant1条件的元素集A2 三、从A2的全部后代中查找知足descendant2条件的元素集A3 四、…… 上面所说的后代即子代+孙代+…… 等价于$("ancestor").find("descendant1").find("descendant2").find("……") 可能有人会问,既然是从全部后代中查找,那 $(“ancestor descendant1 descendant2 …… descendantN”)是否等价于 $(“ancestor descendantN”),固然不是,以下。 $(“#go .hi .my”)是蓝色背景的标签,而$("#go my")是蓝色和红色背景的标签 <div id = "go"> <div class = "hi"> <div class = "my"> </div> </div> <div class = "my"> </div> </div> 其实最经常使用的仍是两次查找的形式,即$(“ancestor descendant1"),屡次查找用的场合并很少。 |
集合元素 | $(“body div”) $("div .test"); $("div .test .mytest") |
$(“parent>child”) | 匹配parent下的全部 child(子)元素 |
集合元素 | $(“div>span”) |
$(“prev+next”) | 匹配紧接在prev后的 next元素 |
集合元素 | $(“.error+span”) |
$(“prev~siblings”) | 匹配prev后的全部 siblings元素 |
集合元素 | $(“span~a”) |
3.过滤选择器
3.1 基本过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:first | 匹配第一个元素 | 单个元素 | $(“div:first”) |
:last | 匹配最后一个元素 | 单个元素 | $(“span:last”) |
:even | 匹配索引是偶数的元素 索引从0开始 |
集合元素 | $(“li:even”) |
: odd | 匹配索引是奇数的元素 索引从0开始 |
集合元素 | $(“li:odd”) |
:eq(index) | 匹配索引等于index的元 素(索引从0开始) |
单个元素 | $(“input:eq(2)”) |
:gt(index) | 匹配索引大于index的元 素(索引从0开始) |
集合元素 | $(“input:gt(1)”) |
:lt(index) | 匹配索引小于index的元 素(索引从0开始) |
集合元素 | $(“input:lt(5)”) |
:header | 匹配全部h1,h2…等 标题元素 |
集合元素 | $(“:header”) |
:animated | 匹配全部正在执行 动画的元素 |
集合元素 | $(“div:animated”) |
3.2 内容过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:contains(text) | 匹配含有文本内容text 的元素 |
集合元素 | $(“p:contains(今天)”) |
:empty | 匹配不含子元素或 文本元素的空元素 |
集合元素 | $(“p:empty”) |
:has(selector) | 匹配包含selector元素 的元素 |
集合元素 | $(“div:has(span)”) |
:parent | 匹配含有子元素或文本 的元素 |
集合元素 | $(“div:parent”) |
3.3 可见性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:hidden | 匹配全部不可见 的元素 |
集合元素 | $(“:hidden”) |
:visible | 匹配全部可见元素 | 集合元素 | $(“:visible”) |
3.4 属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
[attr] | 匹配拥有此属性 的元素 |
集合元素 | $(“img[alt]“) |
[attr=value] | 匹配属性值为value 的元素 |
集合元素 | $(“a[title=test]“) |
[attr!=value] | 匹配属性值不等于 value的元素 |
集合元素 | $(“a[title!=test]“) |
[attr^=value] | 匹配属性值以value 开头的元素 |
集合元素 | $(“img[alt^=welcome]“) |
[attr$=value] | 匹配属性值以value 结尾的元素 |
集合元素 | $(“img[alt$=last]“) |
[attr*=vlaue] | 匹配属性值中含有 value的元素 |
集合元素 | $(“div[title*=test]“) |
[attr1][attr2]… | 经过多个属性 进行匹配 |
集合元素 | $(“div[id][title*=test]“) |
3.5 子元素过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:nth-child | 匹配每一个父元素下的 第index个子元素 索引从1开始 |
集合元素 | $(“div:nth-child(2)”) |
:first-child | 匹配每一个父元素的 第一个子元素 |
集合元素 | $(“div:first-child”) |
:last-child | 匹配每一个父元素的 最后一个子元素 |
集合元素 | $(“div:last-child”) |
: only-child | 某元素是它父元素中 的惟一的子元素 则匹配它 |
集合元素 | $(“div:only-child”) |
3.6 表单对象属性过滤选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:enabled | 匹配全部可用元素 | 集合元素 | $(“form :enabled”) |
:disabled | 匹配全部不可用 的元素 |
集合元素 | $(“form :disabled”) |
:checked | 匹配全部被选中的元素 (含单选框,复选框) |
集合元素 | $(“input:checked”) |
:selected | 匹配全部被选中的 选项元素 |
集合元素 | $(“select :selected”) |
4.表单选择器
选择器 | 描 述 | 返 回 | 示 例 |
---|---|---|---|
:input | 匹配全部input, textarea, select, button元素 |
集合元素 | $(“input”) |
:text | 匹配全部文本框 | 集合元素 | $(“:text”) |
:password | 匹配全部密码框 | 集合元素 | $(“:password”) |
:radio | 匹配全部单选框 | 集合元素 | $(“:radio”) |
:checkbox | 匹配全部全部多选框 | 集合元素 | $(“:checkbox”) |
:submit | 匹配全部提交按钮 | 集合元素 | $(“:submit”) |
:image | 匹配全部图像按钮 | 集合元素 | $(“:image”) |
:reset | 匹配全部重置按钮 | 集合元素 | $(“:reset”) |
:button | 匹配全部按钮 | 集合元素 | $(“:button”) |
:file | 匹配全部上传域 | 集合元素 | $(“:file”) |