jQuery、jQuery UI及jQuery Mobile技巧與示例

目　錄

第一部分　核心基礎(chǔ)

第1章　jQuery入門　2
1.1　技巧：jQuery基本使用簡介　2
1.2　技巧：和其他庫一起使用jQuery　4
1.3　技巧：檢測jQuery版本　5
1.4　技巧：使用each()迭代數(shù)組　6
1.5　技巧：使用map()操作數(shù)組　7
1.6　技巧：使用數(shù)組元素　8
1.7　技巧：使用index()獲取元素的位置　10
1.8　技巧：使用grep()在數(shù)組中查找元素　11
1.9　技巧：使用length()檢測元素集的大小　12
1.10　技巧：獲取HTML5的data-屬性　12
1.11　技巧：使用data()存儲元素數(shù)據(jù)　13
1.12　技巧：使用removeData()移除元素數(shù)據(jù)　14
1.13　技巧：檢驗和操作變量　16
1.14　技巧：使用extend()擴(kuò)展對象　18
1.15　技巧：序列化表單中的數(shù)據(jù)　19
1.16　技巧：檢測瀏覽器支持的特性　20
小結(jié)　21

第2章　選取元素　22
2.1　技巧：使用add()合并兩個元素集　22
2.2　技巧：使用filter()優(yōu)化選取集　23
2.3　技巧：使用find()和children()選取后代元素　24
2.4　技巧：使用has()選取元素、使用is()檢測元素　25
2.5　技巧：使用偽選擇器選取表單元素　26
2.6　技巧：嵌套選擇器　27
2.7　技巧：模擬CSS的hover選擇器　28
2.8　技巧：使用contains()選取文本　29
2.9　示例：高亮顯示單個詞　30
2.10　技巧：創(chuàng)建自定義選擇器　31
2.11　技巧：限制選取上下文的范圍　32
小結(jié)　33

第3章　修改頁面　34
3.1　技巧：添加類　34
3.2　示例：移除類　35
3.3　技巧：生成類名　36
3.4　技巧：更改property和attribute　37
3.5　技巧：更改元素的HTML內(nèi)容　39
3.6　技巧：使用append()和appendTo()添加內(nèi)容　40
3.7　示例：添加函數(shù)的返回結(jié)果　41
3.8　技巧：使用prepend()和prependTo()添加內(nèi)容　42
3.9　技巧：使用jQuery動態(tài)生成HTML　43
3.10　技巧：添加和分離元素　44
3.11　技巧：使用clone()復(fù)制元素　45
3.12　技巧：在指定的位置插入元素　47
3.13　示例：向上和向下移動列表項　48
3.14　技巧：移除元素　49
3.15　技巧：包裹和解包元素　51
小結(jié)　53

第4章　監(jiān)聽和響應(yīng)事件　54
4.1　技巧：監(jiān)聽鼠標(biāo)事件　54
4.2　示例：在畫布上繪圖　56
4.3　技巧：監(jiān)聽鍵盤事件　57
4.4　技巧：監(jiān)聽表單事件　59
4.5　技巧：監(jiān)聽滾輪事件　60
4.6　技巧：使用live()和die()添加中樞事件監(jiān)聽器　61
4.7　技巧：使用delegate()將事件委托給指定的祖先元素　63
4.8　技巧：使用proxy()更改函數(shù)的執(zhí)行上下文　65
小結(jié)　66

第5章　與服務(wù)器通信　67
5.1　技巧：使用Node.js安裝示例服務(wù)器　67
5.2　技巧：執(zhí)行GET請求　69
5.3　技巧：直接加載HTML　70
5.4　技巧：使用Promise處理結(jié)果　71
5.5　技巧：處理服務(wù)器錯誤　72
5.6　技巧：捕獲“頁面未找到”結(jié)果　73
5.7　技巧：處理頁面重定向　74
5.8　技巧：設(shè)置請求的超時時間　76
5.9　技巧：傳遞HTTP首部　77
5.10　示例：在服務(wù)器端驗證表單輸入　78
5.11　技巧：加載XML　79
5.12　技巧：監(jiān)聽AJAX事件　80
5.13　技巧：從外部服務(wù)器讀取JSONP　81
小結(jié)　82

第二部分　UI

第6章　與用戶交互　84
6.1　下載和安裝jQuery UI　84
6.2　技巧：拖曳元素　85
6.2.1　為可拖曳元素添加樣式　85
6.2.2　設(shè)置可拖曳組件的選項　86
6.2.3　捕獲可拖曳組件的事件　89
6.2.4　調(diào)用可拖曳組件的方法　90
6.3　技巧：放置元素　91
6.3.1　為可放置元素添加樣式　92
6.3.2　設(shè)置可放置組件的選項　92
6.3.3　捕獲可放置組件的事件　93
6.3.4　調(diào)用可放置組件的方法　94
6.4　技巧：使用可排序組件更改元素的順序　94
6.4.1　為可排序元素添加樣式　95
6.4.2　設(shè)置可排序組件的選項　96
6.4.3　捕獲可排序組件的事件　97
6.4.4　調(diào)用可排序組件的方法　100
6.5　示例：對樹結(jié)構(gòu)中的元素排序　100
6.6　技巧：從無序列表中選取元素　101
6.6.1　為可選取元素添加樣式　103
6.6.2　設(shè)置可選取組件的選項　103
6.6.3　捕獲可選取組件的事件　103
6.6.4　調(diào)用可選取組件的方法　105
6.7　示例：在樹結(jié)構(gòu)中選取元素　105
6.8　技巧：調(diào)整元素大小　106
6.8.1　為可調(diào)整大小元素添加樣式　107
6.8.2　設(shè)置可調(diào)整大小組件的選項　107
6.8.3　捕獲可調(diào)整大小組件的事件　108
6.8.4　調(diào)用可調(diào)整大小組件的方法　109
小結(jié)　109

第7章　與微件交互　110
7.1　技巧：使用折疊菜單微件組織內(nèi)容　110
7.1.1　為折疊菜單元素添加樣式　111
7.1.2　設(shè)置折疊菜單的選項　112
7.1.3　捕獲折疊菜單的事件　114
7.1.4　調(diào)用折疊菜單的方法　115
7.2　技巧：使用自動補(bǔ)全微件提示輸入值　116
7.2.1　為自動補(bǔ)全元素添加樣式　117
7.2.2　設(shè)置自動補(bǔ)全的選項　117
7.2.3　捕獲自動補(bǔ)全的事件　119
7.2.4　調(diào)用自動補(bǔ)全的方法　120
7.3　技巧：將元素轉(zhuǎn)換為按鈕微件　120
7.3.1　為按鈕元素添加樣式　121
7.3.2　設(shè)置按鈕的選項　122
7.3.3　捕獲按鈕的事件　123
7.3.4　調(diào)用按鈕的方法　123
7.4　示例：使用按鈕集裝飾單選框　123
7.5　技巧：使用日歷微件選擇日期　124
7.5.1　為日歷元素添加樣式　125
7.5.2　設(shè)置日歷的選項　126
7.5.3　捕獲日歷的事件　129
7.5.4　調(diào)用日歷的方法　130
7.6　技巧：使用對話框微件引起注意　131
7.6.1　為對話框元素添加樣式　132
7.6.2　設(shè)置對話框的選項　133
7.6.3　捕獲對話框的事件　134
7.6.4　調(diào)用對話框的方法　136
7.7　技巧：使用進(jìn)度條微件顯示進(jìn)程的狀態(tài)　137
7.7.1　為進(jìn)度條元素添加樣式　138
7.7.2　設(shè)置進(jìn)度條的選項　138
7.7.3　捕獲進(jìn)度條的事件　138
7.7.4　調(diào)用進(jìn)度條的方法　139
7.8　技巧：使用滑塊微件獲取數(shù)字　139
7.8.1　為滑塊元素添加樣式　140
7.8.2　設(shè)置滑塊的選項　140
7.8.3　捕獲滑塊的事件　141
7.8.4　調(diào)用滑塊的方法　142
7.9　技巧：使用選項卡微件導(dǎo)航頁面　142
7.9.1　為選項卡元素添加樣式　144
7.9.2　設(shè)置選項卡的選項　145
7.9.3　捕獲選項卡的事件　146
7.9.4　調(diào)用選項卡的方法　147
小結(jié)　148

第三部分　jQuery Mobile

第8章　更改外觀　150
8.1　更改jQuery UI組件的樣式　150
8.2　使用jQuery Core創(chuàng)建動畫　151
8.3　技巧：使用jQuery UI的顏色動畫　152
8.4　技巧：使用jQuery Core中的fade和slide特效來隱藏元素　153
8.5　技巧：使用jQuery UI添加圖形特效　155
8.6　技巧：使用jQuery UI的添加和移除CSS類的動畫　156
8.7　技巧：以圖表的方式顯示jQuery UI中的所有緩動函數(shù)　157
8.8　技巧：顯示jQuery UI中的所有圖標(biāo)　159
8.9　技巧：使用Promise在動畫結(jié)束時執(zhí)行代碼　161
8.10　技巧：使用queue和dequeue在動畫之間執(zhí)行代碼　162
小結(jié)　164

第9章　使用jQuery Mobile來導(dǎo)航頁面　165
9.1　技巧：搭建jQuery Mobile基礎(chǔ)頁面　165
9.2　技巧：用單個HTML文件服務(wù)多張頁面　166
9.3　技巧：更改標(biāo)題元素　168
9.4　技巧：使用AJAX加載外部頁面　169
9.5　技巧：顯示頁面正在加載的信息　171
9.6　技巧：不使用AJAX而鏈接至外部頁面　173
9.7　技巧：指定過渡動畫　174
9.8　技巧：指定自定義的過渡動畫　175
9.9　技巧：監(jiān)聽Mobile事件　177
9.10　技巧：生成回退按鈕　180
9.11　技巧：在頁面下方添加footer　181
9.12　技巧：跨頁面時固定footer　183
9.13　技巧：將footer的位置保持固定　184
9.14　技巧：隱藏和顯示footer　186
9.15　技巧：優(yōu)化header和footer以便全屏查看　188
9.16　技巧：使用主題來更改配色方案　189
9.17　技巧：使用多個列　191
9.18　技巧：利用JavaScript調(diào)用來變更頁面　192
9.19　技巧：利用JavaScript調(diào)用加載頁面　195
9.20　技巧：向jQuery Mobile中的DOM結(jié)點添加數(shù)據(jù)　196
9.21　技巧：利用jQuery Mobile的輔助函數(shù)　197
小結(jié)　200

第10章　與jQuery Mobile交互　201
10.1　技巧：在content里面顯示工具欄　201
10.2　技巧：顯示警告欄　202
10.3　技巧：向footer元素中添加菜單欄　203
10.4　技巧：使用導(dǎo)航欄進(jìn)行導(dǎo)航　204
10.5　技巧：使用collapsible來顯示和隱藏元素　207
10.6　技巧：使用collapsible集合來添加折疊菜單的行為　209
10.7　技巧：使用表單字段來獲取基本的文本框　210
10.8　技巧：獲取日歷輸入框　211
10.9　技巧：顯示輸入框時使用替代鍵盤　213
10.10　技巧：顯示專門的輸入框　214
10.11　技巧：使用滑塊來獲取整數(shù)　216
10.12　技巧：使用快速開關(guān)來設(shè)置二進(jìn)制值　217
10.13　技巧：使用單選框選取單個元素　218
10.14　技巧：使用復(fù)選框選取多個元素　219
10.15　技巧：從下拉列表選取元素　221
10.16　技巧：關(guān)閉jQuery Mobile而顯示原生的表單　223
10.17　技巧：顯示元素列表　224
10.18　技巧：篩選列表元素　232
10.19　技巧：將表單元素按列表分組　233
小結(jié)　234

第四部分　插件

第11章　創(chuàng)建插件　236
11.1　技巧：構(gòu)建簡單的靜態(tài)插件　236
11.2　技巧：創(chuàng)建簡單的“有上下文”的插件　237
11.3　技巧：鏈接jQuery函數(shù)和插件　238
11.4　技巧：參數(shù)化插件　239
11.5　技巧：提供默認(rèn)參數(shù)　240
11.6　技巧：使用方法來操作插件　242
11.7　技巧：創(chuàng)建“創(chuàng)建插件的插件”　244
11.8　技巧：注冊和調(diào)用回調(diào)函數(shù)　246
11.9　技巧：向回調(diào)函數(shù)傳遞上下文　247
11.10　技巧：返回Deferred對象來分別調(diào)用成功和出錯時的回調(diào)函數(shù)　249
11.11　技巧：返回Promise來保護(hù)內(nèi)部實現(xiàn)　250
11.12　技巧：演示Promise 的保護(hù)機(jī)制　251
11.13　技巧：使用Promise來控制流的結(jié)構(gòu)　252
11.14　技巧：在調(diào)用最后的回調(diào)函數(shù)之前顯示進(jìn)度　253
11.15　技巧：向回調(diào)函數(shù)傳遞上下文　255
11.16　技巧：向進(jìn)度函數(shù)傳遞上下文　256
小結(jié)　257

第12章　使用第三方插件　259
12.1　技巧：顯示模態(tài)框　259
12.2　技巧：使用下拉菜單　261
12.3　技巧：使用滾動偵測　263
12.4　技巧：變換選項卡　265
12.5　技巧：添加工具提示　267
12.6　技巧：添加提示面板　269
12.7　技巧：警告用戶　270
12.8　技巧：按鈕控件　272
12.9　技巧：折疊內(nèi)容　274
12.10　技巧：將內(nèi)容置于輪播插件中　276
12.11　技巧：將輸入提示用于自動補(bǔ)全　278
小結(jié)　280