前言
第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
· · · · · · (
收起)
