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

下載本文檔

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

文檔簡介

框架和工具包本節(jié)目標理解使用框架的好處掌握jQuery的使用掌握框架如何實現(xiàn)AJAX常見的框架jQuery jQuery是實現(xiàn)JavaScript編程最流行的框架之一，包括對Ajax支持。Prototype Prototype是一個功能強大的庫，它提供了大量底層JavaScript工具函數(shù)，包括對Ajax支持。MooTools mooTools比較新，不過功能相當完備，可以從中得到屏幕效果和Ajax請求工具函數(shù)。為什么使用框架不必自己重新編寫代碼，直接使用框架方法，方便?？蚣苤械拇a得到了更多的測試。因為有更多的人在使用這個框架，所以出現(xiàn)bug的機會更少，相應(yīng)的需要的測試更少?？蚣芡ǔ槟憧紤]跨瀏覽器問題，所以不必擔心你的JS代碼在不同瀏覽器下的執(zhí)行。這是我們使用框架的一個重要原因。使用框架的步驟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)容自動傳給回調(diào)函 alert(respText);//數(shù)的參數(shù)

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

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

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

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

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

選擇所有的超鏈接，并且這些超鏈接的href屬性是以pdf結(jié)尾的功能函數(shù)前綴在JavaScript中，開發(fā)者需要編寫函數(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選擇器詳解屬性選擇器屬性選擇器的語法是在標記的后面用中括號“[”和“]”添加相關(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選擇器詳解包含選擇器用來選擇包含了某種特殊標記的元素繼續(xù)在上例的基礎(chǔ)上添加如下的JavaScript代碼$(“l(fā)i:has(a)”)將選中二級目錄列表中所以包含了超鏈接的<li>標記$(“l(fā)i:has(a)”).addClass(“myClass”);jQuery支持的包含選擇器選擇器說明*所有標記E所有名稱為E的標記EF所有名稱為F的標記，并且是E標記的子標記（包括孫、重孫等）E>F所有名稱為F的標記，并且是E標記的子標記（不包括孫標記）E+F所有名稱為F的標記，并且該標記元素緊接著前面的E標記E~F所有名稱為F的標記，并且該標記前有一個E標記E:has(F)所有名稱為E的標記，并且該標記包含F(xiàn)標記E.C所有名稱為E的標記，屬性類別為C，如果去掉E，就是屬性選擇器.CE#I所有名稱為E的標記，id為I，如果去掉E，就是id選擇器#IE[A]所有名稱為E的標記，并且設(shè)置了屬性AE[A=V]所有名稱為E的標記，并且屬性A的值等于VE[A^=V]所有名稱為E的標記，并且屬性A的值以V開頭E[A$=V]所有名稱為E的標記，并且屬性A的值以V結(jié)尾E[A*=V]所有名稱為E的標記，并且屬性A的值中包含VjQuery選擇器詳解位置選擇器通過標記所處的位置來進行選擇奇數(shù)行、偶數(shù)行的選擇正是應(yīng)用了此類選擇器頁面中幾乎所有的標記都可以運用位置選擇器<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è)定某個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選擇器詳解在頁面中如果希望選擇每個<div>塊的第一個<p>標記，則可以通過first-child選擇$(“p:first-child”)選擇每個<div>塊中的奇數(shù)行$(“p:nth-child(odd)”.addClass(“myclass”));注意：與：nth-child相關(guān)的CSS選擇器是從1開始計數(shù)的，其他的選擇器是從0開始計數(shù)的匹配所有<p>列表中的第五個$(“p:eq(4)”).addClass(“myclass”);jQuery支持的位置選擇器選擇器說明:first第一個元素，例如divp:first選中頁面中所有p元素的第一個，且該p元素是div的子元素:last最后一個元素，例如divp:last選中頁面中所有p元素的最后一個，且該p元素是div的子元素:first-child第一個子元素，例如ul:first-child選中所有ul元素，且該ul元素是其父元素的第一個子元素:last-child最后一個子元素，例如ul:last-child選中所有ul元素，且該ul元素是其父元素的最后一個子元素:only-child所有沒有兄弟的元素，例如p:only-child選中所有p元素，如果該p元素是其父元素的唯一元素:nth-child(n)第n個子元素，例如li:nth-child(2)選中所有l(wèi)i元素，且該li元素是其父元素的第2個子元素（從1開始計數(shù)）:nth-child(odd|even)所有奇數(shù)號或者偶數(shù)號子元素，例如li:nth-child(odd)選中所有l(wèi)i元素，且這些元素為其父元素的第奇數(shù)個元素（從1開始計數(shù)）jQuery支持的位置選擇器選擇器說明:nth-child(nX+Y)利用公式計算子元素的位置，例如li:nth-child(5n+1)選中所有l(wèi)i元素，且這些li元素為其父元素的第5n+1個元素（1、6、11…）:odd或者:even對于整個頁面而言的奇數(shù)號或者偶數(shù)號元素，例如p:even為頁面中所有排在偶數(shù)的p元素（從0開始計數(shù)）:eq(n)頁面中的第n個元素，例如p:eq(4)為頁面中的第5個元素:gt(n)頁面中的第n個元素之后的所有元素（不包括第n個元素本身），例如p:gt(0)為頁面中第1個p元素之后的所有元素:lt(n)頁面中的第n個元素之前的所有元素（不包括第n個元素本身），例如p:lt(2)為頁面中第3個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選擇出來的元素個數(shù)與數(shù)組非常相似，可以通過jQuery提供的一系列方法對其進行處理，包括獲取元素的個數(shù)查找某個元素（提取元素）截取某個段落獲取某個元素獲取jQuery選擇器中元素的個數(shù)在jQuery中可以通過size()方法獲取選擇器中元素的個數(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ù)目（此時還沒有添加div塊）

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

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

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

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

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>點擊的div塊序號為：<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>標記，但不包括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)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論