課件課后練習(xí)代碼-經(jīng)典案例

JavaAJAX&JQUERYDOM操作演jQuery處理事jQuery動jQuery類似數(shù)組的操jQuery對AJAX的支新建工程a.dom查<!--查詢<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scripttype="text/javascript">functionf1(){<bodystyle="font-<divousername:<input<select<inputtype="button"value="Click"dom創(chuàng)建和添加<!--dom創(chuàng)建和添加操作<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"e.before()在每個匹配的元前插入內(nèi)dom刪除節(jié)<!--dom刪除<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<scripttype="text/javascript">functionf1(){//$('#u1//$('#u1$('#u1<bodystyle="font-<ul<li<inputtype="button"value="Click"dom節(jié)<!----<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script$('#u1 var$obj=$('#u1 <bodystyle="font-<ul<inputid="b1"type="button"value="Click"/>屬性操<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script<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<bodystyle="font-<divid="d1"o<inputtype="button"value="Click"b.removeClass遍歷節(jié)<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script//var$arr=<bodystyle="font-<div<span>o<inputtype="button"（案例結(jié)束<!--事件綁訂--><metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script <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//當(dāng)光標進入時執(zhí)行this代表當(dāng)前綁訂事件的那個dom $(this).after("<div <bodystyle="font-<divid="d1"><ahref="javascript:;"id="a1">如何才能學(xué)好c.hover(enter,leave事件冒<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitleborder:1pxsolid <scripttype="text/javascript"src="../js/jquery-<script varobj=<bodystyle="font-<div<ahref="javascript:;"<ahref="javascript:;"<ahref="javascript:;"事件冒常用方法&&回調(diào)函<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlebackground- background- background- <scripttype="text/javascript"src="../js/jquery-<scriptalert('<bodystyle="font-<ahref="javascript:;"id="a1">如何才能學(xué)好<divid="d1"> <div<div快速顯示&&改變元素的高fadeIn()&&fadeOut()改變點擊紅域?qū)@回調(diào)函自定義動<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script<bodystyle="font-<div<inputvalue="點我，上面的div就會走"紅域會移動（案例結(jié)束3.33.4<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"get()返回dom（案例結(jié)束<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>選項三（案例結(jié)束服務(wù)器返回JSON字符新建<%@pagecontentType="text/html;charset=utf-<title>Inserttitle background- <scripttype="text/javascript"src="js/jquery-<script//ajax alert(' <bodystyle="font-<selectstyle="width:120px;"id="s1"<optionvalue="bmw520">寶馬<option<optionvalue="maiten">新建packagepublicclassCarprivateStringname;privatedoubleprice;privateStringdesc;publicCar(Stringname,doublesuper();=name;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=packageimportimportimportimportimport importimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=PrintWriterout=StringnameCarcar=newCar("bmw520",50,"JSONObjectobj=}elseCarcar=newCar("qqme",5,"JSONObjectobj=Carcar=newCar("maiten",18,JSONObjectobj=}}}}測試b.返回json修改<%@pagecontentType="text/html;charset=utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script//ajax //1.在id為s1的<select>$('#s1').after("<div//2.該<div>+data.price+'<br/>'+'描述:'+//3.設(shè)置該<div},1000);alert('}<bodystyle="font-<selectstyle="width:120px;"id="s1"<optionvalue="bmw520">寶馬<option<optionvalue="maiten">服務(wù)器返回XML文新建<%@pagecontentType="text/html;charset=utf-<title>Inserttitlebackground-<scripttype="text/javascript"src="js/jquery-<script var$obj=$('#s1').after("<div++'<br/>描述:'+//e1,e2alert('}<bodystyle="font-<selectstyle="width:120px;"<optionvalue="bmw520">寶馬<option<optionvalue="maiten">修改packageimportimportimportimportimportimportimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=PrintWriterout=StringBuffersb=newStringname}else a.返回一顆xmlb.發(fā)送get請求（post請求格式一樣新建<%@pagecontentType="text/html;charset=utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script$('#s1').after("<div +data.price+'<br/>'+'描述:'+ },1000); <bodystyle="font-<selectstyle="width:120px;"<optionvalue="bmw520">寶馬<option<optionvalue="maiten">修改 packageimportimportimportimportimportimportimportimportpublicclassActionServletextends{publicvoidservice(HttpServletRequestrequest,HttpServletResponsethrowsServletException,IOExceptionStringuriStringpath=PrintWriterout=StringnameCarcar=newCar("bmw520",50,"JSONObjectobj=}elseCarcar=newCar("qqme",5,"JSONObjectobj=Carcar=newCar("maiten",18,JSONObjectobj=}}}}load方新建<%@pagecontentType="text/html;charset=utf-<title>Inserttitle<scripttype="text/javascript"src="js/jquery-<scriptvarairline=<bodystyle="font-<tableborder="1"cellpadding="0"cellspacing="0"<tr><td>1</td><td><a修改packageimportimportimportimportimportimportimportimportpublicclassActionServletextendsHttpSer