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

目　錄

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

第1章　jQuery入門(mén)　2
1.1　技巧：jQuery基本使用簡(jiǎn)介　2
1.2　技巧：和其他庫(kù)一起使用jQuery　4
1.3　技巧：檢測(cè)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()檢測(cè)元素集的大小　12
1.10　技巧：獲取HTML5的data-屬性　12
1.11　技巧：使用data()存儲(chǔ)元素?cái)?shù)據(jù)　13
1.12　技巧：使用removeData()移除元素?cái)?shù)據(jù)　14
1.13　技巧：檢驗(yàn)和操作變量　16
1.14　技巧：使用extend()擴(kuò)展對(duì)象　18
1.15　技巧：序列化表單中的數(shù)據(jù)　19
1.16　技巧：檢測(cè)瀏覽器支持的特性　20
小結(jié)　21

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

第3章　修改頁(yè)面　34
3.1　技巧：添加類(lèi)　34
3.2　示例：移除類(lèi)　35
3.3　技巧：生成類(lèi)名　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動(dòng)態(tài)生成HTML　43
3.10　技巧：添加和分離元素　44
3.11　技巧：使用clone()復(fù)制元素　45
3.12　技巧：在指定的位置插入元素　47
3.13　示例：向上和向下移動(dòng)列表項(xiàng)　48
3.14　技巧：移除元素　49
3.15　技巧：包裹和解包元素　51
小結(jié)　53

第4章　監(jiān)聽(tīng)和響應(yīng)事件　54
4.1　技巧：監(jiān)聽(tīng)鼠標(biāo)事件　54
4.2　示例：在畫(huà)布上繪圖　56
4.3　技巧：監(jiān)聽(tīng)鍵盤(pán)事件　57
4.4　技巧：監(jiān)聽(tīng)表單事件　59
4.5　技巧：監(jiān)聽(tīng)滾輪事件　60
4.6　技巧：使用live()和die()添加中樞事件監(jiān)聽(tīng)器　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請(qǐng)求　69
5.3　技巧：直接加載HTML　70
5.4　技巧：使用Promise處理結(jié)果　71
5.5　技巧：處理服務(wù)器錯(cuò)誤　72
5.6　技巧：捕獲“頁(yè)面未找到”結(jié)果　73
5.7　技巧：處理頁(yè)面重定向　74
5.8　技巧：設(shè)置請(qǐng)求的超時(shí)時(shí)間　76
5.9　技巧：傳遞HTTP首部　77
5.10　示例：在服務(wù)器端驗(yàn)證表單輸入　78
5.11　技巧：加載XML　79
5.12　技巧：監(jiān)聽(tīng)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è)置可拖曳組件的選項(xiàng)　86
6.2.3　捕獲可拖曳組件的事件　89
6.2.4　調(diào)用可拖曳組件的方法　90
6.3　技巧：放置元素　91
6.3.1　為可放置元素添加樣式　92
6.3.2　設(shè)置可放置組件的選項(xiàng)　92
6.3.3　捕獲可放置組件的事件　93
6.3.4　調(diào)用可放置組件的方法　94
6.4　技巧：使用可排序組件更改元素的順序　94
6.4.1　為可排序元素添加樣式　95
6.4.2　設(shè)置可排序組件的選項(xiàng)　96
6.4.3　捕獲可排序組件的事件　97
6.4.4　調(diào)用可排序組件的方法　100
6.5　示例：對(duì)樹(shù)結(jié)構(gòu)中的元素排序　100
6.6　技巧：從無(wú)序列表中選取元素　101
6.6.1　為可選取元素添加樣式　103
6.6.2　設(shè)置可選取組件的選項(xiàng)　103
6.6.3　捕獲可選取組件的事件　103
6.6.4　調(diào)用可選取組件的方法　105
6.7　示例：在樹(shù)結(jié)構(gòu)中選取元素　105
6.8　技巧：調(diào)整元素大小　106
6.8.1　為可調(diào)整大小元素添加樣式　107
6.8.2　設(shè)置可調(diào)整大小組件的選項(xiàng)　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è)置折疊菜單的選項(xiàng)　112
7.1.3　捕獲折疊菜單的事件　114
7.1.4　調(diào)用折疊菜單的方法　115
7.2　技巧：使用自動(dòng)補(bǔ)全微件提示輸入值　116
7.2.1　為自動(dòng)補(bǔ)全元素添加樣式　117
7.2.2　設(shè)置自動(dòng)補(bǔ)全的選項(xiàng)　117
7.2.3　捕獲自動(dòng)補(bǔ)全的事件　119
7.2.4　調(diào)用自動(dòng)補(bǔ)全的方法　120
7.3　技巧：將元素轉(zhuǎn)換為按鈕微件　120
7.3.1　為按鈕元素添加樣式　121
7.3.2　設(shè)置按鈕的選項(xiàng)　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è)置日歷的選項(xiàng)　126
7.5.3　捕獲日歷的事件　129
7.5.4　調(diào)用日歷的方法　130
7.6　技巧：使用對(duì)話框微件引起注意　131
7.6.1　為對(duì)話框元素添加樣式　132
7.6.2　設(shè)置對(duì)話框的選項(xiàng)　133
7.6.3　捕獲對(duì)話框的事件　134
7.6.4　調(diào)用對(duì)話框的方法　136
7.7　技巧：使用進(jìn)度條微件顯示進(jìn)程的狀態(tài)　137
7.7.1　為進(jìn)度條元素添加樣式　138
7.7.2　設(shè)置進(jìn)度條的選項(xiàng)　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è)置滑塊的選項(xiàng)　140
7.8.3　捕獲滑塊的事件　141
7.8.4　調(diào)用滑塊的方法　142
7.9　技巧：使用選項(xiàng)卡微件導(dǎo)航頁(yè)面　142
7.9.1　為選項(xiàng)卡元素添加樣式　144
7.9.2　設(shè)置選項(xiàng)卡的選項(xiàng)　145
7.9.3　捕獲選項(xiàng)卡的事件　146
7.9.4　調(diào)用選項(xiàng)卡的方法　147
小結(jié)　148

第三部分　jQuery Mobile

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

第9章　使用jQuery Mobile來(lái)導(dǎo)航頁(yè)面　165
9.1　技巧：搭建jQuery Mobile基礎(chǔ)頁(yè)面　165
9.2　技巧：用單個(gè)HTML文件服務(wù)多張頁(yè)面　166
9.3　技巧：更改標(biāo)題元素　168
9.4　技巧：使用AJAX加載外部頁(yè)面　169
9.5　技巧：顯示頁(yè)面正在加載的信息　171
9.6　技巧：不使用AJAX而鏈接至外部頁(yè)面　173
9.7　技巧：指定過(guò)渡動(dòng)畫(huà)　174
9.8　技巧：指定自定義的過(guò)渡動(dòng)畫(huà)　175
9.9　技巧：監(jiān)聽(tīng)Mobile事件　177
9.10　技巧：生成回退按鈕　180
9.11　技巧：在頁(yè)面下方添加footer　181
9.12　技巧：跨頁(yè)面時(shí)固定footer　183
9.13　技巧：將footer的位置保持固定　184
9.14　技巧：隱藏和顯示footer　186
9.15　技巧：優(yōu)化header和footer以便全屏查看　188
9.16　技巧：使用主題來(lái)更改配色方案　189
9.17　技巧：使用多個(gè)列　191
9.18　技巧：利用JavaScript調(diào)用來(lái)變更頁(yè)面　192
9.19　技巧：利用JavaScript調(diào)用加載頁(yè)面　195
9.20　技巧：向jQuery Mobile中的DOM結(jié)點(diǎn)添加數(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來(lái)顯示和隱藏元素　207
10.6　技巧：使用collapsible集合來(lái)添加折疊菜單的行為　209
10.7　技巧：使用表單字段來(lái)獲取基本的文本框　210
10.8　技巧：獲取日歷輸入框　211
10.9　技巧：顯示輸入框時(shí)使用替代鍵盤(pán)　213
10.10　技巧：顯示專門(mén)的輸入框　214
10.11　技巧：使用滑塊來(lái)獲取整數(shù)　216
10.12　技巧：使用快速開(kāi)關(guān)來(lái)設(shè)置二進(jìn)制值　217
10.13　技巧：使用單選框選取單個(gè)元素　218
10.14　技巧：使用復(fù)選框選取多個(gè)元素　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)建簡(jiǎn)單的靜態(tài)插件　236
11.2　技巧：創(chuàng)建簡(jiǎn)單的“有上下文”的插件　237
11.3　技巧：鏈接jQuery函數(shù)和插件　238
11.4　技巧：參數(shù)化插件　239
11.5　技巧：提供默認(rèn)參數(shù)　240
11.6　技巧：使用方法來(lái)操作插件　242
11.7　技巧：創(chuàng)建“創(chuàng)建插件的插件”　244
11.8　技巧：注冊(cè)和調(diào)用回調(diào)函數(shù)　246
11.9　技巧：向回調(diào)函數(shù)傳遞上下文　247
11.10　技巧：返回Deferred對(duì)象來(lái)分別調(diào)用成功和出錯(cuò)時(shí)的回調(diào)函數(shù)　249
11.11　技巧：返回Promise來(lái)保護(hù)內(nèi)部實(shí)現(xiàn)　250
11.12　技巧：演示Promise 的保護(hù)機(jī)制　251
11.13　技巧：使用Promise來(lái)控制流的結(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　技巧：使用滾動(dòng)偵測(cè)　263
12.4　技巧：變換選項(xiàng)卡　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　技巧：將輸入提示用于自動(dòng)補(bǔ)全　278
小結(jié)　280