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

目　录

第一部分　核心基础

第1章　jQuery入门　2
1.1　技巧：jQuery基本使用简介　2
1.2　技巧：和其他库一起使用jQuery　4
1.3　技巧：检测jQuery版本　5
1.4　技巧：使用each()迭代数组　6
1.5　技巧：使用map()操作数组　7
1.6　技巧：使用数组元素　8
1.7　技巧：使用index()获取元素的位置　10
1.8　技巧：使用grep()在数组中查找元素　11
1.9　技巧：使用length()检测元素集的大小　12
1.10　技巧：获取HTML5的data-属性　12
1.11　技巧：使用data()存储元素数据　13
1.12　技巧：使用removeData()移除元素数据　14
1.13　技巧：检验和操作变量　16
1.14　技巧：使用extend()扩展对象　18
1.15　技巧：序列化表单中的数据　19
1.16　技巧：检测浏览器支持的特性　20
小结　21

第2章　选取元素　22
2.1　技巧：使用add()合并两个元素集　22
2.2　技巧：使用filter()优化选取集　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　技巧：创建自定义选择器　31
2.11　技巧：限制选取上下文的范围　32
小结　33

第3章　修改页面　34
3.1　技巧：添加类　34
3.2　示例：移除类　35
3.3　技巧：生成类名　36
3.4　技巧：更改property和attribute　37
3.5　技巧：更改元素的HTML内容　39
3.6　技巧：使用append()和appendTo()添加内容　40
3.7　示例：添加函数的返回结果　41
3.8　技巧：使用prepend()和prependTo()添加内容　42
3.9　技巧：使用jQuery动态生成HTML　43
3.10　技巧：添加和分离元素　44
3.11　技巧：使用clone()复制元素　45
3.12　技巧：在指定的位置插入元素　47
3.13　示例：向上和向下移动列表项　48
3.14　技巧：移除元素　49
3.15　技巧：包裹和解包元素　51
小结　53

第4章　监听和响应事件　54
4.1　技巧：监听鼠标事件　54
4.2　示例：在画布上绘图　56
4.3　技巧：监听键盘事件　57
4.4　技巧：监听表单事件　59
4.5　技巧：监听滚轮事件　60
4.6　技巧：使用live()和die()添加中枢事件监听器　61
4.7　技巧：使用delegate()将事件委托给指定的祖先元素　63
4.8　技巧：使用proxy()更改函数的执行上下文　65
小结　66

第5章　与服务器通信　67
5.1　技巧：使用Node.js安装示例服务器　67
5.2　技巧：执行GET请求　69
5.3　技巧：直接加载HTML　70
5.4　技巧：使用Promise处理结果　71
5.5　技巧：处理服务器错误　72
5.6　技巧：捕获“页面未找到”结果　73
5.7　技巧：处理页面重定向　74
5.8　技巧：设置请求的超时时间　76
5.9　技巧：传递HTTP首部　77
5.10　示例：在服务器端验证表单输入　78
5.11　技巧：加载XML　79
5.12　技巧：监听AJAX事件　80
5.13　技巧：从外部服务器读取JSONP　81
小结　82

第二部分　UI

第6章　与用户交互　84
6.1　下载和安装jQuery UI　84
6.2　技巧：拖曳元素　85
6.2.1　为可拖曳元素添加样式　85
6.2.2　设置可拖曳组件的选项　86
6.2.3　捕获可拖曳组件的事件　89
6.2.4　调用可拖曳组件的方法　90
6.3　技巧：放置元素　91
6.3.1　为可放置元素添加样式　92
6.3.2　设置可放置组件的选项　92
6.3.3　捕获可放置组件的事件　93
6.3.4　调用可放置组件的方法　94
6.4　技巧：使用可排序组件更改元素的顺序　94
6.4.1　为可排序元素添加样式　95
6.4.2　设置可排序组件的选项　96
6.4.3　捕获可排序组件的事件　97
6.4.4　调用可排序组件的方法　100
6.5　示例：对树结构中的元素排序　100
6.6　技巧：从无序列表中选取元素　101
6.6.1　为可选取元素添加样式　103
6.6.2　设置可选取组件的选项　103
6.6.3　捕获可选取组件的事件　103
6.6.4　调用可选取组件的方法　105
6.7　示例：在树结构中选取元素　105
6.8　技巧：调整元素大小　106
6.8.1　为可调整大小元素添加样式　107
6.8.2　设置可调整大小组件的选项　107
6.8.3　捕获可调整大小组件的事件　108
6.8.4　调用可调整大小组件的方法　109
小结　109

第7章　与微件交互　110
7.1　技巧：使用折叠菜单微件组织内容　110
7.1.1　为折叠菜单元素添加样式　111
7.1.2　设置折叠菜单的选项　112
7.1.3　捕获折叠菜单的事件　114
7.1.4　调用折叠菜单的方法　115
7.2　技巧：使用自动补全微件提示输入值　116
7.2.1　为自动补全元素添加样式　117
7.2.2　设置自动补全的选项　117
7.2.3　捕获自动补全的事件　119
7.2.4　调用自动补全的方法　120
7.3　技巧：将元素转换为按钮微件　120
7.3.1　为按钮元素添加样式　121
7.3.2　设置按钮的选项　122
7.3.3　捕获按钮的事件　123
7.3.4　调用按钮的方法　123
7.4　示例：使用按钮集装饰单选框　123
7.5　技巧：使用日历微件选择日期　124
7.5.1　为日历元素添加样式　125
7.5.2　设置日历的选项　126
7.5.3　捕获日历的事件　129
7.5.4　调用日历的方法　130
7.6　技巧：使用对话框微件引起注意　131
7.6.1　为对话框元素添加样式　132
7.6.2　设置对话框的选项　133
7.6.3　捕获对话框的事件　134
7.6.4　调用对话框的方法　136
7.7　技巧：使用进度条微件显示进程的状态　137
7.7.1　为进度条元素添加样式　138
7.7.2　设置进度条的选项　138
7.7.3　捕获进度条的事件　138
7.7.4　调用进度条的方法　139
7.8　技巧：使用滑块微件获取数字　139
7.8.1　为滑块元素添加样式　140
7.8.2　设置滑块的选项　140
7.8.3　捕获滑块的事件　141
7.8.4　调用滑块的方法　142
7.9　技巧：使用选项卡微件导航页面　142
7.9.1　为选项卡元素添加样式　144
7.9.2　设置选项卡的选项　145
7.9.3　捕获选项卡的事件　146
7.9.4　调用选项卡的方法　147
小结　148

第三部分　jQuery Mobile

第8章　更改外观　150
8.1　更改jQuery UI组件的样式　150
8.2　使用jQuery Core创建动画　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中的所有缓动函数　157
8.8　技巧：显示jQuery UI中的所有图标　159
8.9　技巧：使用Promise在动画结束时执行代码　161
8.10　技巧：使用queue和dequeue在动画之间执行代码　162
小结　164

第9章　使用jQuery Mobile来导航页面　165
9.1　技巧：搭建jQuery Mobile基础页面　165
9.2　技巧：用单个HTML文件服务多张页面　166
9.3　技巧：更改标题元素　168
9.4　技巧：使用AJAX加载外部页面　169
9.5　技巧：显示页面正在加载的信息　171
9.6　技巧：不使用AJAX而链接至外部页面　173
9.7　技巧：指定过渡动画　174
9.8　技巧：指定自定义的过渡动画　175
9.9　技巧：监听Mobile事件　177
9.10　技巧：生成回退按钮　180
9.11　技巧：在页面下方添加footer　181
9.12　技巧：跨页面时固定footer　183
9.13　技巧：将footer的位置保持固定　184
9.14　技巧：隐藏和显示footer　186
9.15　技巧：优化header和footer以便全屏查看　188
9.16　技巧：使用主题来更改配色方案　189
9.17　技巧：使用多个列　191
9.18　技巧：利用JavaScript调用来变更页面　192
9.19　技巧：利用JavaScript调用加载页面　195
9.20　技巧：向jQuery Mobile中的DOM结点添加数据　196
9.21　技巧：利用jQuery Mobile的辅助函数　197
小结　200

第10章　与jQuery Mobile交互　201
10.1　技巧：在content里面显示工具栏　201
10.2　技巧：显示警告栏　202
10.3　技巧：向footer元素中添加菜单栏　203
10.4　技巧：使用导航栏进行导航　204
10.5　技巧：使用collapsible来显示和隐藏元素　207
10.6　技巧：使用collapsible集合来添加折叠菜单的行为　209
10.7　技巧：使用表单字段来获取基本的文本框　210
10.8　技巧：获取日历输入框　211
10.9　技巧：显示输入框时使用替代键盘　213
10.10　技巧：显示专门的输入框　214
10.11　技巧：使用滑块来获取整数　216
10.12　技巧：使用快速开关来设置二进制值　217
10.13　技巧：使用单选框选取单个元素　218
10.14　技巧：使用复选框选取多个元素　219
10.15　技巧：从下拉列表选取元素　221
10.16　技巧：关闭jQuery Mobile而显示原生的表单　223
10.17　技巧：显示元素列表　224
10.18　技巧：筛选列表元素　232
10.19　技巧：将表单元素按列表分组　233
小结　234

第四部分　插件

第11章　创建插件　236
11.1　技巧：构建简单的静态插件　236
11.2　技巧：创建简单的“有上下文”的插件　237
11.3　技巧：链接jQuery函数和插件　238
11.4　技巧：参数化插件　239
11.5　技巧：提供默认参数　240
11.6　技巧：使用方法来操作插件　242
11.7　技巧：创建“创建插件的插件”　244
11.8　技巧：注册和调用回调函数　246
11.9　技巧：向回调函数传递上下文　247
11.10　技巧：返回Deferred对象来分别调用成功和出错时的回调函数　249
11.11　技巧：返回Promise来保护内部实现　250
11.12　技巧：演示Promise 的保护机制　251
11.13　技巧：使用Promise来控制流的结构　252
11.14　技巧：在调用最后的回调函数之前显示进度　253
11.15　技巧：向回调函数传递上下文　255
11.16　技巧：向进度函数传递上下文　256
小结　257

第12章　使用第三方插件　259
12.1　技巧：显示模态框　259
12.2　技巧：使用下拉菜单　261
12.3　技巧：使用滚动侦测　263
12.4　技巧：变换选项卡　265
12.5　技巧：添加工具提示　267
12.6　技巧：添加提示面板　269
12.7　技巧：警告用户　270
12.8　技巧：按钮控件　272
12.9　技巧：折叠内容　274
12.10　技巧：将内容置于轮播插件中　276
12.11　技巧：将输入提示用于自动补全　278
小结　280