《JavaScript与jQuery网页前端开发与设计-第2版》课件 CH11 jQuery遍历；CH12 jQuery AJAX.ppt

1. 常规使用例如，将文件test.txt的内容加载到id=demo的段落元素p中。jQuery将使用.innerHTML属性将指定元素中的全部内容更新为test.txt中的文本内容。如果只需要加载的文件中的某个HTML元素，则可以在URL参数中追加jQuery选择器来筛选需要加载的元素。$(#demo).load(test.txt);12.3.1jQueryAJAXload()方法12.3.1jQueryAJAXload()方法1. 常规使用例如，将文件test.txt中class=style01的div元素加载到id=demo的段落元素p中。需要注意的是，以上两种情况的选择器都必须是在网页文档中实际存在的HTML元素，否则AJAX请求将不会被发出。$(#demo).load(test.txtdiv.style01);12.3.1jQueryAJAXload()方法1. 常规使用【例12-1】jQueryAJAXload()方法的简单应用11.5.3逻辑实现3.商品列表逻辑3)数量文本框输入事件运行效果如图所示。11.5.3逻辑实现3.商品列表逻辑4)“删除”按钮点击事件“删除”按钮被点击时弹窗提醒用户做二次确认，当用户再次确认删除时去掉对应的商品列表行并更新底部结算工具栏中的总金额。在cart.js中使用$(.delBtn)来监听“删除”按钮的点击事件，相关代码如下：1.//1-5删除按钮点击事件2.$(.delBtn).click(function(){3.//弹出确认框提醒用户（返回值true表示确认）4.varresult=confirm(您确认删除当前商品吗？);5.//用户确认6.if(result){7.//找到按钮对应的单元行tr并删除8.$(this).parents(.goodsBox).remove();9.//更新结算总价10.updateTotalPrice();11.}12.});上述代码使用了jQuery祖先遍历parents(.goodsBox)查找当前按钮的祖先元素tr单元行，并使用remove()全部删除，最后更新结算总价11.5.3逻辑实现3.商品列表逻辑4)“删除”按钮点击事件效果如图所示。11.5.3逻辑实现4.结算工具栏逻辑1)全选框勾选/取消当结算工具栏的全选框被勾选/取消时让商品列表中所有商品的勾选按钮也都处于被勾选/取消状态，且更新底部结算工具栏中的总金额；在cart.js中使用$(.selectAll)来监听全选框的点击事件，相关代码如下：1.//2-1全选勾选框点击事件2.$(.selectAll).click(function(){3.//被勾选4.if($(this).is(:checked)){5.//让所有商品都被勾选6.$(.goodsBoxinput:checkbox).prop(checked,true);7.}8.//取消勾选9.else{10.//让所有商品都取消勾选11.$(.goodsBoxinput:checkbox).prop(checked,false);12.}13.//更新购物车总价14.updateTotalPrice();15.});上述代码使用is(:checked)判断全选框是否被勾选，再使用prop(checked,true)和prop(checked,false)更新勾选框状态为勾选或非勾选。11.5.3逻辑实现4.结算工具栏逻辑1)全选框勾选/取消效果如图所示。11.5.3逻辑实现4.结算工具栏逻辑2)“清空购物车”按钮点击事件当“清空购物车”按钮被点击时弹窗提醒用户做二次确认，当用户再次确认则清除全部商品列表行并把结算总价更新为“0.00”。在cart.js中使用$(.clearBtn)来监听全选框的点击事件，相关代码如下：1.//2-2清空购物车按钮点击事件2.$(.clearBtn).click(function(){3.//弹出确认框提醒用户（返回值true表示确认）4.varresult=confirm(您确认清空购物车吗？);5.//用户确认6.if(re