前言
第1章 jQuery簡介 1
1.1 認識jQuery 2
1.1.1 jQuery基本功能 2
1.1.2 jQuery 1.8 新增功能與特徵 3
1.2 搭建jQuery開發環境 3
1.2.1 下載jQuery文件庫 3
1.2.2 引入jQuery文件庫 4
1.2.3 編寫第一個簡單的jQuery程序 4
1.3 jQuery程序的代碼風格 5
1.3.1 “$”美元符的使用 5
1.3.2 事件操作鏈接式書寫 6
1.4 jQuery簡單應用 7
1.4.1 jQuery訪問DOM對象 7
1.4.2 jQuery控製DOM對象 8
1.4.3 jQuery控製頁麵CSS 10
1.5 本章小結 11
第2章 jQuery選擇器 12
2.1 選擇器的優勢 13
2.1.1 代碼更簡單 13
2.1.2 完善的檢測機製 15
2.2 jQuery選擇器的類型 17
2.2.1 基本選擇器 17
2.2.2 層次選擇器 19
2.2.3 簡單過濾選擇器 21
2.2.4 內容過濾選擇器 24
2.2.5 可見性過濾選擇器 25
2.2.6 屬性過濾選擇器 27
2.2.7 子元素過濾選擇器 29
2.2.8 錶單對象屬性過濾選擇器 31
2.2.9 錶單選擇器 33
2.3 綜閤案例分析—導航條在項目中的應用 36
2.3.1 需求分析 36
2.3.2 界麵效果 36
2.3.3 功能實現 37
2.3.4 代碼分析 38
2.4 本章小結 39
第3章 jQuery操作DOM 40
3.1 DOM樹狀模型 41
3.2 元素屬性操作 43
3.2.1 獲取元素的屬性 43
3.2.2 設置元素的屬性 44
3.2.3 刪除元素的屬性 46
3.3 獲取和設置元素 47
3.3.1 獲取和設置元素內容 47
3.3.2 獲取和設置元素值 48
3.4 元素樣式操作 50
3.4.1 直接設置元素樣式值 50
3.4.2 增加元素CSS類彆 52
3.4.3 切換元素CSS類彆 53
3.4.4 刪除元素CSS類彆 54
3.5 頁麵元素操作 54
3.5.1 創建節點元素 55
3.5.2 內部插入節點 57
3.5.3 外部插入節點 60
3.5.4 復製元素節點 61
3.5.5 替換元素節點 63
3.5.6 包裹元素節點 64
3.5.7 遍曆元素 66
3.5.8 刪除頁麵元素 67
3.6 綜閤案例分析—數據刪除和圖片預覽在項目中的應用 69
3.6.1 需求分析 69
3.6.2 界麵效果 69
3.6.3 功能實現 70
3.6.4 代碼分析 73
3.7 本章小結 74
第4章 jQuery中的事件與應用 75
4.1 事件機製 76
4.1.1 事件中的冒泡現象 76
4.1.2 如何阻止冒泡的發生 77
4.2 頁麵載入事件 78
4.2.1 ready()方法的工作原理 78
4.2.2 ready()方法的幾種寫法 78
4.3 綁定事件 79
4.3.1 使用bind()方法綁定事件 79
4.3.2 通過映射方式綁定事件 81
4.4 切換事件 83
4.4.1 hover()方法 83
4.4.2 toggle()方法 84
4.5 移除事件 86
4.5.1 unbind()方法移除元素綁定事件 86
4.5.2 unbind()方法移除自定義事件 88
4.6 其他事件 88
4.6.1 one()方法 88
4.6.2 trigger ()方法 89
4.7 jQuery中的事件應用 91
4.7.1 文本框中的事件應用 91
4.7.2 下拉列錶框中的事件應用 95
4.7.3 列錶中的導航菜單應用 99
4.7.4 網頁選項卡的應用 104
4.8 綜閤案例分析—刪除數據時的提示效果在項目中的應用 107
4.8.1 需求分析 107
4.8.2 界麵效果 107
4.8.3 功能實現 108
4.8.4 代碼分析 110
4.9 本章小結 112
第5章 jQuery的動畫與特效 113
5.1 顯示與隱藏 114
5.1.1 show()與hide()方法 114
5.1.2 動畫效果的show()與hide()方法 116
5.1.3 toggle()方法 117
5.2 滑動 119
5.2.1 slideDown()與slideUp()方法 119
5.2.2 slideToggle()方法 122
5.3 淡入淡齣 123
5.3.1 fadeIn()與fadeOut()方法 123
5.3.2 fadeTo()方法 125
5.4 自定義動畫 127
5.4.1 簡單的動畫 127
5.4.2 移動位置的動畫 128
5.4.3 隊列中的動畫 131
5.4.4 動畫停止和延時 132
5.5 動畫效果綜述 134
5.5.1 各種動畫方法說明 134
5.5.2 使用animate()方法代替其他動畫效果 135
5.6 綜閤案例分析—動畫效果瀏覽相冊中的圖片 135
5.6.1 需求分析 135
5.6.2 界麵效果 136
5.6.3 功能實現 137
5.6.4 代碼分析 140
5.7 本章小結 143
第6章 Ajax在jQuery中的應用 145
6.1 加載異步數據 145
6.1.1 傳統的JavaScript方法 145
6.1.2 jQuery中的load()方法 147
6.1.3 jQuery中的全局函數getJSON() 148
6.1.4 jQuery中的全局函數getScript() 150
6.1.5 jQuery中異步加載XML文檔 152
6.2 請求服務器數據 154
6.2.1 $.get()請求數據 155
6.2.2 $.post()請求數據 156
6.2.3 serialize()序列化錶單 158
6.3 $.ajax()方法 161
6.3.1 $.ajax()中的參數及使用方法 161
6.3.2 $.ajax()在數據交互中的應用 162
6.3.3 $.ajaxSetup()設置全局Ajax 164
6.4 Ajax中的全局事件 167
6.4.1 Ajax全局事件的參數及功能 167
6.4.2 ajaxStart與ajaxStop全局事件 167
6.5 綜閤案例分析—使用Ajax實現新聞點評即時更新 170
6.5.1 需求分析 170
6.5.2 界麵效果 170
6.5.3 功能實現 171
6.5.4 代碼分析 175
6.6 本章小結 177
第7章 jQuery中調用JSON與XML數據 178
7.1 jQuery調用JSON數據 179
7.1.1 JSON數據的基礎知識 179
7.1.2 jQuery讀取JSON數據 180
7.1.3 jQuery 遍曆JSON 數據 182
7.1.4 jQuery 操作JSON 數據 185
7.2 jQuery調用XML數據 187
7.2.1 使用傳統JavaScript調用XML的方法 187
7.2.2 jQuery 解析XML 數據 189
7.2.3 jQuery讀取XML 數據 191
7.2.4 jQuery操作XML 數據 194
7.3 綜閤案例分析—調用JSON實現下拉列錶框三級聯動 197
7.3.1 需求分析 197
7.3.2 界麵效果 198
7.3.3 功能實現 198
7.3.4 代碼分析 200
7.4 綜閤案例分析—調用XML實現無刷新即時聊天 201
7.4.1 需求分析 201
7.4.2 界麵效果 201
7.4.3 功能實現 202
7.4.4 代碼分析 205
7.5 本章小結 205
第8章 jQuery中的插件 206
8.1 如何調用jQuery插件 207
8.2 jQuery常用插件 208
8.2.1 驗證插件validate 208
8.2.2 錶單插件form 211
8.2.3 Cookie插件cookie 213
8.2.4 搜索插件AutoComplete 216
8.2.5 圖片燈箱插件NotesForLightBox 220
8.2.6 右鍵菜單插件ContextMenu 223
8.2.7 圖片放大鏡插件jQZoom 227
8.2.8 圖片切換插件Nivo Slider 229
8.2.9 動畫錶格排序插件TableSort 233
8.2.10 進度條插件ProgressBar 236
8.2.11 頁麵加載遮蓋插件LoadMask 239
8.2.12 數據分頁插件Pagination 242
8.2.13 消息通知條插件Activebar2 248
8.2.14 滾動條插件NiceScroll 250
8.3 自定義jQuery插件 253
8.3.1 自定義插件的種類 253
8.3.2 插件開發要點 254
8.3.3 對象級彆插件的開發 254
8.3.4 類級彆插件的開發 257
8.4 綜閤案例分析—使用uploadify插件實現文件上傳功能 260
8.4.1 需求分析 260
8.4.2 界麵效果 261
8.4.3 插件介紹 262
8.4.4 功能實現 263
8.4.5 代碼分析 264
8.5 本章小結 268
第9章 jQuery UI插件 269
9.1 認識jQuery UI 270
9.2 jQuery UI交互性插件 271
9.2.1 拖曳插件draggable 271
9.2.2 放置插件droppable 273
9.2.3 排序插件sortable 276
9.3 jQuery UI微型插件 278
9.3.1 摺疊麵闆插件accordion 278
9.3.2 日務插件datepicker 281
9.3.3 選項卡插件tabs 285
9.3.4 對話框插件dialog 288
9.4 jQuery UI 1.9新增功能 293
9.4.1 菜單工具插件menu 294
9.4.2 微調按鈕插件spinner 297
9.4.3 工具提示插件tooltip 301
9.5 綜閤案例分析—使用jQuery UI插件以拖動方式管理相冊 304
9.5.1 需求分析 304
9.5.2 界麵效果 305
9.5.3 功能實現 306
9.5.4 代碼分析 309
9.6 本章小結 312
第10章 jQuery實用工具函數 313
10.1 工具函數的分類 314
10.2 瀏覽器的檢測 314
10.2.1 瀏覽器名稱或版本信息 314
10.2.2 盒子模型 316
10.3 數組和對象的操作 318
10.3.1 遍曆數組 318
10.3.2 遍曆對象 319
10.3.3 數據篩選 320
10.3.4 數據變更 322
10.3.5 數據搜索 323
10.4 字符串操作 324
10.5 測試操作 326
10.5.1 檢測對象是否為空 326
10.5.2 檢測對象是否為原始對象 327
10.5.3 檢測兩個節點的包含關係 329
10.6 URL操作 330
10.7 其他工具函數 331
10.7.1 $.proxy()函數調用語法 331
10.7.2 改變事件函數的作用域 332
10.8 工具函數的擴展 334
10.8.1 使用$.extend()擴展工具函數 334
10.8.2 使用$.extend()擴展Object對象 335
10.9 綜閤案例分析—使用jQuery擴展工具函數實現對字符串指定類型的檢測 336
10.9.1 需求分析 336
10.9.2 界麵效果 336
10.9.3 功能實現 336
10.9.4 代碼分析 339
10.10 本章小結 341
第11章 jQuery常用開發技巧 342
11.1 快速控製頁麵元素 343
11.1.1 居中顯示元素 343
11.1.2 捕獲鼠標位置 345
11.2 使用工具函數$.support檢測瀏覽器的信息 348
11.3 調用jQuery中的方法 350
11.3.1 使用預加載方法預覽圖片 350
11.3.2 通過html()方法判斷元素是否為空 353
11.3.3 使用replace()和replaceWith()方法替換內容 354
11.4 巧用jQuery中的事件 357
11.4.1 開啓或禁止頁麵右鍵菜單 357
11.4.2 限製文本輸入框中字符的數量 359
11.5 jQuery集閤處理功能 361
11.6 常用自定義方法與插件 363
11.6.1 自定義選擇器 363
11.6.2 自定義樣式 365
11.6.3 自定義插件 366
11.7 本章小結 369
第12章 jQuery性能優化 370
12.1 jQuery性能優化常用策略 371
12.1.1 優先使用ID與標記選擇器 371
12.1.2 使用jQuery對象緩存 372
12.1.3 正確使用選擇器 373
12.1.4 使用最新版本的jQuery 374
12.1.5 避免過度使用jQuery對象 374
12.1.6 更多地使用鏈接式寫法 374
12.1.7 正確處理元素間父子關係 375
12.1.8 正確使用循環語句 375
12.2 優化選擇器執行的速度 376
12.2.1 處理選擇器中不規範元素標誌 376
12.2.2 使用子查詢優化選擇器性能 378
12.2.3 給選擇器一個上下文 380
12.3 使用方法優化性能 381
12.3.1 使用target()方法優化事件中的冒泡現象 381
12.3.2 使用data()方法存取普通數據 383
12.3.3 使用data()方法存取JSON數據 385
12.4 優化DOM元素的操作 386
12.4.1 減少對DOM元素直接操作 386
12.4.2 正確區分DOM對象與jQuery對象 388
12.5 jQuery庫與其他庫衝突的解決方案 390
12.5.1 jQuery在其他庫前導入 390
12.5.2 jQuery在其他庫後導入 392
12.6 本章小結 394
第13章 jQuery在HTML 5中的應用 395
13.1 使用jQuery與HTML 5開發自定義視頻播放器 396
13.1.1 需求分析 396
13.1.2 界麵效果 396
13.1.3 功能實現 397
13.1.4 代碼分析 403
13.2 使用jQuery與HTML 5實現圖片任意鏇轉效果 405
13.2.1 需求分析 405
13.2.2 界麵效果 405
13.2.3 功能實現 406
13.2.4 代碼分析 409
13.3 使用jQuery與HTML 5開發拼圖遊戲 410
13.3.1 需求分析 410
13.3.2 界麵效果 411
13.3.3 功能實現 412
13.3.4 代碼分析 418
13.4 使用jQuery與HTML 5開發星球大戰遊戲 419
13.4.1 需求分析 419
13.4.2 界麵效果 419
13.4.3 功能實現 420
13.4.4 代碼分析 424
13.5 本章小結 426
第14章 jQuery Mobile基礎知識 427
14.1 初識jQuery Mobile 428
14.1.1 jQuery Mobile框架簡介 428
14.1.2 jQuery Mobile工作原理 428
14.1.3 開發第一個jQuery Mobile頁麵 428
14.2 jQuery Mobile基本組件 430
14.2.1 對話框元素 430
14.2.2 工具欄元素 432
14.2.3 內容布局 434
14.2.4 按鈕 436
14.2.5 錶單元素 438
14.2.6 列錶視圖 440
14.3 jQuery Mobile API接口應用 442
14.3.1 默認配置設置 442
14.3.2 方法 444
14.3.3 事件 445
14.3.4 頁麵主題 448
14.4 本章小結 450
第15章 jQuery Mobile綜閤案例開發 451
15.1 新聞訂閱管理係統 452
15.1.1 需求分析 452
15.1.2 界麵效果 452
15.1.3 功能實現 453
15.1.4 代碼分析 464
15.2 記事本管理 467
15.2.1 需求分析 467
15.2.2 界麵效果 468
15.2.3 功能實現 469
15.2.4 代碼分析 480
15.3 本章小結 483
第16章 jQuery綜閤案例開發 484
16.1 切割圖片 485
16.1.1 需求分析 485
16.1.2 界麵效果 485
16.1.3 功能實現 486
16.1.4 代碼分析 491
16.2 在綫聊天室 493
16.2.1 需求分析 493
16.2.2 界麵效果 494
16.2.3 功能實現 494
16.2.4 代碼分析 505
16.3 本章小結 507
示例目錄
第1章 jQuery簡介 1
示例1-1 編寫第一個簡單的jQuery程序 4
示例1-2 jQuery事件的鏈式寫法 6
示例1-3 控製DOM對象 8
示例1-4 jQuery控製CSS樣式 10
第2章 jQuery選擇器 12
示例2-1 分彆使用JavaScript和jQuery實現隔行變色 13
示例2-2 分彆使用JavaScript和jQuery輸齣文字信息 15
示例2-3 使用jQuery基本選擇器選擇元素 17
示例2-4 使用jQuery層次選擇器選擇元素 19
示例2-5 使用jQuery基本過濾選擇器選擇元素 21
示例2-6 使用jQuery內容過濾選擇器選擇元素 24
示例2-7 使用jQuery可見性過濾選擇器選擇元素 26
示例2-8 使用jQuery屬性過濾選擇器選擇元素 27
示例2-9 使用jQuery子元素過濾選擇器選擇元素 29
示例2-10 使用jQuery錶單對象屬性過濾選擇器獲取錶單對象 31
示例2-11 使用jQuery錶單過濾選擇器獲取元素 33
第3章 jQuery操作DOM 40
示例3-1 創建一個DOM頁麵文檔 41
示例3-2 使用attr(name)方法獲取元素的屬性 43
示例3-3 使用attr(name, value)方法設置元素的屬性 44
示例3-4 使用function()函數隨機展示圖片 45
示例3-5 使用html()和text()方法設置和獲取元素的內容 47
示例3-6 使用val()方法設置和獲取元素的值 49
示例3-7 使用CSS()方法直接設置元素樣式值 51
示例3-8 使用addClass()方法增加元素CSS類彆 52
示例3-9 使用toggleClass()方法切換元素CSS類彆 53
示例3-10 使用$()函數動態創建節點元素 55
示例3-11 使用append()方法插入節點 58
示例3-12 使用appentTo()方法插入節點 59
示例3-13 使用after()方法外部插入節點 60
示例3-14 使用clone()方法復製元素節點 61
示例3-15 使用replaceWith()和replaceAll()方法替換元素節點 63
示例3-16 使用wrap()和wrapInner()方法包裹元素節點 65
示例3-17 使用each()方法遍曆元素獲取屬性 66
示例3-18 使用remove()方法刪除頁麵元素 67
第4章 jQuery中的事件與應用 75
示例4-1 事件中的冒泡現象 76
示例4-2 使用bind()方法綁定事件 80
示例4-3 使用映射方式綁定不同的事件 81
示例4-4 使用hover()方法切換事件 83
示例4-5 使用toggle()方法切換事件 85
示例4-6 使用unbind()方法移除元素綁定事件 86
示例4-7 使用one()方法綁定觸發一次的事件 88
示例4-8 使用trigger()方法觸發指定類型事件 90
示例4-9 使用jQuery事件改變文本框的樣式 91
示例4-10 三個下拉列錶框聯動展示數據 95
示例4-11 列錶中的導航菜單應用 100
示例4-12 網頁選項卡的應用 104
第5章 jQuery的動畫與特效 113
示例5-1 使用show()與hide()方法顯示和隱藏文本 114
示例5-2 使用show()與hide()方法動畫顯示和隱藏圖片 116
示例5-3 使用toggle()方法切換元素可見狀態 118
示例5-4 使用slideDown()與slideUp()方法實現滑動效果 120
示例5-5 使用slideToggle()方法的動畫效果自動切換圖片高度 122
示例5-6 使用fadeIn()和fadeOut()方法實現淡入淡齣效果 124
示例5-7 使用fadeTo()方法改變圖片透明度 126
示例5-8 簡單的動畫 127
示例5-9 移動位置的動畫 129
示例5-10 隊列中的動畫 131
示例5-11 動畫停止和延時 132
第6章 Ajax在jQuery中的應用 144
示例6-1 使用傳統JavaScript方法實現Ajax功能 145
示例6-2 使用load()方法實現異步獲取數據 147
示例6-3 使用全局函數getJSON()實現異步獲取數據 149
示例6-4 使用全局函數getScript()實現異步獲取數據 151
示例6-5 使用全局函數get()實現異步獲取XML文檔數據 153
示例6-6 使用全局函數get ()嚮服務器請求數據 155
示例6-7 使用全局函數post ()嚮服務器請求數據 157
示例6-8 使用serialize()序列化錶單 159
示例6-9 使用$.ajax()方法發送請求 162
示例6-10 使用$.ajaxSetup()方法全局設置Ajax 165
示例6-11 jQuery中的全局事件 168
第7章 jQuery中調用JSON與XML數據 178
示例7-1 使用jQuery讀取JSON數據 181
示例7-2 使用jQuery遍曆JSON數據 182
示例7-3 使用jQuery操作JSON數據 185
示例7-4 使用傳統JavaScript調用XML的方法 187
示例7-5 jQuery 解析XML 數據 189
示例7-6 jQuery 讀取XML 數據 191
示例7-7 jQuery 操作XML 數據 194
第8章 jQuery常用插件 206
示例8-1 validate插件的使用 208
示例8-2 form插件的使用 211
示例8-3 cookie插件的使用 214
示例8-4 AutoComplete插件的使用 216
示例8-5 NotesForLightBox插件的使用 220
示例8-6 ContextMenu插件的使用 223
示例8-7 jQZoom插件的使用 227
示例8-8 Nivo Slider插件的使用 229
示例8-9 TableSort插件的使用 233
示例8-10 ProgressBar插件的使用 236
示例8-11 LoadMask插件的使用 239
示例8-12 Pagination插件的使用 242
示例8-13 Activebar2插件的使用 248
示例8-14 NiceScroll插件的使用 250
示例8-15 對象級彆插件的開發 254
示例8-16 類級彆插件的開發 257
第9章 jQuery UI插件 269
示例9-1 使用draggable插件實現對象的拖曳操作 271
示例9-2 使用droppable插件實現對象的放置操作 274
示例9-3 使用sortable插件實現列錶中錶項的拖曳排序操作 276
示例9-4 使用accordion插件實現頁麵中多區域的摺疊操作 279
示例9-5 使用datepicker插件實現日期選擇的基本操作 281
示例9-6 使用datepicker插件實現分段時間的選擇 283
示例9-7 使用tabs插件展示選項卡的基本功能 285
示例9-8 使用dialog插件彈齣提示和確定信息對話框 289
示例9-9 使用menu插件演示菜單的基本功能 294
示例9-10 使用spinner按鈕改變元素背景色 298
示例9-11 使用tooltip插件演示菜單的基本功能 302
第10章 jQuery常用開發技巧 313
示例10-1 使用browser對象獲取瀏覽器信息 314
示例10-2 使用boxModel對象檢測是否是W3C盒子模型 316
示例10-3 使用$.each()工具函數遍曆數組 318
示例10-4 使用$.each()工具函數遍曆ajaxSettings對象 319
示例10-5 使用$.grep()工具函數篩選數組中的元素 321
示例10-6 使用$.map()工具函數變更數組中的元素 322
示例10-7 使用$.inArray()工具函數搜索數組中指定元素的位置 323
示例10-8 使用$.trim()工具函數刪除字符串左右兩邊的空格符 325
示例10-9 使用$.isEmptyObject()函數檢測對象是否為空 327
示例10-10 使用$.isPlainObject()函數檢測對象是否為原始對象 328
示例10-11 使用$.contains()函數檢測兩個節點的包含關係 329
示例10-12 使用$.param()函數對數組進行序列化 330
示例10-13 使用$.proxy()函數改變事件函數的作用域 332
示例10-14 使用$.extend()函數擴展工具函數 334
第11章 jQuery常用開發技巧 342
示例11-1 居中顯示彈齣框 343
示例11-2 捕獲鼠標位置 345
示例11-3 使用工具函數$.support檢測瀏覽器的信息 348
示例11-4 頁麵打開時使用預加載圖片 351
示例11-5 使用replace()和replaceWith()方法替換內容 355
示例11-6 開啓或禁止頁麵右鍵菜單 357
示例11-7 限製文本輸入框中字符數量 359
示例11-8 jQuery集閤處理功能 361
示例11-9 自定義選擇器獲取指定範圍元素 363
示例11-10 自定義主題樣式 365
示例11-11 自定義插件以動畫的形式嚮上滑動屏幕 366
第12章 jQuery性能優化 370
示例12-1 選擇器中含有空格符與不含空格符的區彆 377
示例12-2 使用子查詢優化選擇器性能 378
示例12-3 在指定的查找範圍內獲取DOM元素 380
示例12-4 使用事件中的target()方法優化冒泡現象 382
示例12-5 使用data()方法在元素上存取普通數據 384
示例12-6 使用data()方法在元素上存取JSON格式的數據 385
示例12-7 減少對DOM元素直接操作 386
示例12-8 DOM對象與jQuery對象的類型轉換 388
示例12-9 jQuery先於其他庫導入“$”的使用權 390
示例12-10 jQuery後於其他庫導入“$”的使用權 392
第14章 jQuery Mobile基礎知識 427
示例14-1 開發第一個jQuery Mobile頁麵 428
示例14-2 以對話框的形式打開目標URL地址 430
示例14-3 創建一個工具欄元素的頭部欄 432
示例14-4 創建一個內容布局中可嵌套的摺疊組 435
示例14-5 通過分欄的方式在頁麵中添加兩個按鈕 437
示例14-6 錶單中文本輸入框元素的實現 439
示例14-7 嵌套列錶的實現 440
示例14-8 默認配置設置的實現 442
示例14-9 jQuery Mobile中方法的調用 444
示例14-10 jQuery Mobile中事件的觸發 446
示例14-11 jQuery Mobile中選擇主題 449
· · · · · · (
收起)
