本书是O''''Reilly的“The Missing Manual”系列丛书中的一本。“The Missing Manual”系列丛书的目标是为那些没有学习手册的软件和技术填补空白，给读者提供一本权威、易学的参考手册。因此，本书可以作为JavaScript和jQuery的配套手册，帮助读者掌握JavaScript语言基础知识以及基本的jQuery原理和技术，并进一步学习如何使用jQuery来扩展Web站点的功能和交互性。
以前，Web实在是一个令人讨厌的地方。用简单旧式HTML构建的Web页面只是显示信息，而没有其他更多的东西。人们单击一个链接，然后等待载入一个新Web页面，这就是与它的交互。
现如今，大多数Web站点几乎具有和台式机上的程序一样的响应性，对于每次鼠标单击都迅速响应。这都得益于我们将要在本书中学习的内容，即JavaScript与jQuery。
JavaScript
JavaScript是一种程序设计语言，它允许用动画、交互性和动态的视觉效果来增强HTML的功能。
JavaScript可以通过提供即时反馈而使得Web页面更加有用。例如，当访问者选择要购买的一件商品的时候，一个具备JavaScript功能的购物车页面可以即时显示总金额、税费和运费。当某人试图提交一个遗漏了必需信息的Web表单时，JavaScript可以产生一条错误消息。
JavaScript还允许创建有趣的、动态的和交互式的界面。例如，使用JavaScript可以将由缩略图组成的一个静态页面转换为一场包含动画的幻灯片放映。或者，可以做一些更加微妙的事情，例如，通过将内容组织到很小的面板，访问者只要简单地单击一下鼠标就可以访问它们，从而可以在页面上放置更多的信息，而不必使页面显得拥挤（参见9.6节）。或者，添加一些有用的和吸引人的内容，例如，弹出的工具提示为Web页面上的项目提供补充信息（参见9.5节）。
JavaScript的主要优点之一是其即时性。它使得页面可以立即对于某人和页面的交互操作做出响应，例如单击一个链接、填充一个表单，或者只是在屏幕上移动鼠标等操作。JavaScript不会遭遇到和PHP这样的服务器端编程相关的令人沮丧的延迟，而后者依赖于Web浏览器和Web服务器之间的通信。因为JavaScript不会依赖于频繁加载和重新载入Web页面，所以使用它创建的Web页面在感观和操作方面都更像是桌面程序，而不像是一般的Web页面。
如果你访问Google Maps（http://maps.google.com/），将会看到JavaScript的实际应用。Google Maps允许我们查看所在城市的地图（或者很多其他地方的地图），放大以获取街道和公交车站的详细视图，或者缩小以得到如何穿越城镇、州或全国的鸟瞰图。尽管在Google之前有很多的地图站点，但它们总是要求重新载入多个Web页面（这通常是一个很慢的过程）来获得想要的信息。相反，Google Maps不需要刷新页面，它对我们的选择做出快速响应。
使用JavaScript创建的程序，既有真正简单的程序（例如，弹出一个新的浏览器窗口，其中有一个Web页面），也有像Google Docs（http://docs.google.com/）这样功能完备的Web应用程序，而后者允许我们使用Web浏览器来创建演示文稿、编辑文档和创建电子表格，其感觉就像是在计算机上直接运行的程序一样。
JavaScript简史
JavaScript由Netscape的Brendan Eich于1995年后期只用了不到10天时间发明的，它几乎和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国际（http://www.ecmascript.org/）的国际标准化组织负责开发和维护。
JavaScript随处可见
JavaScript并不是仅用于Web页面。已经证明它是非常有用的一种编程语言，如果学习了JavaScript，你可以创建Yahoo！组件和Google App，为iPhone开发程序，并且在像Acrobat、Photoshop、Illustrator和Dreamweaver这些众多的Adobe程序中加入脚本编程功能。实际上，Dreamweaver已经为聪明的JavaScript程序员提供了一种方式来向程序中添加他们自己的命令。
在Yosemite版的Mac OS X操作系统中，Apple让用户通过JavaScript自动操作Mac系统。此外，JavaScript应用于许多实用的前端Web开发工具，如Gulp.js（可自动压缩图像、CSS和JavaScript文件）以及Bower（使得快速而方便地下载常见的JavaScript库，如jQuery、jQuery UI或AngularJS到本机上）。
JavaScript在服务器端开发方面也越来越受欢迎。Node.js平台（谷歌V8的一款 JavaScript引擎，可在服务器上运行JavaScript）完全被Walmart、PayPal、eBay这样的大公司接受。学习JavaScript甚至可以从事构建复杂的服务器端应用开发。事实上，JavaScript对前端（即 JavaScript在Web浏览器中运行）和后端（在Web服务器上运行）的组合称为全栈JavaScript开发。
换言之，现在是学习JavaScript的最好时机！
jQuery
JavaScript有一个令人尴尬的小秘密：编写起来比较难。尽管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站点添加高级功能。例如，jQuery UI插件（参见9.1节）可创建许多复杂的用户界面元素，如标签面板、下拉菜单、弹出式日期选择器日历，只需要一行程序就能做到！
jQuery已经用于数百万个站点（http://trends.builtwith.com/javascript/jQuery），这一点也不令人惊奇。甚至像Drupal和WordPress这样流行的内容管理系统，也内置了支持jQuery的模块。你甚至可以找到一种叫做“jQuery程序员”的招聘职位，而根本不提JavaScript。当你学习jQuery的时候，你就加入了Web设计师和程序员的一个大社群，这些人使用一种简单和更为强大的方法来创建功能强大的交互式Web页面。
HTML：主题结构
如果没有Web设计的两大支柱HTML和CSS，JavaScript一筹莫展。很多程序员提到，3种语言构成了一个Web页面的三个“层”：HTML提供了结构层，以一种更有意义的方式来组织图片和文字等内容；CSS（Cascading Style Sheet，层叠样式表）提供表现层，使得HTML中的内容很好地显示；JavaScript添加行为层，给Web页面带来活力，使它能够和Web访问者交互。
换句话说，要掌握JavaScript，我们还需要很好地理解HTML和CSS。
注意 要了解HTML和CSS的完备介绍，请参阅Elisabeth Robson和Eric Freeman编写的《Head First HTML with CSS and XHTML》。如果需要CSS的技巧性主题的深入介绍，请参阅David Sawyer McFarland所著的《CSS3: The Missing Manual》（这两本书都由O''Reilly出版）。
HTML（HyperText Markup Language，超文本标记语言）使用叫做标签的简单命令来定义Web页面的各个部分。例如，下面的HTML代码创建了一个简单的Web
页面：
Hey, I am some body text on this web page.
这个示例可能不是很令人兴奋，但是它具备了一个Web页面所需的所有基本元素。这个页面开始的第一行是文档类型声明，或者简称为doctype，它说明了页面的文档类型以及它符合哪个标准。HTML实际上有几种不同的版本，并且对于每个版本使用不同的doctype。在这个例子中，该页面的doctype是HTML5；一个HTML 4.01或XHTML文档的doctype更长一些，并且还包含了一个URL，它把Web浏览器指向互联网上的一个文件，其中包含了该类型文件的定义。
实际上，doctype告诉Web浏览器如何显示该页面。doctype甚至可以影响到CSS和JavaScript如何工作。如果doctype不正确或者缺少doctype，我们可能会发现脚本有很多跨浏览器的差别而最终四处碰壁。换句话说，总是要在HTML中包含一个doctype。
历史上有许多版本的HTML类型（HTML 4.01 Transitional，HTML 4.01 Strict，XHTML 1.0 Transitional，XHTML 1.0 Strict），但它们巨大、复杂的代码让人在使用它们时容易敲错。推荐使用代码HTML5中更短、更简单的doctype（）。
HTML标签如何工作
在前面的示例中，和任何Web页面的HTML代码一样，可以看到大多数的命令都成对地出现，并且包含一段文本或其他命令。尖括号之间的内容，也就是那些标签，都是告诉Web浏览器如何显示页面的指令。标签就是超文本标记语言的“标记”部分。
开始标签告诉浏览器指令从哪里开始，而结束标签告诉指令在哪里结束。结束标签总是在第一个尖括号符号（<）之后包含一个斜杠（/）。例如，标签
表示一段文本的开始，而
表示其结束。某些标签未包含结束标签，比如这类单标签。
对于功能正常的Web页面，必须至少包含如下3个标签：
标签出现在Web页面刚开始的地方（在doctype之后），并且在Web页面末尾再次出现（带有一个斜杠）。这个标签告诉Web浏览器，这个文档中包含的信息是使用HTML编写的，而不是用其他某种语言编写的。页面的所有内容（包括其他的标签）都出现在开始和结束标签中。
如果把Web页面看做一棵树，标签就是它的树干。从树干伸展出来的是两个分支，分别代表任何Web页面的两个主要部分，即标题和正文。
Web页面的标题由标签括起来，它包含了页面的标题。它还提供了可供浏览器和Web搜索引擎使用的其他不可见的信息（例如，搜索关键字）。
此外，标题还可以包含Web浏览器用来显示Web页面和增加交互性的信息。例如，把CSS放入文档的标题部分。文档的标题也经常包含指向JavaScript程序的链接和指向其他JavaScript文件的链接。
Web页面的正文包含在一对标签中，其中包括了出现在浏览器窗口中的所有信息，包括标题、文本、图片等。
在标签内，我们通常可以看到如下标签：
用
标签告诉Web浏览器一段文本开始，而用
表示一段文本结束。标签突出显示文本。如果把某段文本包含在成对的标签和中，将会得到粗体文本。HTML代码段Warning!告诉Web浏览器以粗体显示单词 “Warning!”。
标签（或者叫做锚点标签）在Web页面中创建了一个超链接。当单击的时候，超链接可以跳转到Web上的任何地方。通过在标签中放置一个Web地址，告诉浏览器该链接指向何处。例如，可以输入Click here!。
浏览器知道，当访问者单击了“Click here!”的时候，它应该跳转到Missing Manual Web站点。这个标签的href部分叫做属性，而这个URL（Uniform Resource Locator，统一资源定位符或Web地址）是值。在这个例子中，http://www.missingmanuals.com是href属性的值。
快速熟悉
验证Web页面
正如前面所介绍的，Web页面的doctype标识用来创建Web页面的HTML或XHTML的类型。规则根据类型而略有不同，例如，和HTML 4.01不同，XHTML不允许拥有一个未结束的
标签，并且要求所有的标签名和属性都是小写的（例如，而不是）。HTML5包含了新的标签，并且允许你使用HTML或XHTML语法。由于每个HTML版本使用不同的规则，因此总是需要验证Web页面。 标签表示一段基本的信息。其他的标签也提供了进一步的结构化线索，例如， 标签标记的内容）显示为红色和1.5em高”（em是基于浏览器常规文本大小的一个单位或度量）。如图I-1所示，即便像这样的一个简单样式也包含几个元素： 标签，这让Web浏览器使用这个样式的格式化指令来格式化所有的 标签。使用CSS所提供的范围广泛的选择器，加上一点儿创新性，我们就可以实现对页面格式化的很好控制（选择器是使用jQuery的一个重要的部分，将从4.6节开始详细介绍它）。
HTML验证器是确保Web页面编写正确的一个程序。它检查页面的doctype，然后分析页面中的代码看它是否符合doctype定义的规则。例如，验证器会标记出拼写错误的标签名或未结束的标签等错误。万维网联盟（World Wide Web Consortium，W3C）是负责Web上使用的众多技术的组织，它有一个免费的在线验证器，位于http://validator.w3.org。我们可以把自己的HTML代码复制并粘贴到一个Web表单，上传到一个Web页面，或者把验证器指向Web上已经存在的一个页面，验证器会分析HTML并报告该页面是否有效。如果有任何错误，验证器告诉你错误是什么以及错误发生在HTML文件的哪一行。
验证HTML不只是为了保证良好的形式，它也有助于确保JavaScript程序正常运行。很多JavaScript涉及操作一个Web页面的HTML：例如，标识一个特定的表单字段，或者在特定位置放置新的HTML（例如一条错误消息）。为了让JavaScript能够访问和操作Web页面，HTML必须保持正确的工作顺序。忘了结束一个标签，多次使用同样的ID名，或者不正确地嵌套HTML标签，都可能使得JavaScript代码不能正常运行或者根本无法运行。
CSS：为页面添加样式
在网络时代早期，HTML曾经一度是需要掌握的唯一语言。我们可以构建带有彩色文本和图形的页面，并且使得单词以不同的大小、字体和颜色显示。但如今，访问者期待从Web站点得到更多，因此，我们需要使用一种新的、更为灵活的技术，即CSS，从而给页面更高级的视觉效果。CSS是一种格式化语言，可用于美化文本、构建复杂的页面布局以及为站点广泛添加样式。
把HTML仅仅看做构建一个Web页面的语言。它帮助我们标识出想要让世界知道的内容。像和
这样的标签表示标题，并且赋予了相关的重要性：1级标题比2级标题更为重要。
标签表示一个项目符号列表（例如，为了生成一个更为智能的配方成分列表）。
另一方面，CSS为组织良好的HTML内容添加了设计才能，使得它更美丽并且更容易阅读。基本上，CSS样式只是告诉Web浏览器如何在页面上显示特定元素的一条规则。例如，可以创建一条CSS规则使得所有的标签以36像素的高度显示，字体为Verdana，颜色为橙色。CSS可以做很多功能强大的事情，例如，添加边框、改变页内边距，甚至控制一个页面元素的确切位置。
说到JavaScript，对页面做出的一些最有价值的改变涉及CSS。我们可以使用JavaScript来给一个HTML标签添加CSS样式，或者从该标签删除一个CSS样式，或者根据访问者的输入或鼠标单击来动态地改变CSS属性。我们甚至可以从一种样式的一个属性动态地变换为另一个样式的该属性（例如，将背景颜色动态地从黄色修改为红色）。例如，可以通过直接修改CSS的display属性来让一个页面元素显示或隐藏。要实现一个条目在屏幕上的动画，可以使用JavaScript来动态地修改CSS position属性。
样式剖析
单个样式定义一个元素的外观是很常见的用法。它实际上是一条规则，告诉Web浏览器如何格式化某内容，把标题变蓝色、围绕照片绘制一个红色边框，或者创建一个150像素宽的边栏来容纳链接列表。如果样式可以说话，它会说：“嗨，浏览器，让这个看起来像这样。”样式实际上由两个元素组成：浏览器要格式化的Web页面元素（选择器），以及实际的格式化指令（声明块）。例如，选择器可以是一个标题、一段文本、一张照片等。声明块可以把文本变为蓝色、围绕段落添加一个红色边框，或者把照片放置到页面的中央，其可能性是无限的。
注意 技术类型通常遵从W3C的领导，并且叫做CSS样式规则。本书交叉地使用术语“样式”和“规则”。
当然，CSS样式不会用流畅的英语来交流。它们有自己的语言。例如，要设置Web页面上所有段落的字体颜色和字体大小，应该这样编写：
p { color: red; font-size: 1.5em; }
这个样式只是说：“让所有段落的文本（以
选择器。选择器告诉浏览器要样式化页面上的哪一个或哪几个元素，例如标题、段落、图像或链接。在图I-1中，选择器（p）引用所有的
声明块。跟在选择器后面的代码包含了我们想要对选择器应用的所有格式化选项。这个块以一个左花括号（{）开头，以一个右花括号（}）结束。
声明。在声明的左花括号和右花括号之间，添加一个或多个声明，或者格式化指令。每个声明有两个部分，一个属性和一个值，然后以一个分号结束。冒号将属性名和值分割开，如“color : red”。
属性。CSS提供了范围广泛的格式化选项，叫做属性。属性是一个单词，或者连字符连接的几个单词，表示某种样式效果。大多数属性拥有一个直白的名字，例如，font-size、margin-top和background-color。例如，background-color属性设置背景颜色（可以猜想得到）。
注意 如果需要复习有关CSS的知识，请阅读《CSS3: The Missing Manual》。
值。最后，将通过给一个CSS属性赋值来表现自己的创新能力，例如，使背景为蓝色、红色、紫色或黄绿色。不同的CSS属性需要特定类型的值，包括颜色（例如，红色或#FF0000）、长度（例如，18px、2in或5em）、URL（例如，images/background.gif）或者一个指定关键字（例如，top、center或bottom）等。
我们不需要像图I-1那样把样式写成单独一行。很多样式有多个格式化属性，因此，将它们划分为多行可以使其更容易阅读。例如，我们可能想要把选择器和左花括号放在第一行，每个声明独占一行，右花括号独自在最后一行，如下所示：
p {
color: red;
font-size: 1.5em;
}
缩进格式也有帮助，可以缩进一个制表符或者两个空格，从而在视觉上把选择器和声明区分开来，从而很容易搞清楚哪个是哪个。最后，在冒号和属性值之间添加一个空格是可选的，但是添加空格可以增加样式的可读性。实际上，可以在二者之间添加任意多个空格。例如，color:red、color: red和color: red都有效。
用于JavaScript编程的软件
要创建HTML、CSS和JavaScript组成的Web页面，只需要像Notepad（Windows）或TextEdit（Mac）这样的一个基本文本编辑器就可以了。但是，在输入了数百行JavaScript代码之后，你可能想要尝试一个更适合于编写Web页面的程序。这里列出一些常用的程序，既包括免费的也包括需要付费购买的。
注意 有数百种工具可以帮助我们开发Web页面和编写JavaScript程序，因此，下面并不是一个完整的列表。可以把它们看做当前JavaScript爱好者使用的最流行、最棒的选择。
免费程序
除了这里列出的以外，还有很多免费的程序可以用来编辑Web页面和样式表。如果你仍然使用Notepad和TextEdit，不妨试试这里列出的工具。下面是你可以选择开始尝试的工具列表：
Brackets（Windows、Mac、Linux，http://brackets.io）是一款来自Adobe的开源代码编辑器。它是免费的（名为Edge Code的商业版功能有丰富），且有包括浏览器预览在内的许多很好的特性。它甚至是以JavaScript编写的！
Notepad++（Windows，http://notepad-plus-plus.org）是程序员的朋友。它可以突出显示JavaScript和HTML代码的语法，并且允许我们保存宏并为其指定快捷键，以便可以自动地插入最经常使用的代码段。
HTML-Kit（Windows，www.chami.com/html-kit）是一款功能强大的HTML/XHTML 编辑器，包含了很多有用的功能，例如，直接在程序中预览一个Web页面的功能（从而不必在浏览器和编辑器之间来回切换），添加HTML标签的快捷键等。
CoffeeCup Free HTML Editor（Windows，www.coffeecup.com/free-editor）是商业软件CoffeeCup HTML编辑器（售价49美元）的免费版本。
TextWrangler（Mac，www.barebones.com/products/textwrangler）是一款免费软件，实际上是BBEdit的精简版本。BBEdit是一款用于Mac的高级、知名的文本编辑器。TextWrangler不具备BBEdit所有内置的HTML工具，但它确实包括语法着色（用不同的颜色突出显示标签和属性，以便很容易扫描页面并区分开各个部分），支持FTP（因此，可以把文件上传到Web服务器）等。
Eclipse（适用于Windows、Linux、Mac， www.eclipse.org）是针对Java开发者的一款免费、流行的软件，它包含了使用HTML、CSS和JavaScript的工具。还有专门针对JavaScript开发人员的一个版本（www.eclipse.org/downloads/packages/eclipse-ide-JavaScript-web-developers/indigor），以及为jQuery添加自动填全功能的Eclipse插件（http:// marketplace.eclipse.org/category/free-tagging/jQuery）。
Aptana Studio（适用于Windows、Linux、Mac， www.aptana.org）是一款强大、免费的编程环境，带有使用HTML、CSS、JavaScript、PHP和Ruby on Rails的工具。
Vim和Emacs是UNIX系统上的文本编辑器。它们存在于OS X和Linux上，你也可下载Windows版本。它们受很多程序员喜欢，但对大多数人来说不是很容易上手。
商业软件
商业Web站点开发程序有很多，从便宜的文本编辑器到具备所有配件的、完整的Web站点构建工具，以下是其中一部分：
Atom（Windows和Mac，https://atom.io）是新出现在社区中的软件。还未正式售卖，但beta版是免费的。Atom由 GitHub（一个用于项目分享和协作的网站）上的爱好者开发，提供了大量可满足当今开发者需求的特性。它突出了模块设计使得很多第三方插件可以提高程序功能性。
SublimeText（Windows、Mac和Linux，https://www.sublimetext.com）是许多程序员的最爱。这款编辑器（价格70美元）为JavaScript程序员包括了很多省时的特性，如“自动匹配字符”可自动显示成一对标点符号的第二个符号（例如，当你键入了左括号，程序会自动插入右括号）。
EditPlus（Windows，www.editplus.com）是一款便宜的文本编辑器（售价35美元），包括语法着色、FTP、自动补全和其他节省录入工作量的功能。
BBEdit（Mac，www.barebones.com/products/bbedit）。这是很多人喜欢的Mac文本编辑器（售价99.99美元），具有很多操作HTML、XHTML、CSS、JavaScript的工具。包括很多有用的Web构建工具和快捷方式。
Dreamweaver（Mac和Windows，www.adobe.com/products/dreamweaver.html）是可视化的Web页面编辑器（售价399美元）。它允许我们看到页面在Web浏览器中的外观。该程序还包括一款强大的可用于编写JavaScript程序的文本编辑器，以及优秀的CSS创建和管理工具。要全面学习如何使用这一功能强大的软件，请阅读《Dreamweaver CC: The Missing Manual》一书。
关于本书
和Microsoft Word或Dreamweaver这样的软件不同，JavaScript不是一家公司开发的单一产品。JavaScript没有开发支持人员来为普通Web开发者编写一本易于阅读的手册。尽管你可以在Mozilla.org（例如，https://developer.mozilla.org/en/JavaScript/Reference）或www.ecmascript.org/这样的站点上找到很多的信息，但没有关于JavaScript编程语言的权威资源。
由于没有关于JavaScript的手册，因此人们常常不知道从何处开始着手学习JavaScript。并且JavaScript的出色之处甚至常常难倒有经验的Web专业人员。本书可以作为JavaScript的配套手册。在本书中，读者可以看到关于使用JavaScript来创建高度交互的Web页面的一步步的说明。
同样，可以在http://api.jquery.com找到关于jQuery的详细文档。但是，这是程序员写给程序员的，因此，说明比较简短而且偏技术化。虽然jQuery比常规的JavaScript编程要更加容易，但本书将教你一些基本的jQuery原理和技术，以便当你使用jQuery扩展自己的Web站点时可以从正确的路径出发。
本书专为那些拥有一些Web页面构建经验的读者而编写。你需要熟悉HTML和CSS，才能更好地阅读和利用本书，因为JavaScript通常与HTML和CSS紧密协作来实现其魔力。本书主要的内容是为高级初学者或中级计算机用户编写的。但是，如果你是构建网页的新手，本书中名为“快速熟悉”的部分将提供你需要理解话题的介绍性信息。相反，如果你是一名高级Web页面设计者，那么，请注意那些名为“高级用户提示”的部分。它们提供了对于有经验的计算机爱好者的更多技术提示、技巧和快捷方式。
注意 本书还适时地推荐其他的图书，这些图书介绍了超出JavaScript使用手册之外的更为专门的主题。有时候推荐的图书来自于O''Reilly Media的“Missing Manual”系列，但并不总是如此。如果有O''Reilly系列图书之外的好书，我们也会告诉你。
本书介绍JavaScript的方法
JavaScript是一种真正的编程语言：它不像HTML或CSS那样工作，但是，它有自己的一套（常常是复杂的）规则。对于Web设计师来说，调整思维并开始像计算机程序员那样思考问题并不总是很容易的事情，并且也没有一本图书可以教给你关于JavaScript的所有知识。
本书旨在将你变成下一位伟大的程序员。本书要帮助Web设计师熟悉JavaScript的点点滴滴，进而开始学习jQuery，以便用它来尽可能快速而容易地为Web站点添加真正有用的交互。
在本书中，我们学习了JavaScript和编程的基础知识，但是只是基础知识还不够创建令人激动的Web页面。要介绍构建高级的、交互式Web页面所需的所有JavaScript知识，本书的篇幅都是不够的。相反，本书介绍了如何使用专业的（并且免费的）JavaScript代码，从而将你从细小、耗费时间的细节中解放出来，并能够创建出在不同浏览器中运行良好的JavaScript程序。
我们会学习JavaScript的基础知识，然后直接学习如何在jQuery的一些帮助（是很多帮助）下，开发具有交互性的高级Web页面。考虑一下这种方式：我们自己砍伐树木和锯木材，自己建造窗户、门和门框，自己贴瓷砖等来盖一座房子。这种DIY的方法是很多JavaScript图书中常见的方法。但是，谁有那么多的时间呢？本书的方法更像是通过利用一些已有的构件并且使用基本的技能将它们组合起来，从而盖一座房子。最终的结果是，用零散的时间盖起了一栋漂亮而功能齐全的房屋，并且我们不必花时间来学习这个过程的每一个步骤。
内容梗概
本书划分为5部分，每部分各包含几章。
第一部分从非常基础的内容开始。我们将学习JavaScript的基本构建块，并且得到一些关于计算机编程的有用的通用提示。这一部分教你如何为Web页面添加脚本，存储和操作信息，并且给程序添加智能以使它能够对不同的条件做出响应。我们还学习了如何和浏览器窗口通信，存储和读取cookie，对鼠标单击和表单提交等各种事件做出响应，以及修改Web页面的HTML。
第二部分介绍了Web最流行的JavaScript库：jQuery。这里，我们将学习这一惊人编程工具的基础知识，该工具将使你成为一个高效和优秀的JavaScript程序员。我们将学习如何选择和操作页面元素，通过让页面元素响应访问者，从而增加交互性，并且添加漂亮的视觉效果和动画。
第三部分包含了jQuery的姐妹工程：jQuery UI。jQuery UI是一个包含了有用的组件和效果的JavaScript库。它使添加常用用户界面元素，如标签面板、对话框、折叠面板、下拉菜单等变得很简单。jQuery UI可为未来大型Web应用构建一体化且时尚的用户界面。
第四部分讨论jQuery和JavaScript的高级应用。特别地，第13章介绍了凭借一己之力就使得JavaScript成为最耀眼的Web语言的一种技术。在该部分中，我们会学习如何使用JavaScript与Web服务器通信，以便页面能够接收信息并根据Web服务器提供的信息来更新自己，而不必载入一个新的Web页面。第14章教你如何使用jQuery和jQuery UI一步步实现一个任务列表应用程序。
第五部分覆盖更多复杂概念。读者将会学习如何高效使用jQuery以及深入研究高级jQuery概念。该部分也在似乎什么都无效的时候给你提供帮助：可能完美地编写了JavaScript程序却没有看到它达到我们所预期的效果（或者情况更糟，它根本无法运行）。你将了解程序员新手最常犯的一些错误，并学习发现程序中的bug并进行修正的方法。
在本书的最后有一个附录，给出了帮助你进一步学习JavaScript编程语言的参考书目列表。
基础知识
要使用本书并真正地使用计算机，需要知道一些基础知识。本书假设你已经熟悉了一些术语和概念：
单击。本书使用3种指示来要求你使用计算机鼠标或者触摸板。单击意味着把鼠标移动到屏幕上的某处，然后（不要再移动鼠标）按下并释放鼠标上的单击按钮（或者笔记本的触摸板）。右键单击意味着用鼠标右键做同样的事情。双击当然意味着快速连续单击两次，而根本不移动鼠标。拖动意味着在按下鼠标按钮的同时移动鼠标。
提示 如果使用Mac，并且没有鼠标按钮右键，可以通过按下Control键并单击一个鼠标按钮来完成同样的事情。
当告诉你在Mac上z-click某内容，或者在PC上Ctrl-click某内容，你可以在按下z或Ctrl按键的同时单击（这两个按钮都在空格键附近）。
菜单。菜单是屏幕或窗口顶部的单词：File、Edit等。单击一个按钮就会出现一个命令列表，就好像这个命令列表已经在窗口的隐藏处写好了，我们只是将其拉下来。
键盘快捷方式。如果试图以一种创新的方式来录入，那么手必须离开键盘，抓起鼠标然后使用一个菜单（例如，使用Bold命令），这对你来说太不方便了。这就是为什么很多有经验的计算机行家宁愿通过某种组合键来触发菜单命令。例如，在Firefox Web浏览器中，可以按下Ctrl-+（Windows）或z-+（Mac）来使得Web页面上的文本变大（并且更易阅读）。当我们读到“按下z-B”这样的一条指令的时候，首先按下z键，然后在按下的时候输入B，接着释放这两个键。
操作系统基础知识。本书假设你知道如何打开一个程序、上网和下载文件。你应该知道如何使用开始菜单（Windows）、Dock或Apple菜单（Macintosh），以及控制面板（Windows）或系统偏好设置（Mac OS X）。
如果你已经掌握了这些信息，就具备了阅读本书所需的所有技术背景。
关于这些箭头
在整本书中以及Missing Manua中，如果你看到这样的句子“打开System→Library→Fonts文件夹”。这只是一条较长指令的简写方式，这条指令告诉你依次打开3个嵌套的文件夹，例如,“在你的硬盘上，找到一个名为System的文件夹，打开它。在System目录窗口中有一个名为 Library的目录，双击打开它。在这个目录下还有一个叫做Fonts的目录，双击打开它”。
同样，这种箭头帮助我们简化了在菜单中选择命令的表达过程，如图I-2所示。
在线资源
本书旨在让你能够在Web上更快、更专业地工作，那么自然本书的很大一部分价值也依赖于网络。在网上，你可以找到示例文件，方便动手实验。你还可以与“The Missing Manual”团队交流并告诉我们你喜欢（或不喜欢）本书的哪些内容。请访问www.missingmanuals.com，或者直接进入后续的某一节。
生动示例
在你阅读本书的过程中，会遇到很多生动的示例——你可以直接照着做，用到的原始素材（例如，图像和完成一半的Web页面）可以从www.github.com/sawmac/js3e或www.missingmanuals.com/cds的本书Missing CD页面下载。在闲暇时，直接阅读这些示例你将获益匪浅；但是如果能够花时间在计算机上亲自尝试，你会发现专业设计师构建Web页面的方式，并产生异常深刻的认识。
在本书的教程中，你还会发现已完成的页面的URL，你可以将自己的工作和最终的结果进行比较。换句话说，你不仅会看到本书页面中JavaScript代码的图片，还会看到Internet上实际的、可以使用的Web页面。
注册
如果你在http://oreilly.com注册了本书，将得到相应的优惠，例如，购买本书未来新版本的折扣。注册只需要几次鼠标单击。要开始注册，在浏览器中输入www.oreilly.com/register进入注册页面。
反馈
有问题？需要更多的信息？想要做一个图书评论者？在我们的反馈页面上，你可以得到专家对你在阅读本书时遇到问题的解答，分享你对于“Missing Manual”系列图书的看法，并找到和你一样对JavaScript和jQuery感兴趣的社群。访问www.missingmanuals.com/feedback就可以了。
勘误
为了努力让本书内容尽可能地保持最新和准确，每次印刷的时候，我们都对读者提出的勘误进行确认。我们还会注意在本书Web站点上进行的修改，以便你可以将重要的更正在你的图书中进行标注（如果你愿意的话）。访问http://tinyurl.com/jsjq3-mm以报告勘误，并且查看已有的勘误。
Safari 在线图书
Safari 在线图书是一个基于用户需求的数字图书馆，可以让你轻松搜索超过7500本的技术创新参考书和视频，快速找到所需答案。
通过订阅，你可以在我们的在线图书馆上浏览任何网页和视频。在你的手机和移动设备上阅读书籍。正式印制前访问新的图书，获得未完成手稿的独有访问权限并向作者反馈。复制和粘贴代码示例，整理你的收藏，下载章节，标记重要部分，创建注释，打印出页面，体会其他的省时特性。
计算机\Web开发
JavaScript可以大大改进网页的动画、交互性和视觉效果，但学习
该门语言不太容易。经过全新更新和扩展之后，的本书通过一步步介绍JavaScript基础知识，展示了如何使用jQuery（即预先写好的JavaScript代码库）以及jQuery UI插件中的创新来节省时间和精力。
本书的重点
·让你的网页栩栩如生。使用jQuery创建交互式元素以响应访问者输入。
·熟悉jQuery UI。使用标签面板、对话框、日期选择器和其他组件来扩展 界面。
·展示好的表格。获取来自访问者的信息，帮助顾客购买商品，传递会员的想法。
·使用Ajax跨越浏览器。无需重新加载页面就可与Web服务器通信来更新页面。
·正确运用新技能。使用jQuery和jQuery UI插件一步步创建一个简单的应用程序。
·详解高级概念。使用ThemeRoller来定制你的组件；避免新手程序员常犯的错误。
（美）大卫?索耶?麦克法兰德（David Sawyer McFarland） 著：
大卫·索耶·麦克法兰德（David Sawyer McFarland）是Sawyer McFarland Media公司总裁，资深Web应用开发工程师、培训讲师和技术作家。在Web开发方面拥有将近20年的工作经验，具有非常高的知名度和非常大的影响力。曾担任加州大学伯克利分校的网络负责人并针对Macworld.com进行了一次完全由CSS驱动的重新设计。
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站点的功能和交互性。
在翻译第3版的过程中，我们感觉到本书在第2版的基础上，做了如下改进，值得读者在阅读的过程中关注和利用：
第7章中新增了关于jQuery插件和创建响应式导航栏的两节内容，通过详细介绍插件的安装、调用方式、创建实例等内容，使用户能更方便地处理HTML文档、事件，实现动画效果，并且方便地为网站提供Ajax交互。jQuery能够使用户的HTML页面保持代码和内容分离，也就是说，不用在HTML里面插入一堆JavaScript代码来调用命令，只需定义id即可。jQuery还有一个比较大的优势是文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery具有开源免费、广泛兼容、轻便快捷、标准先进、美观多变、开放公开、完整汉化等特点。
新增了第11章，讲述如何定制jQuery UI的外观。如果网站已经具有雏形，但想在既定的设计上使用jQuery UI该怎么办呢？对于这种情况，jQuery UI团队提供许多有用设备和一款很酷的在线工具作为帮助。此章讨论如何重写或修改已有jQuery UI样式以及如何创建新的样式。jQuery UI是以jQuery为基础的开源JavaScript网页用户界面代码库，其中包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的Web应用程序。jQuery UI包含了许多维持状态的组件（Widget），因此，它与典型的 jQuery 插件使用模式略有不同。所有的 jQuery UI 组件使用相同的模式，所以只要学会使用其中一个，就知道如何使用其他的组件。
新增了第12章，揭示如何实现jQuery UI交互和效果。除了用户界面组件之外，jQuery UI还提供更多内容。它提供了方便使用的特性，提高网页和网站应用的交互性。这些jQuery UI交互为访问者提供工具，用来移动页面上的元素，例如一些可拖动和删除的组件。这意味着访问者可以拖动一个元素并把它放到另一个元素上（类似于将文件拖到垃圾箱中），或将产品拖到购物车中。也可以生成有序项目表，用户通过简单拖动列表项到新的位置重新排列列表，类似于任务列表或音乐播放列表。
新增了第14章，讨论构建任务列表应用。借助jQuery和jQuery UI提供的工具，只需几步就可构建一个专业的Web应用。jQuery关注选择网页元素的细节，添加新的页面元素，并更新DOM。jQuery UI提供外观良好的组件、交互和效果，解决用户界面设计中许多共同的问题。有了这两个库，可以跳过耗时的编程任务，直接开始编写动态交互式应用。这一章将引导读者构筑一个基本任务管理器。
非常高兴能够有机会把这样一本好书介绍给广大读者。读者朋友在阅读本书的过程中，如果觉得有疑问或不妥之处，可通过505822445@qq.com联系译者。
姚待艳
前言 1
第一部分 JavaScript入门
第1章 编写第一个JavaScript程序 19
1.1 编程简介 20
1.2 如何把JavaScript添加到页面中 22
1.3 第一个JavaScript程序 27
1.4 把文本写到Web页面上 30
1.5 附加外部JavaScript文件 31
1.6 追踪错误 33
第2章 JavaScript的语法 41
2.1 语句 41
2.2 内置函数 42
2.3 数据类型 42
2.4 变量 45
2.5 操作数据类型和变量 49
2.6 教程：使用变量创建消息 55
2.7 教程：请求信息 57
2.8 数组 59
2.9 教程：编写使用数组的页面 67
2.10 对象的简单介绍 70
2.11 注释 73
第3章 为程序添加逻辑和控制 77
3.1 使程序智能地响应 77
3.2 教程：使用条件语句 90
3.3 使用循环处理重复性任务 93
3.4 函数：把有用的代码转换为可复用的命令 100
3.5 教程：一个简单测验 109
第二部分 jQuery入门
第4章 jQuery简介 119
4.1 JavaScript库简介 119
4.2 获取jQuery 121
4.3 把jQuery添加到页面中 125
4.4 修改Web页面：概览 127
4.5 理解文档对象模型 130
4.6 再谈选择页面元素 132
4.7 向页面中添加内容 141
4.8 设置和读取标签属性 144
4.9 读取、设置和删除HTML属性 150
4.10 操作选中的每个元素 151
4.11 自动提取引用 154
第5章 动作/响应：让页面通过事件动起来 161
5.1 事件 161
5.2 以jQuery的方式使用事件 166
5.3 教程：事件简介 169
5.4 更多的jQuery事件概念 173
5.5 高级事件管理 181
5.6 教程：一页的FAQ 188
第6章 动画和效果 195
6.1 jQuery效果 195
6.2 教程：登录滑块 199
6.3 动画 203
6.4 在效果完成后执行一个操作 206
6.5 教程：动画仪表盘 208
6.6 jQuery和CSS3的过渡和动画 214
第7章 常见jQuery任务 221
7.1 交换图像 221
7.2 教程：添加翻滚图像 227
7.3 教程：带有效果的照片集 231
7.4 控制链接的行为 237
7.5 在新窗口中打开外部链接 241
7.6 创建新窗口 243
7.7 jQuery插件介绍 248
7.8 创建响应式导航栏 252
第8章 扩展Web表单 261
8.1 理解表单 261
8.2 为表单添加智能 272
8.3 教程：基本表单扩展 276
8.4 表单验证 282
8.5 验证教程 295
第三部分 开始jQuery UI学习
第9章 扩展界面 309
9.1 jQuery UI 309
9.2 为何使用jQuery UI 310
9.3 使用jQuery UI 312
9.4 使用对话框添加消息 315
9.5 使用工具提示提供信息 329
9.6 添加标签面板 334
9.7 借助折叠节省空间 344
9.8 为页面添加菜单 349
第10章 再谈表单 355
10.1 使用样式采集数据 355
10.2 个性化选择菜单 363
10.3 个性化按钮 368
10.4 改进单选按钮和复选框 371
10.5 使用自动填充提供建议 372
10.6 jQuery UI表单组件教程 380
第11章 定制jQuery UI外观 387
11.1 ThemeRoller介绍 387
11.2 下载并使用新主题 392
11.3 重写jQuery UI样式 394
第12章 jQuery UI交互和效果 399
12.1 可拖动组件 399
12.2 可删除组件 410
12.3 拖放教程 418
12.4 页面项目排序 423
12.5 jQuery UI效果 434
第四部分 高级jQuery和JavaScript
第13章 初识Ajax 443
13.1 Ajax 443
13.2 Ajax基础知识 445
13.3 Ajax的jQuery方式 451
13.4 JSON 473
13.5 JSONP简介 479
13.6 给站点添加一个Flickr feed 479
13.7 教程：给站点添加Flickr图像 485
第14章 构建一个任务列表应用 491
14.1 应用程序概览 491
14.2 添加按钮 492
14.3 添加对话框 493
14.4 添加任务 497
14.5 标记完成的任务 502
14.6 删除任务 507
14.7 更多应用 509
第五部分 提示、技巧和排错
第15章 让jQuery发挥最大的作用 515
15.1 有用的jQuery提示和信息 515
15.2 使用jQuery文档 520
15.3 遍历DOM 525
15.4 用于操作HTML的更多函数 529
第16章 深入JavaScript 535
16.1 操作字符串 535
16.2 在字符串中查找模式 540
16.3 操作数字 556
16.4 日期和时间 562
16.5 编写更高效的JavaScript 569
16.6 综合应用 576
第17章 排错和调试 581
17.1 常见JavaScript编程错误 581
17.2 使用控制台调试 592
17.3 调试教程 604
第六部分 附录
附录A JavaScript资源 613
