JavaScript和jQuery实战手册(原书第3版)

更多详情

内容简介: JavaScript可以大幅提升网页的动画效果、交互性和视觉效果,但学习该门语言不太容易。《JavaScript和jQuery实战手册(原书第3版)》首先逐步介绍JavaScript基础知识,然后展示如何使用jQuery(预先写好的JavaScript代码库)以及jQuery UI插件中的创新达到事半功倍的设计效果。


目录: 前言
第一部分 JavaScript入门
第1章 编写第一个JavaScript程序
1.1 编程简介
1.2 如何把JavaScript添加到页面中
1.3 第一个JavaScript程序
1.4 把文本写到Web页面上
1.5 附加外部JavaScript文件
1.6 追踪错误
第2章 JavaScripttYJ语法
2.1 语句
2.2 内置函数
2.3 数据类型
2.4 变量
2.5 操作数据类型和变量
2.6 教程:使用变量创建消息
2.7 教程:请求信息
2.8 数组
2.9 教程:编写使用数组的页面
2.10 对象的简单介绍
2.11 注释
第3章 为程序添加逻辑和控制
3.1 使程序智能地响应
3.2 教程:使用条件语句
3.3 使用循环处理重复性任务
3.4 函数:把有用的代码转换为可复用的命令
3.5 教程:一个简单测验
第二部分 jQuery入门
第4章 jQuery简介
4.1 JavaScript库简介
4.2 获取jQuery
4.3 把jQuery添加到页面中
4.4 修改Web页面:概览
4.5 理解文档对象模型
4.6 再谈选择页面元素
4.7 向页面中添加内容
4.8 设置和读取标签属性
4.9 读取、设置和删除HTML属性
4.10 操作选中的每个元素
4.11 自动提取引用
第5章 动作/响应:让页面通过事件动起来
5.1 事件
5.2 以jQuery的方式使用事件
5.3 教程:事件简介
5.4 更多的jQuery事件概念
5.5 高级事件管理
5.6 教程:一页的FAQl
第6章 动画和效果
6.1 jQuery效果
6.2 教程:登录滑块
6.3 动画
6.4 在效果完成后执行一个操作
6.5 教程:动画仪表盘
6.6 jQuery和CSS3的过渡和动画
第7章 常见jQuery任务
7.1 交换图像
7.2 教程:添加翻滚图像
7.3 教程:带有效果的照片集
7.4 控制链接的行为
7.5 在新窗口中打开外部链接
7.6 创建新窗口
7.7 jQuery插件介绍
7.8 创建响应式导航栏
第8章 扩展Web表单
8.1 理解表单
8.2 为表单添加智能
8.3 教程:基本表单扩展
8.4 表单验证
8.5 验证教程
第三部分 开始jQueryUI学习
第9章 扩展界面
9.1 jQueryUl
9.2 为何使用jQueryUI
9.3 使用jQueryUl
9.4 使用对话框添加消息
9.5 使用工具提示提供信息
9.6 添加标签面板
9.7 借助折叠节省空间
9.8 为页面添加菜单
第10章 再谈表单
1O.1 使用样式采集数据
10.2 个性化选择菜单
10.3 个性化按钮
10.4 改进单选按钮和复选框
1O.5 使用自动填充提供建议
10.6 jQueryul表单组件教程
第11章 定制jQueryUI外观
11.1 ThemeRoller介绍
11.2 下载并使用新主题
113重写jQueryUI样式
第12章 jQueryUI交互和效果
12.1 可拖动组件
12.2 可删除组件
12.3 拖放教程
12.4 页面项目排序
12.5 jQueryUI效果
第四部分 高级jQuery和JavaScripl
第13章 初识Ajax
13.1 Ajax
13.2 Aiax基础知识
13.3 Ajax的jQuery方式
13.4 JSON
第六部分 附录
附录AJavaScript资源

译者序: 译者序
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联系译者。
姚待艳

前言: 以前,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
页面: