购买
下载掌阅APP,畅读海量书库
立即打开
畅读海量书库
扫码下载掌阅APP

3.1 jQuery简述

jQuery是一套简洁、快速、灵活的JavaScript脚本库,它是由John Resig于2006年创建的,它帮助我们简化了JavaScript代码。由于jQuery简便易用,文档非常丰富,受到众多开发人员的推崇。

使用jQuery极大地提高了编写JavaScript代码的效率,让书写出来的代码更加简洁、健壮。同时网络上丰富的jQuery插件也让开发人员的工作变得更为轻松,让项目的开发效率有了质的提升。

说明

jQuery不但为开发人员提供了灵活的开发环境,并且它是开源的,在其背后有很多强大的社区和程序爱好者的支持。

3.1.1 jQuery能做什么

过去只有Flash才能实现的动画效果,jQuery也做到了,并且丝毫不逊色于Flash,这让广大开发人员感受到了Web 2.0时代的魅力。jQuery还受到许多著名网站的青睐,如中国网络电视台、CCTV、京东网上商城、人民网等,许多网站都应用了jQuery。下面我们就来看看网络上使用jQuery实现的绚丽的效果。

1.中国网络电视台应用的jQuery效果

访问中国网络电视台的电视直播页面后,在央视频道栏目中就应用了jQuery实现鼠标移入移出的效果。将鼠标移动到某个频道上时,该频道的内容会添加一个圆角矩形的灰色背景,用于突出显示频道内容,如图3.1所示。将鼠标移出该频道后,频道内容会恢复为原来的样式。

图3.1 中国网络电视台应用的jQuery效果

2.京东网上商城应用的jQuery效果

访问京东网上商城的首页时,在右侧有一个为手机和游戏充值的栏目,这里应用了jQuery实现了标签页的效果。将鼠标移动到“手机充值”栏目上时,标签页中将显示为手机充值的相关内容,如图3.2所示,将鼠标移动到“游戏充值”栏目上时,将显示为游戏充值的相关内容。

3.人民网应用的jQuery效果

访问人民网的首页时,有一个以幻灯片轮播形式显示的图片新闻,如图3.3所示,这里就是应用jQuery的幻灯片轮播插件实现的。

图3.2 京东网上商城应用

图3.3 人民网应用的

3.1.2 jQuery的特点

jQuery是一个简洁、快速的JavaScript脚本库,它能让你在网页上轻松操作文档、处理事件、运行动画效果或者添加异步交互。jQuery可以提高我们的编程效率,它的主要特点如下:

代码精致小巧。jQuery是一个轻量级的JavaScript脚本库,其代码非常小巧,最新版本的jQuery库文件压缩之后只有几十KB。在网络盛行的今天,提高网站用户的体验显得尤为重要,小巧的jQuery完全可以做到这一点。

强大的功能函数。过去在写JavaScript代码时,如果没有良好的基础,很难写出复杂的JavaScript代码。JavaScript是不可编译的语言,在复杂的程序结构中调试错误是一件非常痛苦的事情,大大降低了开发效率。使用jQuery的功能函数,能够帮助开发人员快速地实现各种功能,而且会让代码优雅简洁,结构清晰。

跨浏览器。关于JavaScript代码的浏览器兼容问题一直是Web开发人员的噩梦,经常是页面在IE浏览器下运行正常,但在Firefox下却不兼容,这就需要开发人员在一个功能上针对不同的浏览器编写不同的脚本代码,这无疑是一件非常痛苦的事情。jQuery成功地将开发人员从这个噩梦中解脱出来,jQuery具有良好的兼容性,它兼容各大主流浏览器,支持的浏览器包括IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+。

链式的语法风格。jQuery可以对元素的一组操作进行统一的处理,不需要重新获取对象。也就是说可以基于一个对象进行一组操作,这种方式精简了代码量,减小了页面体积,有助于浏览器快速加载页面,提高用户的体验性。

注意

对于初学者不建议采用链式语法结构。

插件丰富。除了jQuery本身带有的一些特效外,可以通过插件实现更多的功能,如表单验证、拖放效果、Tab导航条、表格排序、树型菜单以及图像特效等。网上的jQuery插件很多,可以直接下载下来使用,并且插件是将JavaScript代码和HTML代码完全分离,便于维护。

3.1.3 jQuery的版本

1.jQuery 1.0

发布时间:发布于2006年8月。

jQuery库的第一个稳定版本,已经具有了对CSS选择符、事件处理和AJAX交互的稳健支持。

2.jQuery 1.1

发布时间:发布于2007年1月。

该版本大幅简化了API,许多较少使用的方法被合并,减少了需要掌握和解释的方法数量。

3.jQuery 1.1.3

发布时间:发布于2007年7月。

该版本变化包含了对jQuery选择符引擎执行速度的显著提升,从jQuery 1.1.3版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。

4.jQuery 1.2

发布时间:发布于2007年9月。

该版本去掉了对XPath选择符的支持,原因是相对于CSS语法,它已经变得多余了。jQuery 1.2版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。

另外,jQuery官方在该版本发布时,同时发布了jQuery UI,这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(Widget),以及一组用于构建高级元素(例如可拖放的界面元素)的工具。

5.jQuery 1.2.6

发布时间:发布于2008年5月。

该版本主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中。

6.jQuery 1.3

发布时间:发布于2009年1月。

该版本使用了全新的选择符引擎Sizzle,库的性能也因此有了极大提升。这一版正式支持事件委托特性。

7.jQuery 1.3.2

发布时间:发布于2009年2月。

该版本进一步提升了库的性能,例如,改进了visible/:hidden选择符和.height()/.width()方法的底层处理机制。另外,也支持查询的元素按文档顺序返回。

8.jQuery 1.4

发布时间:发布于2010年1月14日。

该版本对代码库进行了内部重写组织,开始建立一些风格规范。老的core.js文件被分为attribute.js、css.js、data.js、manipulation.js、traversing.js和queue.js;CSS和attribute的逻辑分离。

9.jQuery 1.5

发布时间:发布于2011年1月31日。

该版本修复了83个bug,解决了460个问题。重大改进有:重写了Ajax模块;新增延缓对象(Deferred Objects);jQuery替身——jQuery.sub();增强了遍历相邻节点的性能;jQuery开发团队构建系统的改进。

10.jQuery 1.6

发布时间:发布于2011年5月。

该版本重写了Attribute模块和大量的性能改进,其最主要的两个更新是:更新data()方法和独立方法处理DOM属性,并区分DOM的attributes和properties。

11.jQuery 1.7

发布时间:发布于2011年11月4日。

该版本包含了很多新的特征,特别提升了事件委派时的性能(尤其是在IE7下)。

12.jQuery 1.7.2

发布时间:发布于2012年3月24日。

该版本在1.7.1的基础上修复了大量的bug,并改进了部分功能。而相比于1.7.2 RC1,只修复了一个bug。值得注意的是:如果你正在使用jQuery Mobile,请使用最新的jQuery 1.7.2和jQuery Mobile 1.1这两个版本,因为之前的jQuery Mobile版本还基于jQuery core 1.7.1或更早的版本。

13.jQuery 1.8

发布时间:发布于2012年8月。

该版本的主要改动有:Sizzle选择器引擎重新架构、重新改造动画处理、自动CSS前缀处理、更灵活的$(html,props)等。

14.jQuery 1.8.3

发布时间:发布于2012年11月14日。

修复Bug和性能衰退问题,解决之前版本在IE9中调用Ajax失败的问题。

15.jQuery 1.9

发布时间:发布于2013年1月。

移除了很多已经过时的API,并优化执行效率。

16.jQuery 1.10

发布时间:发布于2013年6月。

该版本的主要改动有:自由的HTML解析、增强的模块性、修复IE9焦点死亡问题、修复Cordova等。

17.jQuery 1.11.1

发布时间:发布于2014年5月。

该版本的主要改进有:异步模块定义AMD、性能提升、降低启动时间,另外还修复一些Bug。

18.jQuery 2.0

发布时间:发布于2013年4月18日。

该版本不再支持IE 6/7/8,如果在IE9/10版本中使用“兼容性视图”模式也将会受到影响。

19.jQuery 2.1.1

发布时间:发布于2014年5月。

该版本主要修复一些Bug,并解决浏览器的兼容性问题。

说明

以上列出的是jQuery的重要版本的发布时间及主要更新。除此之外,还有一些小范围的升级版本,读者如果有兴趣,可以查看jQuery官方网站(http://jquery.com)中的相关说明。 u4u/XAvTBSl9dmfkheOfA8FFTVOld8fMbhxNWS44faXkQvbd4ZhRCh9dEmALMUcI

点击中间区域
呼出菜单
上一章
目录
下一章
×