PDF《第1章》

第1章?jQuery入门 ? 当前的网页开发, 几乎所有的项目都依赖于jQuery框架, 它是一个开源的JavaScript库.

jQuery 的创始人是美国的 John Resig,它于

2006 年1月创建了 jQuery 项目.jQuery 库的目的是使网站 开发人员用较少的代码完成更多的功能(即Write less,do more).它具有极其简洁的语法,并 且克服了不同浏览器平台之间的兼容性,极大地提高了程序员编写网站代码的效率.随着人们对 jQuery 的了解以及其开源特性, 越来越多的人开始用 jQuery 创建项目, 并且对 jQuery 进行完善和 优化. 本章主要内容: 认识 jQuery 与JavaScript 的关系 学习利用浏览器的开发工具调试 jQuery 了解 jQuery 库的核心方法$() 学习创建一个带 jQuery 库的网页 1.1 什么是 jQuery JavaScript 发展了这么多年,却因为很多浏览器有自己的标准而让人使用起来非常头疼. 随着技术进步,jQuery 横空出世了,它到底有什么优势,又为什么在当前会这么流行呢?本 节来揭开 jQuery 流行的真相. 1.1.1 下载并配置 jQuery 运行环境 为了使用 jQuery,首先必须从 jQuery 官网下载最新的 jQuery 库,jQuery 的官方网站网址 如下: http://jquery.com 进入官网后,位于右上角的位置可以看到"Download jQuery"按钮,如图 1.1 所示. 单击这个下载按钮后,官方提供了

3 个下载文件,如图 1.2 所示.

2 jQuery 前端开发实战(视频教学版) 图1.1 下载 jQuery 库图1.2 jQuery 不同的版本下载页面 有3个可供下载的文件,分别是: Production jQuery 版:优化压缩后的版本,具有较小的体积,主要用于部署网站时使用. Development jQuery 版:未压缩版本,有266KB 的大小,一般用于在网站建设时使用这个 版本以便调试. jQuery map 文件:map 文件能够被用来在源代码感知的浏览器上调试压缩后的 jQuery 文件,比如 Google Chrome,它可以增强调试的体验,对于使用 jQuery 的用户来说,一般不 需要下载该文件. 建议同时下载这

3 个文件,放在一个统一的位置,这样可以在需要时进行切换,将鼠标悬 停在要下载的链接上,右击鼠标从弹出的菜单中选择"从链接另存文件为"(Firefox),即可 将选中的 jQuery 文件保存起来,保存文件名自动为 jquery-3.3.1.js. 如果是 Chrome 浏览,右击菜单后选择"链接另存为",保存后的文件名都是一致的. 从下载的 jQuery 库名字可以看出,其扩展名为.js,与自行编写的其他 js 文件一样,jQuery

3 第1章jQuery 入门 库实际上就是一个扩展 JavaScript 功能的外部 js 文件.因此,引用 jQuery 库的方式与引用其 他的外部 js 文件相似,在网页上引用 jQuery 库的代码如下所示: 在网站开发阶段,可以直接引用开发版,即jquery-3.3.1.js 版本,当网站要部署到正式环 境时,可以引用压缩后的 jquery-3.3.1.min.js 版本,这个压缩版本只有 84.8KB 大小,可以减少 网页代码大小,并提高页面加载速度. 1.1.2 jQuery1.x、2.x 和3.x 的区别 虽然目前官方主页已经只支持 3.x 的下载,但是因为一些旧代码的维护或公司的要求,很 多读者可能依然使用的是 3.x 以下的版本.这里我们就简单说明一下三者的区别: 1.x:兼容 IE

6、

7、8(原来是国内首选),是使用最为广泛的,目前官方只做 BUG 维护, 功能不再新增.因此一般项目来说,使用 1.x 版本就可以了,最终版本为 1.12.4(2016 年5月20 日截止). 2.x:不兼容 IE

6、

7、8,很少有人使用,目前官方只做 BUG 维护,功能不再新增.如果 不考虑兼容低版本的浏览器可以使用 2.x,毕竟很多网站已经公开说不再支持 IE6,最终 版本为 2.2.4(2016 年5月20 日截止). 3.x:不兼容 IE

6、

7、8,只支持最新的浏览器,目前该版本是官方主要更新维护的版本. 最新版本为 3.3.1(2018 年1月20 日更新). 具体的使用上差别不是特别大,读者可通过 https://api.jquery.com/官方文档来了解.不同 版本所支持的浏览器也可以通过 https://jquery.com/browser-support/来了解. 1.1.3 jQuery 与JavaScript 的区别 由于 JavaScript 属于一门动态编程语言,因此在学习与使用时极容易引起错误,并且目前 也没有特别好的代码检查工具, 而且编码时最重要的是要兼顾各种不同浏览器之间的代码兼容 性, 比如同样的代码在 IE 中可以运行, 在Firefox 中却无法显示,这常常令程序员们抱怨不已. jQuery 的出现恰恰解决了这些问题. 为了了解 jQuery 代码的简洁易用性,我们 编写一个网页,对比用 JavaScript 和用 jQuery 实现同样的功能需要几行代码.新建一个名为 JavaScript01.html 的网页, 实现表单颜色的更改, 页面的效果如图 1.3 所示. 这个页面包含了一个 HTML 的表单,在表 单外面有两个按钮,用来更改表单中的 input 元 素和textarea元素的背景色, HTML的定义如下: 图1.3 JavaScript 代码和 jQuery 库代码的示例页面

4 jQuery 前端开发实战(视频教学版)

01

02 使用 JavaScript 代码更改 DOM 元素

03

04

05

06 姓名:

07 电子邮件:

08 留言:

09

10

11

12

13 JavaScript 更改表单颜色

14 jQuery 更改表单颜色

15

16

17 HTML 页面上放置了一个表单标签 form,在form 内部有两个 input 元素和一个 textarea 元素, 在form 元素的外面放置了两个按钮, 分别为这两个按钮定义了 onClick 事件, "JavaScript 更改表单颜色"按钮将调用 setColorByJs 函数,而"jQuery 更改表单颜色"将调用 setColorByjQuery 函数,这两个函数在 HTML 的head 部分实现,如下所示.

01

02