JavaScript程序设计案例教程（第2版）第8章jQuery和Ajax技术.ppt

下载文档 降价啦

14
0
约5.63千字
约 25页
2018-09-09 发布于浙江
举报
版权申诉
保障服务

JavaScript程序设计案例教程（第2版）第8章jQuery和Ajax技术.ppt

1、本文档共25页，可阅读全部内容。
2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击这里二次下载。
4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。

(1)使用jQuery+DIV设计制作层窗口，要求点击“屏幕中间显示窗口”按钮后，在网页中间位置显示层窗口，如图8.12所示。 (2)基于jQuery UI设计开发的可折叠菜单，效果如图8.13所示。图8.12 层窗口效果图图8.13 折叠菜单效果图 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 JavaScript 程序设计 jQuery是一种快捷、小巧、功能丰富的轻量级JavaScript脚本库，是目前最热门的Web前端开发技术之一。jQuery的语法很简单，可以用较少的代码实现同样的功能，它支持各种浏览器平台的API，使用这些API可以使Web前端开发变得更轻松。同时也可以把自己的代码制作成jQuery插件，增加jQuery的可扩展性。jQuery对Ajax提供了很好的支持，用户甚至不需要了解XMLRequest对象的概念就可以实现Ajax编程。知识目标理解JavaScript程序库、jQuery、jQuery选择器等概念掌握jQuery基本语法和实用函数掌握jQuery Mobile UI插件的实现掌握jQuery和Ajax用法及事件处理能力目标了解JavaScript程序库的概念、jQuery插件种类和运行机制、Ajax的概念和工作原理；掌握jQuery引用和jQuery基本语法；能够熟练使用jQuery选择器构建jQuery对象；能够使用常见jQuery UI插件的方法和属性实现模态窗口掌握的jQuery中Ajax 的load()方法和ajax()方法等 4 案例陈述 1 2 3 案例实施知识准备本章小结 5 课后习题 5 本案例使用jQuery+DIV设计制作一个模拟窗口效果的层窗口。实现在网页加载完成后，页面的右下角上动态显现一个“在线答疑”层窗口，点击“X”，还可以关闭该窗口。效果如图8.1所示。图8.1 层窗口显示效果图 1) 使用Dreamweaver，将网页“Case14.html”另存为网页“Case17.html”，在该网页代码<head>标签内引入jQuery库。创建一个名为“case17-window.css”样式表文件和window.js代码文件并引入该网页中。 2)在网页“Case17.html”</body>标签之前添加弹出窗口的div标记。 3)在“Case17-window.css”样式表文件添加窗口样式。 4)在window.js代码文件添加jQuery代码。知识点1 JavaScript程序库 JavaScript程序库封装了许多预先定义好的对象和实用函数，能帮助开发者轻松地开发高难度的富客户端网页应用。目前流行的JavaScript程序库有：Prototype、Dojo、YUI、Ext JS、Moo Tools和jQuery。其中jQuery是最受Web开发人员喜欢的JavaScript程序库。使用jQuery可以实现以下特性：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、Ajax功能等。知识点2 在网页中引入jQuery jQuery库文件可以从/官方网站下载最新的库；jQuery库会有两种类型版本，分别是生产版（压缩版）和开发版(未压缩版)。生产版库文件（jquery.min.js）大小约30KB适用发布的产品和项目，开发版库文件(jquery.js)大小约300KB适用学习和开发。 jQuery就是一个.js文件，使用它前需要先引入，引入操作和引入其他js文件一样，具体的导入语句是：需要注意：说明jquery.js文件要第一个引用，先于其他js文件。在项目中为了便于.js文件的管理，一般把.js文件单独放在一个文件夹中，本书中把jquery.js放在js文件夹下。 <script type="text/javascript" src="js/jquery.js"></script> 知识点3 jQuery语法 jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。基础语法是：其中，$等价于jQuery，选择符selector用于“查询”和“查找” HTML 元素，action() 执行对元素的操作。如$(this).hide() 表示隐藏当前元素。 $(selector).action() 【实例8-1】编写简单的jQuery程序。实例要求使用jQuery弹出“Hello World！”问候提示框。图8.3 弹出对话框的效果图 <html> <head> <meta http-equiv