JavaAJAX&JQUERYDOM操作演jQuery處理事jQueryjQuery類似數(shù)組的操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()輸出標(biāo)記中所有內(nèi)text(）輸出標(biāo)記中的文本用html()改變頁面內(nèi)點擊“click”按attr()輸出節(jié)點的屬性attr()設(shè)置節(jié)點的屬性可以使用val()獲得val()設(shè)置下拉列表,可以使用val()獲得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"a.append()向每個匹配的元素追加內(nèi)容b.append()向每個匹配的元素追加內(nèi)容c.prepend()向每個匹配的元素前置內(nèi)d.after()在每個匹配的元后內(nèi)e.before()在每個匹配的元前內(nèi)dom刪除節(jié)<!--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()清空節(jié)點中的內(nèi)dom節(jié)<!----<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitle<scripttype="text/javascript"src="../js/jquery-<script//當(dāng)整個html文件解析完畢，生成相應(yīng)的dom樹之//執(zhí) 的代碼$('#u1 var$obj=$('#u1 <bodystyle="font-<ul<inputid="b1"a.clone()：節(jié)點不行點擊原節(jié)點，則彈出框點擊克隆的節(jié)點，則沒有b.clone(true):使的節(jié)點也具有行點擊克隆的節(jié)點，也具有屬性操<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//判斷是否有指定樣//設(shè)置樣$('#d1').css({'font-style':'italic','font- <bodystyle="font-<divid="d1" o<inputtype="button"value="Click"追加樣式，點擊“Click”后變?yōu)閎.removeClass()刪除點擊“click”后字體遍歷節(jié)<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"（案例結(jié)束實請參考方案部分的代擴jQuery問在jQuery如何進(jìn)行事件處理方事件綁訂&&綁訂方式的簡寫<!--事件綁訂<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):模擬光標(biāo)懸停事件<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlebackground- background- <scripttype="text/javascript"src="../js/jquery-<script//當(dāng)光標(biāo)進(jìn)入時執(zhí)行this代表當(dāng)前綁訂事件的那個dom節(jié)$(this).css('background-//當(dāng)光標(biāo)移出時執(zhí)$(this).css('background- $(this).after("<div$('#tips').html('無它，唯勤奮爾 <bodystyle="font-<divid="d1">敢問<ahref="javascript:;"id="a1">如何才能學(xué)好c.hover(enter,leave擬光標(biāo)懸停事當(dāng)鼠標(biāo)在<div>區(qū)域當(dāng)鼠標(biāo)移入<div>區(qū)d.toggle(fn1,fn2...)：模擬鼠標(biāo)連續(xù)單擊事當(dāng)點擊“如何學(xué)好Java”，出現(xiàn)“無它，唯勤奮再次點擊，“無它，唯勤奮事件冒<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中的動畫函數(shù)介紹方常用方法&&回調(diào)函<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">如何才能學(xué)好<divid="d1"> <div<div快速顯示&&慢不加參數(shù)的方法show()和hide()表示正常顯示和隱改變元素的高與show("slow")和hide("slow")效果相fadeIn()&&fadeOut()改變點擊紅域?qū)@回調(diào)函以上演示案例中的函數(shù)可以在執(zhí)行完動畫之后，再執(zhí)行一個回調(diào)函//寫上動畫執(zhí)行之后要執(zhí)行的操自定義<metahttp-equiv="Content-Type"content="text/html;charset=UTF-<title>Inserttitlebackground-}<scripttype="text/javascript"src="../js/jquery-<script<bodystyle="font-<div<inputvalue="點我，上面的div就會走"紅域會移動（案例結(jié)束實請參考方案部分的代擴jQuery問jQuery類似數(shù)組的操方<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"打印出類數(shù)組ul（類似數(shù)組）的遍歷數(shù)組元素，為它們加上不同的點擊按不同的元素被添加了不同指定元素的樣式輸出元素的get()返回dom對象組成的數(shù)（案例結(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>選項三當(dāng)鼠標(biāo)移動到元素上時，樣式發(fā)生改變，鼠標(biāo)移出后，樣式（案例結(jié)束jQuery對AJAX問jQuery對AJAX的支持方新建工程導(dǎo)入JSON的Jar服務(wù)器返回JSON字符新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground-}<scripttype="text/javascript"src="js/jquery-<script//當(dāng)change函數(shù)執(zhí)行時將之前顯示的東西//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,"高性能商務(wù)車JSONObjectobj=}}}}測試部署項b.返回json字符修改<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script//當(dāng)change函數(shù)執(zhí)行時將之前顯示的東西清//ajax對 //data已經(jīng)被轉(zhuǎn)換成了js對//1.id為s1的<select>元素后增加一個$('#s1').after("<div//2.該<div>元素的內(nèi)容賦為"價格"和"描述$('#d1').html('報價+data.price+'<br/>'+'描述:'+//3.置該<div>動畫效},1000);alert('系}<bodystyle="font-<selectstyle="width:120px;"id="s1"<optionvalue="bmw520">寶馬<optionvalue="me"><optionvalue="maiten">邁騰a.選擇下有顯示結(jié)果，并在1秒服務(wù)器返回XML新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground-}<scripttype="text/javascript"src="js/jquery-<script //data是一個dom節(jié)點，指向xml文檔對應(yīng)的那棵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.發(fā)送get請求（post請求格式一樣新建<%@pagecontentType="text/html;charset=utfEncoding="utf-<title>Inserttitlebackground- <scripttype="text/javascript"src="js/jquery-<script//data已經(jīng)轉(zhuǎn)換成了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,"高性能商務(wù)車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