AJAX培训课件--第9章 jQuery(二).ppt

第9章jQuery(二)课程回顾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为表格分页、()方法,通过异步方式获取HTML数据load(url[,data][,callback])url指向要请求的文件data是可选参数,它表示发送至服务器的数据,这些数据使用key/value键值对来保存callback也是可选参数,是请求完成时的回调函数,无论请求成功或失败,回调函数存在就一定执行基于请求加载数据加载HTML内容$(function(){$("#p1").click(function(){$("#div1").load("Data/");returnfalse;});$("#p2").click(function(){$("#div1").load("Data/");returnfalse;});$("#p3").click(function(){$("#div1").load("Data/");returnfalse;});});基于请求加载数据加载XML数据load()方法可以从服务器端请求任何类型的资源,包括XML文档和JSON数据格式。此外,jQuery提供了更加方便的$.get()方法或$.post()方法来取得XML数据。$.get()和$.post()是jQuery全局函数,通过$调用,而不是jQuery工厂函数构建对象调用$.get(url[,data][,callback][,type])参数类型说明urlString请求资源的URLdataObject可选参数。发送至服务器的数据,数据通过QueryString发送到服务器callbackFunction载入成功后的回调函数(只有成功响应后才调用该方法),且请求结果和状态会自动传递给该方法typeString服务器端返回内容的格式,包括xml、html、script、json、text和_default基于请求加载数据加载XML数据$("#p4").click(function(){$.get("Data/",function(data){$("#div1").empty();//清空div1元素$(data).find("item").each(function(){var$item=$(this);//每一个item节点//定义一个JavaScript变量varhtml="<div>";html+="<h3>编号:"+$("no")+"</h3>";html+="<span>";var$iteminfo=$("item-info");html+="<p>产品名称:"+ $("item-name").text()+"</p>";html+="<p>价格:￥"+$("price").text()+"</p>";html+="<p>数量:"+$("quantity").text()+"</p>";html+="</span></div>";$("#div1").append($(html));});});});基于请求加载数据操作JSON数据全局函数$.getJSON()来处理JSON格式的数据$("#p5").click(function(){$.getJSON("Data/",function(data,textStatus){$("div1").empty();varhtml="<div>";html+="<p>订单编号:"++"</p>";html+="<p>订单日期:"++"</p>