第14章-jQuery的基础知识.pdfVIP

第14章jQuery的基础知识

本章内容

o14.1jQuery概述

o14.2下载并配置jQuery

o14.3jQuery的开发工具

o14.4jQuery的调试小工具

o14.5jQuery与CSS3

o14.6综合案例——我的第一个jQuery程序

14.1jQuery概述

o14.1.1jQuery能做什么

o14.1.2jQuery的特点

o14.1.3jQuery的技术优势

14.1.1jQuery能做什么

o最开始时，jQuery所提供的功能非常有限，仅仅能增CSS的选择器

功能，而如今jQuery已经发展到集JavaScript、CSS、DOM和Ajax

于一体的优秀框架，其模块化的使用方式使开发者可以很轻松地开

发出功能强大的静态或动态网页。目前，很多网站的动态效果就是

利用jQuery脚本库制作出来的，如中国网络电视台、CCTV、京东商

城等。

o下面来介绍京东商城应用的jQuery效果，访问京东商城的首页时，

在右侧有一个话费、旅行、彩票、游戏栏目，这里应用jQuery实现

了标签页的效果，将鼠标移动到【话费】栏目上，标签页中将显示

手机话费充值的相关内容，如图14-1所示；将鼠标移动到【游戏】

栏目上，标签页中将显示游戏充值的相关内容，如图14-2所示。

14.1.2jQuery的特点

o（1）代码短小精湛：jQuery是一个轻量级的JavaScript脚本库，其代码非常短小，采用Dean

Edwards的Packer压缩后，只有不到30KB的大小，如果服务器端启用gzip压缩后，甚至只有

16KB的大小！

o（2）强大的选择器支持：jQuery可以让操作者使用从CSS1到CSS3几乎所有的选择器，以及

jQuery独创的高级而复杂的选择器。

o（3）出色的DOM操作封装。jQuery封装了大量常用DOM操作，使用户编写DOM操作相关程序

的时候能够得心应手，优雅的完成各种原本非常复杂的操作，让JavaScript新手也能写出出色的程

序。

o（4）可靠的事件处理机制。jQuery的事件处理机制吸取了JavaScript专家DeanEdwards编写的

事件处理函数的精华，使得jQuery处理事件绑定的时候相当的可靠。在预留退路方面，jQuery也

做的非常不错（5）完善的Ajax。jQuery将所有的Ajax操作封装到一个函数$.ajax里，使得用户处

理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的

创建和使用的问题。

o（6）出色的浏览器兼容性。作为一个流行的JavaScript库，浏览器的兼容性自然是必须具备的条

件之一，jQuery能够在IE6.0+、FF2+、Safari2.0+和Opera9.0+下正常运行。同时修复了一些

浏览器之间的差异，使用户不用在开展项目前忙于建立一个浏览器兼容库而焦头烂额。

o（7）丰富的插件支持。任何事物的壮大，如果没有很多人的支持，是永远发展不起来的。jQuery

的易扩展性，吸引了来自全球的开发者来共同编写jQuery的扩展插件。目前已经有超过几百种的

官方插件支持。

o（8）开源特点。jQuery是一个开源的产品，任何人都可以自由的使用。

14.1.3jQuery的技术优势

ojQuery最大的技术优势就是简洁实用，能够使用短小

的代码来实现复杂的网页预览效果，下面以实例的方式

来介绍jQuery的技术优势。

o在日常生活中，经常会遇到各种各样以表格形式出现的

数据，当数据量很大或者表格格式过于一致时，会使人

变得混乱，所以工作人员常常通过奇偶行异色来达到使

数据一目了然的效果。如果利用JavaScript来实现隔行

变色的效果，需要用for循环遍历所有行，当行数为偶

数的时候，添加不同类别即可。

14.2下载并配置jQuery

o14.2.1下载jQuery

o14.2.2配置jQuery

14