《jQuery理论》PPT课件.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为表格分页、交替行显示和表格折叠效果能够使用常见的jQuery插件,1.jQueryAjax应用,1.1基于请求加载数据,加载HTML内容使用jQuery的load()方法，通过异步方式获取HTML数据,load(url,data,callback),url指向要请求的文件data是可选参数，它表示发送至服务器的数据，这些数据使用key/value键值对来保存callback也是可选参数，是请求完成时的回调函数，无论请求成功或失败，回调函数存在就一定执行,基于请求加载数据,加载HTML内容,$(function()$(#p1).click(function()$(#div1).load(Data/inner1.html);returnfalse;);$(#p2).click(function()$(#div1).load(Data/inner2.html);returnfalse;);$(#p3).click(function()$(#div1).load(Data/inner3.html);returnfalse;););,基于请求加载数据,加载XML数据load()方法可以从服务器端请求任何类型的资源，包括XML文档和JSON数据格式。此外，jQuery提供了更加方便的$.get()方法或$.post()方法来取得XML数据。$.get()和$.post()是jQuery全局函数，通过$调用，而不是jQuery工厂函数构建对象调用,$.get(url,data,callback,type),基于请求加载数据,加载XML数据,$(#p4).click(function()$.get(Data/order.xml,function(data)$(#div1).empty();/清空div1元素$(data).find(item).each(function()var$item=$(this);/每一个item节点/定义一个JavaScript变量varhtml=;html+=编号：+$item.attr(no)+;html+=;var$iteminfo=$item.find(item-info);html+=产品名称：+$iteminfo.find(item-name).text()+;html+=价格：￥+$iteminfo.find(price).text()+;html+=数量：+$item.find(quantity).text()+;html+=;$(#div1).append($(html););););,基于请求加载数据,操作JSON数据全局函数$.getJSON()来处理JSON格式的数据,$(#p5).click(function()$.getJSON(Data/order.json,function(data,textStatus)$(div1).empty();varhtml=;html+=订单编号：+data.订单编号+;html+=订单日期：+data.订单日期+;html+=收货人：+data.订货人+;html+=订单详细:;html+=商品编号：+data.订单详细0.商品编号+;html+=数量：+data.订单详细0.数量+html+=单价：+data.订单详细0.单价+;html+=总价：+data.订单详细0.总价+;html+=商品编号：+data.订单详细1.商品编号+;html+=数量：+data.订单详细1.数量+html+=单价：+data.订单详细1.单价+;html+=总价：+data.订单详细1.总价+;html+=;$(#div1).html($(html);,json););,基于请求加载数据,执行脚本全局函数$.getScript()动态加载脚本,$.getScript(,1.2向服务器传递数据,执行GET请求,方法一：load()方法，将要发送的数据附加到URL传递到服务器端,$(function()$(#send).click(function()$(#result).load(Handler.ashx?username=+$(#username).val()+,方法二：$.get()方法，将要传递的数据以key/value键值对的方式发送到服务器端,$(function()$(#send).click(function()$.get(Handler.ashx,/通过第二个参数以键/值对的方式传递数据username:$(#username).val(),comment:$(#comment).text(),function(data)alert(data););););,向服务器传递数据,执行POST请求,方法一：load()方法，将要发送的数据以key/value键值对的方式作为该方法的第2个参数传递到服务器端,$(function()$(#send).click(function()$(#result).load(Handler1.ashx,username:$(#username).val(),comment:$(#comment).text(),function(data)alert(data););););,方法二：$.post()方法，将要发送的数据以key/value键值对的方式作为该方法的第2个参数传递到服务器端,$(function()$(#send).click(function()$.post(Handler1.ashx,username:$(#username).val(),comment:$(#comment).text(),function(data)alert(data););););,在服务器端通过Request.Form集合获取数据,1.3jQuery中的Ajax全局事件,ajaxStart()方法和ajaxStop()方法可以全程关注HTTP请求,$(function()/使用链式语法添加样式，注册2个全局事件ajaxStart()和ajaxStop()$(.div1).css(display,none).ajaxStart(function()$(this).show();).ajaxStop(function()$(this).hide(3000););/*当发出Ajax请求时class=result的元素显示，当请求结束时，该元素在3秒后隐藏。且回调函数，将加载了data.html数据的元素在4秒内淡入*/$(#btnLoad).click(function()$(.result).hide().load(data.html,function()$(this).fadeIn(4000););););,1.4$.ajax()方法,$.ajax()是jQuery最底层的Ajax实现，该方法参数包含方法需要的全部信息,$(function()$(#btnLoad).click(function()$.ajax(url:data.html,type:GET,dataType:html,beforeSend:function()$(.div1).show();,success:function(data,textStatus)$(.result).html(data).fadeIn(4000);$(.div1).hide(3000);,error:function(textStatus)alert(textStatus);,global:false/阻止全局事件触发););$(.div1).css(display,none).ajaxStart(function()$(this).show();).ajaxStop(function()$(this).hide(3000);););,小结1,jQuery向服务端发出GET请求有哪几种方式？简述$.ajax()函数的作用及用法,2.表格操作,2.1表格分页,客户端分页思路：,使用slice()函数过滤数据,过jQuery的append()方法动态添加分页指示符,使用trigger()方法触发分页事件,表格分页,$(document).ready(function()varcurrentPage=0;/当前页varpageRow=5;/每页行数var$table=$(table.pagable);/选择表格$table.bind(paging,function()/为表格绑定自定义事件paging$table.find(tbodytr).hide().slice(currentPage*pageRow,(currentPage+1)*pageRow).show(););/添加分页指示元素varnumRows=$(table.pagable).find(tbodytr).length;/总行数varnumPages=Math.ceil(numRows/pageRow);/需要的页数var$pager=$();for(varpage=0;page+(page+1)+).bind(click,newPage:page,function(event)currentPage=event.datanewPage;$table.trigger(paging);$(this).addClass(active).siblings().removeClass(active);).appendTo($pager);/将分页指示器追加到元素后$pager.append(,2.2交替行和高亮显示,使用”tr:odd”和”tr:even”选择器选择奇数行和偶数行，再使用addClass()方法添加样式实现普通表格的交替行背景色,$(function()$(tr:odd).addClass(odd);$(tr:even).addClass(even););,$(function()$(tbodytr).click(function()if($(this).hasClass(highlight)$(this).removeClass(highlight).find(:checkbox).attr(checked,false);else$(this).addClass(highlight).find(:checkbox).attr(checked,true);););,2.3折叠和扩展,折叠和扩展最简单的实现就是使用toggle()方法，关键在于要准确选择要折叠和扩展的行，可以使用sibling()来选择要折叠和扩展的行,$(function()$(tr.parent).click(function()$(this).siblings(.child_+this.id).toggle();););,2.4工具条提示,创建工具条提示需要执行以下3个步骤：,添加提示元素,为提示元素定位,隐藏提示元素,工具条提示,/创建提示工具条varshowTooltip=function(event)$(div.tooltip).remove();var$name=$(this).text();$(点击后显示员工+$name+的详细信息).appendTo(body);,/定位提示工具条varpositionTooltip=function(event)varposX=event.pageX-10;varposY=event.pageY+20;$(div.tooltip).css(top:posY,left:posX);,/隐藏提示工具条varhideTooltip=function()$(div.tooltip).remove();,/调用显示、定位和隐藏工具条函数$(function()varcol=1;/在第1列上创建工具条提示$(table.tbtd:nth-child(+col+).css(cursor,hand).hover(showTooltip,hideTooltip)/调用显示、隐藏函数.mousemove(positionTooltip).click(function()alert($(this).text()+$(this).next().text()+$(this).next().next().text();););,小结2,如何通过复选框控制表格行的高亮显示？简述jQuery客户端表格分页显示数据的思路。,验证插件的功能：内置验证规则。如必填验证、数字验证、Email验证、URL验证等19种验证规则自定义验证规则：如果内置验证规则不能满足要求，可以自定义验证规则简单强大的验证信息提示：除了默认有验证提示信息外，还可以自定义验证信息来覆盖默认的验证提示信息实时验证：不需要在表单提交时就可以在keyup或blur事件触发时进行验证,3.jQuery插件,3.1验证插件,3.1验证插件,方法一：将验证规则写在控件中,$().ready(function()$(#signupForm).validate(););.Password/必填，且最小长度5个字符确认密码/必填，且最小长度5个字符，还要求与id=password的表单相同,方法二：将验证规则写在代码中，使用表单的name属性进行匹配验证,$().ready(function()$(#signupForm).validate(/验证规则rules:username:required,email:required:true,email:true,password:required:true,minlength:5,confirm_password:required:true,minlength:5,equalTo:#password,/自定义提示消息messages:username:请输入姓名,email:required:请输入Email地址,email:请输入正确的email地址,password:required:请输入密码,minlength:jQuery.format(密码不能小于0个字符),confirm_password:required:请输入确认密码,minlength:确认密码不能小于5个字符,equalTo:两次输入密码不一致不一致););,3.2表单插件,Form插件提供了核心函数ajaxForm()和ajaxSubmit(),ajaxForm(),ajaxForm(callback,options),options包含以下映射：Target：表示服务器响应的内容来更新的一个或多个目标元素，如target:”.log”表示响应的内容更新所有带有class=log的元素beforeSubmit：提交前的回调函数Success：提交后的回调函数url：接收表单数据的URLType：提交表单的方式，如GET或POSTdataType：期望的服务器端响应的数据类型,如：json、script、xmll等，默认值是nullresetForm：布尔值，默认为false。如果设置为true,则在提交成功后重置表单clearForm：布尔值，默认值为false。如果设置为true,则在提交成功后清除表单所有字段的值timeout：限制请求的时间，当请求超过限制时间时，结束本次请求,表单插件,Form插件提供了核心函数ajaxForm()和ajaxSubmit(),ajaxForm(),$(function()$(#form1).ajaxForm(function()$(#output).html(提交成功！).show(););,$(function()varoptions=target:#output,beforeSubmit:validate,success:handleResponse,url:Handler.ashx,type:POST,dataType:xml,/响应XML格式数据clearForm:true,timeout:3000;$(#form1).ajaxForm(options););,3.3图表插件,jQchart插件中主要是利用核心方法jQchart()来进行绘制图表，该方法的参数是json格式的数据，也可以是保存json格式数据的文件。必须在元素内画图,用于绘制图表的json格式数据支持两个属性：data和config,data:(function()vard=;for(vari=0;i30;i+)d.push(500+par