《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. jQuery Ajax应用,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“); 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数据,$(“#p4“).click(function() $.get(“Data/order.xml“, function(data) $(“#div1“).empty(); /清空div1元素 $(data).find(“item“).each(function() var $item = $(this); /每一个item节点 /定义一个JavaScript变量 var html = “; 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(); var html = “; 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(“http:/dev.jquery.com/view/trunk/plugins/color/jquery.color.js“, function() $(“#p6“).click(function() $(“#div2“).animate( backgroundColor: “pink“ , 2000) .animate( backgroundColor: “green“ , 3000); return false; ); );,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.3 jQuery中的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() var currentPage = 0;/当前页 var pageRow = 5;/每页行数 var $table = $(“table.pagable“);/选择表格 $table.bind(“paging“, function() /为表格绑定自定义事件paging $table.find('tbody tr').hide() .slice(currentPage * pageRow, (currentPage + 1) * pageRow).show(); ); /添加分页指示元素 var numRows = $('table.pagable').find(“tbody tr“).length;/ 总行数 var numPages = Math.ceil(numRows / pageRow);/需要的页数 var $pager = $(''); for (var page = 0; page ' + (page + 1) + '').bind(“click“, “newPage“: page , function(event) currentPage = event.data“newPage“; $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个步骤：,添加提示元素,为提示元素定位,隐藏提示元素,工具条提示,/创建提示工具条 var showTooltip = function(event) $(“div.tooltip“).remove(); var $name = $(this).text(); $(“点击后显示员工“ + $name + “的详细信息“).appendTo(“body“); ,/定位提示工具条 var positionTooltip = function(event) var posX = event.pageX - 10; var posY = event.pageY + 20; $(“div.tooltip“).css( “top“: posY, “left“: posX ); ,/隐藏提示工具条 var hideTooltip = function() $(“div.tooltip“).remove(); ,/调用显示、定位和隐藏工具条函数 $(function() var col = 1;/在第1列上创建工具条提示 $(“table.tb td: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：接收表单数据的URL Type：提交表单的方式，如GET或POST dataType：期望的服务器端响应的数据类型,如：json、script、xmll等，默认值是null resetForm：布尔值，默认为false。如果设置为true,则在提交成功后重置表单 clearForm：布尔值，默认值为false。如果设置为true,则在提交成功后清除表单所有字段的值 timeout：限制请求的时间，当请求超过限制时间时，结束本次请求,表单插件,Form插件提供了核心函数ajaxForm()和ajaxSubmit(),ajaxForm(),$(function() $(“#form1“).ajaxForm(function() $(“#output“).html(“提交成功！“).show(); ) );,$(function() var options = 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() var d = ; for (var i = 0; i 30; i +) d.push(500+parseInt(Math.sin(i)*300,10); return d; )(),config: title:“测试“, titleLeft:70, type:”bar”,/以柱状图显示，默认值是”line” labelX:“X1“,“X2“,“X3“,“X4“,“X5“,“X6“,“X7“,/加到X轴的标记 scaleY:min:100,max:1000,gap:100,/Y轴的刻度 width:400,height:500,paddingL:50,paddingT : 50 ,小结3,应用validate控件时，验证规则有哪两种处理方式？ Form控件的ajaxForm()函数的两个可选参数各代表什么？ jQchart控件的config属性的作用是什么？,本章总结,使用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属性中,