tts8.0课件课后练习代码-经典案例

JavaAJAX&JQUERYDOM操作演jQuery处理事jQueryjQuery类似数组的操jQuery对AJAX的支DOM问jQuery如何操作DOM方新建工程拷贝js/jquery-1.4.3.jsa.dom<!--查询<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scriptfunctiono//$('#d1').attr('style','font-}<bodystyle="font-<divusername:<input<select<inputtype="button"value="Click"html()输出标记中所有内text(）输出标记中的文本用html()改变页面内点击“click”按attr()输出节点的属性attr()设置节点的属性可以使用val()获得val()设置下拉列表,可以使用val()获得dom创建和添加<!--dom创建和添加操作<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scripttype="text/javascript">functionf1(){//var$obj=//也可以简化oo}<bodystyle="font-<ul<inputtype="button"value="Click"a.append()向每个匹配的元素追加内容b.append()向每个匹配的元素追加内容c.prepend()向每个匹配的元素前置内d.after()在每个匹配的元后内e.before()在每个匹配的元前内dom删除节<!--dom删除<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scriptfunction//$('#u1//$('#u1$('#u1}<bodystyle="font-<ul<li<inputtype="button"value="Click"效果相c.empty()清空节点中的内dom节<!----<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script//当整个html文件解析完毕，生成相应的dom树之//执 的代码$('#u1 var$obj=$('#u1 <bodystyle="font-<ul<inputid="b1"a.clone()：节点不行点击原节点，则弹出框点击克隆的节点，则没有b.clone(true):使的节点也具有行点击克隆的节点，也具有属性操<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle}<scripttype="text/javascript"src="../js/jquery-<script$('#d1').attr({'style':'font-<bodystyle="font-<divo<inputtype="button"value="Click"样式操<!--dom样式操作<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle font- <scripttype="text/javascript"src="../js/jquery-<script//判断是否有指定样//设置样$('#d1').css({'font-style':'italic','font- <bodystyle="font-<divid="d1" o<inputtype="button"value="Click"追加样式，点击“Click”后变为b.removeClass()删除点击“click”后字体遍历节<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script//var$arr=//$('#d1').siblings().css('background-<bodystyle="font-<p><div<div><div><div><span>o<p><inputtype="button"（案例结束实请参考方案部分的代扩jQuery问在jQuery如何进行事件处理方事件绑订&&绑订方式的简写<!--事件绑订<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script//正式写$('#d1').css('font- //简化$('#d1').css('font- <bodystyle="font-<div o<inputid="b1"type="button"value="Click"事hover(enter,leave):模拟光标悬停事件<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlebackground- background- <scripttype="text/javascript"src="../js/jquery-<script//当光标进入时执行this代表当前绑订事件的那个dom节$(this).css('background-//当光标移出时执$(this).css('background- $(this).after("<div$('#tips').html('无它，唯勤奋尔 <bodystyle="font-<divid="d1">敢问<ahref="javascript:;"id="a1">如何才能学好c.hover(enter,leave拟光标悬停事当鼠标在<div>区域当鼠标移入<div>区d.toggle(fn1,fn2...)：模拟鼠标连续单击事当点击“如何学好Java”，出现“无它，唯勤奋再次点击，“无它，唯勤奋事件冒<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitleborder:1pxsolid <scripttype="text/javascript"src="../js/jquery-<scriptalert('你点击了一 alert('你点击了一个 varobj= <bodystyle="font-<div<ahref="javascript:;"<ahref="javascript:;"<ahref="javascript:;"事件冒f.在jquery中使用e.stopPropagation()方法事件冒e.是事件对象属性，可以获得事件点击"Click2"，跳出“Click2”的点击"Click3"，跳出“Click3”的实请参考方案部分代扩jQuery问jQuery中的动画函数介绍方常用方法&&回调函<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle background- background- <scripttype="text/javascript"src="../js/jquery-<scriptalert('我<bodystyle="font-<ahref="javascript:;"id="a1">如何才能学好<divid="d1"> <div<div快速显示&&慢不加参数的方法show()和hide()表示正常显示和隐改变元素的高与show("slow")和hide("slow")效果相fadeIn()&&fadeOut()改变点击红域将显回调函以上演示案例中的函数可以在执行完动画之后，再执行一个回调函//写上动画执行之后要执行的操自定义<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlebackground-}<scripttype="text/javascript"src="../js/jquery-<script<bodystyle="font-<div<inputvalue="点我，上面的div就会走"红域会移动（案例结束实请参考方案部分的代扩jQuery问jQuery类似数组的操方<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scriptvar$obj=$('#u1if(index==}//var$o1=//varindex=varobj=<bodystyle="font-<ul<inputtype="button"value="Click"打印出类数组ul（类似数组）的遍历数组元素，为它们加上不同的点击按不同的元素被添加了不同指定元素的样式输出元素的get()返回dom对象组成的数（案例结束实请参考方案部分的代扩<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlelist-style- ulbackground-margin-border:1pxsolidtext- background- <scripttype="text/javascript"src="../js/jquery-<script$('ul <bodystyle="font-<li>选项一<li>选项二<li>选项三当鼠标移动到元素上时，样式发生改变，鼠标移出后，样式（案例结束jQuery对AJAX问jQuery对AJAX的支持方新建工程导入JSON的Jar服务器返回JSON字符新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground-}<scripttype="text/javascript"src="js/jquery-<script//当change函数执行时将之前显示的东西//ajax对 //待补 alert('系 <bodystyle="font-<selectstyle="width:120px;"id="s1"<optionvalue="bmw520">宝马<optionvalue="me"><optionvalue="maiten">迈腾新建packagepublicclassCarprivateStringname;privatedoubleprice;privateStringdesc;publicCar(Stringname,doublesuper();=this.price=price;this.desc=desc;price,Stringdesc)}publicCar(){super();}publicStringgetDesc(){returnpublicvoidsetDesc(Stringdesc){this.desc=desc;}publicStringgetName(){returnname;}publicvoidsetName(Stringname){=name;}publicdoublegetPrice(){returnprice;}publicvoidsetPrice(doubleprice){this.price=}6新建packageimportimportimportimportimport importimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=response.setContentType("text/html;charset=utf-PrintWriterout=StringnameCarcar=newCar("bmw520",50,"还行JSONObjectobj=}elseif(name.equals("Carcar=newCar("me",5,"真不错JSONObjectobj=}else{Carcar=newCar("maiten",18,"高性能商务车JSONObjectobj=}}}}测试部署项b.返回json字符修改<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script//当change函数执行时将之前显示的东西清//ajax对 //data已经被转换成了js对//1.id为s1的<select>元素后增加一个$('#s1').after("<div//2.该<div>元素的内容赋为"价格"和"描述$('#d1').html('报价+data.price+'<br/>'+'描述:'+//3.置该<div>动画效},1000);alert('系}<bodystyle="font-<selectstyle="width:120px;"id="s1"<optionvalue="bmw520">宝马<optionvalue="me"><optionvalue="maiten">迈腾a.选择下有显示结果，并在1秒服务器返回XML新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground-}<scripttype="text/javascript"src="js/jquery-<script //data是一个dom节点，指向xml文档对应的那棵dom树var$obj=$('#s1').after("<div$('#d1').html('报价++'<br/>描述:'+//xhr表示XmlHttpRequest对//e1,e2表示具体的错误alert('系}<bodystyle="font-<selectstyle="width:120px;"<optionvalue="bmw520">宝马<optionvalue="me"><optionvalue="maiten">迈腾修改packageimportimportimportimportimportimportimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=//生成一份xml文档，返回给客户response.setContentType("text/xml;charset=utf-PrintWriterout=StringBuffersb=newStringnamesb.append("<desc>还不错}elseif(name.equals("sb.append("<desc>非常不错}else{sb.append("<desc>没开过不知道 }}}测a.返回一颗xmlb.发送get请求（post请求格式一样新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script//data已经转换成了js对$('#s1').after("<div$('#d1').html('报价 +data.price+'<br/>'+'描述:'+ },1000); <bodystyle="font-<selectstyle="width:120px;"<optionvalue="bmw520">宝马<optionvalue="me"><optionvalue="maiten">迈腾修改 packageimportimportimportimportimportimportimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=response.setContentType("text/html;charset=utf-PrintWriterout=StringnameCarcar=newCar("bmw520",50,"还行JSONObjectobj=}elseif(name.equals("Carcar=newCar("me",5,"真不错JSONObjectobj=}else{Carcar=newCar("maiten",18,"高性能商务车JSONObjectobj=}}}}get请load方新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitle<scripttype="text/javascript"src="js/jquery-<scriptvarairline=<bodystyle="font-<tableborder="1"cellpadding="0"<tr><td>序号</td><td>航班号<tr><td>1</td><td><ahref="javascript:;">修改packageimportimportimportimportimportimportimportimport publicclassActionServletextendsHttpServlet{publicvoidservice(Http