Ajax課件-框架和工具包_第1頁
Ajax課件-框架和工具包_第2頁
Ajax課件-框架和工具包_第3頁
Ajax課件-框架和工具包_第4頁
Ajax課件-框架和工具包_第5頁
已閱讀5頁，還剩19頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

框架和工具包本節(jié)目標(biāo)理解使用框架的好處掌握jQuery的使用掌握框架如何實(shí)現(xiàn)AJAX常見的框架jQuery jQuery是實(shí)現(xiàn)JavaScript編程最流行的框架之一，包括對Ajax支持。Prototype Prototype是一個(gè)功能強(qiáng)大的庫，它提供了大量底層JavaScript工具函數(shù)，包括對Ajax支持。MooTools mooTools比較新，不過功能相當(dāng)完備，可以從中得到屏幕效果和Ajax請求工具函數(shù)。為什么使用框架不必自己重新編寫代碼，直接使用框架方法，方便。框架中的代碼得到了更多的測試。因?yàn)橛懈嗟娜嗽谑褂眠@個(gè)框架，所以出現(xiàn)bug的機(jī)會(huì)更少，相應(yīng)的需要的測試更少?？蚣芡ǔ?huì)為你考慮跨瀏覽器問題，所以不必?fù)?dān)心你的JS代碼在不同瀏覽器下的執(zhí)行。這是我們使用框架的一個(gè)重要原因。使用框架的步驟1.引入框架的js文件2.調(diào)用框架中定義的Ajax方法jQuery使用Ajax$.ajax({url:“my.do”,//ajax請求的服務(wù)器地址method：”post”,//ajax請求發(fā)送方式data:”name=tom”,//ajax請求發(fā)送的數(shù)據(jù)success：function(respText){//回調(diào)函數(shù)，服務(wù)器返回 //的內(nèi)容自動(dòng)傳給回調(diào)函 alert(respText);//數(shù)的參數(shù)

}});jQuery的使用jQuery的官方網(wǎng)站(http://jQ/)提供最新的jQuery框架下載下載完成后不需要任何安裝過程，直接將下載的.js文件用<script>標(biāo)記導(dǎo)入到自己的頁面中即可：<scriptlanguage=“jvavascript”src=“jQuery.min.js”></script>在jQuery中，最頻繁使用的是“$”，它提供了各種各樣豐富的功能，包括選擇頁面中的一個(gè)或是一類元素作為功能函數(shù)的前綴window.onload的完善創(chuàng)建頁面的DOM節(jié)點(diǎn)等選擇器jQuery中選擇器的通用語法如下$(selector)或者jQuery(selector)$(“#showDiv”)id選擇器，相當(dāng)于JavaScript中的document.getElementById(“#showDiv”);$(“.SomeClass”)

類別選擇器，選擇CSS類型為”SomeClass”的所有節(jié)點(diǎn)元素$(“p:odd”)

選擇所有位于奇數(shù)行的<p>標(biāo)記。$(“td：nth-child(1)”)

所””有表格行的第一個(gè)單元格，即第一列$(“l(fā)i>a”)

子選擇器，返回<li>標(biāo)記的所有子元素<a>，不包括孫標(biāo)記$(“a[href$=pdf]”)

選擇所有的超鏈接，并且這些超鏈接的href屬性是以pdf結(jié)尾的功能函數(shù)前綴在JavaScript中，開發(fā)者需要編寫函數(shù)處理各種操作在用戶提交表單時(shí)，需要將文本框中的最前端和最末端的空格清理掉JavaScript沒有提供類似trim()的功能，引入jQuery之后，可使用trim()方法<head><title>$.trim()</title><scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript">varsString="1234567890";sString=$.trim(sString);alert(sString.length);</script></head>jQuery選擇器詳解屬性選擇器屬性選擇器的語法是在標(biāo)記的后面用中括號(hào)“[”和“]”添加相關(guān)屬性，然后在賦予不同的邏輯關(guān)系<body><ul><li><ahref="/isaacshun">isaacphoto</a><ul><li>10-6.html</li><li><ahref="10-7.html">10-7.html</a></li> <li><ahref="10-8.html"title="圓角矩形">10-8.html</a></li> <li><ahref="10-9.html">10-9.html</a></li><li><ahref="Pageisaac.html"title="制作中...">isaac</a></li></ul></li></ul></body><scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript">$(function(){ $("ulliulli:has(a)").addClass("myClass");});</script>jQuery選擇器詳解包含選擇器用來選擇包含了某種特殊標(biāo)記的元素繼續(xù)在上例的基礎(chǔ)上添加如下的JavaScript代碼$(“l(fā)i:has(a)”)將選中二級(jí)目錄列表中所以包含了超鏈接的<li>標(biāo)記$(“l(fā)i:has(a)”).addClass(“myClass”);jQuery支持的包含選擇器選擇器說明*所有標(biāo)記E所有名稱為E的標(biāo)記EF所有名稱為F的標(biāo)記，并且是E標(biāo)記的子標(biāo)記（包括孫、重孫等）E>F所有名稱為F的標(biāo)記，并且是E標(biāo)記的子標(biāo)記（不包括孫標(biāo)記）E+F所有名稱為F的標(biāo)記，并且該標(biāo)記元素緊接著前面的E標(biāo)記E~F所有名稱為F的標(biāo)記，并且該標(biāo)記前有一個(gè)E標(biāo)記E:has(F)所有名稱為E的標(biāo)記，并且該標(biāo)記包含F(xiàn)標(biāo)記E.C所有名稱為E的標(biāo)記，屬性類別為C，如果去掉E，就是屬性選擇器.CE#I所有名稱為E的標(biāo)記，id為I，如果去掉E，就是id選擇器#IE[A]所有名稱為E的標(biāo)記，并且設(shè)置了屬性AE[A=V]所有名稱為E的標(biāo)記，并且屬性A的值等于VE[A^=V]所有名稱為E的標(biāo)記，并且屬性A的值以V開頭E[A$=V]所有名稱為E的標(biāo)記，并且屬性A的值以V結(jié)尾E[A*=V]所有名稱為E的標(biāo)記，并且屬性A的值中包含VjQuery選擇器詳解位置選擇器通過標(biāo)記所處的位置來進(jìn)行選擇奇數(shù)行、偶數(shù)行的選擇正是應(yīng)用了此類選擇器頁面中幾乎所有的標(biāo)記都可以運(yùn)用位置選擇器<body><div><p>1.大禮堂</p> <p>2.清華學(xué)堂</p></div><div><p>3.圖書館</p></div><div> <p>4.紫荊公寓</p> <p>5.C樓</p> <p>6.清清地下</p></div></body><styletype="text/css">.myClass{ /*設(shè)定某個(gè)CSS類別*/ background-color:#c0ebff; text-decoration:underline;}</style><scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript">$(function(){ $("p:lt(2)").addClass("myClass");});</script>jQuery選擇器詳解在頁面中如果希望選擇每個(gè)<div>塊的第一個(gè)<p>標(biāo)記，則可以通過first-child選擇$(“p:first-child”)選擇每個(gè)<div>塊中的奇數(shù)行$(“p:nth-child(odd)”.addClass(“myclass”));注意：與：nth-child相關(guān)的CSS選擇器是從1開始計(jì)數(shù)的，其他的選擇器是從0開始計(jì)數(shù)的匹配所有<p>列表中的第五個(gè)$(“p:eq(4)”).addClass(“myclass”);jQuery支持的位置選擇器選擇器說明:first第一個(gè)元素，例如divp:first選中頁面中所有p元素的第一個(gè)，且該p元素是div的子元素:last最后一個(gè)元素，例如divp:last選中頁面中所有p元素的最后一個(gè)，且該p元素是div的子元素:first-child第一個(gè)子元素，例如ul:first-child選中所有ul元素，且該ul元素是其父元素的第一個(gè)子元素:last-child最后一個(gè)子元素，例如ul:last-child選中所有ul元素，且該ul元素是其父元素的最后一個(gè)子元素:only-child所有沒有兄弟的元素，例如p:only-child選中所有p元素，如果該p元素是其父元素的唯一元素:nth-child(n)第n個(gè)子元素，例如li:nth-child(2)選中所有l(wèi)i元素，且該li元素是其父元素的第2個(gè)子元素（從1開始計(jì)數(shù)）:nth-child(odd|even)所有奇數(shù)號(hào)或者偶數(shù)號(hào)子元素，例如li:nth-child(odd)選中所有l(wèi)i元素，且這些元素為其父元素的第奇數(shù)個(gè)元素（從1開始計(jì)數(shù)）jQuery支持的位置選擇器選擇器說明:nth-child(nX+Y)利用公式計(jì)算子元素的位置，例如li:nth-child(5n+1)選中所有l(wèi)i元素，且這些li元素為其父元素的第5n+1個(gè)元素（1、6、11…）:odd或者:even對于整個(gè)頁面而言的奇數(shù)號(hào)或者偶數(shù)號(hào)元素，例如p:even為頁面中所有排在偶數(shù)的p元素（從0開始計(jì)數(shù)）:eq(n)頁面中的第n個(gè)元素，例如p:eq(4)為頁面中的第5個(gè)元素:gt(n)頁面中的第n個(gè)元素之后的所有元素（不包括第n個(gè)元素本身），例如p:gt(0)為頁面中第1個(gè)p元素之后的所有元素:lt(n)頁面中的第n個(gè)元素之前的所有元素（不包括第n個(gè)元素本身），例如p:lt(2)為頁面中第3個(gè)p元素之前的所有元素jQuery選擇器詳解過濾選擇器<scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript"> functionShowChecked(oCheckBox){ //使用:checked過濾出被用戶選中的

$("input[name="+oCheckBox+"]:checked").addClass("myClass"); }</script></head><body> <formname="myForm"> <inputtype="checkbox"name="sports"id="football"> <labelfor="football">足球</label><br> <inputtype="checkbox"name="sports"id="basketball"> <labelfor="basketball">籃球</label><br> <inputtype="checkbox"name="sports"id="volleyball"> <labelfor="volleyball">排球</label><br><br> <inputtype=“button”value=“ShowChecked” onclick="ShowChecked('sports')"class="btn"> </form></body>管理選擇結(jié)果用jQuery選擇出來的元素個(gè)數(shù)與數(shù)組非常相似，可以通過jQuery提供的一系列方法對其進(jìn)行處理，包括獲取元素的個(gè)數(shù)查找某個(gè)元素（提取元素）截取某個(gè)段落獲取某個(gè)元素獲取jQuery選擇器中元素的個(gè)數(shù)在jQuery中可以通過size()方法獲取選擇器中元素的個(gè)數(shù)它類似于數(shù)組中的length屬性，返回整數(shù)值例如：$(“img”).size()獲得頁面中所有圖片<img>的數(shù)目<scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript">document.onclick=function(){ vari=$("div").size()+1; //獲取div塊的數(shù)目（此時(shí)還沒有添加div塊）

$(document.body).append($("<div>"+i+"</div>")); //添加一個(gè)div塊

$("span").html(i); //修改顯示的總數(shù)}</script></head><body>

頁面中一共有<span>0</span>個(gè)div塊。點(diǎn)擊鼠標(biāo)添加div：</body>get()方法可以獲取指定位置的元素index(element)方法可以查找element所處的位置<scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript">$(function(){ //click()添加點(diǎn)擊事件

$("div").click(function(){ //將塊本身用this關(guān)鍵字傳入，從而獲取自身的序號(hào)

varindex=$("div").index(this); $("span").html(index.toString()); });});</script></head><body><div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>點(diǎn)擊的div塊序號(hào)為：<span></span></body>添加、刪除、過濾元素add()方法添加元素$(“img[alt]”).add(“img[title]”)將所有設(shè)置了alt屬性的<img>和所有設(shè)置了title屬性的<img>組合在了一起，供別的方法統(tǒng)一調(diào)用，等同于$(“img[alt],img[title]”)與add()方法相反，not()方法可以除去元素集中的某些元素$(“l(fā)i[title]”).not(“title*=isaac”)選中了設(shè)置了title的<li>標(biāo)記，但不包括title值中任意匹配字符串“isaac”的那些元素<scriptlanguage="javascript"src="jQuery.min.js"></script><scriptlanguage="javascript"> $(function(){ $("div").not(".green,#blueone").addClass("myClass"); });</script></head><

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論