商品簡介
使用jQuery能使網頁開發更高效,網頁更絢麗多彩,用戶體驗更具現代感和易用性。本書用於jQuery入門,書中每一個知識點都給出實際應用示例,幫助讀者快速掌握jQuery。
本書內容包括jQuery基礎語法,jQuery開發與調試工具,選擇器的使用,DOM操作,事件,AJAX技術,動畫效果,jQuery 插件,jQuery UI,jQuery Mobile,以及jQuery在實際開發中的4個具體實例。
本書既適合jQuery初學者、jQuery前端開發人員、jQuery Mobile開發人員使用,也適合作為高等院校和培訓學校相關專業的師生教學參考。
作者簡介
劉鑫,武漢大學碩士。精通Web前端開發和服務器腳本語言技術,善於把握運用新技術,如LAMP平臺的開發、軟件架構、設計模式、ASP.NET、PHP、JavaScript、jQuery、YUI等等。具有講師、計算機工程師職稱,具有高級物流師、APTCH軟件工程師、網絡安全工程師等職業資格認證,在校內和校外培訓js和jQuery期間收穫頗豐,特地撰寫此書,希望對初學者有所幫助。
目次
目 錄
第1章 jQuery入門 1
1.1 什麼是jQuery 1
1.1.1 下載並配置jQuery運行環境 1
1.1.2 jQuery1.x、2.x和3.x的區別 3
1.1.3 jQuery與JavaScript的區別 3
1.1.4 編寫第一個jQuery網頁 6
1.2 jQuery 3的特色 7
1.2.1 jQuery 3的Strict Mode 7
1.2.2 支持for…of遍歷 7
1.2.3 動畫方面使用requestAnimationFrame API 8
1.2.4 支持SVG 8
1.2.5 :visible和:hidden新改變 8
1.3 選擇jQuery的開發工具 9
1.4 認識jQuery庫的基礎知識 12
1.4.1 jQuery庫的核心方法―― $() 12
1.4.2 jQuery代碼的風格 13
1.4.3 jQuery庫延遲等待加載模式 14
1.5 調試jQuery程序 15
1.5.1 在Chrome中調試 15
1.5.2 在Firefox中調試 17
1.6 常見問題 19
1.6.1 為什麼要使用一些著名公司的CDN 19
1.6.2 寫jQuery和直接寫JavaScript的區別 20
1.6.3 jQuery與其他JavaScript庫的區別 21
第2章 jQuery選擇器 22
2.1 基本選擇器 22
2.1.1 標簽選擇器 23
2.1.2 id選擇器 24
2.1.3 類選擇器 24
2.1.4 使用選擇器組合 25
2.1.5 使用*通配符選擇器 25
2.2 層次選擇器 25
2.2.1 後代選擇器 27
2.2.2 父子選擇器 27
2.2.3 相鄰選擇器 28
2.2.4 平級選擇器 29
2.3 過濾選擇器 30
2.3.1 基本過濾選擇器 30
2.3.2 內容過濾選擇器 33
2.3.3 可見性過濾選擇器 35
2.3.4 屬性過濾選擇器 37
2.3.5 子元素過濾選擇器 38
2.3.6 表單對象屬性過濾器 40
2.4 表單選擇器 42
2.5 常見問題 44
2.5.1 $("input")和$(":input")兩個選擇器的區別 44
2.5.2 子選擇器和後代選擇器的區別 44
2.5.3 獲得class為sub的元素的子節點下的所有標簽 45
第3章 用jQuery來操作DOM 46
3.1 修改元素屬性 46
3.1.1 獲取元素的屬性 46
3.1.2 設置元素的屬性 48
3.2 修改元素內容 49
3.3 動態創建內容 51
3.4 動態插入節點 51
3.5 動態刪除節點 55
3.6 實例1:超鏈接提示效果 56
3.7 實例2:圖片預覽效果 58
3.8 常見問題 60
3.8.1 tagName和attribute的區別 60
3.8.2 attr方法和prop方法都用於獲取元素的屬性嗎 61
第4章 jQuery的事件與事件對象 62
4.1 jQuery中的事件 62
4.1.1 什麼是事件 62
4.1.2 jQuery所支持的事件和事件類型 63
4.2 頁面初始化事件 65
4.3 綁定事件 66
4.4 移除事件綁定 69
4.5 切換事件 70
4.6 表單中的常見事件 71
4.6.1 表單元素焦點的獲取和失去 71
4.6.2 文本域高度的動態變化 72
4.6.3 表單的驗證 74
4.7 常見問題 77
4.7.1 ready與load誰先執行 77
4.7.2 綁定事件是不是只有on方法 77
第5章 原始AJAX與jQuery中的AJAX 78
5.1 兩個AJAX的對比 78
5.1.1 原始AJAX應用舉例 78
5.1.2 使用jQuery 中的AJAX舉例 81
5.2 使用jQuery的AJAX函數進行頁面交互 82
5.2.1 使用AJAX快捷函數 82
5.2.2 使用底層函數ajax() 84
5.2.3 AJAX全域配置和事件 86
5.3 跨域的AJAX-JSONP 88
5.3.1 什麼是JSONP 89
5.3.2 JSONP的實現原理 89
5.3.3 JSONP在jQuery中的應用 90
5.4 AJAX綜合案例――數據實時更新的微博頁面 93
5.4.1 微博的功能分析 93
5.4.2 微博實時更新的代碼實現和效果演示 93
5.5 常見問題 96
5.5.1 jQuery中post和$.ajax的區別 96
5.5.2 jQuery AJAX中readyState和status的區別 96
第6章 jQuery中的動畫效果 98
6.1 jQuery庫所支持的動畫方法 98
6.1.1 基本動畫方法 98
6.1.2 滑動動畫方法 99
6.1.3 淡入淡出動畫方法 99
6.2 實例1:實現可折疊的列表 100
6.3 實例2:按鈕的淡入淡出效果 102
6.4 自定義動畫animate 104
6.4.1 一個最簡單的自定義動畫 104
6.4.2 一個稍微複雜的自定義動畫 105
6.5 常見問題 106
6.5.1 jQuery的動畫是否能隨時停止 106
6.5.2 是否可以用animate方法來操作所有CSS屬性 107
第7章 jQuery插件 108
7.1 認識jQuery插件 108
7.1.1 什麼是插件 108
7.1.2 常用的插件網站 113
7.2 開發自己的插件 114
7.2.1 jQuery的插件類型 114
7.2.2 實例1:對象級別的插件開發 115
7.2.3 實例2:類級別的插件開發 117
7.3 用第三方插件創建自己的網站 120
7.3.1 網站結構設計 121
7.3.2 下載第三方插件 122
7.3.3 使用第三方插件 123
7.3.4 網站最終效果 126
7.4 常見問題 127
7.4.1 jQuery和jQuery插件的區別 127
7.4.2 開發或使用jQuery插件是否要注意版本 128
第8章 jQuery的UI插件 129
8.1 基於jQuery的擴展――jQuery UI插件 129
8.2 下載jQuery UI插件 130
8.3 利用jQuery UI實現頁面交互 131
8.3.1 拖動組件Draggable的使用 131
8.3.2 拖放組件Droppable的使用 133
8.3.3 實例:模擬Windows系統“回收站” 134
8.4 利用jQuery UI實現頁面中的進度條 138
8.4.1 進度條工具集的使用 138
8.4.2 實例:實現進度條效果 139
8.5 利用jQuery UI實現頁面中的滑動條 141
8.5.1 滑動條工具集的使用 141
8.5.2 實例1:實現圖片滑塊滾動條效果 142
8.5.3 實例2:實現簡單顏色調色器 145
8.6 利用jQuery UI實現頁面中的日曆 148
8.6.1 日曆DatePicker的使用 148
8.6.2 實例1:一個簡單的日曆應用 151
8.6.3 實例2:製作同時顯示多個月份的日曆 154
8.6.4 實例3:限制日曆的選擇範圍 154
8.6.5 實例4:有動畫效果的日曆顯示 155
8.7 利用jQuery UI實現手風琴效果 156
8.7.1 折疊面板工具集的使用 156
8.7.2 實例:實現經典的導航菜單 157
8.8 設計頁面中各種對話框效果 159
8.8.1 對話框工具集的使用 159
8.8.2 實例:實現彈出和確認信息對話框效果 161
8.9 實現幻燈和分頁效果 164
8.9.1 選項卡工具集的使用 165
8.9.2 實例1:經典的選項卡效果 166
8.9.3 實例2:實現幻燈效果 168
8.9.4 實例3:實現分頁效果 170
8.10 常見問題 173
8.10.1 jQuery UI和jQuery Easy UI的區別 173
8.10.2 jQuery UI內容太多,如何實現自己定制 173
第9章 jQuery Mobile移動開發 174
9.1 初步接觸jQuery Mobile 174
9.1.1 下載jQuery Mobile 174
9.1.2 推薦使用Dreamweaver編輯器開發jQuery Mobile 175
9.1.3 創建第一個jQuery Mobile文件 176
9.1.4 在PC上測試jQuery Mobile 176
9.1.5 如何應用jQuery Mobile開發的頁面 179
9.2 使用jQuery Mobile進行開發 180
9.2.1 選擇頁面中的元素 180
9.2.2 設置頁面中元素的屬性 181
9.3 應用jQuery Mobile中的控件 181
9.3.1 在界面中固定一個工具欄 181
9.3.2 使用按鈕實現菜單界面 183
9.3.3 使用表單做一個手機版QQ登錄 186
9.3.4 使用列表做一個類貼吧的應用 191
9.3.5 使用對話框實現一個相冊 194
9.4 實例1:利用jQuery Mobile實現電子書閱讀器 197
9.5 實例2:利用jQuery Mobile實現開發印象筆記 200
9.6 常見問題 202
9.6.1 jQuery Mobile為什麼在切換頁面時會出現白屏現象 202
9.6.2 data-rel="back"和data-direction="reverse"有什麼區別 202
第10章 實戰1:實現QQ郵箱附件的拖放上傳功能 203
10.1 認識FileDrop.js插件 203
10.1.1 下載FileDrop.js插件 204
10.1.2 使用插件實現文件拖拽上傳 207
10.2 開發圖片拖拽上傳Web應用 211
10.2.1 HTML5文件上傳功能 211
10.2.2 圖片拖拽上傳HTML代碼 212
10.2.3 圖片拖拽上傳CSS代碼 213
10.2.4 圖片拖拽上傳JS代碼 215
10.2.5 圖片拖拽上傳服務器端PHP代碼 217
10.2.6 圖片拖拽上傳Web應用最終效果 218
第11章 實戰2:利用jQuery Mobile開發一個手機博客 220
11.1 項目規劃 220
11.2 主界面設計 222
11.3 文章列表的設計 224
11.4 文章內容頁的實現 228
11.5 文章類的設計 231
11.6 測試環境的搭建 233
11.7 數據庫的設計 238
11.8 內容頁功能的實現 245
11.9 文章列表的實現 249
11.10 首頁的實現 254
第12章 實戰3:打造在線播放器 257
12.1 認識MediaElement.js插件 258
12.1.1 下載音視頻播放器插件 258
12.1.2 開發一個簡單的播放器應用 261
12.1.3 使用MediaElement.js插件模仿Windows Media Player 264
12.2 實現在線播放器 266
12.2.1 在頁面中添加MediaElement.js 267
12.2.2 構建播放器頁面布局 267
12.2.3 播放器頁面初始化 268
第13章 實戰4:構建股票實時走勢圖 270
13.1 準備jqChart圖表插件 271
13.1.1 下載jqChart圖表插件 271
13.1.2 開發一個柱狀圖應用 273
13.1.3 開發一個折線圖應用 283
13.2 構建股票實時走勢圖 288
13.2.1 添加jqChart圖表插件庫文件 288
13.2.2 構建實時圖頁面的佈局 289
13.2.3 模擬股票實時圖的初始化 290
13.2.4 模擬股票實時走勢圖的最終效果 293