內容簡介
jQuery技術由於語法簡練、兼容主流核心瀏覽器、可擴展性好等原因已朽探局成為前端開發工程師的一項必備技能。本教程的內容基於jQuery最新版本3.2.1,包括Web前端的代碼規範和頁面的堡兵樂主流布局設計、jQuery選擇器、jQuery操作DOM、jQuery事件處理、jQuery動畫、jQuery外掛程式開發、jQuery Ajax和jQuery Mobile框架等。
本教程的每個小節知識點都配有案例代碼,著重於講解如何使用煮鴉陵鑽jQuery的知識點以及在使用中的注意事項。教程中還設計了綜合性的、具有真實套用背景“任務”,需要使用HTML、CSS和JS/jQuery進行綜合編程朵頌喇匪,讀者完成任務過程中進行的技能訓練與前端開發崗位要求的技術能力高度一致。任務複雜度適合在課堂授課一般時長範圍內完成。
本教程適合以下讀者群:高職高專院校、套用型本科院校在校大學生;乃阿芝IT培訓機構學員;Web前端開發工程師;Web後台開發工程師;網站開發愛好者。
圖書目錄
第1章 jQuery簡介 - 1 -
1.1 jQuery開發基礎知識 - 1 -
1.1.1 HTML - 1 -
1.1.2 CSS - 2 -
1.1.3 JavaScript - 4 -
1.1.4 瀏覽器工作原理 - 5 -
1.1.5 開提探道發軟體 - 7 -
1.1.6 調試環境 - 17 -
任務1.1 成績單 - 20 -
任務1.2 輪播器與選項卡 - 24 -
1.2 jQuery的特點 - 29 -
1.3 jQuery引用方式 - 30 -
1.4 jQuery編程第一步 - 31 -
任務1.3 編寫第一個jQuery程式——jQuery Hello World - 31 -
第2章局譽 jQuery選擇器 - 36 -
2.1 jQuery基本選擇器 - 37 -
2.1.1 jQuery id選擇器 - 37 -
2.1.2 jQuery元素選擇器 - 38 -
2.1.3 jQuery類選擇器 - 39 -
2.1.4 jQuery多重選擇器 - 39 -
2.1.5 jQuery *選擇器 - 40 -
2.1.6 jQuery對象和DOM對象相互轉換 - 41 -
任務2.1 ?jQuery改寫任務1.2 - 44 -
2.2 jQuery 層次選擇器 - 46 -
2.2.1 jQuery後代選擇器 - 46 -
2.2.2 jQuery父子選擇器 - 47 -
2.2.3 jQuery相鄰選擇器 - 48 -
2.2.4 jQuery兄弟選擇器 - 49 -
任務2.2 jQuery改寫任務1.1 - 50 -
2.3 jQuery過濾選擇器 - 51 -
2.3.1 jQuery基本過濾選擇器 - 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 讀取和設定HTML元素 - 63 -
3.1.1 獲取和設定元素的HTML內容 - 63 -
3.1.2 獲取和設定元素的文本內容 - 64 -
3.1.3 獲取和設定元素的標籤屬性的值 - 66 -
3.1.4 獲取和設定元素的DOM屬性的值 - 68 -
任務3.1 實現移動端登錄頁面 - 70 -
3.2 向HTML元素添加內容 - 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 刪除HTML元素及其屬性 - 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 複製和替換HTML元素 - 92 -
3.4.1 複製元素 - 92 -
3.4.2 替換元素 - 93 -
3.5 遍歷HTML元素 - 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.2 event對象 - 115 -
4.2 jQuery事件管理 - 117 -
4.2.1 jQuery事件處理機制 - 117 -
4.2.2 jQuery事件管理函式 - 117 -
任務4.1 輪播器、選項卡的改進 - 123 -
任務4.2 實現“主要課程”頁 - 126 -
4.3 jQuery事件處理函式 - 129 -
4.3.1 jQuery滑鼠事件處理函式 - 129 -
4.3.2 jQuery鍵盤事件處理函式 - 132 -
4.3.3 jQuery其他事件處理函式 - 134 -
任務4.3 “主要課程”頁的改進 - 135 -
第5章 jQuery表單編程 - 138 -
5.1 表單選擇器 - 138 -
5.2 jQuery獲取和設定表單控制項的值 - 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.2 jQuery外掛程式開發 - 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.1 XMLHttpRequest對象 - 191 -
8.1.1 XMLHttpRequest對象的屬性 - 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 -
2.2.3 jQuery相鄰選擇器 - 48 -
2.2.4 jQuery兄弟選擇器 - 49 -
任務2.2 jQuery改寫任務1.1 - 50 -
2.3 jQuery過濾選擇器 - 51 -
2.3.1 jQuery基本過濾選擇器 - 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 讀取和設定HTML元素 - 63 -
3.1.1 獲取和設定元素的HTML內容 - 63 -
3.1.2 獲取和設定元素的文本內容 - 64 -
3.1.3 獲取和設定元素的標籤屬性的值 - 66 -
3.1.4 獲取和設定元素的DOM屬性的值 - 68 -
任務3.1 實現移動端登錄頁面 - 70 -
3.2 向HTML元素添加內容 - 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 刪除HTML元素及其屬性 - 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 複製和替換HTML元素 - 92 -
3.4.1 複製元素 - 92 -
3.4.2 替換元素 - 93 -
3.5 遍歷HTML元素 - 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.2 event對象 - 115 -
4.2 jQuery事件管理 - 117 -
4.2.1 jQuery事件處理機制 - 117 -
4.2.2 jQuery事件管理函式 - 117 -
任務4.1 輪播器、選項卡的改進 - 123 -
任務4.2 實現“主要課程”頁 - 126 -
4.3 jQuery事件處理函式 - 129 -
4.3.1 jQuery滑鼠事件處理函式 - 129 -
4.3.2 jQuery鍵盤事件處理函式 - 132 -
4.3.3 jQuery其他事件處理函式 - 134 -
任務4.3 “主要課程”頁的改進 - 135 -
第5章 jQuery表單編程 - 138 -
5.1 表單選擇器 - 138 -
5.2 jQuery獲取和設定表單控制項的值 - 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.2 jQuery外掛程式開發 - 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.1 XMLHttpRequest對象 - 191 -
8.1.1 XMLHttpRequest對象的屬性 - 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 -