jQuery之知识二-选择器
来源:互联网 发布:sql query language 编辑:程序博客网 时间:2024/06/05 16:39
jQuery 最核心的组成部分就是:选择器引擎。它继承了 CSS 的语法,可以对 DOM 元 素的标签名、属性名、状态等进行快速准确的选择,并且不必担心浏览器的兼容性。jQuery 选择器实现了 CSS1~CSS3 的大部分规则之外,还实现了一些自定义的选择器,用于各种 特殊状态的选择。
一.简单选择器
在使用 jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的 CSS 规则。而 CSS 规则作为参数传递到 jQuery 对象内部后,再返回包含页面中对应元素的 jQuery 对象。 随后,我们就可以对这个获取到的 DOM 节点进行行为操作了。
- 1
- 2
- 1
- 2
在 jQuery 选择器里,我们使用如下的方式获取同样的结果:
- 1
- 1
那么除了 ID 选择器之外,还有两种基本的选择器,分别为:元素标签名和类(class):
- 1
- 2
- 3
- 1
- 2
- 3
为了证明 ID 返回的是单个元素,而元素标签名和类(class)返回的是多个,我们可以采 用 jQuery 核心自带的一个属性 length 或 size()方法来查看返回的元素个数。
- 1
- 2
- 3
- 1
- 2
- 3
同理,你也可以直接使用 jQuery 核心属性来操作:
- 1
- 1
警告:有个问题特别要注意,ID 在页面只允许出现一次,我们一般都是要求开发者要 遵守和保持这个规则。但如果你在页面中出现三次,并且在 CSS 使用样式,那么这三个元 素还会执行效果。但如果,你想在 jQuery 这么去做,那么就会遇到失明的问题。所以,开 发者必须养成良好的遵守习惯,在一个页面仅使用一个 ID。
- 1
- 1
jQuery 选择器的写法与 CSS 选择器十分类似,只不过他们的功能不同。CSS 找到元素 后添加的是单一的样式,而 jQuery 则添加的是动作行为。最重要的一点是:CSS 在添加样 式的时候,高级选择器会对部分浏览器不兼容,而 jQuery 选择器在添加 CSS 样式的时候却 不必为此烦恼。
- 1
- 2
- 3
- 1
- 2
- 3
jQuery 选择器支持 CSS1、CSS2 的全部规则,支持 CSS3 部分实用的规则,同时它还有 少量独有的规则。所以,对于已经掌握 CSS 的开发人员,学习 jQuery 选择器几乎是零成本。 而 jQuery 选择器在获取节点对象的时候不但简单,还内置了容错功能,这样避免像 JavaScript 那样每次对节点的获取需要进行有效判断。
- 1
- 2
- 1
- 2
因为 jQuery 内部进行了判断,而原生的 DOM 节点获取方法并没有进行判断,所以导 致了一个错误,原生方法可以这么判断解决这个问题:
- 1
- 2
- 3
- 1
- 2
- 3
那么对于缺失不存在的元素,我们使用 jQuery 调用的话,怎么去判断是否存在呢?因 为本身返回的是 jQuery 对象,可能会导致不存在元素存在与否,都会返回 true。
- 1
- 2
- 1
- 2
除了这种方式之外,还可以用转换为 DOM 对象的方式来判断,例如:
- 1
- 2
- 1
- 2
二.进阶选择器
在简单选择器中,我们了解了最基本的三种选择器:元素标签名、ID 和类(class)。那么 在基础选择器外,还有一些进阶和高级的选择器方便我们更精准的选择元素。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
目前介绍的六种选择器,在实际应用中,我们可以灵活的搭配,使得选择器更加的精准 和快速:
- 1
- 1
警告:在实际使用上,通配选择器一般用的并不多,尤其是在大通配上,比如:$(‘*’),
这种使用方法效率很低,影响性能,建议竟可能少用。
还有一种选择器,可以在 ID 和类(class)中指明元素前缀,比如:
- 1
- 1
类(class)有一个特殊的模式,就是同一个 DOM 节点可以声明多个类(class)。那么对于这 种格式,我们有多 class 选择器可以使用,但要注意和 class 群组选择器的区别。
- 1
- 2
- 3
- 1
- 2
- 3
多 class 选择器是必须一个 DOM 节点同时有多个 class,用这多个 class 进行精确限定。 而群组 class 选择器,只不过是多个 class 进行选择而已。
- 1
- 1
警告:在构造选择器时,有一个通用的优化原则:只追求必要的确定性。当选择器筛选 越复杂,jQuery 内部的选择器引擎处理字符串的时间就越长。比如:
- 1
- 2
- 1
- 2
三.高级选择器
在前面我们学习六种最常规的选择器,一般来说通过这六种选择器基本上可以解决所有
DOM 节点对象选择的问题。但在很多特殊的元素上,比如父子关系的元素,兄弟关系的元 素,特殊属性的元素等等。在早期 CSS 的使用上,由于 IE6 等低版本浏览器不支持,所以 这些高级选择器的使用也不具备普遍性,但随着 jQuery 兼容,这些选择器的使用频率也越 来越高。
在层次选择器中,除了后代选择器之外,其他三种高级选择器是不支持 IE6 的,而 jQuery 却是兼容 IE6 的。
- 1
- 2
- 1
- 2
jQuery 为后代选择器提供了一个等价 find()方法
- 1
- 2
- 3
- 4
- 5
- 6
- 1
- 2
- 3
- 4
- 5
- 6
jQuery 为子选择器提供了一个等价 children()方法:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
层次选择器对节点的层次都是有要求的,比如子选择器,只有子节点才可以被选择到, 孙子节点和重孙子节点都无法选择到。next 和 nextAll 选择器,必须是同一个层次的后一个 和后 N 个,不在同一个层次就无法选取到了。
在 find()、next()、nextAll()和 children()这四个方法中,如果不传递参数,就相当于传递 了“*”,即任何节点,我们不建议这么做,不但影响性能,而且由于精准度不佳可能在复杂 的 HTML 结构时产生怪异的结果。
- 1
- 1
为了补充高级选择器的这三种模式,jQuery 还提供了更加丰富的方法来选择元素:
- 1
- 1
nextUntil()和 prevUnitl()方法是选定同级的下面或上面的所有节点,选定非指定的所有 元素,一旦遇到指定的元素就停止选定。
- 1
- 1
siblings()方法正好集成了 prevAll()和 nextAll()两个功能的效果,及上下相邻的所有元素 进行选定:
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
警告:切不可写成“$(‘#box’).prevAll(‘p’).nextAll(‘p’).css(‘color’, ‘red’);”这种形式,因为 prevAll(‘p’)返回的是已经上方所有指定元素,然后再 nextAll(‘p’)选定下方所有指定元素,这 样必然出现错误。
理论上来讲,jQuery 提供的方法 find()、next()、nextAll()和 children()运行速度要快于使 用高级选择器。因为他们实现的算法有所不同,高级选择器是通过解析字符串来获取节点对 象,而 jQuery 提供的方法一般都是单个选择器,是可以直接获取的。但这种快慢的差异, 对于客户端脚本来说没有太大的实用性,并且速度的差异还要取决了浏览器和选择的元素内 容。比如,在 IE6/7 不支持 querySelectorAll()方法,则会使用“Sizzle”引擎,速度就会慢, 而其他浏览器则会很快。有兴趣的可以了解这个方法和这个引擎。
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 1
- 2
- 1
- 2
- 1
- 2
- 1
- 2
- 1
- 2
- 1
- 2
- 3
- 1
- 2
- 3
注意:我们应该推荐使用哪种方案呢?其实,使用哪种都差不多。这里,我们推荐使用 jQuery 提供的方法。因为不但方法的速度比高级选择器运行的更快,并且它的灵活性和扩展 性要高于高级选择器。使用“+”或“~”从字面上没有 next 和 nextAll 更加语义化,更加清 晰,jQuery 的方法更加丰富,提供了相对的 prev 和 prevAll。毕竟 jQuery 是编程语言,需要能够灵活的拆分和组合选择器,而使用 CSS 模式过于死板。所以,如果 jQuery 提供了独立 的方法来代替某些选择器的功能,我们还是推荐优先使用独立的方法。
属性选择器也不支持 IE6,所以在 CSS 界如果要兼容低版本,那么也是非主流。但 jQuery 却不必考虑这个问题。
- 1
- 2
- 3
- 1
- 2
- 3
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 4
- 1
- 2
- 3
- 1
- 2
- 3
- jQuery之知识二-选择器
- jQuery之知识二-选择器
- jQuery基础之二 -- 选择器
- jQuery开发之选择器二
- jQuery再学习之二、jQuery选择器
- JQuery学习笔记2:选择器之二
- JQuery学习之(二)选择器
- jQuery笔记(二)之选择器
- jQuery 程序员速成二 之 选择器
- jQuery学习之旅 Item2 选择器【二】
- jQuery学习之旅 2 选择器【二】
- Jquery(二)jquery选择器
- JQuery选择器(二) 层次选择器
- jQuery学习笔记(二)之jQuery选择器
- web前端之锋利的jQuery二:jQuery选择器
- JQuery学习之路(jQuery选择器二)
- JQuery笔记(二)-选择器
- 深入浅出JQuery (二) 选择器
- gcj d题 Fashion Show 二分匹配
- Android UI 窗口体系 —— 源码阅读
- Springmvc3+Spring3+Freemarker整合异常
- 大数据分析挖掘培训课程要点及大纲
- CodeForces 733 C.Epidemic in Monstropolis(贪心)
- jQuery之知识二-选择器
- 南阳 oj 题目27 水池数目
- Linux等待队列
- 关于对String的编解码String(byte[] bytes, Charset charset)的理解
- 2 Spring的组成
- maven环境搭建(笔记)
- Ultrahaptics公司为Holodeck型触觉关闭了2300万美元的资金回合
- Zookeeper(一)伪分布式安装
- js&jq 建议规范条目