jQuery從入門到精通（微課精編版）

目  錄
第1 章 初識(shí)jQuery  1
視頻講解：9 分鐘
1.1 jQuery概述 2
1.1.1 jQuery功能  2
1.1.2 jQuery特性  3
1.1.3 jQuery優(yōu)勢(shì)  3
1.1.4 jQuery版本  4
1.2 使用jQuery  4
1.2.1 下載jQuery  5
1.2.2 安裝jQuery  6
1.2.3 測(cè)試jQuery  6
1.3 學(xué)習(xí)資源 8
1.3.1 jQuery開發(fā)工具  8
1.3.2 jQuery參考手冊(cè)  8
第2 章 解析jQuery 框架 9
視頻講解：1 小時(shí)19 分鐘
2.1 設(shè)計(jì)思路 10
2.2 設(shè)計(jì)框架模型 11
2.2.1 定義類型 11
2.2.2 返回jQuery對(duì)象  12
2.2.3 設(shè)計(jì)作用域  14
2.2.4 跨域訪問  15
2.2.5 設(shè)計(jì)選擇器  16
2.2.6 設(shè)計(jì)迭代器  17
2.2.7 設(shè)計(jì)擴(kuò)展  19
2.2.8 傳遞參數(shù)  21
2.2.9 設(shè)計(jì)獨(dú)立空間  24
2.3 jQuery架構(gòu) 26
2.3.1 jQuery結(jié)構(gòu)變化概述  26
2.3.2 jQuery新框架結(jié)構(gòu)  28
2.4 jQuery構(gòu)造函數(shù) 32
2.4.1 jQuery([selector,[context]])接口  32
2.4.2 jQuery(html,[ownerDocument])接口  35
2.4.3 jQuery(callback)接口  38
2.5 jQuery類數(shù)組 38
2.5.1 jQuery對(duì)象  38
2.5.2 構(gòu)建類數(shù)組  39
2.5.3 定位元素  40
2.6 案例實(shí)戰(zhàn) 42
第3 章 解析Sizzle 選擇器引擎 45
3.1 CSS選擇器引擎歷史 46
3.2 Sizzle引擎概述 46
3.2.1　Sizzle特征  47
3.2.2 Sizzle選擇器功能  47
3.2.3 Sizzle代碼功能  47
3.2.4 Sizzle參考  47
3.2.5 瀏覽器支持  48
3.2.6 Sizzle選擇器  48
3.2.7 公共API  49
3.2.8 擴(kuò)展API  50
3.2.9 內(nèi)部API  52
3.2.10 Sizzle代碼結(jié)構(gòu)  52
3.3 使用Sizzle引擎 54
3.3.1 安裝Sizzle  54
3.3.2 嵌入jQuery  55
3.3.3 jQuery與Sizzle協(xié)作 55
3.4 詞法分析 57
3.4.1 瀏覽器解析概述  57
3.4.2 CSS選擇器解析順序  59
3.4.3 CSS選擇器解析機(jī)制  60
3.4.4 tokenize處理器  62
3.5 選擇過濾 65
3.5.1 位置關(guān)系  66
3.5.2 實(shí)現(xiàn)接口  66
3.5.3 匹配原則  67
3.6 編譯函數(shù) 71
3.6.1 元匹配器  71
3.6.2 編譯器  72
3.6.3 過濾函數(shù)  73
3.7 超級(jí)匹配 78
3.7.1 superMatcher  78
3.7.2 matcher 79
第4 章 定義jQuery 對(duì)象 86
視頻講解：47 分鐘
4.1 簡(jiǎn)單選擇器 87
4.1.1 ID選擇器  87
4.1.2 標(biāo)簽選擇器  88
4.1.3 類選擇器  89
4.1.4 通配選擇器  91
4.1.5 分組選擇器  91
4.1.6 源碼解析  92
4.2 關(guān)系選擇器 95
4.3 偽類選擇器 99
4.3.1 子選擇器  99
4.3.2 位置選擇器  100
4.3.3 內(nèi)容選擇器  101
4.3.4 可視選擇器  102
4.3.5 源碼解析  103
4.4 屬性選擇器 107
4.5 表單選擇器 110
4.5.1 類型選擇器 111
4.5.2 狀態(tài)選擇器 112
4.6 jQuery選擇器優(yōu)化 113
第5 章 過濾jQuery 對(duì)象 116
視頻講解：53 分鐘
5.1 篩選對(duì)象 117
5.1.1 包含類 117
5.1.2 定位對(duì)象 118
5.1.3 超級(jí)過濾 119
5.1.4 包含過濾  122
5.1.5 是否包含  123
5.1.6 映射函數(shù)  124
5.1.7 排除對(duì)象  125
5.1.8 截取片段  126
5.2 結(jié)構(gòu)過濾 127
5.2.1 查找后代節(jié)點(diǎn)  127
5.2.2 查找祖先元素  131
5.2.3 查找前面兄弟元素  137
5.2.4 查找后面兄弟元素  139
5.2.5 查找同輩元素  142
5.3 特殊操作 142
5.3.1 添加對(duì)象  142
5.3.2 合并對(duì)象  144
5.3.3 返回前面對(duì)象  145
第6 章 解析DOM 模塊 146
6.1 DOM操作引擎概述 147
6.1.1 DOM操作設(shè)計(jì)原理  147
6.1.2 DOM操作API組成  147
6.1.3 創(chuàng)建元素設(shè)計(jì)思路  149
6.1.4 克隆元素設(shè)計(jì)思路  150
6.1.5 插入元素設(shè)計(jì)思路  151
6.1.6 移除元素設(shè)計(jì)思路  153
6.2 domManip()函數(shù) 153
6.2.1 版本演變  153
6.2.2 為什么使用domManip()函數(shù)  153
6.2.3 domManip主要功能  154
6.2.4 源碼解析  157
6.3 buildFragment()函數(shù) 161
6.3.1 文檔片段節(jié)點(diǎn)  161
6.3.2 源碼解析  162
6.4 access()與DOM操作 166
6.5 DOM操作接口 170
6.5.1 after  171
6.5.2 insertAfter  171
6.5.3 before  172
6.5.4 append  173
6.5.5 prepend 173
6.5.6 replaceWith  173
6.5.7 html  174
6.5.8 text  176
6.5.9 val 177
第7 章 操作DOM 182
視頻講解：1 小時(shí)24 分鐘
7.1 創(chuàng)建節(jié)點(diǎn) 183
7.1.1 創(chuàng)建元素  183
7.1.2 創(chuàng)建文本  184
7.1.3 創(chuàng)建屬性  184
7.2 插入節(jié)點(diǎn) 185
7.2.1 內(nèi)部插入  185
7.2.2 外部插入  189
7.3 刪除節(jié)點(diǎn) 191
7.3.1 移出  192
7.3.2 清空  194
7.3.3 分離  195
7.4 克隆節(jié)點(diǎn) 197
7.4.1 使用clone()  197
7.4.2 源碼解析  198
7.5 替換節(jié)點(diǎn) 200
7.6 包裹元素 202
7.6.1 外包  202
7.6.2 內(nèi)包  203
7.6.3 總包  204
7.6.4 卸包  205
7.7 操作屬性 206
7.7.1 設(shè)置屬性  206
7.7.2 訪問屬性  208
7.7.3 刪除屬性 211
7.8 操作類 213
7.8.1 添加類樣式  213
7.8.2 刪除類樣式  213
7.8.3 切換類樣式  214
7.8.4 判斷樣式  215
7.9 操作內(nèi)容 216
7.9.1 讀寫HTML字符串  216
7.9.2 讀寫文本  217
7.9.3 讀寫值  218
7.10 案例實(shí)戰(zhàn) 219
7.10.1 設(shè)計(jì)復(fù)選框的全選、反選、取消、
選中輸出功能  220
7.10.2 鏈?zhǔn)讲僮鱀OM  221
7.10.3 簡(jiǎn)單求和  223
7.11 在線練習(xí) 224
第8 章 使用CSS 225
視頻講解：30 分鐘
8.1 CSS腳本化基礎(chǔ) 226
8.1.1 訪問行內(nèi)樣式  226
8.1.2 使用style  227
8.1.3 使用styleSheets  231
8.1.4 使用selectorText  234
8.1.5 修改樣式  234
8.1.6 添加樣式  235
8.1.7 訪問渲染樣式  236
8.1.8 訪問媒體查詢  239
8.1.9 CSS事件  241
8.2 jQuery實(shí)現(xiàn) 242
8.2.1 access()函數(shù) 243
8.2.2 jQuery.fn.css  245
8.3 案例實(shí)戰(zhàn) 247
8.4 在線練習(xí) 249
第9 章 jQuery 動(dòng)畫 250
視頻講解：56 分鐘
9.1 jQuery動(dòng)畫基礎(chǔ) 251
9.1.1 顯隱效果  251
9.1.2 顯隱切換  254
9.1.3 滑動(dòng)效果  256
9.1.4 滑動(dòng)切換  257
9.1.5 淡入淡出  259
9.1.6 控制淡入淡出度  260
9.1.7 漸變切換  261
9.2 設(shè)計(jì)動(dòng)畫 262
9.2.1 模擬show()  263
9.2.2 自定義動(dòng)畫  264
9.2.3 滑動(dòng)定位  267
9.2.4 停止動(dòng)畫  267
9.2.5 關(guān)閉動(dòng)畫  269
9.2.6 設(shè)置動(dòng)畫頻率  269
9.2.7 延遲動(dòng)畫  270
9.3 案例實(shí)戰(zhàn) 270
9.3.1 折疊面板  270
9.3.2 樹形結(jié)構(gòu)  272
9.3.3 選項(xiàng)卡  274
9.4 在線練習(xí) 277
第10 章 jQuery 事件 278
視頻講解：1 小時(shí)14 分鐘
10.1 JavaScript事件基礎(chǔ) 279
10.1.1 JavaScript事件發(fā)展歷史  279
10.1.2 事件模型  279
10.1.3 事件傳播  279
10.1.4 事件類型  280
10.1.5 綁定事件  281
10.1.6 事件監(jiān)聽函數(shù)  281
10.1.7 注冊(cè)事件  283
10.1.8 銷毀事件  285
10.1.9 event對(duì)象  287
10.1.10 事件委托  289
10.2 jQuery實(shí)現(xiàn) 291
10.2.1 綁定事件  291
10.2.2 事件方法  296
10.2.3 綁定一次性事件  297
10.2.4 注銷事件  297
10.2.5 使用事件對(duì)象  298
10.2.6 觸發(fā)事件  299
10.2.7 切換事件  301
10.2.8 使用懸停事件  302
10.2.9 事件命名空間  304
10.2.10 綁定多個(gè)事件  305
10.2.11 自定義事件 306
10.2.12 頁面初始化  307
10.2.13 使用ready事件 308
10.3 案例實(shí)戰(zhàn) 310
10.3.1 定義快捷鍵  310
10.3.2 設(shè)計(jì)軟鍵盤  312
10.4 在線練習(xí) 314
第11 章 使用Ajax 315
視頻講解：1 小時(shí)21 分鐘
11.1 XMLHttpRequest 1.0 基礎(chǔ) 316
11.1.1 定義XMLHttpRequest對(duì)象  316
11.1.2 建立XMLHttpRequest連接  317
11.1.3 發(fā)送GET請(qǐng)求  318
11.1.4 發(fā)送POST請(qǐng)求  318
11.1.5 轉(zhuǎn)換串行化字符串 320
11.1.6 跟蹤狀態(tài) 321
11.1.7 終止請(qǐng)求 322
11.1.8 獲取XML數(shù)據(jù)  322
11.1.9 獲取HTML文本  323
11.1.10 獲取JavaScript腳本  324
11.1.11 獲取JSON數(shù)據(jù)  325
11.1.12 獲取純文本 325
11.1.13 獲取頭部信息 326
11.2 XMLHttpRequest 2.0基礎(chǔ) 327
11.2.1 請(qǐng)求時(shí)限 327
11.2.2 FormData數(shù)據(jù)對(duì)象  327
11.2.3 上傳文件 328
11.2.4 跨域訪問 328
11.2.5 響應(yīng)不同類型數(shù)據(jù) 328
11.2.6 接收二進(jìn)制數(shù)據(jù) 329
11.2.7 監(jiān)測(cè)數(shù)據(jù)傳輸進(jìn)度 329
11.3 jQuery實(shí)現(xiàn) 330
11.3.1 使用GET請(qǐng)求  330
11.3.2 使用POST請(qǐng)求  333
11.3.3 使用ajax()請(qǐng)求  334
11.3.4 跟蹤狀態(tài) 336
11.3.5 載入文件 338
11.3.6 設(shè)置Ajax選項(xiàng)  340
11.3.7 序列化字符串 341
11.4 案例實(shí)戰(zhàn) 344
11.4.1 設(shè)計(jì)數(shù)據(jù)瀑布流顯示 344
11.4.2 無刷新刪除記錄 345
11.5 在線練習(xí) 347
第12 章 jQuery 工具 348
視頻講解：1 小時(shí)53 分鐘
12.1 瀏覽器探測(cè) 349
12.1.1 檢測(cè)類型  349
12.1.2 檢測(cè)版本號(hào)  350
12.1.3 檢測(cè)渲染方式  351
12.1.4 綜合測(cè)試  351
12.2 jQuery管理 352
12.2.1 兼容其他庫  352
12.2.2 混用多個(gè)庫  354
12.3 小工具 355
12.3.1 修剪字符串  355
12.3.2 序列化字符串  355
12.3.3 檢測(cè)數(shù)組  356
12.3.4 遍歷對(duì)象  356
12.3.5 轉(zhuǎn)換數(shù)組  357
12.3.6 過濾數(shù)組  358
12.3.7 映射數(shù)組  359
12.3.8 合并數(shù)組  360
12.3.9 刪除重復(fù)項(xiàng)  360
12.3.10 遍歷jQuery對(duì)象  361
12.3.11 獲取jQuery對(duì)象長(zhǎng)度  362
12.3.12 獲取選擇器和選擇范圍  362
12.3.13 獲取jQuery對(duì)象成員  363
12.4 緩存 364
12.4.1 認(rèn)識(shí)緩存  364
12.4.2 定義緩存  366
12.4.3 獲取緩存  366
12.4.4 刪除緩存  367
12.4.5 jQuery緩存規(guī)范  368
12.5 隊(duì)列 368
12.5.1 認(rèn)識(shí)隊(duì)列  368
12.5.2 添加隊(duì)列  369
12.5.3 顯示隊(duì)列  370
12.5.4 更新隊(duì)列  371
12.5.5 刪除隊(duì)列  372
12.6 延遲 373
12.6.1 認(rèn)識(shí)deferred對(duì)象  373
12.6.2 Ajax鏈?zhǔn)綄懛?nbsp; 373
12.6.3 定義同一操作的多個(gè)回調(diào)函數(shù)  374
12.6.4 為多個(gè)操作定義回調(diào)函數(shù)  374
12.6.5 普通操作的回調(diào)函數(shù)接口  374
12.7 回調(diào)函數(shù) 377
12.7.1 添加回調(diào)函數(shù)  378
12.7.2 刪除回調(diào)函數(shù)  378
12.7.3 判斷回調(diào)函數(shù)  379
12.7.4 清空回調(diào)函數(shù)  379
12.7.5 禁用回調(diào)函數(shù)  380
12.7.6 觸發(fā)回調(diào)函數(shù)  380
12.7.7 鎖定回調(diào)函數(shù)  381
12.8 案例實(shí)戰(zhàn) 383
12.9 在線練習(xí) 384
第13 章 jQuery 插件 385
視頻講解：1 小時(shí)11 分鐘
13.1 jQuery插件開發(fā)基礎(chǔ) 386
13.1.1 開發(fā)規(guī)范  386
13.1.2 設(shè)計(jì)原理  387
13.1.3 定義jQuery函數(shù)  389
13.1.4 定義jQuery方法  390
13.1.5 匹配元素  391
13.1.6 使用extend  393
13.1.7 封裝插件  394
13.1.8 開放參數(shù)  395
13.1.9 開放功能  396
13.1.10 隱私保護(hù)  398
13.1.11 非破壞性實(shí)現(xiàn) 399
13.1.12 添加事件日志  401
13.1.13 簡(jiǎn)化設(shè)計(jì)  405
13.2 案例實(shí)戰(zhàn)：設(shè)計(jì)文字提示插件 407
13.2.1 功能講解  407
13.2.2 構(gòu)建結(jié)構(gòu)  407
13.2.3 設(shè)計(jì)思路  407
13.2.4 難點(diǎn)突破  410
13.2.5 代碼實(shí)現(xiàn) 411
13.2.6 應(yīng)用插件  413
13.3 在線練習(xí) 413
第14 章 案例實(shí)戰(zhàn)：使用jQuery 設(shè)計(jì)微博系統(tǒng) 414
14.1 設(shè)計(jì)思路 415
14.2 設(shè)計(jì)網(wǎng)站結(jié)構(gòu) 416
14.3 設(shè)計(jì)數(shù)據(jù)庫 417
14.4 連接數(shù)據(jù)庫 418
14.5 顯示微博 418
14.6 發(fā)布微博 419
14.7 在線練習(xí) 421
第15 章 案例實(shí)戰(zhàn)：使用jQuery 開發(fā)網(wǎng)店 422
視頻講解：60 分鐘
15.1 網(wǎng)站策劃 423
15.2 設(shè)計(jì)網(wǎng)站結(jié)構(gòu) 424
15.2.1 定義文件結(jié)構(gòu)  424
15.2.2 定義網(wǎng)頁結(jié)構(gòu)  424
15.2.3 設(shè)計(jì)效果圖  424
15.3 設(shè)計(jì)網(wǎng)站樣式 425
15.3.1 網(wǎng)站樣式分類  425
15.3.2 編寫全局樣式  425
15.3.3 編寫可重用樣式  425
15.3.4 編寫網(wǎng)站首頁主體布局  426
15.3.5 編寫詳細(xì)頁主體布局  426
15.4 設(shè)計(jì)首頁交互行為 426
15.4.1 搜索框文字效果  426
15.4.2 網(wǎng)頁換膚  426
15.4.3 導(dǎo)航效果  428
15.4.4 商品分類熱銷效果  428
15.4.5 產(chǎn)品廣告效果  429
15.4.6 超鏈接提示  430
15.4.7 品牌活動(dòng)橫向滾動(dòng)效果  432
15.4.8 光標(biāo)滑過產(chǎn)品列表效果  433
15.5 設(shè)計(jì)詳細(xì)頁交互行為 434
15.5.1 圖片放大鏡效果  434
15.5.2 圖片遮罩效果  435
15.5.3 小圖切換大圖  436
15.5.4 選項(xiàng)卡  438
15.5.5 產(chǎn)品顏色切換  439
15.5.6 產(chǎn)品尺寸切換  440
15.5.7 產(chǎn)品數(shù)量和價(jià)格聯(lián)動(dòng)  441
15.5.8 產(chǎn)品評(píng)分效果  441
15.5.9 模態(tài)對(duì)話框  442
15.6 在線練習(xí) 443
第16 章 案例實(shí)戰(zhàn)：使用jQuery 開發(fā)Web應(yīng)用 444
視頻講解：48 分鐘
16.1 設(shè)計(jì)思路 445
16.1.1 案例預(yù)覽  445
16.1.2 案例策劃  446
16.1.3 設(shè)計(jì)XML數(shù)據(jù)  446
16.2 設(shè)計(jì)相冊(cè)結(jié)構(gòu) 447
16.2.1 設(shè)計(jì)基本結(jié)構(gòu)  447
16.2.2 完善頁面結(jié)構(gòu)  448
16.3 設(shè)計(jì)相冊(cè)布局和樣式 449
16.3.1 基本布局思路  449
16.3.2 定義默認(rèn)樣式和基本框架  450
16.3.3 定義局部樣式  451
16.3.4 設(shè)計(jì)皮膚  454
16.4 設(shè)計(jì)交互效果 455
16.4.1 動(dòng)態(tài)更換皮膚  455
16.4.2 初始化XML DOM控件  455
16.4.3 讀取并顯示分類導(dǎo)航信息  456
16.4.4 讀取并顯示縮略圖信息  458