第14章-jQuery和jQuery-Mobile基礎(chǔ)ppt課件(全)

《第14章-jQuery和jQuery-Mobile基礎(chǔ)ppt課件(全)》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

14.1JavaScript基礎(chǔ)JavaScript是最常見的腳本語言，它可以嵌入到HTML中，在客戶端執(zhí)行，是網(wǎng)頁特效制作的最佳選擇，同時也是瀏覽器普遍支持的網(wǎng)頁腳本語言。JavaScript簡介JavaScript是一種腳本編程語言，是基于對象并且事件驅(qū)動的程序。其程序代碼嵌在HTML網(wǎng)頁文件中，需要瀏覽者的瀏覽器進(jìn)行解釋運(yùn)行。前面所學(xué)習(xí)的HTML屬于一種標(biāo)記語言，是用某種結(jié)構(gòu)儲存數(shù)據(jù)并在設(shè)備上顯示的手段，兩者屬于完全不同的概念。在一個完整的網(wǎng)頁中是離不開JavaScript程序的，因?yàn)橛刑嗟墓δ苄枰鼇韺?shí)現(xiàn)。如果只是想單純的顯示網(wǎng)頁的基本內(nèi)容，那么，就沒有必要再使用JavaScript程序了。在網(wǎng)頁中使用JavaScript的方法JavaScript有著非常嚴(yán)格的編寫規(guī)范，在前面的HTML學(xué)習(xí)中了解到JavaScript包含在網(wǎng)頁的標(biāo)簽中。由于JavaScript程序代碼嵌入在HTML代碼中，為了使頁面代碼結(jié)構(gòu)清晰，設(shè)計者經(jīng)常把JavaScript部分的代碼放置在頭部信息區(qū)。當(dāng)然，也可以在HTML文檔中多處嵌入JavaScript代碼，但并不倡導(dǎo)的這樣的做法。因?yàn)闉g覽器解析HTML文檔時是自上而下的順序，設(shè)計者需要確保JavaScript代碼被優(yōu)先解析。

1縮放和翻轉(zhuǎn)變形JavaScript的運(yùn)算符是一些特定符號的集合，這些符號用來操作數(shù)據(jù)按特定的規(guī)則進(jìn)行運(yùn)算，并生成結(jié)果。運(yùn)算符所操作的數(shù)據(jù)被稱為操作數(shù)，運(yùn)算符和操作數(shù)連接并可運(yùn)算出結(jié)果的式子就是表達(dá)式。實(shí)戰(zhàn)練習(xí)——使用JavaScript中的算術(shù)運(yùn)算符JavaScript條件和循環(huán)語句JavaScript中提供了多種用于程序流程控制的語句，這些語句可以分為條件和循環(huán)兩大類。條件語句包括if、switch等，循環(huán)語句包括while、for等。實(shí)戰(zhàn)練習(xí)——使用JavaScript中的if條件語句最終文件：光盤\最終文件\第14章\14-1-3.html視頻：光盤\視頻\第14章\14-1-3.swf最終文件：光盤\最終文件\第14章\14-1-4.html視頻：光盤\視頻\第14章\14-1-4.swf

2JavaScript函數(shù)JavaScript中的函數(shù)是可以完成某種特定功能的一系列代碼的集合，在函數(shù)被調(diào)用前函數(shù)體內(nèi)的代碼并不執(zhí)行，即獨(dú)立于主程序。函數(shù)的代碼執(zhí)行結(jié)果不一定是一成不變的，可以通過向函數(shù)傳函數(shù)，用來解決不同情況下的問題，函數(shù)也可以返回一個值。實(shí)戰(zhàn)練習(xí)——使用JavaScript中的函數(shù)JavaScript事件事件是交互的橋梁，用戶可以通過多種方式與瀏覽器載入的頁面進(jìn)行交互。Web應(yīng)用程序開發(fā)者通過JavaScript腳本內(nèi)置的和自定義的事件來響應(yīng)用戶的動作，就可以開發(fā)出更有交互性，動態(tài)性的頁面。實(shí)戰(zhàn)練習(xí)——使用JavaScript中的onLoad事件最終文件：光盤\最終文件\第14章\14-1-5.html視頻：光盤\視頻\第14章\14-1-5.swf最終文件：光盤\最終文件\第14章\14-1-6.html視頻：光盤\視頻\第14章\14-1-6.swf

314.2jQuery基礎(chǔ)jQuery是一套開放原始代碼的JavaScript函數(shù)庫，可以說是目前最受歡迎的JS函數(shù)庫，最讓人津津樂道的就是它簡化了DOM文件的操作，讓我們輕松選擇對象，并以簡潔的程序完成想做的事情。除此之外，還可以通過jQuery指定CSS屬性值，達(dá)到想要的特效與動畫效果。另外，jQuery還強(qiáng)化異步傳輸以及事件功能，輕松訪問遠(yuǎn)程數(shù)據(jù)。jQuery簡介jQuery是一個兼容多瀏覽器的JavaScript庫，核心理念是“寫得更少，做得更多”。jQuery是免費(fèi)的、開源的，使用MIT許可協(xié)議。jQuery的語法設(shè)計可以使開發(fā)者更加便捷，例如操作文檔對象、選擇DOM元素、制作動畫效果、事件處理、使用AJAX以及其他功能。除此之外，jQuery提供API讓開發(fā)者編寫插件。其模塊化的使用方式使開發(fā)者可以很輕松的開發(fā)出功能強(qiáng)大的靜態(tài)或動態(tài)網(wǎng)頁。在網(wǎng)頁中引用jQuery函數(shù)庫在網(wǎng)頁中引用jQuery函數(shù)庫的方法有兩種，一種是直接下載js文件引用，另一種是使用CDN（ContentDeliveryNetwork）來加載鏈接庫。

4jQuery基本語法jQuery必須等瀏覽器加載HTML的DOM對象之后才能執(zhí)行，可以通過.ready()方法來確認(rèn)DOM對象是否已經(jīng)全部加載，代碼如下所示。jQuery(document).ready(function(){//程序代碼});jQuery選擇器jQuery選擇器用來選擇HTML中的元素，可以通過HTML標(biāo)簽名稱、id屬性以及class屬性等來選擇網(wǎng)頁中的元素。使用jQuery設(shè)置CSS樣式屬性掌握了jQuery選擇器的用法之后，除了可以操控HTML元素之外，還可以使用css()方法來改變網(wǎng)頁元素的CSS樣式。例如，設(shè)置HTML頁面中所有

元素的文字顏色為紅色，可以寫為如下的代碼。$(“p”).css(“color”,”red”);實(shí)戰(zhàn)練習(xí)——使用jQuery改變列表第一行效果最終文件：光盤\最終文件\第14章\14-2-5.html視頻：光盤\視頻\第14章\14-2-5.swf

514.3jQueryMobile基礎(chǔ)jQueryMobile是jQuery在手機(jī)和平板電腦等移動設(shè)備上應(yīng)用的版本。jQueryMobile不僅給主流移動平臺帶來jQueryMobile核心庫，而且會發(fā)布一個完整統(tǒng)一的jQuery移動UI框架。jQueryMobile簡介jQueryMobile是一個基于HTML5，擁有響應(yīng)式網(wǎng)站特性，兼容所有主流移動設(shè)備平臺的統(tǒng)一UI接口系統(tǒng)與前端開發(fā)框架，可以運(yùn)行在所有智能手機(jī)、平板電腦和桌面設(shè)備上。設(shè)計者可以通過jQueryMobile框架設(shè)計一個高度響應(yīng)式的網(wǎng)站或應(yīng)用運(yùn)行于所有流行的智能手機(jī)、平板電腦和桌面系統(tǒng)。jQueryMobile功能特點(diǎn)jQueryMobile是一套以jQuery和jQueryUI為基礎(chǔ)，提供移動設(shè)備跨平臺的用戶界面函數(shù)庫。通過它制作出來的網(wǎng)頁能夠支持大多數(shù)移動設(shè)備的瀏覽器，并且在瀏覽網(wǎng)頁時，能夠擁有操作應(yīng)用軟件一樣的觸碰及滑動效果。jQueryMobile的工作原理jQueryMobile的工作原理是：提供可觸摸的UI小部件和AJAX導(dǎo)航系統(tǒng)，使頁面支持動畫式切換效果。以頁面中的元素標(biāo)簽為事件驅(qū)動對象，當(dāng)觸摸或單擊時進(jìn)行觸發(fā)，最后在移動終端的瀏覽器中實(shí)現(xiàn)一個個應(yīng)用程序的動畫展示效果。

614.4jQueryMobile操作流程jQueryMobile的操作流程與編寫HTML頁面相似，編寫和開發(fā)jQueryMobile頁面的工具也與HTML頁面的工具相同，可以通過記事本或?qū)I(yè)的Dreamweaver來編輯制作jQueryMobile頁面，完成jQueryMobile頁面的制作后，將其保存為.html或.htm文件，就可以在瀏覽器或模擬器中瀏覽了。下載移動設(shè)備模擬器jQueryMobile頁面主要用于智能手機(jī)等移動設(shè)備瀏覽的，所以需要使用能夠產(chǎn)生移動設(shè)備屏幕大小的模擬器來預(yù)覽所制作jQueryMobile頁面效果。在本節(jié)中將向讀者介紹OperaMobileEmulator移動設(shè)備模擬器。使用URL方式加載jQueryMobile函數(shù)庫要開發(fā)jQueryMobile頁面，必須要引用jQueryMobile函數(shù)庫（.js）、CSS樣式表（.css）和配套的jQuery函數(shù)庫文件。引用方式有兩種，一種是到j(luò)QueryMobile官方網(wǎng)站上下載文件進(jìn)行引用，另一種是直接通過URL鏈接到j(luò)QueryMobile的CDN-hosted引用，不需要下載文件。

7創(chuàng)建jQueryMobile頁面與開發(fā)和制作普通的網(wǎng)站頁面相似，創(chuàng)建一個jQueryMobile頁面也非常簡單。在jQueryMobile頁面中通過