《jQuery权威指南（第2版）》示例源代码

本书第二版结合jQuery的最新技术，一方面对第1版中原有的内容进行了修订和增补，另外一方面结合jQuery在HTML 5和移动开发领域的应用增加了部分新内容和新案例。

全书一共包含5个部分：第一部分全面而详细地讲解了选择器、DOM操作、事件、动画和效果、实用工具函数、与服务器交互、插件等jQuery基础知识；第二部分以迭代的方式讲述了3个经典的实例；第三部分是本书的内容升华，既讲解了jQuery最新的界面组件，而且还讲解了jQuery的调试与测试，以及jQuery与.NET技术的结合，最为重要的是，本书最后还介绍了大量jQuery常用技巧和编程最佳实践。第4部分讲解了jQuery与HTML 5的结合使用，以及jQuery Mobile框架的详细使用。第5部分有3个综合性的案例。

封面图

目录

• 前言
• 第1章jQuery简介1
• 1.1认识jQuery2
• 1.1.1jQuery基本功能2
• 1.1.2jQuery 1.8 新增功能与特征3
• 1.2搭建jQuery开发环境3
• 1.2.1下载jQuery文件库3
• 1.2.2引入jQuery文件库4
• 1.2.3编写第一个简单的jQuery程序4
• 1.3jQuery程序的代码风格5
• 1.3.1“$”美元符的使用5
• 1.3.2事件操作链接式书写6
• 1.4jQuery简单应用7
• 1.4.1jQuery访问DOM对象7
• 1.4.2jQuery控制DOM对象8
• 1.4.3jQuery控制页面CSS10
• 1.5本章小结11
• 第2章jQuery选择器12
• 2.1选择器的优势13
• 2.1.1代码更简单13
• 2.1.2完善的检测机制15
• 2.2jQuery选择器的类型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操作DOM40
• 3.1DOM树状模型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.1ready()方法的工作原理78
• 4.2.2ready()方法的几种写法78
• 4.3绑定事件79
• 4.3.1使用bind()方法绑定事件79
• 4.3.2通过映射方式绑定事件81
• 4.4切换事件83
• 4.4.1hover()方法83
• 4.4.2toggle()方法84
• 4.5移除事件86
• 4.5.1unbind()方法移除元素绑定事件86
• 4.5.2unbind()方法移除自定义事件88
• 4.6其他事件88
• 4.6.1one()方法88
• 4.6.2trigger ()方法89
• 4.7jQuery中的事件应用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.1show()与hide()方法114
• 5.1.2动画效果的show()与hide()方法116
• 5.1.3toggle()方法117
• 5.2滑动119
• 5.2.1slideDown()与slideUp()方法119
• 5.2.2slideToggle()方法122
• 5.3淡入淡出123
• 5.3.1fadeIn()与fadeOut()方法123
• 5.3.2fadeTo()方法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.2jQuery中的load()方法147
• 6.1.3jQuery中的全局函数getJSON()148
• 6.1.4jQuery中的全局函数getScript()150
• 6.1.5jQuery中异步加载XML文档152
• 6.2请求服务器数据154
• 6.2.1$.get()请求数据155
• 6.2.2$.post()请求数据156
• 6.2.3serialize()序列化表单158
• 6.3$.ajax()方法161
• 6.3.1$.ajax()中的参数及使用方法161
• 6.3.2$.ajax()在数据交互中的应用162
• 6.3.3$.ajaxSetup()设置全局Ajax164
• 6.4Ajax中的全局事件167
• 6.4.1Ajax全局事件的参数及功能167
• 6.4.2ajaxStart与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.1jQuery调用JSON数据179
• 7.1.1JSON数据的基础知识179
• 7.1.2jQuery读取JSON数据180
• 7.1.3jQuery 遍历JSON 数据182
• 7.1.4jQuery 操作JSON 数据185
• 7.2jQuery调用XML数据187
• 7.2.1使用传统JavaScript调用XML的方法187
• 7.2.2jQuery 解析XML 数据189
• 7.2.3jQuery读取XML 数据191
• 7.2.4jQuery操作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.2jQuery常用插件208
• 8.2.1验证插件validate208
• 8.2.2表单插件form211
• 8.2.3Cookie插件cookie213
• 8.2.4搜索插件AutoComplete216
• 8.2.5图片灯箱插件NotesForLightBox220
• 8.2.6右键菜单插件ContextMenu223
• 8.2.7图片放大镜插件jQZoom227
• 8.2.8图片切换插件Nivo Slider229
• 8.2.9动画表格排序插件TableSort233
• 8.2.10进度条插件ProgressBar236
• 8.2.11页面加载遮盖插件LoadMask239
• 8.2.12数据分页插件Pagination242
• 8.2.13消息通知条插件Activebar2248
• 8.2.14滚动条插件NiceScroll250
• 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 UI270
• 9.2jQuery UI交互性插件271
• 9.2.1拖曳插件draggable271
• 9.2.2放置插件droppable273
• 9.2.3排序插件sortable276
• 9.3jQuery UI微型插件278
• 9.3.1折叠面板插件accordion278
• 9.3.2日务插件datepicker281
• 9.3.3选项卡插件tabs285
• 9.3.4对话框插件dialog288
• 9.4jQuery UI 1.9新增功能 293
• 9.4.1菜单工具插件menu294
• 9.4.2微调按钮插件spinner297
• 9.4.3工具提示插件tooltip301
• 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.6URL操作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.5jQuery集合处理功能361
• 11.6常用自定义方法与插件363
• 11.6.1自定义选择器363
• 11.6.2自定义样式365
• 11.6.3自定义插件366
• 11.7本章小结369
• 第12章jQuery性能优化370
• 12.1jQuery性能优化常用策略371
• 12.1.1优先使用ID与标记选择器371
• 12.1.2使用jQuery对象缓存372
• 12.1.3正确使用选择器373
• 12.1.4使用最新版本的jQuery374
• 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.5jQuery库与其他库冲突的解决方案390
• 12.5.1jQuery在其他库前导入390
• 12.5.2jQuery在其他库后导入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 Mobile428
• 14.1.1jQuery Mobile框架简介428
• 14.1.2jQuery Mobile工作原理428
• 14.1.3开发第一个jQuery Mobile页面428
• 14.2jQuery 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.3jQuery 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-2jQuery事件的链式写法6
• 示例1-3控制DOM对象8
• 示例1-4jQuery控制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操作DOM40
• 示例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()方法全局设置Ajax165
• 示例6-11jQuery中的全局事件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-5jQuery 解析XML 数据189
• 示例7-6jQuery 读取XML 数据191
• 示例7-7jQuery 操作XML 数据194
• 第8章jQuery常用插件206
• 示例8-1validate插件的使用208
• 示例8-2form插件的使用211
• 示例8-3cookie插件的使用214
• 示例8-4AutoComplete插件的使用216
• 示例8-5NotesForLightBox插件的使用220
• 示例8-6ContextMenu插件的使用223
• 示例8-7jQZoom插件的使用227
• 示例8-8Nivo Slider插件的使用229
• 示例8-9TableSort插件的使用233
• 示例8-10ProgressBar插件的使用236
• 示例8-11LoadMask插件的使用239
• 示例8-12Pagination插件的使用242
• 示例8-13Activebar2插件的使用248
• 示例8-14NiceScroll插件的使用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-8jQuery集合处理功能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-8DOM对象与jQuery对象的类型转换388
• 示例12-9jQuery先于其他库导入“$”的使用权390
• 示例12-10jQuery后于其他库导入“$”的使用权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-9jQuery Mobile中方法的调用444
• 示例14-10jQuery Mobile中事件的触发446
• 示例14-11jQuery Mobile中选择主题449