2014年Ajax应用程序开发步骤.pptVIP

Day 2 大纲 Ajax 框架概述 jQuery 框架详细介绍 介绍 jQuery 的基本语法 介绍jQuery API 的用法 介绍使用 jQuery 完成 Ajax 的开发步骤 介绍使用 jQuery 处理响应中的 XML 信息 * Ajax 框架概述 在开发 Ajax 应用的过程中，会遇到一些问题： DOM API 使用过于复杂 多浏览器支持不完善 重复编码 目前Ajax已经催生出很多优秀的框架这些框架都能够解决上述问题 目前主流的 Ajax 框架有： 浏览器端框架: Dojo、jQuery、Prototype、Google Web Toolkit(GWT) 服务器端框架：DWR、JSON-RPC-Java、Echo2 具体细节参考: * jQuery 介绍 jQuery 是一个 JavaScript 库，有助于简化 JavaScript 以及 Ajax 编程 。 jQuery 是由 John Resig 2006年初创建的，封装了JavaScript、DOM、Ajax 等的复杂操作，相信在学习的过程中，大家会喜欢它的。 jQuery 有独特的基本原理，可以简洁的表示常见的复杂代码。 jQuery 目前有成熟的核心代码，还有非常丰富的 UI 组件，涵盖了 Web 开发中绝大部分的页面控件，在后面的课程中给大家介绍几种。 * jQuery 是什么？ jQuery 官方网站是 /。 jQuery 目前最新版本是 1.3.2。 jQuery 实际上只是一个 js 脚本文件。非常的小，但是功能很强大。 jQuery 提供了压缩版和开发版两个脚步，开发是使用开发版本，发布时使用压缩版。 * jQuery 基本语法 如何安装 jQuery script type=text/javascript src=jquery.js/script 如何调用 jQuery 要想安全、无错的调用 jQuery代码，必须把它们放在一个函数 script language=JavaScript $(document).ready(function(){ //在这里写 jQuery 代码能够被正常调用 $(div).addClass(a); }); /script * 选择器 jQuery 的根本在于它在页面上选择和操作某些元素的能力。 jQuery 创建了自己的选择语法，非常简单。它通过 HTML元素名、ID、Class查找对象，返回的对象都是 jQuery 对象 jQuery 对象不能直接调用DOM定义的方法，只能使用jQuery API 中指定的方法 具体内容查看 jQuery API 帮助文档； 举例： $(“div”).show(); //按照 html 选择 $(p).css(background, #ff0000); // $(#sampleText).html(Hi); //按照 ID 选择 $(“.redBack”).css(“background”, “#ff0000”); //按照 CSS 选择 * 选择器 补充： jQuery 可以合并搜索结果，可以在一个搜索中，将多个搜索条件合并起来。通过使用 “,” 分隔每个搜索条件，搜索将返回与搜索词匹配的一组结果 $(“p, span, div”).hide(); //按照 合并条件 选择 * 遍历 由于 HTML 组成一个树状结构，用jQuery 选择器得到的结果一般是一个元素数组，那么我想得到我们想要的某个元素，就需要对结果进行遍历； each() 函数，和 “for loop ” 的功能一样，遍历每个函数并通过迭代递增元素，循环中每个元素的引用都可以通过“this”或 $(this) 来实现： 实现表格隔行换色效果 $(tr).each(function(i){ $(this).css({background: [#ccc,#fff][i%2]}); }); 其他函数： slice(start,end) //按照指定的开始结束索引截取 next() //查找后面他紧邻的同辈元素 filter(expr) //根据条件过滤 * 遍历 jQuery 还提供了 eq() 或者 get(n) 方法来获取集合中的某个值； Eq 返回的是 jQuery对象，而 get() 返回的是 DOM 元素对象 如要获得第三个div元素的内容，代码如下： $(“div”).eq(2).html(); //调用 jQuery对象的方法html()