jQuery從零開始學

《jQuery從零開始學》是2015年出版的圖書，作者是劉鑫。

基本介紹

• 書名：jQuery從零開始學
• 作者：劉鑫
• ISBN：9787302405092
• 定價：59
• 出版社：清華大學出版社
• 出版時間：2015.09.01

書籍信息

作者：劉鑫
定價：59元
印次：1-1
ISBN：9787302405092
出版日期：2015.09.01
印刷日期：2015.08.19

內容簡介

使用 jQuery能使網頁開發更高效，網頁更絢麗多彩，用戶體驗更具現代感和易用性。本書用於 jQuery入門，書中每一個知識點都給出實際套用示例，幫助讀者快速掌握 jQuery。本書內容包括 jQuery基礎語法，jQuery開發與調試工具，選擇器的使用， DOM操作，事件， AJAX技術，動畫效果，jQuery 外掛程式，jQuery UI，jQuery Mobile，以及 jQuery在實際開發中的 4個具體實例。本書適合 jQuery初學者、jQuery Web開發人員、jQuery Mobile開發人員入門使用，也適合作為培訓學校相關專業的師生教學參考。

目錄

第 1章 jQuery入門.. 1

1.1 什麼是 jQuery ..... 1

1.1.1 jQuery的功能以及它與 JavaScript的區別 ..... 1

1.1.2 下載並配置 jQuery運行環境 ... 5

1.2 使用 Dreamweaver編寫第一個包含 jQuery庫的網站 6

1.3 認識 jQuery庫的基礎知識 10

1.3.1 jQuery庫的核心方法——$() . 10

1.3.2 jQuery代碼的風格 11

1.3.3 jQuery庫延遲等待載入模式 .. 12

1.3.4 jQuery對象與 DOM對象間的轉換... 12

1.4 調試 jQuery程式 .... 14

1.4.1 在 Chrome中調試 . 14

1.4.2 在 Firefox中調試 .. 17

1.5 常見問題 ..... 19

1.5.1 為什麼要使用一些著名公司的 CDN？... 19

1.5.2 寫 jQuery和直接寫 JavaScript的區別？ 20

1.5.3 jQuery與其他 JavaScript庫有什麼區別？ ... 21

1.5.4 ASP.NET支持 jQuery嗎？.... 21

第 2章 jQuery選擇器 .. 22

2.1 基本選擇器 . 22

2.1.1 標籤選擇器 24

2.1.2 id選擇器 .... 24

2.1.3 類選擇器 .... 25

2.1.4 使用選擇器組合 .... 25

2.1.5 使用*通配符選擇器 .... 26

2.2 層次選擇器 . 26

2.2.1 後代選擇器 27

2.2.2 父子選擇器 28

2.2.3 相鄰選擇器 29

2.2.4 平級選擇器 29

2.3 過濾選擇器 . 30

2.3.1 基本過濾選擇器 .... 31

2.3.2 內容過濾選擇器 .... 34

2.3.3 可見性過濾選擇器 35

2.3.4 屬性過濾選擇器 .... 37

2.3.5 子元素過濾選擇器 39

2.3.6 表單對象屬性過濾器 .. 41

2.4 表單選擇器 . 43

2.5 常見問題 ..... 45

2.5.1 $("input")和$(":input")這兩個選擇器有什麼區別？. 45

2.5.2 子選擇器和後代選擇器有什麼區別？ .... 45

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：超連結提示效果 .. 57

3.7 實例 2：圖片預覽效果 59

3.8 常見問題 ..... 61

3.8.1 tagName和 attribute的區別？ ..... 61

3.8.2 attr方法和 prop方法都是獲取元素的屬性嗎？ 62

第 4章 jQuery的事件與事件對象 .. 63

4.1 jQuery中的事件 ..... 63

4.1.1 什麼是事件 63

4.1.2 jQuery所支持的事件和事件類型 64

4.2 頁面初始化事件 ..... 66

4.3 綁定事件 ..... 67

4.4 移除事件綁定 ... 70

4.5 切換事件 ..... 71

4.6 表單中的常見事件 . 72

4.6.1 表單元素焦點的獲取和失去 .. 73

4.6.2 文本域高度的動態變化 .... 74

4.6.3 表單的驗證 76

4.7 常見問題 ..... 79

4.7.1 ready與 load誰先執行？ . 79

4.7.2 用 bind綁定事件和用 live綁定事件有什麼區別？ . 80

第 5章原始 AJAX與 jQuery中的 AJAX ... 81

5.1 兩個 AJAX的對比. 81

5.1.1 原始 AJAX套用舉例.. 81

5.1.2 使用 jQuery 中的 AJAX舉例 84

5.2 使用 jQuery的 AJAX函式進行頁面互動 85

5.2.1 使用 AJAX快捷函式.. 85

5.2.2 使用底層函式 ajax().... 86

5.2.3 AJAX 全局配置和事件.... 89

5.3 跨域的 AJAX-JSONP... 91

5.3.1 什麼是 JSONP . 91

5.3.2 JSONP的實現原理 ..... 92

5.3.3 JSONP在 jQuery中的套用 .... 93

5.4 AJAX綜合案例——數據實時更新的微博頁面.. 96

5.4.1 微博的功能分析 .... 96

5.4.2 微博實時更新的代碼實現和效果演示 .... 96

5.5 常見問題 ..... 99

5.5.1 jQuery中的 post和$.ajax的區別. 99

5.5.2 jQuery AJAX中的 readyState和 status的區別... 99

第 6章 jQuery中的動畫效果 . 101

6.1 jQuery庫所支持的動畫方法 . 101

6.1.1 基本動畫方法 101

6.1.2 滑動動畫方法 102

6.1.3 淡入淡出動畫方法 .... 102

6.2 實例 1：實現可摺疊的列表 .. 103

6.3 實例 2：按鈕的淡入淡出效果 .... 105

6.4 自定義動畫 animate.... 107

6.4.1 一個最簡單的自定義動畫 .... 108

6.4.2 一個稍微複雜的自定義動畫 109

6.5 常見問題 ... 110

6.5.1 jQuery的動畫能隨時停止嗎? .... 110

6.5.2 可以用 animate方法來操作所有 CSS屬性嗎？ .... 110

第 7章 jQuery外掛程式.....111

7.1 認識 jQuery外掛程式 .. 111

7.1.1 什麼是外掛程式 .... 111

7.1.2 常用的外掛程式網站 .. 115

7.2 開發自己的外掛程式 ... 118

7.2.1 jQuery的外掛程式類型 .... 118

7.2.2 實例 1：對象級別的外掛程式開發 ... 119

7.2.3 實例 2：類級別的外掛程式開發 . 121

7.3 用第三方外掛程式創建自己的網站 ... 124

7.3.1 網站結構設計 124

7.3.2 下載第三方外掛程式 .. 126

7.3.3 使用第三方外掛程式 .. 127

7.3.4 網站最終效果 130

7.4 常見問題 ... 132

7.4.1 jQuery和 jQuery外掛程式有什麼區別嗎？. 132

7.4.2 開發或使用 jQuery外掛程式要注意它的版本嗎？ . 132

第 8章 jQuery的 UI外掛程式. 133

8.1 基於 jQuery的擴展–jQuery UI外掛程式. 133

8.2 下載 jQuery UI外掛程式... 134

8.3 利用 jQuery UI實現頁面互動..... 135

8.3.1 拖動組件 Draggable的使用 . 135

8.3.2 拖放組件 Droppable的使用 . 137

8.3.3 實例：模擬 Windows系統“資源回收筒”. 138

8.4 利用 jQuery UI實現頁面中的進度條..... 143

8.4.1 進度條工具集的使用 143

8.4.2 實例：實現進度條效果 .. 144

8.5 利用 jQuery UI實現頁面中的滑動條..... 145

8.5.1 滑動條工具集的使用 146

8.5.2 實例 1：實現圖片滑塊滾動條效果 . 147

8.5.3 實例 2：實現簡單顏色調色器 ... 150

8.6 利用 jQuery UI實現頁面中的日曆... 153

8.6.1 日曆 DatePicker的使用 .. 153

8.6.2 實例 1：一個簡單的日曆套用 ... 157

8.6.3 實例 2：製作同時顯示多個月份的日曆 ..... 160

8.6.4 實例 3：限制日曆的選擇範圍 ... 160

8.6.5 實例 4：有動畫效果的日曆顯示 ..... 161

8.7 利用 jQuery UI實現手風琴效果. 162

8.7.1 摺疊面板工具集的使用 .. 162

8.7.2 實例：實現經典的導航選單 164

8.8 設計頁面中各種對話框效果 . 165

8.8.1 對話框工具集的使用 165

8.8.2 實例：實現彈出和確認信息對話框效果 .... 167

8.9 實現幻燈和分頁效果 . 170

8.9.1 選項卡工具集的使用 171

8.9.2 實例 1：經典的選項卡效果 . 172

8.9.3 實例 2：實現幻燈效果 ... 174

8.9.4 實例 3：實現分頁效果 ... 177

8.10 常見問題 . 179

8.10.1 jQuery UI和 jQuery Easy UI的區別.... 179

8.10.2 jQuery UI內容太多，如何實現自己定製呢？..... 180

第 9章常用的一些 jQuery外掛程式... 181

9.1 使用表單外掛程式創建留言表單 . 181

9.2 圖片檔案上傳外掛程式 ..... 185

9.2.1 下載 jQuery File Upload外掛程式 ..... 185

9.2.2 實現多圖片上傳 .. 188

9.3 可拖放的布局外掛程式 ..... 198

9.3.1 下載 gridster.js外掛程式 .. 198

9.3.2 實現動態縮放可拖放布局套用 .. 201

9.4 谷歌地圖外掛程式 . 206

9.4.1 下載 Gmap3地圖外掛程式 .... 206

9.4.2 實現線上地圖搜尋功能 .. 211

9.5 動畫外掛程式的套用 ... 216

9.5.1 下載 Motio外掛程式 .. 216

9.5.2 使用 Motio外掛程式實現精靈(Sprite)模式動畫 226

9.5.3 開發 360度全景動畫網頁套用 .. 230

9.6 常見問題 ... 235

9.6.1 如何拓展第三方外掛程式的行為？ .. 235

9.6.2 使用多個外掛程式時避免重複引入 jquery.js檔案 .. 236

第 10章 jQuery Mobile移動開發. 237

10.1 初步接觸 jQuery Mobile 237

10.1.1 下載 jQuery Mobile . 237

10.1.2 推薦使用 Dreamweaver編輯器開發 jQuery Mobile... 239

10.1.3 創建第一個 jQuery Mobile檔案 .... 239

10.1.4 在 PC上測試 jQuery Mobile..... 240

10.1.5 如何套用 jQuery Mobile開發的頁面 .. 244

10.2 使用 jQuery Mobile進行開發 ... 244

10.2.1 選擇頁面中的元素 .. 244

10.2.2 設定頁面中元素的屬性 245

10.3 套用 jQuery Mobile中的控制項 ... 245

10.3.1 在界面中固定一個工具列 .. 245

10.3.2 使用按鈕實現選單界面 248

10.3.3 使用表單做一個手版 QQ登錄 251

10.3.4 使用列表做一個類貼吧的套用 256

10.3.5 使用對話框實現一個相冊 .. 259

10.4 實例 1：利用 jQuery Mobile實現電子書閱讀器 .. 263

10.5 實例 2：利用 jQuery Mobile 實現開發印象筆記 . 266

10.6 常見問題 . 268

10.6.1 jQuery Moible為什麼在切換頁面時會出現白屏現象 ..... 268

10.6.2 data-rel="back"和 data-direction="reverse"有什麼區別 .... 268

第 11章實戰 1：實現 QQ信箱附屬檔案的拖放上傳功能. 269

11.1 認識 FileDrop.js外掛程式 ..... 270

11.1.1 下載 FileDrop.js外掛程式 .... 270

11.1.2 使用外掛程式實現檔案拖拽上傳 .... 274

11.2 開發圖片拖拽上傳 Web套用.... 278

11.2.1 HTML5檔案上傳功能.. 278

11.2.2 圖片拖拽上傳 HTML代碼. 278

11.2.3 圖片拖拽上傳 CSS代碼 ..... 280

11.2.4 圖片拖拽上傳 JS代碼 .. 281

11.2.5 圖片拖拽上傳伺服器端 PHP代碼. 284

11.2.6 圖片拖拽上傳 Web套用最終效果. 285

第 12章實戰 2：利用 jQuery Mobile開發一個手機部落格. 287

12.1 項目規劃 . 287

12.2 主界面設計 ... 289

12.3 文章列表的設計 . 291

12.4 文章內容頁的實現 ... 296

12.5 文章類的設計 ..... 299

12.6 測試環境的搭建 . 301

12.7 資料庫的設計 ..... 306

12.8 內容頁功能的實現 ... 312

12.9 文章列表的實現 . 318

12.10 首頁的實現 . 323

第 13章實戰 3：打造線上播放器 ..... 326

13.1 認識 MediaElement.js外掛程式.. 327

13.1.1 下載音視頻播放器外掛程式 327

13.1.2 開發一個簡單的播放器套用 .... 330

13.1.3 使用 MediaElement.js外掛程式模仿 Windows Media Player .. 334

13.2 實現線上播放器 . 336

13.2.1 在頁面中添加 MediaElement.js 337

13.2.2 構建播放器頁面布局 .... 337

13.2.3 播放器頁面初始化 .. 338

第 14章實戰 4：構建股票實時走勢圖 .... 340

14.1 準備 jqChart圖表外掛程式 ... 341

14.1.1 下載 jqChart圖表外掛程式 .. 341

14.1.2 開發一個柱狀圖套用 .... 343

14.1.3 開發一個折線圖套用 .... 354

14.2 構建股票實時走勢圖 ..... 359

14.2.1 添加 jqChart圖表外掛程式庫檔案 .. 359

14.2.2 構建實時圖頁面的布局 360

14.2.3 模擬股票實時圖的初始化 .. 361

14.2.4 模擬股票實時走勢圖的最終效果 .. 364