jQuery-演示文稿-第4課時(shí)

Ajax在jQuery中的應(yīng)用/jQuery實(shí)用工具函數(shù)start1.AjaxAjax是AsynchronousJavaScriptandXML的縮寫，其核心是通過XMLHttpRequest對(duì)象，以一種異步的方式，向服務(wù)器發(fā)送數(shù)據(jù)請(qǐng)求，并通過該對(duì)象接收請(qǐng)求返回的數(shù)據(jù)，從而完成人機(jī)交互的數(shù)據(jù)操作。這種利用Ajax技術(shù)進(jìn)行的數(shù)據(jù)交互并不局限于Web動(dòng)態(tài)頁(yè)面，在普通的靜態(tài)HTML頁(yè)面中同樣可以實(shí)現(xiàn)，因此，在這種背景下，Ajax技術(shù)在頁(yè)面開發(fā)中得以廣泛使用。2.loadload實(shí)現(xiàn)異步數(shù)據(jù)的功能語法：load(url,[data],[callback])例:$("#divtip").load("b.html");在load方法中，參數(shù)url還可以用于過濾頁(yè)面中的某類別的元素，如$("#divtip").load("b.html.divc");，則表示獲取頁(yè)面b.html中類別為“divc”的全部元素3.1.jquery中的全局函數(shù)-getJSON()雖然使用load()方法可以很快地加載數(shù)據(jù)到頁(yè)面中，但有時(shí)需要對(duì)獲取的數(shù)據(jù)進(jìn)行處理，如果將用load()方法獲取的內(nèi)容進(jìn)行遍歷，也可以進(jìn)行數(shù)據(jù)的處理，但這樣獲取的內(nèi)容必須先插入頁(yè)面中，然后才能進(jìn)行，因此，執(zhí)行的效率不高。為了解決這個(gè)問題，我們采用將要獲取的數(shù)據(jù)另存為一種輕量極的數(shù)據(jù)交互格式，即JSON文件格式，由于這種格式很方便計(jì)算機(jī)的讀取，因而頗受開發(fā)者的青昧．在jQuery中，專門有一個(gè)全局函數(shù)getJSON()，用于調(diào)用JSON格式的數(shù)據(jù)，其調(diào)用的語法格式為：$.getJSON(url,[data],[callback])可選項(xiàng)[data]參數(shù)表示發(fā)送到服務(wù)器的數(shù)據(jù)，其格式為key/value另外一個(gè)可選項(xiàng)[callback]參數(shù)表示加載成功時(shí)執(zhí)行的回調(diào)函數(shù)。下面舉例說明。3.2.jquery中的全局函數(shù)-getScript()$.getScript(url,[callback])通過此全局函數(shù)獲取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打開以獲取返回的數(shù)據(jù)的文件 }); })3.3.jquery中的全局函數(shù)-get()在上幾個(gè)小節(jié)中，我們通過jQuery中的各種全局函數(shù)，實(shí)現(xiàn)了不同格式數(shù)據(jù)的異步加載，如HTML、JSON、JS格式數(shù)據(jù)。在日常的開發(fā)中，有時(shí)也會(huì)遇到使用XML文檔保存數(shù)據(jù)的情況，對(duì)于這種格式的數(shù)據(jù)，jQuery中使用全局函數(shù)$.get()進(jìn)行訪問，語法：$.get(url,[data],[callback],[type])

$.get("json.xml",function(data){ $("#p1").empty(); varhtml=""; $(data).find("user").each(function(){//遍歷獲取的數(shù)據(jù) var$strUser=$(this); html+="姓名:"+$strUser.find("name").text()+"<br>" +"性別:"+$strUser.find("sex").text()+"<br>" +"郵箱:"+$strUser.find("email").text()+"<br>"; }); $("#p1").html(html);//顯示處理后的數(shù)據(jù) });3.4.jquery中的全局函數(shù)-post()$.post也是帶參數(shù)向服務(wù)器發(fā)出數(shù)據(jù)請(qǐng)求。全局函數(shù)$.post與$.get()在本質(zhì)上沒有太大的區(qū)別，所不同的是，get方式不適合傳遞數(shù)據(jù)量較大的數(shù)據(jù)，同時(shí)，其請(qǐng)求的歷史信息會(huì)保存在瀏覽器的緩存中，有一定的安全風(fēng)險(xiǎn)。而post方式向服務(wù)器發(fā)送數(shù)據(jù)請(qǐng)求，就不存在這兩個(gè)方面的不足。$.post(url,[data],[callback],[type])(url,[callback])通過此全局函數(shù)獲取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打開以獲取返回的數(shù)據(jù)的文件 }); })4.$.ajax()方法語法：$.ajax([options])可選項(xiàng)參數(shù)[options]為$.ajax方法中的請(qǐng)求設(shè)置，其格式為key/value，既包含發(fā)送請(qǐng)求的參數(shù)，也含有服務(wù)器響應(yīng)后回調(diào)的數(shù)據(jù)。其全部名稱如表4.$.ajax()方法語法：$.ajax([options])可選項(xiàng)參數(shù)[options]為$.ajax方法中的請(qǐng)求設(shè)置，其格式為key/value，既包含發(fā)送請(qǐng)求的參數(shù)，也含有服務(wù)器響應(yīng)后回調(diào)的數(shù)據(jù)。其全部名稱如表5.$.ajaxSetup()方法在使用$.ajax()方法時(shí)，有時(shí)需要調(diào)用多個(gè)$.ajax()方法，如果每個(gè)方法都設(shè)置其中的請(qǐng)求細(xì)節(jié)，將是一件十分麻煩的事。為了簡(jiǎn)化這種工作，在jQuery中，可以使用$.ajaxSetup()方法設(shè)置全局性的Ajax默認(rèn)選項(xiàng)，一次設(shè)置，全局有效，這樣大大簡(jiǎn)化了$.ajax()方法中的細(xì)節(jié)編寫，格式:$.ajaxSetup([options])；$(function(){$.ajaxSetup({ type:"GET", url:"json.xml", dataType:"xml"});});

6.ajaxStart和ajaxStop全局事件在jquery中，使用ajax獲取異步數(shù)據(jù)時(shí)，ajaxStart與ajaxStop這兩個(gè)全局事件的使用頻率非常高。前者是當(dāng)請(qǐng)求開始執(zhí)行時(shí)觸發(fā)，往往用于編寫一些準(zhǔn)備性的功能工作，如提示“正在獲取數(shù)據(jù)...”字樣；后者是當(dāng)請(qǐng)求結(jié)束時(shí)觸發(fā)，在這一事件中，常常與前者配合，說明請(qǐng)求的最后進(jìn)行展?fàn)顟B(tài)，如將顯示中的“正在獲取數(shù)據(jù)...”字樣修改為“已成功獲取數(shù)據(jù)!”，然后漸漸消失。

$("#tip").ajaxStart(function(){ $(this).show(); });7.jQuery實(shí)用工具函數(shù)數(shù)組和對(duì)象的操作字符串操作測(cè)試操作URL操作工具函數(shù)擴(kuò)展8.jQuery實(shí)用工具函數(shù)-遍歷數(shù)組$.each()遍歷，語法：$.each(obj,fn(para1,para2))參數(shù)obj表示要遍歷的數(shù)組或?qū)ο?，fn為每個(gè)遍歷元素執(zhí)行的回調(diào)函數(shù)，該函數(shù)包含兩個(gè)參數(shù)：para1表示數(shù)組的序號(hào)或?qū)ο蟮膶傩?；para2表示數(shù)組的元素和對(duì)象的屬性。

vararrStu={"張三":"60","李四":"70","王二":"80"}varstrC="<li>姓名：分?jǐn)?shù)</li>"；$.each(arrStu,function(name,value){ strC+="<li>"+name+"："+value+"</li>"；});9.jQuery實(shí)用工具函數(shù)-數(shù)據(jù)篩選$.grep()篩選，語法：$.grep(array,function(elementOfArray,indexInArray),[invert])參數(shù)array為要篩選的原數(shù)組，回調(diào)函數(shù)fn中可以設(shè)置兩個(gè)參數(shù),其中elementOfArray為數(shù)組中的元素，indexInArray為元素在數(shù)組中的序列號(hào)。另外，可選項(xiàng)[invert]為不二之，表示是否根據(jù)fn的規(guī)則取反向結(jié)果，默認(rèn)為false，表示不取反。 $(function(){ varstrtmp="篩選前數(shù)據(jù):"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.grep(arrNum,function(ele,index){ returnele>5&&index<8//元素值大于5且序號(hào)小于8});strtmp+=arrNum.join();strtmp+="<br><br>篩選后數(shù)據(jù)："+arrGet.join();$("#divTip").append(strtmp); })9.jQuery實(shí)用工具函數(shù)-數(shù)據(jù)變更$.map()，語法：$.map(array,callback(elementOfArray,indexInArray))參數(shù)array為要變更的原數(shù)組，回調(diào)函數(shù)fn中可以設(shè)置兩個(gè)參數(shù),其中elementOfArray為數(shù)組中的元素，indexInArray為元素在數(shù)組中的序列號(hào)。 通過$.map()工具函數(shù)將數(shù)組中大于5且小于8的元素都增加3，并顯示在頁(yè)面中。 $(function(){ varstrtmp="變更前數(shù)據(jù):"; vararrNum=[2,8,3,7,9,4,3,10,9,7,21];vararrGet=$.map(arrNum,function(ele,index){if(ele>5&&index<8){ returnele+3;}});strtmp+=arrNum.join();strtmp+="<br><br>變更后數(shù)據(jù)："+arrGet.join();$("#divTip").append(strtmp); })10.jQuery實(shí)用工具函數(shù)-數(shù)據(jù)搜索$.inArray()，語法：$.inArray(value,array)如果要在數(shù)組中搜索某個(gè)元素，可以使用工具函數(shù)$.inArray()，該方法相當(dāng)于用javascript中的indexOf()函數(shù)搜索字符串中的某個(gè)字符。在工具函數(shù)$.inArray()中，如果找到了指定的某個(gè)元素，則返回元素在數(shù)組中的索引號(hào)，否則返回-1值。 通過$.map()工具函數(shù)將數(shù)組中大于5且小于8的元素都增加3，并顯示在頁(yè)面中。 $(function(){ varstrtmp="待搜索數(shù)據(jù):"; vararrNum=[4,21,2,12,5];vararrPos=$.inArray(2,arrNum);strtmp+=arrNum.join();strtmp+="<br><br>搜索后結(jié)果："+arrPos;$("#divTip").append(strtmp); })11.字符串操作$.trim()工具函數(shù)，刪除字符串左右兩邊的空格符12.測(cè)試操作$.isPlainObject(obj)，即對(duì)象是否通過{}或newObject{}關(guān)鍵字創(chuàng)建，是則返回true，否返回false13.工具函數(shù)的擴(kuò)展$.extend()工具函數(shù)編寫一個(gè)自定義工具函數(shù)，返回兩個(gè)數(shù)中最小值。 (function($){ $.extend({ "MinNum":function(p1,p2){ return(p1<p2)?p1:p2; } }); })(jQuery);14.jQuery常用插件validateformcookieAutoCompleteNotesForLightBoxContextMenujQZoomNivoSliderTableSortProgressBarLoadMaskPaginationActivebar2Ni