第9节 jQuery(二)理论.ppt

课程回顾 jQuery方法被封装在jQuery对象中，使用工厂函数$()可以获取一个jQuery对象 $(document).ready(function(){})方法可以重复调用而不会被覆盖 选择器是jQuery的根基，jQuery支持CSS选择器、XPath选择器和自定义选择器 jQuery可以操作DOM节点和样式 jQuery为制作动画提供了4类方法： 基本动画函数：show()、hide()和toggle() 滑动动画函数：slideDown()、slideUp()和slideToggle() 淡入淡出动画函数：fadeIn()、fadeOut()和fadeTo() 自定义动画函数：animate()和stop() 本章内容 jQuery 的Ajax应用 jQuery操作表格 jQuery插件 本章目标 能够使用jQuery构建Ajax应用 能够使用jQuery为表格分页、交替行显示和表格折叠效果 能够使用常见的jQuery插件 1. jQuery Ajax应用 1.1 基于请求加载数据 基于请求加载数据 基于请求加载数据 基于请求加载数据 基于请求加载数据 基于请求加载数据 1.2 向服务器传递数据 向服务器传递数据 1.3 jQuery中的Ajax全局事件 1.4 $.ajax()方法 小结1 2.表格操作 表格分页 2.2 交替行和高亮显示 2.3 折叠和扩展 2.4 工具条提示 工具条提示 小结2 3. jQuery插件 3.1 验证插件 3.2 表单插件 表单插件 3.3 图表插件 小结3 本章总结 使用jQuery创建Ajax应用，最底层的方法是$.ajax()，它封装了所有的Ajax请求和响应处理。 在$.ajax()方法上，jQuery还提供了6个全局函数实现各自不同的功能： $.get()：发出GET请求，并注册回调函数 $.post()：发出POST请求，并注册回调函数 $.getScript()：动态加载脚本 $.getJSON()：请求JSON格式数据 load()：请求和加载响应的数据 使用jQuery对表格进行客户端分页一般分为3个步骤： 添加自定义事件实现分页逻辑 添加分页指示器 使用trigger()方法触发自定义分页事件 使用jQuery为表格添加工具提示条一般分为3个步骤： 添加工具条提示元素 为元素定位 隐藏工具条提示元素 表格的折叠和扩展效果可使用toggle()方法实现 validation插件内置20几种验证规则，在页面提交是使用validate()方法实现验证 Form插件使用核心方法ajaxForm()实现Ajax无刷新提交服务器端 jQchart插件可以绘制折线图和柱状图，其绘图数据和样式主要依赖于JSON格式的数据，这些数据包含在data属性和config属性中 * 第9章 jQuery（二） 加载HTML内容 使用jQuery的load()方法，通过异步方式获取HTML数据 load(url [,data] [,callback]) url指向要请求的文件 data是可选参数，它表示发送至服务器的数据，这些数据使用key/value键值对来保存 callback也是可选参数，是请求完成时的回调函数，无论请求成功或失败，回调函数存在就一定执行 加载HTML内容 $(function() { $(#p1).click(function() { $(#div1).load(Data/inner1.html); return false; }); $(#p2).click(function() { $(#div1).load(Data/inner2.html); return false; }); $(#p3).click(function() { $(#div1).load(Data/inner3.html); return false; }); }); 加载XML数据 load()方法可以从服务器端请求任何类型的资源，包括XML文档和JSON数据格式。此外，jQuery提供了更加方便的$.get()方法或$.post()方法来取得XML数据。$.get()和$.post()是jQuery全局函数，通过$调用，而不是jQuery工厂函数构建对象调用 $.get(url [,data] [,callback] [,type]) 服务器端返回内容的格式，包括xml、html、script、json、text和_default String type 载入成功后的回调函数（只有成功响应后才调用该方法），