1.1 jQuery概述

jQuery诞生于2006年,由John Resig开发,如图1.1所示。到现在,jQuery经历了10多年的时间洗涤,成为全球最受欢迎的JavaScript框架。目前,微软的Visual Studio 2008+和Adobe的Dreamweaver CS 5.5+都完全包含了jQuery框架,并实现核心支持和扩展。

图1.1 jQuery框架的作者John Resig

1.1.1 jQuery功能

jQuery封装了常用的JavaScript代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、CSS设计和Ajax交互。可以说,jQuery改变了用户编写JavaScript代码的方式。

由于jQuery最早支持CSS 3选择器,兼容所有主流浏览器,如IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+等,因此它被越来越多的开发人员喜爱和选用。

jQuery功能很强大,它能够帮助用户方便、快速地完成以下任务。

 精确选择页面对象。jQuery提供了可靠而富有效率的选择器,只需要一个CSS选择器字符串,即可准确获取需要检查或操纵的文档元素。

 可靠的CSS样式控制。使用JavaScript控制CSS受限于浏览器的兼容性,而jQuery可以弥补这一不足,它提供了跨浏览器的标准解决方案。

 DOM操作规范化。jQuery可以使用少量的代码完成复杂的DOM操作,对HTML文档的整个结构都能重写或者扩展。使用起来远比JavaScript直接控制便捷。

 标准化事件控制。jQuery提供了丰富的页面事件,这些事件使用简单、易用、易记,不需要考虑浏览器兼容性问题,但是如果使用JavaScript直接控制用户行为,需要考虑的问题就很多,既要考虑HTML文档结构与事件处理函数的合成,还要考虑浏览器不一致性。

 支持网页特效。jQuery内置了一批淡入、擦除、移动之类的效果,以及制作新效果的工具包,用户只需要简单地调用动画函数,就可以快速设计出高级动画效果。如果直接使用JavaScript实现,不仅要考虑CSS动态控制,还要考虑浏览器解析差异,模拟的动画效果或许很生硬,或许很粗糙等。

 快速通信。jQuery对Ajax技术的支持很缜密,它通过消除这一过程中的浏览器特定的复杂性,使用户得以专注于服务器端的功能设计。

 扩展JavaScript内核。jQuery提供了对JavaScript核心功能的扩展,如迭代和数组操作等,增加对客户端、数据存储、JavaScript扩展的支持。

1.1.2 jQuery特性

近年来,互联网对用户体验的重视催生了客户端开发的热潮,由此也产生了大量的JavaScript框架。这些框架有的专注于1.1.1节任务中的一项或两项,有的则试图以预打包的形式囊括各种可能的行为和动态效果。

与其他优秀框架相比,jQuery在以下几个方面更胜一筹。

 沿袭CSS选择符用法,简化选择操作。通过将查找页面元素的机制构建于CSS选择符之上,jQuery继承了简明清晰地表达文档结构的方式。由于大部分用户对于CSS语法比较熟悉,因而使用jQuery就更容易上手。

 无限制扩展。再强大的JavaScript特效库也无法满足用户的个性化需求,jQuery通过提供简单、统一的扩展接口予以解决众口难调的问题。创建新插件的方法很简单,而且拥有完备的文档说明,这促进了大量有创意和有实用价值的模块的开发,甚至在下载的基本jQuery库文件中,多数特性在内部都是通过插件架构实现的。如有必要,可以移除这些内部插件,从而生成更小的库文件。

 兼容浏览器。Web开发领域中一个令人遗憾的事实是,每种浏览器对颁布的标准都有自己的一套不一致的实现方案。任何Web应用程序中都会包含一个用于处理这些平台间特性差异的重要组成部分。jQuery添加一个抽象层来标准化常见的任务,从而有效地减少了代码量,同时也极大地简化了这些任务。

 集合化操作。jQuery选择DOM元素之后,会自动封装成一个集合对象(也称为伪数组),调用jQuery方法可以直接对这些集合元素进行操作,而不需要循环遍历每个返回的元素。相反,.hide()之类的方法被设计成自动操作对象集合,而不是单独的对象。这种称作隐式迭代的技术,使得大量的循环结构变得不再必要,从而大幅地减少代码量。

 优化代码书写,提高开发效率。借助链式语法,jQuery将多重操作集于一行。为了避免过度使用临时变量或不必要的代码重复,jQuery在其多数方法中采用了链式编程模式。这种模式意味着基于一个对象进行的大多数操作的结果,都会返回这个对象自身,以便于为该对象应用下一次操作。

jQuery小巧、便捷,学习门槛比较低,也为使用这个库的自定义代码保持简洁提供了技术保障。

1.1.3 jQuery优势

与其他JavaScript框架相比,jQuery具有以下几个优势。

 体积小,使用灵巧。

 丰富的DOM选择器(CSS 1~CSS 3、XPath)。

 跨浏览器(IE、Firefox、Safari、Opera)。

 链式代码。

 强大的事件、样式支持。

 强大的Ajax功能。

 易于扩展,插件丰富。

1.1.4 jQuery版本

目前,jQuery有三个大版本。

 1.x:兼容IE 6、IE 7、IE 8,使用广泛,官方只做bug维护,功能不再新增。因此,对于一般项目来说,使用1.x版本就可以了。最终版本是1.12.4,发布于2016年5月20日。

 2.x:不再兼容IE 6、IE 7、IE 8,很少有人使用,官方只做bug维护,功能不再新增。如果不考虑兼容低版本的浏览器,可以使用2.x。最终版本是2.2.4,发布于2016年5月20日。

 3.x:不兼容IE 6、IE 7、IE 8,只支持最新的浏览器。除非特殊要求,一般不会使用3.x,很多旧的jQuery插件不支持这个版本。目前该版本是官方主要更新维护的版本。最新版本是3.3.1,发布于2018年1月30日。

jQuery的1.x、2.x和3.x版本都具有相同的公开API,然而它们的内部实现是不同的。选用版本的一般原则是越新越好,jQuery版本是在不断进步和发展的,最新版代表了当时最高的技术水平,也体现了最先进的技术理念。

注意:在1.x版本下,细分版本比较多,各个版本的函数略有差异,使用时应该注意区分。维护IE 6、IE 7、IE 8是一件很头疼的事情,一般可以额外加载一个CSS和JavaScript兼容文件单独处理。不过,现在使用这些浏览器的用户也逐步减少,电脑端用户已经逐步被移动端用户取代,如果没有特殊要求,一般都会选择放弃对IE 6、IE 7、IE 8的支持。

jQuery 3.0版本兼容更广泛的移动设备浏览器,提供更优化的代码,但是与jQuery UI和jQuery Mobile还存在兼容性问题。如果需要支持IE 6、IE 7、IE 8浏览器,或者兼容已经开发的项目,建议可以继续使用1.12版本。

提示:jQuery 3.3.1已经发布,开发团队正在准备4.0版本。jQuery 4.0版本重点已经开始倾向于移除一些特性,不再打算添加新的内容。尽管jQuery 3.3.1还是添加了新特性,如添加.addClass()、.removeClass()和.toggleClass()使其能够接受类数组,但仍要移除一些特性,为jQuery 4.0做准备。有一些方法已经被移除,如.now、.isWindow和.camelCase。