内容发布更新时间 : 2024/6/22 18:40:51星期一 下面是文章的全部内容请认真阅读。

学设计，来火星！(www.hxsd.cn)

JQuery 教程之选择器

jQuery 的基本原理

jQuery 的重点放在从 HTML 页面里获取元素并对其进行操作。如果熟悉 CSS，就会很清楚选择器的威力，

通过元素的特性或元素在文档中的位置去描述元素组。有了 jQuery，就能够利用现有的知识去发挥选择器

的威力，在很大程度上简化JavaScript 代码。

jQuery 的优势

jQuery 强调的理念是写得少、做得多（Write Less，Do More） 。jQuery 独特的选择器、链式的 DOM 操作、事件处理机制和封装完善的 Ajax 都是其他 JavaScript 库望尘莫及的。概括起来，jQuery 有以下优势。 1.轻量级

jQuery 非常轻巧，采用 Dean Edwards 编写的 Packer 压缩后，大小不到 30k。如果使用 Min 版并且在服务

器端启用 Gzip 压缩后，大小只有 18k。 2 强大的选择器

jQuery 允许开发者使用从 CSS1 到 CSS3 几乎所有的选择器，以及 jQuery 独创的高级而复杂的选择器。另

外还可以加入插件使其支持XPath 选择器， 甚至开发者可以编写属于自己的选择器。由于jQuery 支持选择

器这一特性，因此有一定CSS 开发经验的开发人员可以很容易地切入到 jQuery 的学习中来。

3 出色的 DOM 操作的封装

jQuery 封装了大量常用的 DOM 操作，使开发者在编写 DOM操作相关程序的时候能够得心应手。jQuery

轻松地完成各种原本非常复杂的操作，让 JavaScript 新手也能写出出色的程序。

4 可靠的事件处理机制

jQuery 的事件处理机制吸收了 JavaScript 专家 Dean Edwards 编写的事件处理函数的精华，使得 jQuery 在处

理事件绑定的时候相当可靠。 在预留后路、 循序渐进以及非入侵式编程思想方面， jQuery 也做得非常不错。 5 完善的 Ajax

jQuery 将所有的 Ajax 操作封装到一个函数$.ajax()里，使得开发者处理 Ajax 的时候能够专心处理业务逻辑

而无需关心复杂的浏览器兼容性和 XMLHttpRequest 对象的创建和使用的问题。 6 不污染顶级变量

jQuery 只建立一个名为 jQuery 的对象，其所有的函数方法都在这个对象之下。其别名$也可以随时交出控

学设计，来火星！(www.hxsd.cn)

制权，绝对不会污染其它的对象。该特性使 jQuery 可以与其他的 JavaScript 库共存，在项目中放心地引用而不需要考虑到后期可能的冲突。 7 出色的浏览器兼容性

作为一个出色的JavaScript 库，浏览器的兼容性是必须具备的条件之一。jQuery 能够在很多浏览器下正常

运行。jQuery 同时修复了一些浏览器之间的差异，使开发者不必在开展项目前建立浏览器兼容库。 8 链式操作方式

jQuery 中最有特色的莫过于它的链式操作方式——即对发生在同一个 jQuery 对象上的一组动作， 可以直接

连写而无需重复获取对象。这一特点使 jQuery 的代码无比优雅。 9 隐式迭代

当用 jQuery 找到带有.myClass 类的全部元素，然后隐藏它们时，无需循环遍历每一个返回的元素。相反，

jQuery 里的方法都被设计成自动操作对象集合，而不是单独的对象， 这使得大量的循环结构变得不再重要， 从而大幅地减少了代码量。 10 行为层与结构层的分离

开发者可以使用 jQuery选择器选中元素，然后直接给元素添加事件。这种将行为层与结构层完全分离的思 想，可以使 jQuery 开发人员和 HTML 或其他页面开发人员各司其职，摆脱过去开发冲突或个人单干的开

发模式。同时，后期维护也非常方便，不需要在 HTML 代码中寻找某些函数和重复修改HTML 代码。 11 丰富的插件支持 jQuery 的易扩展性，吸引了来自全球的开发者来编写 jQuery 的扩展插件。 目前已经有超过几百种的官方插

件支持，而且还不断有新插件面世。 12 完善的文档

jQuery 的文档非常丰富，现阶段多为英文文档，中文文档在逐渐增多。 13 开源

jQuery 是一个开源的产品，任何人都可以自由的使用并提出改进意见。

jQuery选择器

jQuery 基本选择器

基本选择器是 jQuery 中最常用的选择器，也是最简单的选择器，它通过元素 id、class 和标签名等来查找

DOM 元素。在网页中，每个 id 名称只能使用一次，class允许重复使用。

基本选择器示例?

改变 id 为 one 的元素的背景色 $(function(){

学设计，来火星！(www.hxsd.cn)

$(\}); ?

改变 class 为 mini 的所有元素的背景色 $(function(){

$(\}); ?

改变元素名是 div 的所有元素的背景色 $(function(){

$(\}); ?

改变所有元素的背景色 $(function(){

$('*').css(\}); ?

改变所有的 span 元素和 id 为 two 的元素的背景色 $(function(){

$(\});

层次选择器

如果想通过 DOM 元素之间的层次关系来获取特定元素，例如后代元素、子元素、相邻元素和兄弟元素等，

那么层次选择器是一个非常好的选择。 层次选择器示例 ?

改变 body 内所有 div 的背景色 $(function(){

$(\}); ?

改变 body 内子 div 元素的背景色 $(function(){

$(\}); ?

改变 class 为 one 的下一个 div 元素的背景色 $(function(){

$(\});

学设计，来火星！(www.hxsd.cn)

?

改变 id 为 two 的元素后面的所有 div 兄弟元素的背景色 $(function(){

$(\});

在层次选择器中，第一个和第二个选择器比较常用，后面两个在 jQuery 中有更加简单的方法替代。比如用

$(\替代$(\，用$(\替代$(\

过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素， 过滤规则与 CSS 中的伪类选择器语法

相同，即选择器都以一个冒号开头。按照不同的过滤规则，过滤选择器可以分为基本过滤、内容过滤、可

见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。 基本过滤选择器示例 ?

改变第一个 div 元素的背景色 $(function(){

$(\}); ?

改变最后一个 div 元素的背景色 $(function(){

$(\}); ?

改变 class 不为 one 的 div 元素的背景色 $(function(){

$(\}); ?

改变索引值为偶数的 div 元素的背景色 $(function(){

$(\}); ?

改变索引值为奇数的 div 元素的背景色 $(function(){

$(\});

学设计，来火星！(www.hxsd.cn)

?

改变索引值等于 3 的 div 元素的背景色 $(function(){

$(\}); ?

改变索引值大于 3 的 div 元素的背景色 $(function(){

$(\}); ?

改变索引值小于 3 的 div 元素的背景色 $(function(){

$(\}); ?

改变所有的标题元素的背景色 $(function(){

$(\}); ?

改变当前正在执行动画的元素的背景色 $(function(){

$(\});

each()函数

each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，可以遍历对象、数组的属性值并进

行处理。jQuery 和 jQuery 对象都实现了该方法，对于 jQuery 对象，只是把 each 方法简单的进行了委托：

把 jQuery 对象作为第一个参数传递给 jQuery 的 each 方法.换句话说：jQuery 提供的 each 方法是对参数一

提供的对象的中所有的子元素逐一进行方法调用。而 jQuery 对象提供的 each 方法则是对 jQuery 内部的子 元素进行逐个调用。

这是 jQuery 里的核心代码

jQuery.prototype.each=function( fn, args ){ return jQuery.each( this, fn, args ); }

each 方法的具体实现 jQuery.each(obj,fn,arg)