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

2.1
jQuery概述

jQuery概述

jQuery是一个简洁、快速、灵活的JavaScript脚本库。它是由约翰·雷西格(John Resig)于2006年创建的,它帮助人们简化了JavaScript代码。由于jQuery简便易用、文档非常丰富,因此它已被大量开发人员所推崇。jQuery的核心理念是“Write less,do more!”,即倡导写更少代码,做更多事情。

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

2.1.1 jQuery的应用

使用jQuery可以非常方便快捷地获取DOM元素、动态地修改页面样式、动态地改变DOM内容、及时响应用户的交互操作、为页面添加动态效果、统一AJAX操作、简化常见的JavaScript任务。在Web 2.0时代,jQuery还受到许多网站的青睐,例如海尔官网、京东网上商城、去哪儿网等,许多网站都应用了jQuery。下面我们就来看看使用jQuery实现的绚丽效果。

1.海尔官网应用jQuery的效果

海尔官网的一级导航分为五大类:智慧生活、个人与家用产品、商业解决方案、用户服务、购买。在一级导航上可以看到应用了jQuery实现鼠标指针移入、移出的效果。当鼠标指针移入并悬浮在这些一级导航上面时,可以显示相应的二级导航;当鼠标指针移出一级导航时,二级导航会隐藏起来,以实现一级导航和二级导航的联动效果,如图2-1所示。

图2-1 海尔官网应用jQuery的效果

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

京东网上商城有很多的产品类目,为了将这些产品类目以清晰明了的方式展示给用户,京东网上商城采用手风琴式导航的方式来展示所有产品类目。手风琴式导航采用纵向导航的方式,首先列出产品的大类目,然后根据鼠标指针悬浮的效果展示出所有产品的小类目,这也是jQuery应用的一个经典实现。如图2-2所示,将鼠标指针移入并悬浮在家用电器产品大类目上,展示出家用电器的所有产品小类目。

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

3.去哪儿网应用jQuery的效果

网站的首页中经常有一个以幻灯片轮播形式展示广告图片的广告栏,这也是很多网站会采用的一种设计方式。在有限的区域内展示多张广告图片,只能以幻灯片轮播形式来实现。如图2-3所示,该广告栏就是应用jQuery的幻灯片轮播插件实现的。

图2-3 去哪儿网应用jQuery的效果

说明

jQuery不仅适合网页设计师、开发人员以及编程爱好者使用,而且适合在校师生使用,可以说jQuery适合用于任何应用JavaScript的地方。

2.1.2 jQuery的特点

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

1.代码精致小巧

jQuery是一个轻量级的JavaScript脚本库,其代码非常精致小巧。在网络盛行的今天,提高网站用户的体验度显得尤为重要,代码精致小巧的jQuery完全可以做到这一点。

2.功能函数强大

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

3.跨浏览器

JavaScript代码的浏览器兼容问题一直是Web开发人员的噩梦,经常出现页面在Chrome浏览器下运行正常,但在Firefox、IE或者其他浏览器下却不兼容的情况,这就需要开发人员在一个功能上针对不同的浏览器编写不同的脚本代码,这无疑是一件非常痛苦的事情。jQuery成功地将开发人员从这个噩梦中解放出来,现如今浏览器兼容问题或许已经没有那么严重,但是不同厂商的浏览器或多或少仍然存在兼容问题。jQuery具备良好的兼容性,可兼容各大主流浏览器,如IE 6.0+、Firefox 1.5+、Safari 2.0+、Opera 9.0+等。

4.链式的语法风格

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

5.对DOM对象封装

jQuery封装了DOM对象的常用操作。本来使用DOM对象的操作需要很多代码完成的功能,使用jQuery可以轻松完成,大大降低了难度、减少了代码量。

6.AJAX操作完善

jQuery将所有的AJAX操作封装到一个函数$.ajax()中,使得开发人员在处理AJAX的时候能够专心处理业务逻辑而无须关心复杂的浏览器兼容问题以及XMLHttpRequest对象的创建和使用问题。

7.文档丰富

jQuery的文档非常丰富,很多热爱jQuery的团队都在努力完善jQuery的中文文档,例如jQuery的中文API。

8.开源

jQuery是一款开源的产品,任何人都可以自由地使用并提出修改意见。

9.插件丰富

jQuery的易扩展性吸引了来自全球的开发人员编写jQuery的扩展插件。目前,jQuery已经有上百种官方支持的插件,而且还不断有新的插件出现。除了jQuery本身带有的一些功能外,开发人员可以通过插件实现更多的功能,例如表单验证、拖放效果、Tab导航条、表格排序、树形菜单以及图像特效等。网上的jQuery插件很多,读者可以直接下载、使用,并且插件是将JavaScript代码和HTML代码完全分离的,便于维护。

2.1.3 jQuery的版本

1.jQuery 1.0

发布时间:2006年8月。

jQuery的第1个稳定版本,已经具有了对CSS(Cascading Style Sheets,串联样式表)选择符、事件处理和AJAX交互的稳健支持。

2.jQuery 2.0

发布时间:2013年4月。

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

3.jQuery 3.0.0

发布时间:2016年6月。

该版本引入了很多新特性,并为未来的大型改进做准备。不再支持IE 6~IE 8。

4.jQuery 4.0.0

发布时间:2024年2月。

该版本停止支持IE10及更早版本的浏览器。该版本带来了多项改进,包括错误修复、性能提升、代码精简等。

说明

以上列出的是jQuery重要版本的发布时间及主要变化。除此之外,jQuery还有一些小范围的升级版本,读者如果有兴趣,可以查看jQuery官方网站说明。 DBQZjbraOr8jn2qqB5n1ccSNMezz51uBZSfnL98/jqUdw+A9ovQ83aVY/hksVkvK

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