JavaScript和jQuery实战手册

章节摘录

译者序JavaScript是Web应用程序开发的必备语言。无论是为Web页面添加交互性还是创建整个应用程序，如果没有JavaScript，今天的Web不会是现在这个样子。另外，正是Ajax技术使得JavaScript从一种脚本语言真正成长为有用且强大的程序设计语言。jQuery是一个快速而且简洁的JavaScript库，它使得以下Web开发工作更加简单：遍历操作HTML文档、事件处理、动画以及快速Web开发中的Ajax互操作等。jQuery完全改变了开发者编写JavaScript的方式和效率。本书是O'Reilly的“The Missing Manual”系列丛书中的一本。“The Missing Manual”系列丛书的目标是为那些没有学习手册的软件和技术填补空白，给读者提供一本权威、易学的参考手册。因此，本书可以作为JavaScript和jQuery的配套手册，帮助读者掌握JavaScript语言基础知识以及基本的jQuery原理和技术，并进一步学习如何使用jQuery来扩展Web站点的功能和交互性。在翻译本书的过程中，我们感觉到本书有如下一些鲜明的特色，值得读者在阅读的过程中关注和利用：•清楚而精炼，针对读者不同需求贴切地安排内容。本书介绍基础知识的内容简洁而精炼，往往通过一些短小的代码例子来清楚地说明知识点的用法，非常易于初学者学习。针对不同读者安排的“快速熟悉”、“常见问题”、“高级用户提示”等特色板块遍布全书。同时，书中有很多“注意”和“提示”，帮助读者更高效地利用本书。附录部分还给出了深入学习JavaScript和jQuery相关知识的参考资料和图书介绍。•手把手地讲解。每一章不仅介绍知识内容，而且配备了配套的动手实践教程，让读者在实践中学习知识，轻松地掌握使用JavaScript及其库开发Web应用的有用技能。•图示丰富而实用。本书中的图示非常丰富，大致上分为两种。一种是体现Web应用程序效果或软件操作的界面图。我们知道，大多数Web动态效果很难通过黑白印刷的图来展现，而本书则通过一种特殊的方式来尽可能清晰地呈现并很好地实现了这一点。通过图示突出显示局部变化，或者用多图来体现变化。另一种则是代码示例说明图，用图示的方法来说明代码的工作机制，以及各个部分的作用和功能。图示的用法是本书乃至整个“The Missing Manual”系列的一个突破。为什么这些技术图书得到众多读者尤其是初学者的青睐，我们想，这是其中一个重要的原因。•交叉参考方便查阅。作为手册，方便速查是必需的条件之一。而本书也通过丰富的交叉参考做到了这一点。正文中用到JavaScript的其他相关知识的时候，都给出了它们在本书中的位置的参考指示，可以帮助读者快速地找到图书中的相关部分，方便知识回顾或复习。•对JavaScript库尤其是jQuery的深入介绍和实际应用。jQuery等库的引入和应用，使得JavaScript的编程方式发生了很大的变化。jQuery日渐大行其道，为越来越多的公司和网络开发者所采用，甚至有专门针对jQuery程序员的招聘。因此，真正的Web开发者很有必要学习和掌握jQuery。而且，你可以花一本书的价格，买两本书。因为本书不仅介绍了JavaScript编程知识，而且以一种实践的方式讲解如何使用jQuery构建高级、炫目的Web应用。完全不必再花钱去购买一本jQuery图书，因为本书介绍的用法已经足够你玩转jQuery。非常高兴能够有机会把这样一本好书介绍给广大读者。参加翻译本书工作的有孙向阳、李军、罗娜、关志兴、王建勇、毛立涛、闫柳青、姜巧生、沈海峰、谢扣林、乔义峰、刘查强、王义强。

前言

前言不久以前，Web实在是一个令人讨厌的地方。用陈旧的HTML构建的Web页面只是显示信息，而没有其他更多的东西。人们单击一个链接，然后等待载入一个新Web页面，这就是他所能获得的交互。现如今，大多数Web站点几乎具有和台式机程序一样的响应性，对于每次鼠标单击都迅速响应。这都得益于我们将要在本书中学习的内容，即JavaScript及其亲密战友jQuery。JavaScriptJavaScript是一种程序设计语言，它允许用动画、交互性和动态的视觉效果来增强HTML的功能。JavaScript可以通过提供即时反馈而使得Web页面更为有用。例如，一个具备JavaScript功能的购物车页面，当访问者选择要购买的一件商品的时候，可以即时显示总金额，以及税费和运费。当某人试图提交一个遗漏了必需信息的Web表单的时候，JavaScript可以产生一条错误消息。JavaScript还允许创建有趣的、动态的和交互性的界面。例如，使用JavaScript，可以将由缩略图组成的一个静态页面转换为一场包含动画的幻灯片放映（我们将在10.2.2节学习如何做到这点）。或者，可以做一些更加微妙的事情，例如，通过将内容组织到很小的面板，访问者只要简单地单击一下鼠标就可以访问它们，从而可以在页面上放置更多的信息，而不必使得页面显得拥挤（参见10.1.1节）。或者，添加一些有用的和吸引人的内容，例如，弹出的工具提示为Web页面上的项目提供补充信息（参见10.4.1节）。JavaScript的主要优点之一是其即时性。它使得页面可以立即对于某人和页面的交互操作做出响应，例如单击一个链接、填充一个表单，或者只是在屏幕上移动鼠标等操作。JavaScript不会遭遇到和PHP这样的服务器端编程相关的令人沮丧的延迟，而后者则依赖于Web浏览器和Web服务器之间的通信。因为JavaScript不会依赖于频繁加载和重新载入Web页面，使用它创建的Web页面给人们的感觉及其操作都更像是桌面程序，而不像是一般的Web页面。如果你访问Google Maps，将会看到JavaScript的实际应用。Google Maps允许我们查看所在城市的地图（或者很多其他地方的地图），放大以获取街道和公交车站的详细视图，或者缩小以得到如何穿越城镇、州或全国的鸟瞰图。尽管在Google之前有很多的地图站点，但它们总是要求重新载入多个Web页面（这通常是一个很慢的过程）来获得想要的信息。相反，Google Maps不需要刷新页面，它对我们的选择做出快速响应。使用JavaScript创建的程序，既有真正简单的程序（例如，弹出一个新的浏览器窗口，其中有一个Web页面），也有像Google Docs这样功能完备的Web应用程序，而后者允许我们使用Web浏览器来创建幻灯片、编辑文档和创建电子表格，其感觉就像是在计算机上直接运行的程序一样。JavaScript简史JavaScript由Netscape于1995年后期发明，它几乎和Web本身一样老。尽管JavaScript在如今广受重视，但是它却有着颇为跌宕起伏的历史。一度认为它是狂热爱好者的编程语言，用来添加不太有用的效果，如像证券报价器一样在Web浏览器状态栏滚动的消息，或者是跟随鼠标光标在页面上移动的、动画的蝴蝶效果。在JavaScript的早期，很容易在网上找到数以千计的JavaScript程序（也叫做脚本），但是，很多这样的脚本通常不会在所有的Web浏览器上工作，并且有时候甚至导致浏览器崩溃。注意：JavaScript和Java编程语言毫无关系。JavaScript最初名为LiveScript，但是，Netscape的市场营销人员确信，如果试图和当时热门的Java语言联系起来，JavaScript应该会得到更多的关注。但是，不要把两者混为一谈，尤其是在求职面试的时候。在早期，JavaScript也遭遇到两个主流浏览器Netscape Navigator和Internet Explorer不兼容的问题。由于Netscape和Microsoft都试图通过添加新的和（表面上）更好的功能来超越对方，这两个浏览器常常以不同的方式工作，这使得人们很难创建在两种浏览器中都能很好工作的JavaScript程序。注意：在Netscape引入了JavaScript之后，Microsoft引入了jScript，这是它们自己的JavaScript版本，包含在Internet Explorer之中。黎明前的曙光就要来临了，并且当前的浏览器（如Firefox、Safari、Chrome、Opera和Internet Explorer 9）都将它们操作JavaScript的很多方式标准化了，这使得编写在大多数浏览器下工作的JavaScript程序容易一些了（在当前的Web浏览器中仍然有一些不兼容，因此，你需要学习一些处理跨浏览器问题的技巧。我们将在本书中学习如何克服浏览器不兼容性的问题）。在过去的几年里，通过在Google、Yahoo和Flickr等特色鲜明的网站上的应用，JavaScript已经获得了重生。这些站点广泛地使用JavaScript来创建交互式的Web应用程序。现在来学习JavaScript是再好不过的时机了。有了已知的充足的知识和已经编写的高质量的脚本，即便你是初学者，也可以为Web站点添加高级的交互，你完全不必要成为一名计算机科学家。注意：JavaScript也称为ECMAScript。ECMAScript是JavaScript规范的“正式”名称，它由名为Ecma国际的国际标准化组织负责开发和维护。JavaScript随处可见JavaScript并不是仅用于Web页面。它已经被证明是如此有用的一种编程语言，如果学习了JavaScript，你可以创建Yahoo Widget和Apple的Dashboard Widget，为iPhone开发程序，并且在像Acrobat、Photoshop、Illustrator和Dreamweaver这些众多的Adobe程序中加入脚本编程功能。实际上，Dreamweaver已经为聪明的JavaScript程序员提供了一种方式来向程序中添加他们自己的命令。此外，Flash的编程语言ActionScript也是基于JavaScript的，因此，如果学习了JavaScript的基础知识，你将能够为承担Flash编程项目做好充分准备。jQueryJavaScript有一个令人尴尬的小秘密：编写起来比较难。尽管JavaScript比很多其他编程语言要简单一些，但它仍然是一门编程语言。并且，很多人（包括Web设计师）发现编程很难。更为复杂的是，不同的Web设计师对JavaScript的理解不同，因此，在Chrome中工作的程序，可能在Internet Explorer 9中完全没有反应。这种常见的情况可能导致在不同的机器和不同浏览器上要花很多时间进行测试，才能确保程序对站点的所有访问者都能很好地工作。这也是jQuery诞生的原因。jQuery是一个JavaScript库，其目的是使得JavaScript编程更容易、更有趣。JavaScript库是一个复杂的JavaScript程序，它简化了有难度的编程任务，并且解决了跨浏览器的问题。换句话说，jQuery解决了JavaScript最头疼的两个问题，即不同Web浏览器复杂和繁琐的特性。在JavaScript编程中，jQuery是Web设计师的秘密武器。有了jQuery，只用单独一行代码就能完成任务，而要编写自己的JavaScript代码来完成这些任务，要写上百行程序并且花很多时间进行浏览器测试。实际上，一本深入介绍JavaScript的图书，至少是本书厚度的两倍，并且，当你读完它（如果你能设法读完的话），你所能做到的事情，只需一点jQuery知识就能够完成一半。这就是为什么本书的主要内容是介绍jQuery，它使你可以如此容易地做到很多事情。jQuery的另一个美妙之处在于，你可以使用上千个易于使用的jQuery插件，向Web站点添加高级功能。例如，FancyBox插件（将在7.4节介绍）允许我们将一个简单的缩略图页面转变成为一个交互性的幻灯片播放，只需要一行程序就能做到！jQuery已经用于数百万个站点，这一点也不令人惊奇。甚至像Drupal和WordPress这样流行的内容管理系统，也内置了支持jQuery的模块。你甚至可以找到一种叫做“jQuery程序员”的招聘职位，而根本不提JavaScript。当你学习jQuery的时候，你就加入了Web设计师和程序员的一个大社群，这些人使用一种简单和更为强大的方法来创建交互的、功能强大的Web页面。……

名人推荐

The Missing Manual系列绝对是最为明智的入门之选……—— Kevin Kelly，《Wired》联合创始人

内容概要

David Sawyer McFarland，Sawyer McFarland Media公司总裁，资深Web应用开发工程师、培训讲师和技术作家。在Web开发方面拥有将近20年的工作经验，具有非常高的知名度和非常大的影响力。曾担任加州大学伯克利分校的网络负责人并负责针对Macworld.com进行了一次完全由CSS驱动的重新设计。曾在《Practical Web Design》《MX Developer's Journal》《Macworld》杂志和CreativePro.com发表了大量关于Web设计的文章，广受读者好评。

书籍目录

目录

The Missing Credits................................................1

前言........................................................................ 5

第一部分：JavaScript 入门

第1章  编写第一个JavaScript 程序........................... 23

1.1 编程简介...............................................................................................24

1.2 如何把JavaScript 添加到页面................................................................27

1.3 第一个JavaScript 程序...........................................................................31

1.4 把文本写到Web 页面上.........................................................................34

1.5附加外部JavaScript 文件.......................................................................35

1.6追踪错误...............................................................................................37

第2章  JavaScript 的语法........................................ 42

2.1 语句......................................................................................................42

2.2 内置函数...............................................................................................43

2.3 数据类型...............................................................................................43

2.4 变量......................................................................................................46

2.5 操作数据类型和变量............................................................................51

2.6 教程：使用变量创建消息.....................................................................56

2.7 教程：请求信息...................................................................................58

2.8 数组......................................................................................................60

2.9 教程：编写使用数组的页面.................................................................68

2.10 对象的简单介绍..................................................................................71

2.11 注释....................................................................................................73

第3章  为程序添加逻辑和控制................................. 77

2.1 使程序智能地响应................................................................................77

2.2 教程：使用条件语句............................................................................89

2.3 使用循环处理重复性任务.....................................................................93

2.4 函数：把有用的代码转换为可复用的命令........................................100

2.5 教程：一个简单测验..........................................................................109

第二部分：jQuery 入门

第4章  jQuery 简介................................................ 117

4.1 JavaScript 库简介................................................................................117

4.2 获取jQuery .........................................................................................119

4.3 把jQuery 添加到页面...........................................................................121

4.4 修改Web 页面：概览...........................................................................124

4.5 理解文档对象模型..............................................................................127

4.6 再谈选择页面元素..............................................................................128

4.7 向页面添加内容.................................................................................138

4.8 设置和读取标签属性..........................................................................141

4.9 读取、设置和删除HTML 属性............................................................147

4.10 操作选择中的每个元素....................................................................148

4.11 自动提取引用...................................................................................151

第5章  动作/响应：让页面通过事件动起来............. 157

5.1 事件....................................................................................................157

5.2 以jQuery 的方式使用事件...................................................................162

5.3 教程：事件简介.................................................................................164

5.4 更多的jQuery 事件概念.......................................................................169

5.5 高级事件管理.....................................................................................176

5.6 教程：一页的FAQ ..............................................................................179

第6章  动画和效果................................................ 184

6.1 jQuery 效果.........................................................................................184

6.2 教程：登录滑块.................................................................................189

6.3 动画....................................................................................................191

6.4 在效果完成后执行一个操作...............................................................195

6.5 教程：动画的仪表盘..........................................................................198

第三部分：构建网页功能

第7章  改进图像................................................... 207

7.1 交换图像.............................................................................................207

7.2 教程：添加翻滚图像..........................................................................212

7.3 教程：带有效果的照片集...................................................................216

7.4 使用jQuery lightBox 的高级照片集.....................................................222

7.5 教程：FancyBox 照片集......................................................................231

第8章  改进导航................................................... 235

8.1 一些链接基础知识..............................................................................235

8.2 在新窗口中打开外部链接...................................................................238

8.3 创建新窗口.........................................................................................241

8.4 在页面上的一个窗口中打开页面.......................................................245

8.5 基本的动画的导航栏..........................................................................249

第9章  扩展Web 表单............................................ 257

9.1 理解表单.............................................................................................257

9.2 为表单添加智能.................................................................................268

9.3 教程：基本表单扩展..........................................................................272

9.4 表单验证.............................................................................................278

9.5 验证教程.............................................................................................291

第10 章  扩展界面................................................. 302

10.1 把信息组织到标签页面板.................................................................302

10.2 为站点添加一个内容幻灯片.............................................................313

10.3 确定页面元素的大小和位置.............................................................320

10.4 添加工具提示...................................................................................327

第四部分：Ajax 与Web 服务器通信

第11 章  初识Ajax.................................................. 343

11.1 Ajax...................................................................................................344

11.2 Ajax 基础知识....................................................................................345

11.3 Ajax 的jQuery 方式.............................................................................351

11.4 JSON.................................................................................................373

第12 章  Flickr 和Google Maps............................... 380

12.1 JSONP 简介.......................................................................................380

12.2 给站点添加一个Flickr Feed ..............................................................381

12.3 教程：给站点添加Flickr 图像...........................................................386

12.4 向站点添加Google 地图....................................................................390

第五部分：提示、技巧和除错

第13 章  让jQuery 发挥最大的作用.......................... 407

13.1 有用的jQuery 提示和信息.................................................................407

13.2 使用jQuery 文档................................................................................411

13.3 遍历DOM .........................................................................................417

13.4 用于操作HTML 的更多函数.............................................................421

13.5 高级事件处理...................................................................................425

第14 章  深入JavaScript ........................................ 428

14.1 操作字符串.......................................................................................428

14.2 在字符串中查找模式........................................................................433

14.3 操作数字...........................................................................................447

14.4 日期和时间.......................................................................................453

14.5 综合应用...........................................................................................459

14.6 编写更高效的JavaScript ...................................................................462

14.7 创建快速载入的JavaScript................................................................468

第15 章  除错和调试.............................................. 470

15.1 常见JavaScript 编程错误...................................................................470

15.2 使用Firebug 调试...............................................................................481

15.3 调试教程...........................................................................................492

附录  JavaScript 资源............................................ 499

编辑推荐

《JavaScript和jQuery实战手册(原书第2版)》编辑推荐：经典畅销书全新升级，系统且深入地讲解了JavaScript和jQuery编程的各项知识，被誉为JavaScript和jQuery编程图书领域的旗帜，被公认为从零开始学习JavaScript和jQuery编程的首选！

作者简介

本书第1版不仅在市场上取得了良好的销售成绩，而且获得了读者极佳的口碑，在JavaScript编程领域独树一帜！第2版结合JavaScript和jQuery最新技术，对全书内容进行了更新和优化，使之在技术上更先进，也更易于学习。本书的最大特色就是内容系统且全面：从JavaScript的基本概念，到Web最流行的JavaScript库——jQuery，再到构建Web功能；从JavaScript各组件和服务的使用，到jQuery和Ajax等开发工具的应用，再到Web应用程序的发布；从基本的Web搭建等基础知识，到jQuery、CSS、Ajax等高级知识……几乎面面俱到，广度与深度兼备。

全书通过大量代码示例说明图的方式说明代码的工作机制，以及各个部分的作用和功能，引导读者在实践中学习和领悟JavaScript的基本思想。通过学习本书，读者不仅能够掌握JavaScript编程的各项技术细节，还能体会到不断剖析、层层递进解决问题的思路。让读者在实践中学，轻松地掌握使用JavaScript和jQuery开发Web应用的有用技能。

---

 JavaScript和jQuery实战手册下载 更多精彩书评

---