jQuery-演示文稿-第4課時

Ajax在jQuery中的應用/jQuery實用工具函數(shù)start1.AjaxAjax是AsynchronousJavaScriptandXML的縮寫，其核心是通過XMLHttpRequest對象，以一種異步的方式，向服務器發(fā)送數(shù)據(jù)請求，并通過該對象接收請求返回的數(shù)據(jù)，從而完成人機交互的數(shù)據(jù)操作。這種利用Ajax技術進行的數(shù)據(jù)交互并不局限于Web動態(tài)頁面，在普通的靜態(tài)HTML頁面中同樣可以實現(xiàn)，因此，在這種背景下，Ajax技術在頁面開發(fā)中得以廣泛使用。2.loadload實現(xiàn)異步數(shù)據(jù)的功能語法：load(url,[data],[callback])例:$("#divtip").load("b.html");在load方法中，參數(shù)url還可以用于過濾頁面中的某類別的元素，如$("#divtip").load("b.html.divc");，則表示獲取頁面b.html中類別為“divc”的全部元素3.1.jquery中的全局函數(shù)-getJSON()雖然使用load()方法可以很快地加載數(shù)據(jù)到頁面中，但有時需要對獲取的數(shù)據(jù)進行處理，如果將用load()方法獲取的內容進行遍歷，也可以進行數(shù)據(jù)的處理，但這樣獲取的內容必須先插入頁面中，然后才能進行，因此，執(zhí)行的效率不高。為了解決這個問題，我們采用將要獲取的數(shù)據(jù)另存為一種輕量極的數(shù)據(jù)交互格式，即JSON文件格式，由于這種格式很方便計算機的讀取，因而頗受開發(fā)者的青昧．在jQuery中，專門有一個全局函數(shù)getJSON()，用于調用JSON格式的數(shù)據(jù)，其調用的語法格式為：$.getJSON(url,[data],[callback])可選項[data]參數(shù)表示發(fā)送到服務器的數(shù)據(jù)，其格式為key/value另外一個可選項[callback]參數(shù)表示加載成功時執(zhí)行的回調函數(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()在上幾個小節(jié)中，我們通過jQuery中的各種全局函數(shù)，實現(xiàn)了不同格式數(shù)據(jù)的異步加載，如HTML、JSON、JS格式數(shù)據(jù)。在日常的開發(fā)中，有時也會遇到使用XML文檔保存數(shù)據(jù)的情況，對于這種格式的數(shù)據(jù)，jQuery中使用全局函數(shù)$.get()進行訪問，語法：$.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ù)向服務器發(fā)出數(shù)據(jù)請求。全局函數(shù)$.post與$.get()在本質上沒有太大的區(qū)別，所不同的是，get方式不適合傳遞數(shù)據(jù)量較大的數(shù)據(jù)，同時，其請求的歷史信息會保存在瀏覽器的緩存中，有一定的安全風險。而post方式向服務器發(fā)送數(shù)據(jù)請求，就不存在這兩個方面的不足。$.post(url,[data],[callback],[type])(url,[callback])通過此全局函數(shù)獲取js文件 $(function(){ $("#button1").click(function(){ $.getScript("xxx.js");//打開以獲取返回的數(shù)據(jù)的文件 }); })4.$.ajax()方法語法：$.ajax([options])可選項參數(shù)[options]為$.ajax方法中的請求設置，其格式為key/value，既包含發(fā)送請求的參數(shù)，也含有服務器響應后回調的數(shù)據(jù)。其全部名稱如表4.$.ajax()方法語法：$.ajax([options])可選項參數(shù)[options]為$.ajax方法中的請求設置，其格式為key/value，既包含發(fā)送請求的參數(shù)，也含有服務器響應后回調的數(shù)據(jù)。其全部名稱如表5.$.ajaxSetup()方法在使用$.ajax()方法時，有時需要調用多個$.ajax()方法，如果每個方法都設置其中的請求細節(jié)，將是一件十分麻煩的事。為了簡化這種工作，在jQuery中，可以使用$.ajaxSetup()方法設置全局性的Ajax默認選項，一次設置，全局有效，這樣大大簡化了$.ajax()方法中的細節(jié)編寫，格式:$.ajaxSetup([options])；$(function(){$.ajaxSetup({ type:"GET", url:"json.xml", dataType:"xml"});});

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

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

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