第13章 Jquery

1、1/43第十五章 jQuery預習檢查n 簡單描述JavaScript與jQuery的關系n jQuery的語法結構包括哪幾部分？n 在jQuery中用于加載文檔的方法是什么？n 在jQuery中顯示和隱藏HTML元素的方法分別是什么？集中測試集中測試2/43本章任務n 編寫第一個jQuery程序n 制作當當頂部導航n 使用jQuery變換網(wǎng)頁效果n 制作廣告圖片輪播切換效果3/43本章目標n 能夠搭建jQuery開發(fā)環(huán)境n 使用ready( )方法加載頁面、掌握jQuery語法u使用addClass( )方法和css( )方法為元素添加CSS樣式u使用next( )方法獲取元素u會使用sho

2、w( )和hide( )顯示和隱藏元素4/43jQuery簡介n jQuery由美國人John Resig于2006年創(chuàng)建n jQuery是目前最流行的JavaScript程序庫，它是對JavaScript對象和函數(shù)的封裝n 它的設計思想是write less,do more5/43初識jQueryn 實現(xiàn)隔行變色效果，只需一句關鍵代碼示例示例$(tr:even).css(background-color,#e8f0f2);6/43jQuery的應用7/43n jQuery與其他JavaScript庫ujQueryuBootstrapuZeptouExtuYUIjQuery能做什么n 訪問和操

3、作DOM元素n 控制頁面樣式n 對頁面事件進行處理n 擴展新的jQuery插件n 與Ajax技術完美結合提示提示n jQuery能做的JavaScript也都能做，但使用jQuery能大幅提高開發(fā)效率8/43jQuery的優(yōu)勢n 體積小，壓縮后只有100KB左右n 強大的選擇器n 出色的DOM封裝n 可靠的事件處理機制n 出色的瀏覽器兼容性n 使用隱式迭代簡化編程n 豐富的插件支持9/43獲取jQueryn 進入jQuery官網(wǎng)：http:/點擊此處下載點擊此處下載10/43jQuery庫文件n jQuery庫分開發(fā)版和發(fā)布版n 在頁面中引入jQuery名稱名稱大小大小說說 明明jquery-

4、1.版本號版本號.js（開發(fā)版）（開發(fā)版）約約286KB完整無壓縮版本，主要用于測試、完整無壓縮版本，主要用于測試、學習和開發(fā)學習和開發(fā)jquery-1.版本版本號號.min.js（發(fā)布版）（發(fā)布版）約約94.8KB經(jīng)過工具壓縮或經(jīng)過服務器開啟經(jīng)過工具壓縮或經(jīng)過服務器開啟Gzip壓縮，主要應用于發(fā)布的產(chǎn)品壓縮，主要應用于發(fā)布的產(chǎn)品和項目和項目11/43jQuery基本語法n 使用jQuery彈出提示框 $(document).ready(function() alert(我欲奔赴沙場征戰(zhàn)我欲奔赴沙場征戰(zhàn)jQuery，勢必攻克之！，勢必攻克之！); );為頁面加載事件綁定方法為頁面加載事件綁定方

5、法 演示示例1：彈出窗口特效12/43示例示例$(document).ready()n $(document).ready()與window.onload類似，但也有區(qū)別window.onload$(document).ready()執(zhí)行時機執(zhí)行時機必須等待網(wǎng)頁中所有的內容必須等待網(wǎng)頁中所有的內容加載完畢后（包括圖片、加載完畢后（包括圖片、flash、視頻等）才能執(zhí)行、視頻等）才能執(zhí)行網(wǎng)頁中所有網(wǎng)頁中所有DOM文檔結構繪制文檔結構繪制完畢后即刻執(zhí)行，可能與完畢后即刻執(zhí)行，可能與DOM元素關聯(lián)的內容（圖片、元素關聯(lián)的內容（圖片、flash、視頻等）并沒有加載完視頻等）并沒有加載完編寫個數(shù)編寫個數(shù)

6、同一頁面不能同時編寫多個同一頁面不能同時編寫多個同一頁面能同時編寫多個同一頁面能同時編寫多個簡化寫法簡化寫法無無$(function() /執(zhí)行代碼執(zhí)行代碼) ;13/43學員操作編寫第一個jQuery程序n 需求說明u在WebStrom中配置jQuery開發(fā)環(huán)境u打開頁面時，彈出窗口，提示信息為“我編寫的第一個jQuery程序！”練習練習完成時間：10分鐘14/43共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調試技巧共性問題集中講解 15/43jQuery語法結構n 工廠函數(shù)$()：將DOM對象轉化為jQuery對象n 選擇器 selector：獲取需要操作的DOM 元素n 方

7、法action()：jQuery中提供的方法，其中包括綁定事件處理的方法語法語法$(selector).action() ; 16/43jQuery操作頁面元素n 使用addClass( )方法為元素添加樣式n 使用css( )方法設置元素樣式n 使用show( )、hide( ) 方法設置元素的顯示和隱藏17/43addClass( )方法語法語法jQuery 對象對象.addClass(樣式名樣式名);$(#current).addClass(current); 示例示例演示示例2：導航菜單18/43css( )方法語法語法css(屬性屬性,屬性值屬性值) ;css(屬性屬性1:屬性值屬性

8、值1,屬性屬性2:屬性值屬性值2.) ;同時設置多個同時設置多個CSSCSS屬性屬性設置一個設置一個CSSCSS屬性屬性$(this).css(background:#c81623);示例示例演示示例3：仿京東左側菜單19/43設置元素的顯示和隱藏語法語法$(selector).show( );$(selector).hide( );$(.nav-top).show( );$(p).hide( );示例示例20/43學員操作制作當當頂部導航n 需求說明u制作當當頂部導航u鼠標移至“我的當當”上時顯示二級菜單，并且顯示1px的顏色為#EE7304實線邊框，當鼠標離開邊框范圍之后，二級菜單消失，并

9、有邊框也消失練習練習完成時間：完成時間：15分鐘分鐘完成時間：15分鐘21/43共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調試技巧共性問題集中講解 22/43jQuery代碼風格n “$”等同于“ jQuery ”n 鏈式操作n 隱式迭代$(document).ready()=jQuery(document).ready()$(function().)=jQuery (function().) 23/43鏈式操作n 對一個對象進行多重操作，并將操作結果返回給該對象 $(h2).css(background-color,#ccffff).next().css(display,bl

10、ock);示例示例演示示例4：問答特效24/43隱式迭代 $(document).ready(function() $(li).css(font-weight:bold,color:red); );示例示例演示示例5：隱式迭代方法的應用25/43添加注釋階段階段說明說明開發(fā)階段開發(fā)階段為代碼添加注釋，可以增加代碼的可讀性，能夠讓別人為代碼添加注釋，可以增加代碼的可讀性，能夠讓別人很容易的讀懂你的代碼，便于后期維護很容易的讀懂你的代碼，便于后期維護維護階段維護階段建議把關鍵的模塊形成開發(fā)文檔，便于后期維護，即便后期刪建議把關鍵的模塊形成開發(fā)文檔，便于后期維護，即便后期刪除代碼注釋，也不影響后期維

11、護除代碼注釋，也不影響后期維護產(chǎn)品正式發(fā)布產(chǎn)品正式發(fā)布建議刪除注釋，減少文件大小，加快下載速度，提高用戶體驗建議刪除注釋，減少文件大小，加快下載速度，提高用戶體驗26/43學員操作使用jQuery變換網(wǎng)頁效果3-1n 訓練要點u使用選擇器選取元素u使用css( ) 、addClass( )方法為選取元素添加CSS樣式u使用show( )方法顯示元素指導指導27/43講解需求說明學員操作使用jQuery變換網(wǎng)頁效果3-2n 需求說明u制作你是人間四月天內容簡介頁面u單擊“你是人間的四月天”標題后，標題字體大小、顏色變?yōu)樗{色，正文的字體顏色變?yōu)榫G色u單擊“查看全部”顯示內容簡介指導指導講解需求說明

12、28/43學員操作使用jQuery變換網(wǎng)頁效果3-3n 實現(xiàn)思路（1）新建HTML文件，文件名為april.html（2）在新建的HTML文檔中引入jQuery庫（3）使用$(document).ready( )創(chuàng)建文檔加載事件（4）使用$( )選取所需元素（5）使用css( )、addClass( )方法為所選取的元素添加CSS樣式（6）使用show( )設置簡介內容顯示指導指導完成時間：20分鐘29/43共性問題集中講解n 常見問題及解決辦法n 代碼規(guī)范問題n 調試技巧共性問題集中講解 30/43DOM模型n 瀏覽器把HTML文檔的元素轉換成節(jié)點對象，所有節(jié)點組成了一個樹狀結構31/43D

13、OM對象和jQuery對象n DOM對象：直接使用JavaScript獲取的節(jié)點對象var objDOM=document.getElementById(title); var objHTML=objDOM.innerHTML; n jQuery對象：使用jQuery包裝DOM對象后產(chǎn)生的對象，它能夠使用jQuery中的方法$(#title).html( );等同于等同于document.getElementById(title).innerHTML; 提示提示n DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用32/43DOM對象轉jQuery對象n 使用$()函數(shù)進行轉化：$(

14、DOM對象)var txtName =document.getElementById(txtName); var $txtName =$(txtName); jQuery對象命名一般約定以$開頭在事件中經(jīng)常使用$(this)，this是觸發(fā)該事件的對象注意注意jQueryjQuery對象對象DOMDOM對象對象33/43jQuery對象轉DOM對象n jQuery對象是一個類似數(shù)組的對象，可以通過index的方法得到相應的DOM對象var $txtName =$ (#txtName); var txtName =$txtName0; n 通過get(index)方法得到相應的DOM對象var

15、$txtName =$(#txtName); var txtName =$txtName.get(0); DOMDOM對象對象jQueryjQuery對象對象jQueryjQuery對象對象DOMDOM對象對象34/43學員操作制作廣告圖片輪播切換效果3-1n 訓練要點u使用jQuery對象的單擊事件方法和鼠標移進移出的事件方法u使用show( )和hide( )實現(xiàn)網(wǎng)頁元素的顯示和隱藏u使用css( )方法設置網(wǎng)頁元素的背景圖像u使用數(shù)組保存網(wǎng)頁中圖片指導指導35/43講解需求說明學員操作制作廣告圖片輪播切換效果3-2n 需求說明u制作廣告圖片輪播切換效果，默認第1個數(shù)字背景顏色為橙色，其他

16、背景為#333333，數(shù)字顏色為白色u鼠標移至圖片上出現(xiàn)左右箭頭，鼠標移出圖片時，左右箭頭消失u單擊左歷右箭頭時，顯示上一個/下一個圖片，當前數(shù)字背景為橙色，其他數(shù)字背景為#333333，第一個/最后一個圖片顯示時，單擊箭頭時彈出提示指導指導講解需求說明36/43學員操作制作廣告圖片輪播切換效果2-2n 實現(xiàn)思路（1）使用mouseover( )、 mouseout( )方法和show( )和hide( )方法實現(xiàn)左右箭頭的顯示和隱藏（2）使用jQuery對象的click( )方法和css( )，實現(xiàn)單擊箭頭輪播圖片和數(shù)字背景顏色變化（3）使用siblings( )方法獲取當前元素的兄弟元素，設置數(shù)字的背景顏色指導指導完成時間：20分鐘 $(li:nth-of-type(+i+).siblings().css(background,#333333);37/43共性問題集中