jQuery技術由於語法簡練、兼容主流內核瀏覽器、可擴展性好等原因已成為前端開發工程師的一項必備技能。本教程的內容基於jQuery*新版本3.2.1，包括Web前端的代碼規範和頁面的主流布局設計、jQuery選擇器、jQuery操作DOM、jQuery事件處理、jQuery動畫、jQuery插件開發、jQuery Ajax和jQuery Mobile框架等。本教程的每個小節知識點都配有案例代碼，著重於講解如何使用jQuery的知識點以及在使用中的注意事項。教程中還設計了綜合性的、具有真實應用背景“任務”，需要使用HTML、CSS和JS/jQuery進行綜合編程，讀者完成任務過程中進行的技能訓練與前端開發崗位要求的技術能力高度一致。任務復雜度適合在課堂授課一般時長範圍內完成。 本教程適合以下讀者群：高職高專院校、應用型本科院校在校大學生；IT培訓機構學員；Web前端開發工程師；Web後臺開發工程師；網站開發愛好者。

馮艷玲，女，博士研究生，2009.3-今 深圳信息職業技術學院 軟件學院擔任專職教師，獲得過IPv6網絡繫統 中國人民解放軍科學技術進步二等獎

目 錄
第1章jQuery簡介 - 1 -
1．1jQuery開發基礎知識 - 1 -
1．1．1HTML - 1 -
1．1．2 CSS - 2 -
1．1．3JavaScript - 4 -
1．1．4瀏覽器工作原理 - 5 -
1．1．5開發軟件 - 7 -
1．1．6調試環境 - 17 -
任務1．1 成績單 - 20 -
任務1．2 輪播器與選項卡 - 24 -
1．2jQuery的特點 - 29 -
1．3jQuery引用方式 - 30 -
1．4jQuery編程第一步 - 31 -
任務1．3 編寫第一個jQuery程序――jQuery Hello World - 31 -
第2章jQuery選擇器 - 36 -
2．1 jQuery基本選擇器 - 37 -
2．1．1 jQuery id選擇器 - 37 -
2．1．2 jQu素選擇器 - 38 -
2．1．3jQuery類選擇器 - 39 -
2．1．4 jQuery多重選擇器 - 39 -
2．1．5 jQuery *選擇器 - 40 -
2．1．6jQuery對像和DOM對像相互轉換 - 41 -
任務2．1 ?jQuery改寫任務1．2 - 44 -
2．2 jQuery 層次選擇器 - 46 -
2．2．1jQuery後代選擇器 - 46 -
2．2．2jQuery父子選擇器 - 47 -
2．2．3jQuery相鄰選擇器 - 48 -
2．2．4jQuery兄弟選擇器 - 49 -
任務2．2 jQuery改寫任務1．1 - 50 -
2．3jQuery過濾選擇器 - 51 -
2．3．1jQuery基本過濾選擇器 - 51 -
任務2．3 采用jQuery基本過濾器改寫“成績單”任務 - 54 -
2．3．2 jQuery內容過濾選擇器 - 55 -
任務2．4 使用內容過濾器改寫“成績單”任務 - 57 -
2．3．3 jQuery可見性過濾選擇器 - 58 -
2．4 jQuery屬性選擇器 - 59 -
2．5 jQuery選擇器的context參數 - 61 -
第3章jQuery操作DOM - 63 -
3．1讀取和設置H素 - 63 -
3．1．1獲取素的HTML內容 - 63 -
3．1．2 獲取素的文本內容 - 64 -
3．1．3 獲取素的標簽屬性的值 - 66 -
3．1．4 獲取素的DOM屬性的值 - 68 -
任務3．1 實現移動端登錄頁面 - 70 -
3．2 向H素添加內容 - 72 -
3．2．1素的開頭添加內容 - 72 -
3．2．2素添加素的開頭 - 73 -
3．2．3素的結尾添加內容 - 74 -
3．2．4素添加素的結尾 - 75 -
3．2．5素之前添加內容 - 76 -
3．2．6素添加素之前 - 77 -
3．2．7素之後添加內容 - 77 -
3．2．8素添加素之後 - 79 -
3．2．9素添素 - 79 -
任務3．2 實現PC端登錄頁 - 80 -
3．3 刪除H素及其屬性 - 85 -
3．3．1 素素 - 85 -
3．3．2 素 - 86 -
3．3．3 素中刪除屬性 - 87 -
3．3．4 從DOM素集合 - 89 -
3．3．5 刪素 - 90 -
任務3．3 ?PC端登錄頁的改進 - 91 -
3．4 復制和替換H素 - 92 -
3．4．1 素 - 92 -
3．4．2 素 - 93 -
3．5 遍歷H素 - 94 -
3．5．1 向上遍歷 DOM 樹 - 94 -
3．5．2 向下遍歷DOM樹 - 95 -
3．5．3 水平遍歷DOM樹 - 96 -
3．5．4 過濾函數 - 99 -
3．5．5 其他遍歷函數 - 100 -
任務3．4 PC端用戶頁的改進 - 102 -
任務3．5 “成績單”任務的改進 - 104 -
3．6 jQuery操作DOM樣式 - 106 -
3．6．1 類操作 - 106 -
3．6．2 屬性操作 - 109 -
任務3．6 PC端用戶頁的持續改進 - 113 -
第4章jQuery事件處理 - 115 -
4．1事件處理機制 - 115 -
4．1．1事件傳遞機制 - 115 -
4．1．2event對像 - 115 -
4．2 jQuery事件管理 - 117 -
4．2．1 jQuery事件處理機制 - 117 -
4．2．2jQuery事件管理函數 - 117 -
任務4．1輪播器、選項卡的改進 - 123 -
任務4．2實現“主要課程”頁 - 126 -
4．3 jQuery事件處理函數 - 129 -
4．3．1 jQuery鼠標事件處理函數 - 129 -
4．3．2 jQuery鍵盤事件處理函數 - 132 -
4．3．3jQuery其他事件處理函數 - 134 -
任務4．3 “主要課程”頁的改進 - 135 -
第5章jQuery表單編程 - 138 -
5．1表單選擇器 - 138 -
5．2jQuery獲取和設置表單控件的值 - 141 -
5．3 表單事件處理 - 142 -
任務5．1“主要課程”頁的持續改進 - 145 -
第6章jQuery動畫效果 - 150 -
6．1顯示和隱藏 - 150 -
任務6．1二級導航菜單的顯示與隱藏 - 153 -
6．2 滑動 - 154 -
任務6．2可折疊塊動畫制作 - 156 -
6．3 淡入淡出 - 158 -
6．4 自定義動畫 - 159 -
任務6．3全屏banner動畫制作 - 166 -
第7章jQuery插件 - 169 -
7．1 jQuery插件的使用 - 169 -
7．1．1表格插件Datatables - 169 -
7．1．2圖表插件jqplot和sparkline - 171 -
7．1．3輪播器插件slideBox - 175 -
7．2jQuery插件開發 - 176 -
7．2．1 jQuery．extend()函數 - 177 -
7．2．2 全局插件 - 178 -
任務7．1編寫全局插件實現網頁加載動畫 - 180 -
7．2．3 對像級插件 - 183 -
任務7．2將注冊頁用戶輸入檢查改寫為對像級插件 - 185 -
第8章jQuery與Ajax - 191 -
8．1XMLHttpRequest對像 - 191 -
8．1．1XMLHttpRequest對像的屬性 - 191 -
8．1．2 XMLHttpRequest對像的方法 - 192 -
任務8．1 用戶注冊重名檢查 - 195 -
8．2 jQuery對Ajax技術的支持 - 199 -
8．2．1 底層接口 - 200 -
8．2．2 快捷函數 - 203 -
8．2．3輔助函數 - 204 -
8．2．4 全局事件函數 - 204 -
任務8．2 基於Ajax的查詢與刪除 - 206 -
第9章jQuery Mobile - 215 -
9．1 jQuery Mobile簡介 - 215 -
9．2 jQuery Mobile頁面 - 216 -
9．2．1 頁面結構 - 216 -
9．2．2 組件定位 - 218 -
9．2．3 頁面切換 - 219 -
9．3 jQuery Mobile功能組件 - 222 -
9．3．1 超鏈按鈕 - 222 -
9．3．2 彈窗 - 224 -
9．3．3 面板 - 226 -
9．3．4 可折疊塊 - 229 -
9．3．5 選項卡 - 230 -
9．3．6 表格 - 232 -
9．3．7 列表 - 234 -
9．3．8 表單 - 237 -
9．4 jQuery Mobile CSS 框架 - 240 -
9．4．1 外觀樣式類 - 240 -
9．4．2 主題定制 - 244 -
9．4．3 網格類 - 247 -
任務9．1基於jQuery Mobile的網上書店 - 248 -
參考文獻 - 259 -

前 言

隨著互聯網技術的飛速發展，產生了對基於Web軟件的大量需求，而良好的Web前端交互設計和客戶體驗，對於Web應用在吸引新客戶的同時提升現有客戶的黏性至關重要。Web前端開發工程師等職位的需求量較大、薪酬水平較高，為了適應對人纔培養的要求，Web前端技術繫列課程在以職業教育為主要目標的高等院校中有較高的開出率。

jQuery技術由於語法簡練、兼容主流內核瀏覽器、可擴展性好等原因已成為前端開發工程師的一項必備技能，在前端開發崗位的招聘信息中出現頻次極高，學生的學習意願強烈。本教程的內容基於jQuery最新版本3.2.1。

面向的讀者

● 高職高專院校、應用型本科院校在校大學生。

● IT培訓機構學員。

● Web前端開發工程師。

● Web後臺開發工程師。

● 網站開發愛好者。

內容組織

本教程章節的演進按照jQuery技術知識點的難易程度和之間的關聯關繫進行組織。

第1章是學習本教程的知識準備部分。介紹了HTML+CSS+JavaScript開發Web前端的代碼規範和頁面的主流布局設計，Web前端的運行和開發環境，jQuery的特點等。

第2章至第8章是基於jQuery的知識點來進行章節劃分的，小節的設計參考了jQuery的官方文檔。

第9章jQuery Mobile，是jQuery專門為移動端網頁開發的提供的框架，可以有效縮短移動端Web應用的開發周期。

使用建議

本教程的每個小節首先是對知識點的語法介紹，對於有經驗的開發人員，這一部分也可以當做語法手冊來使用。每個小節都配有案例代碼，著重於講解如何使用jQuery的知識點以及在使用中的注意事項。

教程中還設計了綜合性的“任務”，需要使用HTML、CSS和JS/jQuery進行綜合編程，因為對於前端開發工程師來說這三項技術是缺一不可的。這些任務都有真實的應用背景，考慮到本教程會用於課堂授課，任務的項目規模被壓縮在合理的範圍內。由於“任務”是按照當前的知識節點來安排的，會要求使用當前知識點來完成，前面章節中任務的實現會受限於所學技術而表現出一些不足，隨著所學技術的豐富，在後面的章節中會不斷加以完善。

我們建議讀者在做“任務”時，首先閱讀和分析任務需求，然後嘗試自己來實現，畢竟“獨立地分析並解決問題”纔是軟件開發工程師的核心能力，再與教程中的參考代碼做對照，比較異同、分析優劣，項目的實現代碼沒有標準答案，我們期望讀者能夠充分發揮主動性，給出更好的解決方案。在某些章節的課後練習中，有些問題是針對任務的擴展，讀者可以借此檢驗自己對jQuery技術的掌握程度。

致謝

本教程的編寫工作得到了深圳信息職業技術學院軟件學院的大力支持，主編為馮艷玲，副主編為王寅鋒、艾宴清和企業專家宣茹。最終呈現在本教程中的教學案例和任務已先期用於我校軟件技術專業的日常教學中，根據實際教學情況和學生反饋進行過多次修改，經驗證，教學效果良好。在此，對為本教程的編寫作出貢獻的師生和企業專家一並致謝。

因水平有限，本教程難免有不當之處，我們期待各位讀者能夠提出寶貴的意見和建議，來敦促我們不斷提高專業技能和教學水平，感謝本教程的每一位使用者。

編 者

2018年5月