书名：JavaScript+jQuery网页特效设计任务驱动教程pdf/doc/txt格式电子书下载

推荐语：

作者：陈承欢著

出版社：人民邮电出版社

出版时间：2019-06-01

书籍编号：30496309

ISBN：9787115500991

正文语种：中文

字数：185879

版次：2

所属分类：教材教辅-中职/高职

版权信息

书名：JavaScript+jQuery网页特效设计任务驱动教程

作者：陈承欢

ISBN：9787115500991

版权所有 · 侵权必究

内容提要

本书是网页特效设计任务驱动式教材。本书将网页特效分为9类，分别是基本网页特效、日期时间类网页特效、文字类网页特效、图片类网页特效、表单控件类网页特效、导航菜单类网页特效、选项卡类网页特效、内容展开与折叠类网页特效、页面类网页特效，同时相应地将全书分为9个教学单元，每个教学单元分析和设计一种类型的网页特效，同时将JavaScript和jQuery的相关知识合理地安排到各个教学单元中。

本书可以作为普通高等院校、高职高专或中等职业院校各专业网页特效设计课程的教材，也可以作为网页特效设计的培训用书及技术参考书。

前言

HTML、CSS、JavaScript三者共同构造出了丰富多彩的网页，它们使网页包含更多活跃的元素和更加精彩的内容。HTML是一种纯文本的、解释执行的标记语言，它定义了网页结构和网页元素，能够实现网页的普通格式要求。CSS实现了网页结构与表现样式完全分离，弥补了HTML对网页格式化功能的不足，对网页布局和网页元素的控制功能更加强大，能够实现网页中特殊格式的要求。JavaScript主要实现实时的、动态的、可交互的功能，对客户操作进行响应，显示各种自定义内容。

在实际工作中，我们需要将JavaScript程序嵌入HTML文档中，与HTML标签相结合，对网页元素进行控制，对用户操作有所响应，从而实现网页动态交互的特殊效果。这种特殊效果通常称为网页特效。网页中添加一些恰当的特效，能使页面具有一定的动态效果，能吸引浏览者的注意，提高页面的观赏性和趣味性。随着网络技术的发展，JavaScript语言越来越受欢迎，在数以百万计的网页中被用于改进设计、验证表单、检测浏览器、创建Cookies等。

jQuery是一个轻量级的库，实现了操作行为（JavaScript代码）和网页内容（HTML代码）的分离，凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发AJAX的操作。jQuery拥有强大的选择器、出色的DOM操作、可靠的事件处理机制、完善的兼容性、独创的链式操作方式等，以其独特而优雅的代码风格改变了JavaScript程序员的设计思路和编程方式，因而受到越来越多人的追捧，吸引了一批批的JavaScript开发者去学习和研究。

同时，技术的更新也推动着高职高专院校课程的改革，目前，越来越多的高职高专院校对网页设计和制作课程进行了细化和优化，开始开设网页特效设计类课程。为了满足课程教学需要，我们编写了本书。

本书具有以下特色和创新点。

（1）合理选取和重构教学内容，科学安排教学单元的顺序。本书从网页特效在网页中实际应用的角度来理解JavaScript语言的语法和jQuery库的应用，而不是从JavaScript理论知识本身取舍教学内容。本书遵循学习者的认知规律和技能的形成规律，将网页特效分为基本网页特效、日期时间类网页特效、文字类网页特效、图片类网页特效、表单控件类网页特效、导航菜单类网页特效、选项卡类网页特效、内容展开与折叠类网页特效和页面类网页特效这9类，同时相应地将内容分为9个教学单元，每个教学单元分析和设计一种类型的网页特效，同时将JavaScript和jQuery的相关知识合理地安排到各个教学单元中。

（2）以实际网站中常见的真实网页特效为载体组织教学内容，强化操作技能训练，提升学习者的动手能力。我们在课程建设的过程中，分析研究了1000多个不同类型的网页特效，先后经过4次筛选、简化和优化，最终确定了9大类92个源自真实网站的网页特效作为本书的教学案例，学习者在设计网页时可以根据实际需要灵活使用这些网页特效，以实现学以致用。

（3）围绕这92个网页特效设计任务，我们采用了“任务驱动、精讲多练、理论实践一体化”的教学方法，全方位促进学习者网页特效分析设计能力的提升，引导学习者在完成各个网页特效设计任务的过程中，逐步理解灵活多变的JavaScript语法知识，循序渐进地学会jQuery库的应用，从而熟练掌握形式多样的网页特效的设计方法。

本书在每个教学单元中巧妙地设置了3条主线：教学过程主线、理论知识主线和操作任务主线，形成了独具特色的复合结构体例，充分考虑教学实施的需求。我们为每个教学单元都设置了完整的教学环节，帮助教师按照“教学导航→特效赏析→知识必备→引导训练→自主训练”5个环节组织教学。每个教学单元相关的理论知识相对独立，以节的方式组织，形成了系统性强、条理性强、循序渐进的理论知识体系。每个教学单元根据学习知识和训练技能的需要合理设置网页特效设计任务，分为“特效赏析—引导训练—自主训练”3个层次，其中引导训练任务按“任务描述—思路探析—特效实现”3个步骤实施，同时根据需要对实现网页特效的代码进行了必要的解释和说明。

（4）本书配套教学资源丰富。教学单元设计、教学过程设计、网页特效设计、任务设计、JavaScript和jQuery相关知识的选取与序化、教学案例、电子教案等教学资源一应俱全，力求做到想师生之所想，急师生之所急。教学辅助资源请登录人邮教育社区（www.ryjiaoyu.com）下载使用。

本书适合实施理论实践一体化教学，平均6~8课时为一个教学单元，可以以串行方式（连续安排2~3周）组织教学，也可以以并行方式（每周安排6~8课时，安排8周左右，每周完成一个教学单元）组织教学。

本书由湖南铁道职业技术学院陈承欢教授编著，颜谦和、吴献文、谢树新、颜珍平、侯伟、潘玫玫、郭外萍、裴来芝、谭传武、肖素华、林保康、王欢燕、张丹、王姿、张丽芳等多位老师参与了网页特效的设计、优化以及部分章节的编写、校对和整理工作。

由于编者水平有限，书中难免存在疏漏之处，敬请各位读者批评指正，作者的QQ号码为1574819688，感谢您使用本书，期待本书能成为您的良师益友。

编者

2018年10月

课程设计

1．教学单元设计

2．教学过程设计

3．网页特效设计和任务设计

4．JavaScript和jQuery相关知识的选取与序化

单元1　设计基本网页特效

本单元我们主要探讨基本网页特效的设计方法。

教学导航

教学目标

1　学会设计基本的网页特效

2　学会下载和替代jQuery库

3　熟悉JavaScript的基本特点和主要的语法规则

4　熟悉JavaScript常用的开发工具

5　熟悉JavaScript的注释

6　熟练使用JavaScript的消息框

7　熟悉JavaScript的异常处理

8　掌握在HTML文档中嵌入JavaScript代码的方法

9　掌握JavaScript的数据类型

10　掌握JavaScript的常量与变量

11　掌握jQuery的引用方法

12　掌握jQuery的基础语法

13　掌握文档就绪函数ready的使用方法

14　了解JavaScript库

15　了解jQuery函数的类别

教学方法　任务驱动法、分组讨论法、探究学习法

建议课时　8课时

特效赏析

任务1-1　JavaScript实现动态加载网页内容

网页中常见的底部导航栏与版权信息如图1-1所示。

图1-1　网页的底部导航栏与版权信息

图1-1所示的底部导航栏与版权信息可以采用HTML代码实现，代码如表1-1所示。也可以采用JavaScript代码实现，对应的JavaScript代码如表1-2所示。

表1-1　实现网页底部导航栏与版权信息的HTML代码

表1-2中的代码解释如下。

（1）JavaScript脚本程序必须置于<script>与</script>标签中。

表1-2　实现网页底部导航栏与版权信息的JavaScript代码

（2）04行的符号“<!--”和10行的符号“//-->”针对不支持脚本的浏览器，从而忽略其间的脚本程序。

（3）05~09行共有5条语句，每一条语句都以“；”结束。这些语句都按其出现的先后顺序执行，即程序结构为顺序结构。

（4）05行为声明变量语句：声明1个变量，变量名为footerContent。

（5）06行为变量赋值语句：将一个字符常量值赋值给变量footerContent，赋值运算符为“=”。

（6）07~08行都是赋值语句，使用的是复合赋值运算符“+=”，将两个字符串连接后重新赋值给变量footerContent。

（7）09行使用文档对象document的write方法向网页中输出变量的值footerContent，即输入一个字符串，该JavaScript语句会在页面加载时执行。

提示　使用document.write()可以直接写入HTML输出流中，但只能在HTML输出中使用document.write。如果在文档加载后使用该方法，则会覆盖整个文档。

（8）JavaScript区分字母的大小写。

在同一个程序中使用大写字母和小写字母表示不同的意义，不能随意将大写字母写成小写，也不能随意将小写字母写成大写。例如，05行中声明的变量“footerContent”，该变量名的第7个字母为大写“C”，在程序中使用该变量时该字母必须统一写成大写“C”，而不能写成小写“c”。如果声明变量时，变量名称为“footercontent”形式，全为小写字母，则在程序中使用该变量时，也不能写成大写。也就是说，使用变量时的名称应与声明变量的名称完全一致。

注意　JavaScript的文档对象“document”则全部为小写字母，而不能写成“Document”，否则会由于系统不能识别“Document”，而出现错误。

任务1-2　jQuery实现网页收藏

网页中包含如下所示的HTML代码。

<div class=\"topLinks\"> 

    <span><a id=\"favorite\" href=\"#\">添加收藏</a></span> 
</div>

用IE 11浏览器浏览该网页时，单击网页中的“添加收藏”超链接，会弹出如图1-2所示的【添加收藏】对话框，在该对话框中单击【添加】按钮，则会将对应网页添加到收藏夹。

用非IE浏览器浏览该网页时，单击网页中的“添加收藏”超链接，会弹出如图1-3所示的【添加失败】对话框。

图1-2　【添加收藏】对话框

图1-3　【添加失败】对话框

这里的“添加收藏”功能采用jQuery方式实现，代码如表1-3所示。

表1-3　实现网页收藏功能的JavaScript代码

表1-3中的代码解释如下。

（1）01行引用了一个外部的JS文件jquery.js。

（2）为了防止文档在完全加载（就绪）之前运行jQuery代码，jQuery函数应位于ready方法中，如下所示。

$(document).ready(function(){ 

          //函数代码 
}) ; 

（3）05行表示单击id=\"favorite\"的按钮时，触发该按钮的单击事件，调用一个函数，执行该函数中的程序代码。

（4）if…else…语句为选择结构，针对IE浏览器和非IE浏览器执行不同的语句。

（5）06行中的表达式“window.ActiveXObject || \"ActiveXObject\"in window”用于判断当前浏览器的类型为IE浏览器。

（6）07行使用window.external.addFavorite方法实现IE浏览器的添加收藏功能。

（7）09行的alert()方法用于打开一个信息对话框，该方法是window对象的常用方法之一，可以写作window.alert()。其作用是弹出一个对话框，显示所指定的内容。括号中的字符串参数为对话框将要显示的内容，该对话框只有一个【确定】按钮。

知识必备

1.1　JavaScript简介

JavaScript是一种基于对象和事件驱动的脚本语言。使用它的目的是与HTML（超文本标记语言）一起实现网页中的动态交互功能。通过嵌入或调用JavaScript代码在标准的HTML中实现其功能。它与HTML标签结合在一起，弥补了HTML的不足，使网页变得更加生动。

JavaScript是一种轻量级的编程语言，JavaScript插入HTML页面后，可由所有的主流浏览器执行。JavaScript由布兰登·艾奇（Brendan Eich）发明，于1995年出现在Netscape中（该浏览器已停止更新），并于1997年被ECMA（欧洲计算机制造协会）采纳，将JavaScript制订为标准，称为ECMAScript，ECMA-262是JavaScript标准的官方名称。

JavaScript的基本语法与C语言类似，但运行过程中不需要单独编译，而是逐行解释执行，运行快。JavaScript具有跨平台性，与操作环境无关，只依赖于浏览器本身，只要浏览器支持JavaScript就能正确执行。

由于JavaScript具有复杂的文档对象模型（DOM），不同浏览器实现的方式不一样，以及缺乏便捷的开发、调试工具，所以JavaScript的应用并未真正推广开，正当JavaScript从开发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术——AJAX（Asynchronous JavaScript And XML，异步JavaScript和XML）诞生了，使互联网中基于JavaScript的应用越来越多，从而使JavaScript不再是一种仅仅用于制作Web页面的脚本语言，JavaScript越来越受到重视，互联网领域正在掀起一场JavaScript风暴。

1.2　JavaScript主要的语法规则

（1）在网页中插入脚本程序的方式是使用script标记，把脚本标记<script></script>置于网页上的head部分或body部分，然后在其中加入脚本程序。其一般语法形式如下。

<script language=\"JavaScript\" type=\"text/javascript\"> 

  <!-- 
      在此编写 JavaScript 代码 
  //--> 
  </script>

通过标识<script></script>指明其间是JavaScript脚本源代码。

使用script标记时，一般使用language属性说明使用何种语言，使用type属性标识脚本程序的类型，也可以只使用其中一种，以适应不同的浏览器。如果需要，还可以在language属性中标明JavaScript的版本号，那么，所使用的JavaScript脚本程序就可以应用该版本中的功能和特性，如“language=JavaScript1.2”。

对于老式的浏览器可能会在<script>标签中使用type=\"text/javascript\"，现在已经不必这样做了，JavaScript是所有现代浏览器以及HTML 5中的默认脚本语言。

并非所有的浏览器都支持JavaScript，另外，由于浏览器版本和JavaScript脚本程序之间存在兼容性问题，可能会导致某些JavaScript脚本程序在某些版本浏览器中无法正确执行。如果浏览不能识别<script>标签，就会将<script>与</script>标签之间的JavaScript脚本程序当作普通的HTML字符显示在浏览器中。针对此类问题，可以将JavaScript脚本程序代码置于HTML注释符之间，这样对于不支持JavaScript的浏览器就不会把代码内容当作文本显示在页面上，而是把它们当作注释，不会做任何操作。

“<!--”是HTML注释符的起始标签，“//-->”是HTML注释符的结束标签。对于不支持JavaScript脚本程序的浏览器，标签<!--和//-->之间的内容被当作注释内容，对于支持JavaScript程序的浏览器，这对标签将不起任何作用。另外，需要注意的是，HTML注释符的结束标记之前有两个斜杠“//”，这两个斜杠是JavaScript语言中的注释符号，如果没有这两个斜杠，JavaScript解释器试图将HTML注释的结束标记作为JavaScript来解释，从而有可能导致出错。

（2）所有的JavaScript语句都以分号“；”结束。

（3）JavaScript语言对大小写是敏感的。

1.3　JavaScript常用的开发工具

编写与调试JavaScript脚本程序的工具有多种，目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。

1．Dreamweaver

Dreamweaver是世界顶级软件厂商Adobe推出的一套制作并编辑网站和移动应用程序的专业网页设计软件，其最新推出的版本为Dreamweaver CC。它支持以代码、拆分、设计、实时视图等多种方式来创作、编写和修改网页，无须编写任何代码就能快速创建Web页面。

Dreamweaver CC支持jQuery代码自动提示功能，借助jQuery代码提示加入高级交互性功能，jQuery可轻松为网页添加互动内容，借助针对手机的启动模板快速开始设计。

2．Firebug

Firebug是一个用于网站前端开发的工具，它是Firefox浏览器的一个扩展插件，它集HTML查看和编辑、JavaScript控制台、网络状况监视器于一体，可以用于调试JavaScript、查看DOM、分析CSS以及AJAX交互等。

3．Visual Studio

Visual Studio是Microsoft公司推出的程序集成开发环境，Visual Studio 2008版本之后就可以使用jQuery智能提示功能了。

4．Aptana

Aptana是一个功能非常强大、开源和专注于JavaScript的AJAX开发，它支持jQuery代码自动提示功能。

1.4　在HTML文档中嵌入JavaScript代码的方法

HTML中的JavaScript脚本必须位于<script>与</script>标签之间，脚本可被放置在HTML页面的<body>或<head>部分中，或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中，或者放在页面底部，这样就可以把它们安置到同一处位置，不会干扰页面的内容。

JavaScript代码嵌入HTML文档的形式有以下几种。

（1）在head部分添加JavaScript脚本。

将JavaScript脚本置于head部分，使之在其余代码之前装载，快速实现其功能，并且容易维护。

有时在head部分定义JavaScript脚本，在body部分调用JavaScript脚本。

（2）直接在body部分添加JavaScript脚本。

由于某些脚本程序在网页中特定部分显示其效果，此时脚本代码就会位于body中的特定位置。也可以直接在HTML表单的<input>标签内添加脚本，以响应输入元素的事件。

（3）链接JavaScript脚本文件。

引用外部脚本文件，应使用script标签的src属性来指定外部脚本文件的URL。这种方式可以使脚本得到重复利用，从而降低维护的工作量。

外部JavaScript文件是最常见的包含JavaScript代码的方式，其主要原因有以下几点。

①HTML页面中代码越少，搜索引擎就能够以越快的速度来抓取网站并建立索引。

②保持JavaScript代码和HTML的分离，这样代码显得更清晰，且最终更易于管理。

③因为可以在HTML代码中包含多个JavaScript文件，因此可以把JavaScript文件分开放在Web服务器上不同的文件目录结构中，这类似于图像的存放方式，是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关键。

1.5　JavaScript的注释

JavaScript的注释用于对JavaScript代码进行解释，以提高程序的可读性。调试JavaScript程序时，还可以使用注释阻止代码块的执行。

JavaScript有两种类型的注释。

（1）单行注释以双斜杠开头（//）。

例如：

//this is a single-line comment

（2）多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）。例如：

/*this is a multi

line comment*/

注释可以单独一行，也可以在行末。

1.6　JavaScript的数据类型

JavaScript的基本数据类型主要有字符串（String）、数字（Number）、布尔（Boolean）、Null、Undefined，引用类型主要有数组和对象。

JavaScript拥有动态类型。这意味着相同的变量可用作不同的类型。

例如：

var x;               // x 为 undefined 

var x = 26 ;         // x 为数字 
var x = \"Good\" ;     // x 为字符串 

1．字符串

JavaScript的字符串可以是引号中的任意文本，可以使用单引号或双引号。例如：

var name=\"Good\"; 

var name=\'Good\'; 

2．数字

JavaScript只有一种数字类型，数字可以带小数点，也可以不带。

例如：

var x1=34.00 ;    //使用小数点来写 

var x2=34 ;       //不使用小数点来写 

较大或较小的数字可以通过科学计数法（指数）来书写。

例如：

var y=123e5;      // 12 300 000 

var z=123e-5;     // 0.001 23 

JavaScript不是类型语言，与许多其他编程语言不同，JavaScript不定义不同类型的数字，如整数、短整型、长整型、浮点型等。

JavaScript中的所有数字均为64位，都存储为根为10的64位数字（8比特）。

整数（不使用小数点或指数计数法）的精度最多为15位，小数的最大位数是17位，但是浮点运算并不总是百分之百准确。

如果数字的前缀为0，则JavaScript会把数值常量解释为八进制数，如果数字的前缀为0x，则解释为十六进制数。

例如：

var y=0377;

var z=0xFF;

说明　绝不要在数字前面写0，除非需要进行八进制转换。

NaN是JavaScript的全局常量，本意表示某个值不是数值，但其本身却又是数值，且不等于其自身，看下面的代码。

alert(typeof NaN);     //显示为\'Number\' 

alert(NaN == NaN);     //显示为 false 

实际上NaN不等于任何东西。要确认是不是NaN只能使用isNaN，如以下代码。

alert(isNaN(NaN)) ;     //显示为 true 

3．布尔

JavaScript的布尔（逻辑）类型只能有两个值：true或false。布尔类型值常用在条件测试中。

例如：

var x=true;

var y=false;

Boolean（逻辑）对象用于将非逻辑值转换为逻辑值（true或者false）。使用关键词new来定义Boolean对象。

下面的代码定义了一个名为myBoolean的逻辑对象。

var myBoolean=new Boolean();

注意　如果逻辑对象无初始值或者其值为0、-0、null、\"\"、false、undefined或者NaN，那么对象的值为false。否则，其值为true（即使当自变量为字符串\"false\"时）。

4．null

可以通过将变量的值设置为null来清空变量。

例如：

book=null;

5．Undefined

Undefined表示变量不含有值。

1.7　JavaScript的常量

JavaScript有6种基本类型的常量。

1．字符型常量

字符型常量是使用单引号（\'\'）或双引号（\"\"）括起来的一个或几个字符。

2．整型常量

整型常量是不能改变的数据，可以使用十进制、十六进制、八进制表示其值。

3．实型常量

实型常量由整数部分加小数部分表示，可以使用科学或标准方法表示。

4．布尔值

布尔常量只有两种值：true或false，主要用来说明或代表一种状态或标志。

5．空值

JavaScript中有一种空值类型null，表示什么也没有，可以理解为对象占位符。如果试图引用没有定义的变量，则返回一个null值。

说明　null是个对象。JavaScript有一种空值类型，它有一个唯一的值n

....