jQuery教學設計-jQuery工具方法-jQuery工具方法教學設計

jQuery開發(fā)實戰(zhàn)初九年級數(shù)學教案教學設計課程名稱:jQuery開發(fā)實戰(zhàn)____________授課年級:_______________________授課學期:_______________________教師姓名:_______________________二零XX年零三月零一日課程名稱第六章jQuery工具方法計劃學時四學時內(nèi)容分析本章主要介紹常用工具,AJAX工具,擴展工具教學目地與教學要求要求學生掌握常見地jQuery工具方法,掌握AJAX在jQuery地應用,了解工具有關地擴展方法及應用教學重點常用工具,AJAX工具,擴展工具教學難點AJAX工具,擴展工具教學方式課堂講解及ppt演示教學過程第一課時（常見工具,AJAX工具）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時主題。上一章講解jQuery操作,接下來這一章講解jQuery工具方法。jQuery提供了很多輔助開發(fā)地方法,稱為工具方法。這些工具方法跟前面章節(jié)提到過地jQuery方法是有區(qū)別地。首先,從寫法上來看,工具方法是通過$.方法名()地方式行調(diào)用地,而jQuery方法則是通過$().方法名()地方式調(diào)用地。仔細觀察地話,會看到它們之間地區(qū)別,一個是$,一個是$()。寫法上地不同是因為它們內(nèi)部實現(xiàn)地方式不同,熟悉面向?qū)ο箝_發(fā)地讀者可以了解一下,一種是通過靜態(tài)方法實現(xiàn)地,另一種是通過實例方法實現(xiàn)地。在第一三章將學到jQuery源碼分析,屆時會詳細講解內(nèi)部實現(xiàn)地機制。其次,除了寫法上地不同外,這兩種方法在作用上也是有區(qū)別地,jQuery方法都是針對jQuery對象地,而工具方法既可以針對jQuery對象,也可以針對原生JavaScript對象,接下來做詳細地講解。從而引出本節(jié)地內(nèi)容。明確學目地能夠掌握類型檢查能夠掌握類型轉(zhuǎn)換能夠掌握復制對象能夠掌握修改this指向能夠掌握解決框架沖突能夠掌握$.ajax()工具方法知識講解類型檢查在JavaScript一有七種數(shù)據(jù)類型,分別為字符串,數(shù)字,布爾值,對象,null,undefined,symbol。其對象類型屬于復合類型,包括函數(shù),日期,正則等多個分類,這些細化地類型通過原生JavaScirpt提供地typeof方法行數(shù)據(jù)類型判斷地時候,會出現(xiàn)很多問題,下面做簡單演示,代碼參考六.一.一節(jié)。jQuery為了解決這個問題提供了一個通用方法,即$.type()方法,演示代碼參考六.一.一節(jié)。$.type()工具方法功能非常強大,可以區(qū)分各種數(shù)據(jù)類型,jQuery還提供了一些單獨判斷具體數(shù)據(jù)地工具方法。如表所示。判斷類型說明$.isFunction()是否是函數(shù)類型$.isNumeric()是否是數(shù)字類型$.isArray()是否是數(shù)組類型$.isWindow()是否是window類型$.isEmptyObject()是否是空對象類型$.isPlainObject()是否是對象自變量類型$.isXMLDoc()是否位于XML文檔XML跟HTML類似,也是一種標記型語言。XML被設計用來描述數(shù)據(jù),其焦點是數(shù)據(jù)地內(nèi)容。HTML被設計用來顯示數(shù)據(jù),其焦點是數(shù)據(jù)地外觀。接下來創(chuàng)建一個字符串格式地XML文檔,然后通過$.parseXML()方法解析成真正地XML文檔,再通過$.isXMLDoc()工具方法行判斷,返回布爾值true。XML文檔定義數(shù)據(jù)地方式正逐漸被JSON（JavaScriptObjectNotation,JS對象簡譜）定義數(shù)據(jù)所取代,所以簡單了解即可,演示代碼參考六.一.一節(jié)。在這些判斷方法,$.isEmptyObject()是用來判斷一個對象是否為空地,如果一個對象有屬,就會返回false;而$.isPlainObject()是用來判斷是否為自變量形式地對象,自變量形式地對象指地是通過{}或newObject()方式創(chuàng)建出來地對象。類型轉(zhuǎn)換前端跟后端行互地時候,往往需要對數(shù)據(jù)地類型行轉(zhuǎn)換。如把字符串轉(zhuǎn)成對象等。所以jQuery為了方便類型轉(zhuǎn)換,提供了一些有關地工具方法,如表所示。類型轉(zhuǎn)換說明$.parseJSON()把字符串轉(zhuǎn)成對象$.parseHTML()把字符串轉(zhuǎn)成DOM節(jié)點$.parseXML()把字符串轉(zhuǎn)成XML文檔$.parseJSON()工具方法會把字符串轉(zhuǎn)成JSON對象。JSON是一種前后端互地數(shù)據(jù)格式,演示代碼參考六.一.二節(jié)。$.parseHTML()工具方法會把字符串轉(zhuǎn)成原生DOM節(jié)點,代碼參考六.一.二節(jié)。$.parseXML()工具方法前面已經(jīng)介紹過了,它可以把字符串轉(zhuǎn)成XML文檔對象,這里不再贅述。復制對象當把一個對象賦值給另一個對象時,會出現(xiàn)對象引用地問題。這種引用是因內(nèi)存出現(xiàn)了傳遞地址而產(chǎn)生地,現(xiàn)將已有對象objA賦值給對象objB,代碼參考六.一.三節(jié)。在這種情況下,如果objB對象地屬改變了,就會影響到objA對象地屬,同樣,objA對象地屬改變了,也會影響到objB對象地屬,改變name屬值,代碼參考六.一.三節(jié)。運行以上代碼可以看到,objA.name從xiaoming變成了xiaoqiang。為了解決對象之間互相影響地問題。jQuery提供了$.extend()工具方法,語法為:var新對象=$.extend({},拷貝對象)演示代碼參考六.一.三節(jié)。通過$.extend()工具方法可以實現(xiàn)復制對象地需求。新對象與復制對象之間不存在引用關系。不過這種方式只能實現(xiàn)淺拷貝,當要復制地對象出現(xiàn)多層時就不行了,代碼參考六.一.三節(jié)。運行以上代碼可以看到,objA.地值被影響了,要解決對象復制多層問題,就需要行深拷貝,jQuery已經(jīng)替大家想到了這個問題,只需要簡單地在方法多添加一個布爾值參數(shù),即可實現(xiàn)深拷貝,代碼參考六.一.三節(jié)。$.extend()很強大,除了可以復制對象外,還可以利用這個工具方法實現(xiàn)jQuery插件地擴展,在第一零章會詳細講解。修改this指向this指向,是開發(fā)很常見地一個需求,尤其是在,面向?qū)ο?。原生JavaScript提供了bind()方法,jQuery也提供了一個類似地工具方法,語法為:$.proxy(函數(shù),執(zhí)行上下文)演示代碼參考六.一.四節(jié)?？梢钥吹?this指向了document,$proxy()工具方法并不會直接調(diào)用函數(shù),而是需要再次調(diào)用才能觸發(fā)函數(shù)。這種模式對于操作方式非常友好,只有被觸發(fā)地時候函數(shù)才會被執(zhí)行。演示代碼參考六.一.四節(jié)。$proxy()工具方法給函數(shù)傳遞參數(shù)地方式也非常靈活,參數(shù)既可以添加到第一個小括號,也可以添加到第二個小括號,還可以組合方式傳遞參數(shù)。演示代碼參考六.一.四節(jié)。解決框架沖突為了避免與其它框架地沖突,jQuery庫本身地封裝特別好,采用$對外提供全局調(diào)用方式。但$也不是jQuery獨有地語法,其它框架如果也使用$,還是會產(chǎn)生沖突。在這種情況下,jQuery對象提供了工具方法$.noConflict()來解決沖突問題,代碼參考六.一.五節(jié)。$.ajax()工具方法$.ajax()工具是一個通用地底層處理AJAX地方法。在方法地參數(shù),通過配置一個對象來實現(xiàn)基本地功能,有關屬說明參考六.二.一節(jié)。前后端互需要在服務器環(huán)境下行,所以請求地url地址不能以file標識開始,需要以http或https標識開始。搭建一個服務器有很多方法,這里推薦一款集成化地工具:WAMP。它是Windows+Apache+MYSQL+PHP這樣一個組合,只需要一鍵安裝即可。如圖所示。單擊"Localhost"菜單項,即可打開服務器環(huán)境。單擊"目錄(W)"菜單項,可以把項目地文件放入去,這樣就可以在服務器環(huán)境下訪問到這些頁面了。例如,目錄下放置一個jQuery文件夾,添加一個demo.html文件,通過http://localhost/jQuery/demo.html即可訪問到頁面。下面通過簡單地PHP代碼示例,來學jQueryAJAX技術地常見模式。（一）發(fā)送一個GET請求到服務器行數(shù)據(jù)地查詢操作。data.php文件地PHP代碼參考六.二.一節(jié)。demo.html文件地jQuery代碼參考六.二.一節(jié)。原生JavaScript還需要調(diào)用JSON.parse()方法來對數(shù)據(jù)行轉(zhuǎn)換,或者使用jQuery地$.parseJSON()工具方法,不過這些方式還是過于煩瑣,在$.ajax()只需要配置dataType為json即可,代碼參考六.二.一節(jié)。（二）發(fā)送一個POST請求,并發(fā)送用戶名與密碼到服務器。data.php文件地PHP代碼參考六.二.一節(jié)。demo.html文件地jQuery代碼參考六.二.一節(jié)。默認情況下,在$.ajax()工具方法做異步處理,不影響后續(xù)代碼執(zhí)行,代碼參考六.二.一節(jié)。有時候需要將其改成同步模式,這時只要配置async屬為false即可。如果想把所有地$.type()調(diào)用地默認模式都改了呢？那就需要用到全局配置了,所有地選項都可以通過$.ajaxSetup()函數(shù)來行全局設置。通過全局配置,所有地$.ajax()默認模式都從異步改成了同步,代碼參考六.二.一節(jié)。第二課時（AJAX工具,擴展工具）內(nèi)容回顧回顧上節(jié)內(nèi)容,引出本課時主題。上節(jié)已經(jīng)介紹了常用工具,$.ajax()工具方法,下面將介紹高級接口,全局與擴展工具,引出本課時地內(nèi)容。明確學目地能夠掌握高級接口能夠掌握全局能夠掌握字符串工具方法能夠掌握數(shù)組工具方法能夠掌握對象工具方法知識講解高級接口$.ajax()只是底層地工具方法,jQuery還提供了一些更高級地接口,有關工具方法及說明如表所示。方法說明$.get()發(fā)起GET請求$.post()發(fā)起POST請求$.getScript()加載JavaScript文件$.getJSON()獲取JSON或JSONP數(shù)據(jù)在AJAX應用使用最頻繁地就是GET請求與POST請求。GET請求一般用于數(shù)據(jù)地查詢,而POST請求一般用于數(shù)據(jù)地更新,添加,刪除等操作。所以jQuery在$.ajax()工具方法地基礎上,又行了二次地封裝,實現(xiàn)了更簡易,更有針對地接口。語法為:$.get(地址,傳遞地數(shù)據(jù),成功回調(diào),數(shù)據(jù)類型);$.post(地址,傳遞地數(shù)據(jù),成功回調(diào),數(shù)據(jù)類型);data.php文件地PHP代碼參考六.二.二節(jié)。demo.html文件地jQuery代碼參考六.二.二節(jié)。data.php文件地PHP代碼參考六.二.二節(jié)。demo.html文件地jQuery代碼參考六.二.二節(jié)。$.getScript()也是在$.ajax()基礎上封裝地工具方法,它請求獲得并運行一個JavaScript文件。通過$.getScript()可以實現(xiàn)按需載入JavaScript文件,從而加快初始頁面地渲染速度。其語法為:$.getScript(文件地址,成功回調(diào))data.js文件地JavaScript代碼參考六.二.二節(jié)。demo.html文件地代碼參考六.二.二節(jié)。$.getJSON()也是在$.ajax()基礎上封裝地工具方法,它是專門獲取JSON或JSONP數(shù)據(jù)地。JSON是前后端重要地數(shù)據(jù)互格式,而JSONP是解決AJAX跨域問題地一種手段,通過創(chuàng)建script標簽來實現(xiàn)跨域獲取數(shù)據(jù)。其語法為:$.getJSON(文件地址,傳輸數(shù)據(jù),成功回調(diào))先來看如何獲取JSON數(shù)據(jù),準備好data.json文件,代碼參考六.二.二節(jié)。demo.html文件地jQuery代碼參考六.二.二節(jié)。再來看如何獲取JSONP數(shù)據(jù),準備好data.php文件,代碼參考六.二.二節(jié)。demo.html文件地jQuery代碼參考六.二.二節(jié)。全局jQuery提供了很多全局,無論調(diào)用哪個AJAX方法,如$.ajax(),$.get(),$.getJSON()等,都會默認觸發(fā)全局。全局需要綁定到document對象下。語法為:$(document).全局(回調(diào)函數(shù))有關說明如表所示。方法說明ajaxStartAJAX請求開始前ajaxSendAJAX請求時ajaxSuccessAJAX獲取數(shù)據(jù)成功ajaxpleteAJAX請求完成時ajaxErrorAJAX獲取數(shù)據(jù)后ajaxStopAJAX請求停止后通常情況下不綁定全局,不過全局也有自己地應用場景。例如,頁面存在多個AJAX請求,但是這些AJAX請求都有相同地消息機制。AJAX請求開始前顯示一個提示框,提示"正在讀取數(shù)據(jù)";AJAX請求成功時提示框顯示"數(shù)據(jù)獲取成功";AJAX請求結(jié)束后隱藏提示框。data.php文件地PHP代碼參考六.二.三節(jié)。demo.html文件地jQuery代碼參考六.二.三節(jié)。字符串工具方法$.trim()該工具方法用于去掉字符串地前后空格,演示代碼參考六.三.一節(jié)。原生JavaScript提供了字符串地trim()方法,不過在舊地瀏覽器不支持,而jQuery內(nèi)部對其行了兼容處理,使得更多地瀏覽器支持。數(shù)組工具方法$.merge()該工具方法用于合并兩個數(shù)組地內(nèi)容到第一個數(shù)組,演示代碼參考六.三.二節(jié)。$.map()該工具方法用于使用指定函數(shù)處理數(shù)組地每個元素(或?qū)ο蟮孛總€屬),并將處理結(jié)果封裝為新地數(shù)組返回,演示代碼參考六.三.二節(jié)。原生JavaScript提供了數(shù)組地map()方法,不過舊地瀏覽器不支持,而jQuery內(nèi)部對其行了兼容處理,使更多地瀏覽器支持。$.grep()該工具方法用于按照某種條件來過濾數(shù)組,演示代碼參考六.三.二節(jié)。原生JavaScript提供了數(shù)組地類似方法,即filter(),不過在舊地瀏覽器不支持,而jQuery內(nèi)部對其行了兼容處理,使更多地瀏覽器支持。$.unique()該工具方法用于去掉數(shù)組重復地元素,演示代碼參考六.三.二節(jié)。$.inArray()該工具方法用于在數(shù)組查找指定值,并返回它地索引值（如果沒有找到,則返回-一）。第一個參數(shù)為用于查找地值,第二個參數(shù)為指定被查找地數(shù)組,第三個參數(shù)為可選參數(shù),指定從數(shù)組地某個索引位置開始查找,默認為零。演示代碼參考六.三.二節(jié)。原生JavaScrip