《JavaScript+jQuery网页特效设计实例教程 教学课件 ppt 作者 陈承欢 单元1 设计基本网页特效 》由会员分享，可在线阅读，更多相关《JavaScript+jQuery网页特效设计实例教程 教学课件 ppt 作者 陈承欢 单元1 设计基本网页特效 （61页珍藏版）》请在金锄头文库上搜索。
1、单元1 设计基本网页特效,任务1-1 JavaScript实现动态加 载网页内容 网页中常见的底部导航栏与版权信息如图1-1所示。,图1-1 网页的底部导航栏与版权信息,图1-1所示的底部导航栏与版权信息可以采用HTML代码实现，代码如表1-1所示。 也可以采用JavaScript代码实现，对应的JavaScript代码如表1-2所示。,表1-1 实现网页底部导航栏与版权信息的HTML代码,任务1-2 jQuery实现网页收藏,在浏览该网页时，单击网页中的“添加收藏”超链接，会弹出如图1-2所示的【添加到收藏夹】对话框，在该对话框中单击【确定】按钮，则会将对应网页添加到收藏夹。,图1-2 【添
2、加到收藏夹】对话框,这里的添加收藏功能采用jQuery方式实现，代码如表1-3所示。,表1-3 实现网页收藏功能的JavaScript代码,【知识必备】 1.1 JavaScript简介 JavaScript是一种基于对象和事件驱动的脚本语言。 使用它的目的是与HTML（超文本标记语言）一起实现网页中的动态交互功能。,通过嵌入或调用JavaScript代码在标准的HTML中实现其功能，它与HTML标签结合在一起，弥补了HTML的不足，JavaScript使网页变得更加生动。,JavaScript是一种轻量级的编程语言，JavaScript插入HTML页面后，可由所有的 现代浏览器执行。 Jav
3、aScript由布兰登艾奇（Brendan Eich）发明，于1995年出现在Netscape中（该浏览器 已停止更新），并于1997年被ECMA（欧洲计 算机制造协会）采纳，将JavaScript制订为标 准，称为ECMAScript，ECMA-262是JavaScript标准的官方名称。,JavaScript的基本语法与C语言类似，但运行过程中不需要单独编译，而是逐行解释执行，运行快。 JavaScript具有跨平台性，与操作环境无关，只依赖于浏览器本身，只要浏览器支持JavaScript就能正确执行。,由于JavaScript具有复杂的文档对象模型 （DOM），不同浏览器实现的方式不一样
4、；以 及缺乏便捷的开发、调试工具，所以JavaScript的应用并未真正推广开，正当JavaScript从开 发者的视线中渐渐隐去时，一种新型的基于JavaScript的Web技术AJAX（Asynchronous JavaScript And XML，异步JavaScript和 XML）诞生了，使互联网中基于JavaScript的应用越来越多，从而使JavaScript不再是一种仅仅用于制作Web页面的脚本语言，JavaScript越来越受到重视，互联网正在掀起一场JavaScript风暴。,1.2 JavaScript主要的语法规则,（1）网页中插入脚本程序的方式是使用script标记，把
5、脚本标记置于网页上的head部分或body部分，然后在其中加入脚本程序。,（2）所有的JavaScript语句都以分号“;”结束。 （3）JavaScript语言对大小写是敏感的。,1.3 JavaScript常用的开发工具,编写与调试JavaScript脚本程序的工具有多 种，目前常用的工具有Dreamweaver、Firebug、Visual Studio、Aptana、JavaScript Editor等。,1Dreamweaver 2Firebug 3Visual Studio 4Aptana,1.4 在HTML文档中嵌入JavaScript 代码的方法,HTML中的JavaScrip
6、t脚本必须位于与标签之间，脚本可被放置在HTML页面的或部分中，或者同时存在于两个部分中。 通常的做法是把函数放入部分中，或者放在页面底部。,这样就可以把它们安置到同一处位置，不会干扰页面的内容。 JavaScript代码嵌入HTML文档的形式有以下几种。,（1）在head部分添加JavaScript脚本。 （2）直接在body部分添加JavaScript脚本。 （3）链接JavaScript脚本文件。,外部JavaScript文件是最常见的包含JavaScript代码的方式，其主要原因有以 下几种。 （1）HTML页面中代码越少，搜索引擎就 能够以越快的速度来抓取网站并建立索引。 （2）保持
7、JavaScript代码和HTML的分离， 这样代码显得更清晰，且最终更易于管理。,（3）因为可以在HTML代码中包含多个JavaScript文件，因此可以把JavaScript文件分开放在Web服务器上不同的文件目录结构中，这类似于图像的存放方式，这是一种更容易管理代码的做法。清晰、有条理的代码始终是让网站管理变容易的关键。,1.5 JavaScript的注释,JavaScript的注释用于对JavaScript代码进行解释，以提高程序的可读性。 调试JavaScript程序时，还可以使用注释阻止代码块的执行。,JavaScript有两种类型的注释。 （1）单行注释以双斜杠开头（/）。 （2
8、）多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）。,1.6 JavaScript的数据类型,JavaScript的基本数据类型主要有字符串（String）、数字（Number）、布尔（Boolean）、Null、Undefined，引用类型主要有数组和对象。,1字符串 JavaScript的字符串可以是引号中的任意文本，可以使用单引号或双引号。 2数字 JavaScript只有一种数字类型，数字可以带小数点，也可以不带。,3布尔,JavaScript的布尔（逻辑）类型只能有两个值：true或false。 布尔类型值常用在条件测试中。,4Null 可以通过将变量的值设置为null
9、来清空变量。 5Undefined Undefined表示变量不含有值。,1.7 JavaScript的常量,JavaScript有6种基本类型的常量。 1. 字符型常量 字符型常量是使用单引号（ ）或双引号（“）括起来的一个或几个字符。,2. 整型常量 整型常量是不能改变的数据，可以使用十进制、十六进制、八进制表示其值。 3. 实型常量 实型常量由整数部分加小数部分表示，可以使用科学或标准方法表示。,4. 布尔值,布尔常量只有两种值：ture或flase，主要用来说明或代表一种状态或标志。,5. 空值,JavaScript中有一种空值类型null，表示什么也没有，可以理解为对象占位符。 如果
10、试图引用没有定义的变量，则返回一个null值。,6. 特殊字符,JavaScript中包含以反斜杠（/）开头的特殊字符，通常称为控制字符。,1.8 JavaScript的变量,1变量的概念与命名 2JavaScript变量的声明 （1）单个变量的声明与赋值。 （2）多个变量的声明与赋值。 （3）声明无值的变量。 （4）重复声明JavaScript变量。,3JavaScript变量类型的声明 4局部JavaScript变量 5全局JavaScript变量,1.9 JavaScript的消息框,可以在JavaScript中创建3种形式的消息框，即警告框、确认框、提示框。 1. 警告框 警告框是一个
11、带有提示信息和“确定”按钮的对话框，经常用于输出提示信息，当警告框出现后，用户需要单击【确定】按钮才能继续进行操作。,2. 确认框,确认框是一个带有提示信息以及【确定】和【取消】按钮的对话框，用于使用户可以验证或者接受某些信息。 当确认框出现后，用户只有单击【确定】或者【取消】按钮才能继续进行操作。,3. 提示框,提示框是一个提示用户输入的对话框，经常用于提示用户在进入页面前输入某个值。 当提示框出现后，用户需要输入某个值，然后单击【确认】按钮或【取消】按钮才能继续操作。,1.10 JavaScript的异常处理,当JavaScript引擎执行JavaScript代码时，会发生各种错误。 （1
12、）可能是语法错误，通常是程序员造成的编码错误或错别字。 （2）可能是拼写错误或语言中缺少的功能（可能由于浏览器差异）。,（3）可能是由于来自服务器或用户的错误输入而导致的错误。 （4）也可能是由于许多其他不可预知的原因。,1.11 JavaScript库,JavaScript高级程序设计（特别是对浏览器差异的复杂处理）通常很困难也很耗时，为了简化JavaScript的开发，许多JavaScript库应运而生。 这些JavaScript库常被称为JavaScript框架。 这些库封装了很多预定义的对象和实用函数，能帮助使用者轻松建立有高难度交互的富客户端页面，并且兼容各大浏览器。,1jQuery
13、 2Prototype 3MooTools,1.12 下载和替代jQuery库 1.13 jQuery简介 jQuery是一个JavaScript函数库，是一个 “写得更少，但做得更多”的轻量级JavaScript库，jQuery极大地简化了JavaScript编程。,1jQuery的引用方法,如需使用jQuery，需要先下载jQuery库，然后使用HTML的标签引用它。,2jQuery函数的类别,jQuery库是一个JavaScript文件，其中包含了所有的jQuery函数。 jQuery库包含以下类别的函数。 （1）HTML元素选取函数。 （2）HTML元素操作函数。 （3）CSS操作函数
14、。,（4）HTML事件函数。 （5）JavaScript特效和动画函数。 （6）HTML DOM遍历和修改函数。 （7）AJAX函数。 （8）Utilities函数。,3jQuery的基础语法 通过jQuery，可以选取（查询，query）HTML元素，并对它们执行“操作”（actions）。 jQuery语法是为HTML元素的选取编制的， 可以对元素执行某些操作。 4文档就绪函数ready,任务1-3 JavaScript实现关闭网页时弹出小窗口,【任务描述】 编写代码实现关闭网页时弹出一个对话框的功能，该对话框如图1-3所示。,图1-3 关闭网页时弹出的小窗口,任务1-4 JavaScri
15、pt实现动态改变样式文件,【任务描述】 网页0104.html的底部内容如图1-4所示，单击超链接“应用CSS样式1”时网页引用外部样式文件style1.css，单击超链接“应用CSS样式2”时网页引用外部样式文件style2.css。 编写代码实现此功能。,图1-4 网页0104.html的底部内容,任务1-5 JavaScript实现动态改变网页字体大小及关闭网页窗口,【任务描述】 网页0105.html的底部导航栏如图1-5所示，分别单击超链接“大”、“中”、“小”，可 以动态改变网页中文本的字体大小，单击超链 接“关闭”会弹出如图1-6所示的“是否关闭此窗口”提示信息对话框，在该对话框
16、单击【是】按钮，将会关闭此网页窗口。 编写代码实现此功能。,图1-5 网页0105.html的底部导航栏,图1-6 “是否关闭此窗口”提示信息对话框,任务1-6 JavaScript实现播放Flash动画,【任务描述】 在网页0106.html中播放如图1-7所示的Flash动画。,图1-7 在网页0106.html中播放的Flash动画,任务1-7 JavaScript实现设为主页,【任务描述】 在网页0107.html中单击“设为主页”超链 接，弹出如图1-8所示的小窗口，单击【是】按 钮即可将网页“http:/ 编写代码实现这一功能。,图1-8 设为主页对话框,任务1-8 jQuery实现动态设置页面的宽度和高度,【任务描述】 由于目前使用的显示器有多种不同的规格尺寸，设计网页时需要根据屏幕的尺寸合理设置网页的尺寸与背景。 试编写代码在网页0108.html中实现动态设置页面宽度和高度的功能。,任务1-9 利用外部JS文件动态输 出网页内容 任务1-10 巧用CSS实现下拉菜单,
