《jQuery权威指南》
作者：陶国荣
定价：59.00元
出版时间：2011年1月
chinapub预订：http://www.china-pub.com/197457
配套源代码下载：http://mrcjiong.icode.csdn.net/source/2960801
内容简介：
内容新颖，基于jQuery的最新版本撰写，所有新功能和新特性一览无余；内容全面，不仅讲解了jQuery技术本身的方方面面，而且还包括与jQuery相关的扩展知识；实战性强，不仅每个知识点都配有完整的小案例，而且还有两个综合性的案例。本书不仅能满足读者系统学习理论知识的需求，还能满足需要充分实践的需求。
《jQuery权威指南》一共分为11章，首先以示例的方式对jQuery做了全局性的介绍，以便于为读者建立jQuery的大局观，这对初学者尤为重要；其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用，以及各种常用的jQuery插件的使用方法和技巧，所有这些知识点都配有完整的示例（包括需求分析、代码实现和结果展示三部分）；再接着对jQuery UI和jQuery实用工具函数等扩展知识，以及jQuery的开发技巧与性能优化等方面的重要知识做了详尽的阐述；最后以两个具有代表性的综合案例结束全书，希望能帮助读者将前面所学的理论知识真正贯穿于实践中，迅速进入jQuery的殿堂。
作者简介：
陶国荣，资深Web技术专家，有10余年开发经验，是国内较早专业从事Web开发的一线技术人员和培训讲师。醉心于对JavaScript、jQuery和Ajax等Web开发技术的研究和实践，并长期专注于HTML页面的优化与用户体验的研究，在页面框架搭建、数据流向分析、页面静态优化方面拥有丰富的实践经验。此外，他还是微软技术方面的专家，精通C#、ASP.NET 和SQL Server等技术，出版相关著作多部。
《jQuery权威指南》前言
“工欲善其事，必先利其器”。作为一名从事Web开发多年的工作者，我对每一种新技术的出现与应用都充满了渴望与期待，渴望它能解决现存疑难，进一步提高程序开发的效率；期待它能超越旧俗，引领技术未来的发展方向。近年来，Web开发领域的新技术和新工具层出不穷，它们的出现极大地推动了Web开发技术的发展，其中jQuery的诞生在Web技术的发展进程中具有划时代的意义。
jQuery发布于2006年，它因为易于使用、功能强大、展现优雅、兼容性极佳而迅速赢得了Web开发者的钟爱，不断地吸引着全球开发者社区的技术爱好者、精英和专家们加入其阵营。这也使得它在众多的JavaScript框架中脱颖而出，几近成为Web开发领域的事实标准。恰好是在2006年，jQuery也深深地吸引了我，令我从此深陷其中。
随着Web开发技术的发展，以及用户对应用体验的要求日益提高，当我们要开发一个Web应用时，不仅仅只是要考虑其功能是否足够完备，更重要的是要考虑如何才能提高用户的体验满意度。这是理性的回归，也是Web开发技术发展的必然趋势，而jQuery恰恰是满足这一理性需求的坚实利刃。
虽然jQuery使用简单，但它毕竟是一门新的技术，与传统的JavaScript在性能与语法上存在诸多差异，需要相应的书籍来引导开发者们迅速而有效地掌握它，并能真正付诸实践。综观现在已经出版的中文类jQuery图书，不是简单的概念性介绍，就是缺乏真正的实践指导，而且版本相对陈旧。为了让所有还没有完全掌握jQuery技术的开发者能迅速步入jQuery的殿堂，《jQuery权威指南》诞生了，相信它不会让你失望。
本书特点
与国内目前已经出版的同类书相比较，本书具有以下几个独有的特点：
基于jQuery的最新版本撰写，完美地展现了jQuery最新版本的功能和特性。
内容全面、丰富、翔实，不仅由浅入深地讲解了jQuery的所有必备基础知识，还介绍了jQuery UI等扩展知识以及jQuery开发中的技巧与性能优化方面的高级知识。
本书极其注重实战，因为动手实践才是掌握一门新技术的最有效途径。不仅书中的每一个小知识点都配有精心选择的小案例（总共100多个），而且还有两个非常实用的综合性案例。所有案例的讲解都非常详细，不仅有功能需求分析和完整实现代码，而且还有最终效果的展示，更重要的是，将所有理论知识都巧妙地贯穿于其中，非常易于读者理解。如果读者能在阅读本书的过程中逐一亲手实现这些案例，在实际开发中应该就具备相当的动手能力了。
本书面向的读者
本书适合所有希望迅速掌握jQuery并将之付诸实践的Web开发者阅读。
如何阅读本书
由于本书的结构是层进式的，章节之间有一定的关联，因此建议读者按章节的编排顺序逐章阅读。但在阅读本书的示例时，请尽量不要照抄书中的所有示例，而是重在理解代码的实现思路，自己动手开发相似功能的应用，并逐步完善其功能，这样才能真正领会示例所反映出的jQuery技术的理论本质。
联系作者
希望这部耗时数月、承载了我近4年jQuery开发心得和体会的拙著能给每一位阅读过它的读者带来技术上的提升和思路上的启发。非常希望能借本书出版的机会与国内热衷于jQuery技术的开发者交流，如果大家想联系我，欢迎给我发邮件：tao_guo_rong@163.com。
致谢
本书能顺利出版，首先要感谢机械工业出版社华章分社的编辑们，尤其是杨福川编辑。正是由于他们在我写作的整个过程中不断地给予专业的指导，才使得我整体的创作思路不断被提升和改进，使本书能保质保量地完成。同时，我还要感谢我的家人，正是他们的理解与默默支持，才使得我能全心写作、顺利完成本书的编写。
陶国荣
2010年11月
《jQuery权威指南》目录
第1章 jQuery开发入门/1
1.1 jQuery概述/2
1.1.1 认识jQuery /2
1.1.2 jQuery基本功能/2
1.1.3 搭建jQuery开发环境/3
1.1.4 编写第一个简单的jQuery应用/3
1.1.5 jQuery程序的代码风格/5
1.2 jQuery的简单应用/7
1.2.1 jQuery访问DOM对象/7
1.2.2 jQuery控制DOM对象/7
1.2.3 jQuery控制页面CSS /9
1.3 本章小结/11
第2章 jQuery 选择器/12
2.1 jQuery选择器概述/13
2.1.1 什么是选择器/13
2.1.2 选择器的优势/13
2.2 jQuery选择器详解/17
2.2.1 基本选择器/18
2.2.2 层次选择器/20
2.2.3 简单过滤选择器/22
2.2.4 内容过滤选择器/25
2.2.5 可见性过滤选择器/27
2.2.6 属性过滤选择器/28
2.2.7 子元素过滤选择器/30
2.2.8 表单对象属性过滤选择器/32
2.2.9 表单选择器/34
2.3 综合案例分析—导航条在项目中的应用/37
2.3.1 需求分析/37
2.3.2 效果界面/38
2.3.3 功能实现/38
2.3.4 代码分析/40
2.4 本章小结/41
第3章 jQuery操作DOM /42
3.1 DOM基础/43
3.2 访问元素/44
3.2.1 元素属性操作/45
3.2.2 元素内容操作/49
3.2.3 获取或设置元素值/51
3.2.4 元素样式操作/53
3.3 创建节点元素/58
3.4 插入节点/60
3.4.1 内部插入节点方法/60
3.4.2 外部插入节点方法/64
3.5 复制节点/66
3.6 替换节点/68
3.7 包裹节点/69
3.8 遍历元素/71
3.9 删除元素/73
3.10 综合案例分析—数据删除和图片预览在项目中的应用/75
3.10.1 需求分析/75
3.10.2 效果界面/75
3.10.3 功能实现/77
3.10.4 代码分析/80
3.11 本章小结/81
第4章 jQuery中的事件与应用/82
4.1 事件机制/83
4.2 页面载入事件/85
4.2.1 ready()方法的工作原理/85
4.2.2 ready()方法的几种相同写法/86
4.3 绑定事件/86
4.4 切换事件/90
4.4.1 hover()方法/90
4.4.2 toggle()方法/93
4.5 移除事件/94
4.6 其他事件/96
4.6.1 方法one() /97
4.6.2 方法trigger () /98
4.7 表单应用/100
4.7.1 文本框中的事件应用/100
4.7.2 下拉列表框中的事件应用/104
4.8 列表应用/109
4.9 网页选项卡的应用/114
4.10 综合案例分析—删除数据时的提示效果在项目中的应用/116
4.10.1 需求分析/116
4.10.2 效果界面/117
4.10.3 功能实现/118
4.10.4 代码分析/121
4.11 本章小结/123
第5章 jQuery的动画与特效/124
5.1 显示与隐藏/125
5.1.1 show()与hide()方法/125
5.1.2 动画效果的show()与hide()方法/126
5.1.3 toggle()方法/128
5.2 滑动/131
5.2.1 slideDown()与slideUp方法/131
5.2.2 slideToggle()方法/134
5.3 淡入淡出/135
5.3.1 fadeIn()与fadeOut()方法/135
5.3.2 fadeTo()方法/137
5.4 自定义动画/139
5.4.1 简单的动画/140
5.4.2 移动位置的动画/141
5.4.3 队列中的动画/144
5.4.4 动画停止和延时/146
5.5 动画效果综述/148
5.5.1 各种动画方法说明/148
5.5.2 使用animate()方法代替其他动画效果/148
5.6 综合案例分析—动画效果浏览相册中的图片/149
5.6.1 需求分析/149
5.6.2 效果界面/149
5.6.3 功能实现/151
5.6.4 代码分析/155
5.7 本章小结/158
第6章 Ajax在jQuery中的应用/159
6.1 加载异步数据/160
6.1.1 传统的JavaScript方法/160
6.1.2 jQuery中的load()方法/162
6.1.3 jQuery中的全局函数getJSON()/164
6.1.4 jQuery中的全局函数getScript()/166
6.1.5 jQuery中异步加载XML文档/168
6.2 请求服务器数据/170
6.2.1 $.get()请求数据/170
6.2.2 $.post()请求数据/172
6.2.3 serialize()序列化表单/175
6.3 $.ajax()方法/177
6.3.1 $.ajax()的基本概念/177
6.3.2 $.ajaxSetup()设置全局Ajax /181
6.4 Ajax中的全局事件/184
6.4.1 Ajax全局事件的基本概念/184
6.4.2 ajaxStart与ajaxStop全局事件/184
6.5 综合案例分析—用Ajax实现新闻点评即时更新/187
6.5.1 需求分析/187
6.5.2 效果界面/187
6.5.3 功能实现/189
6.5.4 代码分析/193
6.6 本章小结/196
第7章 jQuery常用插件/197
7.1 jQuery插件概述/198
7.2 验证插件validate /198
7.3 表单插件form /202
7.4 Cookie插件cookie /205
7.5 搜索插件AutoComplete /209
7.6 图片灯箱插件notesforlightbox /213
7.7 右键菜单插件contextmenu /216
7.8 图片放大镜插件jqzoom /222
7.9 自定义jQuery插件/224
7.9.1 插件的种类/225
7.9.2 插件开发要点/225
7.9.3 开发插件示例/226
7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232
7.10.1 需求分析/232
7.10.2 效果界面/233
7.10.3 功能实现/234
7.10.4 代码分析/236
7.11 本章小结/241
第8章 jQuery UI插件/242
8.1 认识jQuery UI /243
8.2 jQuery UI交互性插件/244
8.2.1 拖曳插件/244
8.2.2 放置/247
8.2.3 排序插件/250
8.3 jQuery UI微型插件/252
8.3.1 折叠面板插件/252
8.3.2 日历/255
8.3.3 选项卡插件/260
8.3.4 对话框插件/263
8.4 综合案例分析—使用jQuery UI插件以拖动方式管理相册/269
8.4.1 需求分析/269
8.4.2 效果界面/269
8.4.3 功能实现/270
8.4.4 代码分析/274
8.5 本章小结/277
第9章 jQuery实用工具函数/278
9.1 什么是工具函数/279
9.2 工具函数的分类/279
9.2.1 浏览器的检测/279
9.2.2 数组和对象的操作/284
9.2.3 字符串操作/291
9.2.4 测试操作/293
9.2.5 URL操作/297
9.3 工具函数的扩展/299
9.4 其他工具函数—$.proxy() /302
9.5 综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测/305
9.5.1 需求分析/305
9.5.2 效果界面/305
9.5.3 功能实现/306
9.5.4 代码分析/309
9.6 本章小结/311
第10章 jQuery性能优化与最佳实践/312
10.1 优化选择器执行的速度/313
10.1.1 优先使用ID与标记选择器/313
10.1.2 使用jQuery对象缓存/314
10.1.3 给选择器一个上下文/315
10.2 处理选择器中的不规范元素标志/317
10.2.1 选择器中含有特殊符号/317
10.2.2 选择器中含有空格符号/318
10.3 优化事件中的冒泡现象/319
10.4 使用data()方法缓存数据/321
10.5 解决jQuery库与其他库的冲突/326
10.5.1 jQuery在其他库前导入/326
10.5.2 jQuery在其他库后导入/328
10.6 使用子查询优化选择器性能/330
10.7 减少对DOM元素直接操作/332
10.8 正确区分DOM对象与jQuery对象/334
10.8.1 DOM对象与jQuery对象的定义/334
10.8.2 DOM对象与jQuery对象的类型转换/335
10.9 本章小结/337
第11章 综合案例开发/338
案例1：切割图片/339
案例2：在线聊天室/349
本章小结/365
《jQuery权威指南》示例目录
示例1-1 编写第一个简单的jQuery程序/4
示例1-2 jQuery事件的链式写法/5
示例1-3 控制DOM对象/7
示例1-4 jQuery控制CSS样式/10
第2章 jQuery 选择器/12
示例2-1 使用JavaScript实现隔行变色/13
示例2-2 使用jQuery选择器实现隔行变色/15
示例2-3 使用JavaScript输出文字信息/16
示例2-4 使用jQuery输出文字信息/17
示例2-5 使用jQuery基本选择器选择元素/18
示例2-6 使用jQuery层次选择器选择元素/20
示例2-7 使用jQuery基本过滤选择器选择元素/22
示例2-8 使用jQuery内容过滤选择器选择元素/25
示例2-9 使用jQuery可见性过滤选择器选择元素/27
示例2-10 使用jQuery属性过滤选择器选择元素/28
示例2-11 使用jQuery子元素过滤选择器选择元素/30
示例2-12 通过表单对象属性过滤选择器获取表单对象/32
示例2-13 使用jQuery表单过滤选择器获取元素/35
综合案例分析—导航条在项目中的应用/37
第3章 jQuery操作DOM /42
示例3-1 创建一个DOM页面文档/43
示例3-2 通过attr(name)方法获取元素的属性/45
示例3-3 设置元素的属性（一）/46
示例3-4 设置元素的属性（二）/48
示例3-5 设置或获取元素的内容/50
示例3-6 设置或获取元素的值/51
示例3-7 直接设置元素样式值/54
示例3-8 增加CSS类别/55
示例3-9 类别切换/57
示例3-10 动态创建节点元素/59
示例3-11 插入节点（一）/62
示例3-12 插入节点（二）/63
示例3-13 外部插入节点/65
示例3-14 复制元素节点/66
示例3-15 替换元素节点/68
示例3-16 包裹元素节点/70
示例3-17 遍历元素/72
示例3-18 删除元素/73
综合案例分析—数据删除和图片预览在项目中的应用/75
第4章 jQuery中的事件与应用/82
示例4-1 事件中的冒泡现象/83
示例4-2 用bind方法绑定事件/87
示例4-3 用映射方式绑定不同的事件/88
示例4-4 用hover方法绑定事件/91
示例4-5 用toggle方法绑定事件/93
示例4-6 用unbind方法移除事件/94
示例4-7 用one方法绑定事件/97
示例4-8 用trigger方法绑定事件/98
示例4-9 文本框中的事件应用/100
示例4-10 下拉列表框中的事件应用/104
示例4-11 列表中的导航菜单应用/109
示例4-12 网页选项卡的应用/114
综合案例分析—删除数据时的提示效果在项目中的应用/116
第5章 jQuery的动画与特效/124
示例5-1 show()与hide()方法简介125
示例5-2 动画效果的show()与hide()方法127
示例5-3 toggle()方法的使用/129
示例5-4 slideDown()与slideUp()方法/132
示例5-5 slideToggle()方法/134
示例5-6 fadeIn()和fadeOut()方法/136
示例5-7 fadeTo()方法/138
示例5-8 简单的动画/140
示例5-9 移动位置的动画/142
示例5-10 队列中的动画/144
示例5-11 动画停止和延时/146
综合案例分析—动画效果浏览相册中的图片/149
第6章 Ajax在jQuery中的应用/159
示例6-1 传统的JavaScript方法实现Ajax功能/160
示例6-2 load()方法实现异步获取数据/162
示例6-3 全局函数getJSON()实现异步获取数据/164
示例6-4 全局函数getScript()实现异步获取数据/166
示例6-5 全局函数get()实现异步获取XML文档数据/168
示例6-6 全局函数get ()向服务器请求数据/171
示例6-7 全局函数post ()向服务器请求数据/173
示例6-8 serialize()序列化表单/175
示例6-9 用$.ajax()方法发送请求/178
示例6-10 $.ajaxSetup()方法全局设置Ajax /181
示例6-11 jQuery中的全局事件/185
综合案例分析—用Ajax实现新闻点评即时更新/187
第7章 jQuery常用插件/197
示例7-1 验证插件的使用/199
示例7-2 表单插件的使用/203
示例7-3 cookie插件的使用/206
示例7-4 搜索插件的使用/209
示例7-5 图片灯箱插件的使用/213
示例7-6 右键菜单插件的使用/217
示例7-7 图片放大镜插件的使用/222
示例7-8 对象级别插件的开发/226
示例7-9 类级别插件的开发/229
综合案例分析—使用uploadify插件实现文件上传功能 /232
第8章 jQuery UI插件/242
示例8-1 使用draggable插件实现对象的拖曳操作/245
示例8-2 使用droppable插件实现对象的放置操作/247
示例8-3 使用sortable插件实现列表中表项的拖曳排序操作/250
示例8-4 使用accordion插件实现页面中多区域的折叠操作/253
示例8-5 使用datepicker插件实现日期选择的基本操作/256
示例8-6 使用datepicker插件实现分段时间的选择/258
示例8-7 使用tabs插件展示选项卡的基本功能/261
示例8-8 使用dialog插件弹出提示和确定信息对话框/264
综合案例分析—使用jQuery UI插件以拖动方式管理相册/269
第9章 jQuery实用工具函数/278
示例9-1 browser对象的使用/280
示例9-2 boxModel对象的使用/282
示例9-3 $.each()函数遍历数组/284
示例9-4 $.each()函数遍历对象/285
示例9-5 $. grep()函数筛选数据/287
示例9-6 $. map()函数变更数据/288
示例9-7 $.inArray()函数搜索数据/290
示例9-8 $.trim()函数除掉字符串左右两边的空格符/292
示例9-9 $.isEmptyObject()函数的使用/293
示例9-10 $.isPlainObject ()函数的使用/295
示例9-11 $.contains()函数的使用/296
示例9-12 使用函数$.param()对数组进行序列化/298
示例9-13 使用函数$.extend()扩展工具函数/300
示例9-14 使用函数$.proxy()改变事件函数的作用域/302
综合案例分析—使用jQuery扩展工具函数实现对字符串指定类型的检测/305
第10章 jQuery性能优化与最佳实践/312
示例10-1 在指定的查找范围内获取DOM元素/315
示例10-2 选择器中含有空格符与不含空格符的区别/318
示例10-3 事件中的target方法优化冒泡现象/320
示例10-4 使用data()方法在元素上存取移除数据/322
示例10-5 使用data()方法在元素上存取移除JSON格式的数据/323
示例10-6 解决jQuery库先于其他库导入时，变量“$”的使用权问题/326
示例10-7 解决jQuery库后于其他库导入时，变量“$”的使用权问题/328
示例10-8 使用子查询优化选择器性能/330
示例10-9 减少对DOM元素直接操作/332
示例10-10 DOM对象与jQuery对象的类型转换/335
第11章 综合案例开发/338
案例1：切割图片/339
案例2：在线聊天室/349
第1章 jQuery开发入门
本章内容
- jQuery概述
- jQuery的简单应用
- 本章小结
随着互联网的迅速发展，Web页面得到了广泛应用，但人们的需求已不仅限于页面的功能，而更多地注重页面展示形式和用户体验度。JavaScript语言可以很好地满足程序开发者的需求，帮助程序开发者开发出用户体验度很高的页面，因而越来越受到广大程序员的关注。jQuery是JavaScript库中的优秀一员，代码高效、兼容性强等特点使得它近年来风靡全球，越来越多的开发者痴迷其中。
1.1 jQuery概述
1.1.1 认识jQuery
Query是由美国人John Resig于2006年创建的一个开源项目，随着被人们熟知，越来越多的程序高手加入其中，完善并壮大其项目内容，如今已发展成为集JavaScript、CSS、DOM、Ajax于一体的强大框架体系。它的主旨是：以更少的代码，实现更多的功能（Write less，do more）。
1.1.2 jQuery基本功能
1．访问和操作DOM元素
使用jQuery库，可以很方便地获取和修改页面中的某元素，无论是删除、移动还是复制某元素，jQuery都提供了一整套方便、快捷的方法，既减少了代码的编写，又大大提高了用户对页面的体验度；其具体示例，我们将在后面的章节中陆续展示。
2. 控制页面样式
通过引入jQuery，程序开发人员可以很便捷地控制页面的CSS文件。浏览器对页面文件的兼容性，一直以来都是页面开发者最为头痛的事，而使用jQuery操作页面的样式却可以很好地兼容各种浏览器。
3. 对页面事件的处理
引入jQuery库后，可以使页面的表现层与功能开发分离，开发者更多地专注于程序的逻辑与功效；页面设计者侧重于页面的优化与用户体验。然后，通过事件绑定机制，可以很轻松地实现二者的结合。
4.大量插件在页面中的运用
在引入jQuery库后，还可以使用大量的插件来完善页面的功能和效果，如表单插件、UI插件，这些插件的使用极大地丰富了页的展示效果，使原来使用JavaScript代码遥不可及的功能通过插件的引入而轻松地实现。
5.与Ajax技术的完美结合
Ajax的异步读取服务器数据的方法，极大地方便了程序的开发，加深了用户的页面体验度；而引入jQuery库后，不仅完善了原有的功能，而且减少了代码的书写，通过其内部对象或函数，加上几行代码就可以实现复杂的功能。
综上所述，jQuery在页面中的功能还有很多，我们将在接下来的章节中一一介绍。
1.1.3 搭建jQuery开发环境
1.下载jQuery文件库
在jQuery的官方网站（http:// jquery.com）中，下载最新版本的jQuery文件库，其网站页面如图1-1所示。
图1-1 jQuery的官方网站
在网站中，选择大小为24KB的压缩包，单击Download（下载）按钮，便可以将最新版的jQuery框架下载到本地。目前（截止到2010年7月）最新版本为V1.4.2。
2.引入jQuery文件库
下载完jQuery框架文件后，并不需要任何安装，仅需要使用<script>文件导入标记，将jQuery框架文件jquery-1.4.2.min.js导入页面中即可。假设该文件下载后保存在项目文件夹Jscript中，那么，在页面的<head></head>中加入如下代码：
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
在页面的头部分，加入上述代码后，便完成了jQuery框架的引入，就可以开始我们的jQuery之旅了。
1.1.4 编写第一个简单的jQuery应用
首先，我们来编写一个简单的程序，参见下面的示例。
示例1-1 编写第一个简单的jQuery程序
（1）功能描述
在页面加载时，弹出一个模式对话框，显示“您好，欢迎来到jQuery世界”字样，单击“确定”按钮后关闭该窗口。
（2）实现代码
新建一个HTML文件1-1.html，加入如代码清单1-1所示的代码。
代码清单1-1 第一个简单的jQuery应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>第一个简单的jQuery程序</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("您好,欢迎来到jQuery世界");
})
</script>
</head>
<body>
</body>
</html>
在上述文件的代码中，有一段如下的代码：
$(document).ready(function(){
//程序段
})
该段代码类似于传统的JavaScript代码：
window.onload=function(){
//程序段
}
虽然上述两段代码在功能上可以互换，但它们之间又有许多区别：
执行时间不同：$(document).ready在页面框架下载完毕后就执行；而window.onload必须在页面全部加载完毕（包含图片下载）后才能执行。很明显，前者的执行效率高于后者。
执行数量不同：$(document).ready可以重复写多个，并且每次执行结果不同；而window.onload尽管可以执行多个，但仅输出最后一个执行结果，无法完成多个结果的输出。
$(document).ready(function(){})可以简写成$(function(){})，因此与下面的代码是等价的。
$(document).ready(function(){
//程序段
})
等价于
$(function(){
//程序段
})
（3）页面效果
HTML文件1-1.html最后实现的页面效果如图1-2所示。
图1-2 第一个jQuery程序运行后的页面效果
1.1.5 jQuery程序的代码风格
1．“$”美元符的使用
在jQuery程序中，使用最多的莫过于“$”美元符了，无论是页面元素的选择、功能函数的前缀，都必须使用该符号，可以说它是jQuery程序的标志。
2. 事件操作链接式书写
在编写页面某元素事件时，jQuery程序可以使用链接式的方式编写该元素的所有事件。为了更好地说明该书写方法的使用，我们通过一个示例加以阐述。
示例1-2 jQuery事件的链式写法
（1）功能描述
在页面中，有一个<div>标记，在该标记内，包含二个<div>标记，一个为主题，另一个为内容，页面首次加载时，被包含的内容<div>标记是不可见的，当用户单击主题<div>标记时，改变自身的背景色，并将内容<div>标记显示出来。
（2）实现代码
新建一个HTML文件1-2.html，加入如代码清单1-2所示的代码。
代码清单1-2 jQuery事件的链式写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery事件的链式写法</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divFrame{width:260px;border:solid 1px #666;
font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:5px;display:none}
.divCurrColor{ background-color:Red}
</style>
<script type="text/javascript">
$(function(){
$(".divTitle").click(function(){
$(this).addClass("divCurrColor")
.next(".divContent").css("display","block");
});
});
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">主题</div>
<div class="divContent">
<a href="#">链接一</a><br />
<a href="#">链接二</a><br />
<a href="#">链接三</a>
</div>
</div>
</body>
</html>
在上述文件的代码中，加粗的代码是链式写法。
代码功能说明：当用户单击Class名称为"divTitle"的元素时，自身增加名称为"divCurrColor"的样式；同时，将接下来的Class名称为"divContent"元素显示出来。可以看出，两个功能的实现通过"."符号链接在一起。
（3）页面效果
执行HTML文件1-2.html，实现的页面效果如图1-3所示。
图1-3 DIV元素单击前后的页面对比效果
1.2 jQuery的简单应用
1.2.1 jQuery访问DOM对象
1. 什么是DOM对象
DOM（Document Object Model，文本对象模型）的每一个页面都是一个DOM对象，通过传统的JavaScript方法访问页面中的元素，就是访问DOM对象。
例如：在页面中2个<div>标记元素，其代码如下：
<div id="divTmp">测试文本</div>
<div id="divOut"></div>
通过下面的JavaScript代码可以访问DOM对象和获取或设置其内容值：
var tDiv=document.getElementById("divTmp"); //获取DOM对象
var oDiv=document.getElementById("divOut"); //获取DOM对象
var cDiv=tDiv.innerHTML; //获取DOM对象中的内容
oDiv.innerHTML=cDiv; //设置DOM对象中的内容
如果执行上面的JavaScript代码，将在ID为"divOut"的标记中显示ID为"divTmp"的标记内容。
2. 什么是jQuery对象
在jQuery库中，通过本身自带的方法获取页面元素的对象，我们称之为jQuery对象；为了同样实现在ID为"divOut"的标记中显示ID为"divTmp"的标记内容，采用jQuery访问页面元素的方法，其实现的代码如下：
var tDiv=$("#divTmp"); //获取jQuery对象
var oDiv=$("#divOut"); //获取jQuery对象
var cDiv=tDiv.html(); //获取jQuery对象中的内容
oDiv.html(cDiv); //设置jQuery对象中的内容
通过代码的对比，可以看出jQuery对象访问方法比DOM对象访问方法更简单、高效，它们都实现同样的功能。
1.2.2 jQuery控制DOM对象
在介绍使用jQuery控制DOM对象前，先通过一个简单的示例，说明如何用传统的JavaScript方法访问DOM对象。
示例1-3 控制DOM对象
（1）功能描述
在页面中，用户输入姓名、性别和婚姻状况，单击“提交”按钮后，将获取到的数据信息显示在页面<div>标记中。
（2）实现代码
新建一个HTML文件1-3.html,加入如代码清单1-3所示的代码。
代码清单1-3 使用传统的JavaScript方法访问DOM对象
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>控制DOM对象</title>
<style type="text/css">
.divFrame{width:260px;border:solid 1px #666;
font-size:10pt}
.divTitle{background-color:#eee;padding:5px}
.divContent{padding:8px;font-size:9pt}
.divTip{width:244px;border:solid 1px #666;
padding:8px;font-size:9pt;
margin-top:5px;display:none}
.txtCss{border:solid 1px #ccc}
.divBtn{padding-top:5px}
.divBtn .btnCss{border:solid 1px #535353;width:60px}
</style>
<script type="text/javascript">
function btnClick(){
//获取文本框的值
var oTxtValue=document.getElementById("Text1").value;
//获取单选框按钮值
var oRdoValue=(Radio1.checked)?"男":"女";
//获取复选框按钮值
var oChkValue=(Checkbox1.checked)?"已婚":"未婚";
//显示提示文本元素
document.getElementById("divTip").style.display="block";
//设置文本元素的内容
document.getElementById("divTip").innerHTML=oTxtValue+"<br>"
+oRdoValue+"<br>"+oChkValue;
}
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">请输入如下信息</div>
<div class="divContent">
姓名：<input id="Text1" type="text" class="txtCss"/><br />
性别：<input id="Radio1" name="rdoSex" type="radio"
value="男" />男
<input id="Radio2" name="rdoSex" type="radio"
value="女" />女<br />
婚否：<input id="Checkbox1" type="checkbox" />
<div class="divBtn"><input id="Button1" type="button"
value="提交" class="btnCss"
onclick="btnClick();" />
</div>
</div>
</div>
<div id="divTip" class="divTip"></div>
</body>
</html>
在上面的代码中，使用传统的JavaScript方法获取用户输入的信息，并保存到变量中，最后通过document.getElementById("divTip").innerHTML方法显示所有的数据信息。下面将示例1-3中的JavaScript代码进行修改，引入jQuery库，通过jQuery中的方法获取元素的值，并将获取的数据显示出来。修改后的JavaScript代码如下所示：
...
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#btnSubmit").click(function(){
//获取文本框的值
var oTxtValue=$("#Text1").val();
//获取单选框按钮值
var oRdoValue=$("#Radio1").is (":checked")?"男":"女";
//获取复选框按钮值
var oChkValue=$("#Checkbox1").is (":checked")?"已婚":"未婚";
//显示提示文本元素和内容
$("#divTip").css("display","block").html(oTxtValue+"<br>"+oRdoValue+"<br>"+
oChkValue);
})
})
</script>
...
在修改后的JavaScript代码中，$("#Text1").val()在jQuery库中表示获取ID号为“Text1”的值；$("#Radio1").is (":checked")表示ID号为“Radio1”的单选按钮是否被选中，如果选中，则返回“男”，否则，返回“女”。可以看出，通过jQuery库中的方法访问或控制页面中的元素，比使用传统的JavaScript代码要简洁得多，并且还兼容各种浏览器。
（3）页面效果
最终实现的页面效果如图1-4所示。
1.2.3 jQuery控制页面CSS
在jQuery框架中，通过自带的JavaScript编程，提供全部的CSS3下的选择器，开发者可以首先定义自己的样式文件，然后通过jQuery中的addClass()方法将该样式轻松地添加到页面指定的某元素中，而不用考虑浏览器的兼容性。
图1-4 控制jQuery对象
下面通过一个简单的示例来介绍如何使用jQuery中的toggleClass(className)方法来实现页面样式的动态切换功能。
示例1-4 jQuery控制CSS样式
（1）功能描述
在页面中，增加一个<div>元素标记，当用户单击该元素时，变换其文本内容和背景色，再次单击时，恢复其初始的内容和背景色。
（2）实现代码
新建一个HTML文件1-4.html，加入如代码清单1-4所示的代码。
代码清单1-4 jQuery控制CSS样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery控制CSS样式</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
.divDefalut{width:260px;font-size:10pt;padding:5px}
.divClick{width:260px;border:solid 1px #666;
font-size:10pt;background-color:#eee;padding:5px}
</style>
<script type="text/javascript">
$(function(){
$(".divDefalut").click(function(){
$(this).toggleClass("divClick").html("点击后的样式");
});
});
</script>
</head>
<body>
<div class="divDefalut">点击前的样式</div>
</body>
</html>
（3）页面效果
HTML文件1-4.html执行后，最终实现的页面效果如图1-5所示。
图1-5 jQuery控制CSS
在jQuery库中，通过简单的几行代码，就可以实现传统JavaScript大量代码完成的功能，节省开发者的时间，提高工作效率。
1.3 本章小结
第2章 jQuery选择器
本章内容
- jQuery选择器概述
- jQuery选择器详解
- 综合案例分析—导航条在项目中的应用
- 本章小结
通过对第1章的介绍，相信大家对jQuery在前台页面中的应用有了一个初步的了解。在页面中为某个元素添加属性或事件时，必须先准确地找到该元素—在jQuery库中，可以通过选择器实现这一重要的核心功能。本章将详细介绍在jQuery中如何通过选择器快速定位元素的方法和技巧。
2.1 jQuery选择器概述
2.1.1 什么是选择器
jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对 DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。
2.1.2 选择器的优势
与传统的JavaScript获取页面元素和编写事务相比，jQuery选择器具有明显的优势，具体表现在以下两个方面：
- 代码更简单。
- 完善的检测机制。
下面将详细介绍这两个方面。
1.代码更简单
由于在jQuery库中，封装了大量可以通过选择器直接调用的方法或函数，使编写代码更加简单轻松，简单几行代码就可以实现较为复杂的功能。
下面通过一个实现表格隔行变色功能的示例，分别使用传统的JavaScript语言与jQuery语言加以说明。
示例2-1 使用JavaScript实现隔行变色
（1）功能描述
在页面中，通过一个<table>标记展示数据列表信息，在元素标记中，奇数行与偶数行的背景色不同，从而实现隔行变色的页面展示效果。
（2）实现代码
使用传统的JavaScript实现该页面功能。新建一个HTML文件2-1.html，加入如代码清单2-1所示的代码。
代码清单2-1 使用JavaScript实现隔行变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用JavaScript实现隔行变色</title>
<style type="text/css">
body{font-size:12px;text-align:center}
#tbStu{width:260px;border:solid 1px #666;
background-color:#eee}
#tbStu tr{line-height:23px}
#tbStu tr th{background-color:#ccc;color:#fff}
#tbStu .trOdd{background-color:#fff}
</style>
<script type="text/javascript">
window.onload=function(){
var oTb=document.getElementById("tbStu");
for(var i=0;i<oTb.rows.length-1;i++){
if(i%2){
oTb.rows[i].className="trOdd";
}
}
}
</script>
</head>
<body>
<table id="tbStu" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<th>学号</th><th>姓名</th><th>性别</th><th>总分</th>
</tr>
<!--奇数偶-->
<tr>
<td>1001</td><td>张小明</td><td>男</td><td>320</td>
</tr>
<!--偶数偶-->
<tr>
<td>1002</td><td>李明琪</td><td>女</td><td>350</td>
</tr>
<!--...-->
</tbody>
</table>
</body>
</html>
在代码清单2-1中，首先通过ID号获取表格元素，然后遍历表格的各行，根据行号的奇偶性，动态设置该行的背景色，从而实现隔行变色的页面效果。
页面中的JavaScript代码虽可以实现最终效果，但循环页面的元素会影响打开速度，并且代码较为复杂，如果使用jQuery选择器实现上述页面效果，则需要在页面中加入一些代码，详见下面的示例。
示例2-2 使用jQuery选择器实现隔行变色
新建一个HTML文件2-2.html，加入如代码清单2-2所示的代码。
代码清单2-2 使用jQuery选择器实现隔行变色
...
<head>
<title>使用jQuery选择器实现隔行变色</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
...省略样式代码
<script type="text/javascript">
$(function(){
$("#tbStu tr:nth-child(even)").addClass("trOdd");
})
</script>
</head>
...省略页面主体代码
从代码清单2-2中可以看出，使用jQuery选择器可以很快捷地定位页面中的某个元素，并设置该元素的相应属性，具有代码简单、执行效果高的优点。
（3）页面效果
虽然示例2-1和示例2-2中的代码不同，但都实现了页面数据隔行变色的功能，其最终实现的页面效果完全相同，如图2-1所示。
图2-1 页面数据隔行变色效果
2.完善的检测机制
在传统的JavaScript代码中，给页面中某元素设置事务时必须先找到该元素，然后赋予相应的属性或事件；如果该元素在页面中不存在或被前面代码所删除，那么浏览器将提示运行出错信息，影响后续代码的执行。因此，在JavaScript代码中，为了避免显示这样的出错信息，先要检测该元素是否存在，然后再运行其属性或事件代码，从而导致代码冗余，影响执行效率。
在jQuery选择器定位页面元素时，无需考虑所定位的元素在页面中是否存在，即使该元素不存在该元素，浏览器也不提示出错信息，极大地方便了代码的执行效率。
下面通过一个简单的示例分别使用JavaScript语言与jQuery语言来说明该检测机制在页面中的实现效果。
示例2-3 使用JavaScript输出文字信息
（1）功能描述
在页面<div>标记中输出一行“这是一个检测页面”的字符。
（2）实现代码
使用传统的JavaScript实现该页面功能。
新建一个HTML文件2-3.html，加入如代码清单2-3所示的代码。
代码清单2-3 使用JavaScript输出文字信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JavaScript代码检测页面元素</title>
<style type="text/css">
body{font-size:12px;text-align:center}
</style>
<script type="text/javascript">
window.onload=function(){
if(document.getElementById("divT"))
{
var oDiv=document.getElementById("divT");
oDiv.innerHTML="这是一个检测页面";
}
}
</script>
</head>
<body>
</body>
</html>
在JavaScript代码中，有一行代码如下：
if(document.getElementById("divT")){...}
该行代码用于检测所定位的页面元素是否存在，如果存在，则执行下面的代码，否则不执行；假设不编写该行代码检测元素的存在，则在浏览器中将出现如图2-2所示的出错提示信息。
图2-2 页面对象不存在的出错提示信息
如果将例2-3中的JavaScript代码改写成jQuery选择器方式获取页面元素，那么不需要检测元素是否存在，且页面正常执行，其修改后的代码如下例所示。
示例2-4 使用jQuery输出文字信息
新建一个HTML文件2-4.html，加入如代码清单2-4所示的代码。
代码清单2-4 使用jQuery输出文字信息
...
<head>
<title>jQuery代码检测页面元素</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
...省略样式代码
<script type="text/javascript">
$(function(){
$("#divT").html("这是一个检测页面");
})
</script>
</head>
...省略页面主体代码
2.2 jQuery选择器详解
根据所获取页面中元素的不同，可以将jQuery选择器分为：基本选择器、层次选择器、过滤选择器、表单选择器四大类。其中，在过滤选择器中又可分为：简单过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象属性过滤选择器6种。其分类结构如图2-3所示。
图2-3 jQuery选择器分类示意图
2.2.1 基本选择器
基本选择器是jQuery中使用最频繁的选择器，它由元素Id、Class、元素名、多个选择符组成，通过基本选择器可以实现大多数页面元素的查找，其详细说明如表2-1所示。
表2-1 基本选择器语法
下面通过示例2-5来介绍各种基本选择器在页面中使用的方法。
示例2-5 使用jQuery基本选择器选择元素
（1）功能描述
一个页面包含两个<div>标记，其中一个用于设置ID属性，另一个用于设置Class属性；我们再增加一个<span>标记，全部元素初始值均为隐藏，然后通过jQuery基本选择器显示相应的页面标记。
（2）实现代码
新建一个HTML文件2-5.html，加入如代码清单2-5所示的代码。
代码清单2-5 使用jQuery基本选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
.clsFrame{width:300px;height:100px}
.clsFrame div,span{display:none;float:left;
width:65px;height:65px;border:solid 1px #ccc;
margin:8px}
.clsOne{background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //ID匹配元素
$("#divOne").css("display","block");
})
$(function(){ //元素名匹配元素
$("div span").css("display","block");
})
$(function(){ //类匹配元素
$(".clsFrame .clsOne").css("display","block");
})
$(function(){ //匹配所有元素
$("*").css("display","block");
})
$(function(){ //合并匹配元素
$("#divOne,span").css("display","block");
})
</script>
</head>
<body>
<div class="clsFrame">
<div id="divOne">ID</div>
<div class="clsOne">CLASS</div>
<span>SPAN</span>
</div>
</body>
</html>
（3）页面效果
为了能更清楚地看到每个基本选择器执行后的结果，下面通过表格的方式展示页面效果，如表2-2所示。
表2-2 页面执行效果
2.2.2 层次选择器
层次选择器通过DOM元素间的层次关系获取元素，其主要的层次关系包括后代、父子、相邻、兄弟关系，通过其中某类关系可以方便快捷地定位元素，其详细说明如表2-3所示。
表2-3 层次选择器语法
说明 ancestor descendant与parent > child所选择的元素集合是不同的，前者的层次关系是祖先与后代，而后者是父子关系；另外，prev + next可以使用.next()代替，而prev ~ siblings可以使用nextAll()代替。
下面通过示例2-6来演示各种层次选择器在页面中选择DOM元素的方法。
示例2-6 使用jQuery层次选择器选择元素
（1）功能描述
在页面中，设置4块<div>标记，其中在第二块<div>中，添加1个<span>标记，在该<span>标记中又新增1个<span>标记，全部元素初始值均为隐藏，然后通过jQuery层次选择器，显示相应的页面标记。
（2）实现代码
新建一个HTML文件2-6.html，加入如代码清单2-6所示的代码。
代码清单2-6 使用jQuery层次选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery层次选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span{float:left;border:solid 1px #ccc;
margin:8px;display:none}
.clsFraA{width:65px;height:65px}
.clsFraP{width:45px;height:45px;background-color:#eee}
.clsFraC{width:25px;height:25px;background-color:#ddd}
</style>
<script type="text/javascript">
$(function(){ //匹配后代元素
$("#divMid").css("display","block");
$("div span").css("display","block");
})
$(function(){ //匹配子元素
$("#divMid").css("display","block");
$("div>span").css("display","block");
})
$(function(){ //匹配后面元素
$("#divMid + div").css("display","block");
$("#divMid").next().css("display","block");
})*/
$(function(){ //匹配所有后面元素
$("#divMid ~ div").css("display","block");
$("#divMid").nextAll().css("display","block");
})
$(function(){ //匹配所有相邻元素
$("#divMid").siblings("div")
.css("display","block");
})
</script>
</head>
<body>
<div class="clsFraA">Left</div>
<div class="clsFraA" id="divMid">
<span class="clsFraP" id="Span1">
<span class="clsFraC" id="Span2"></span>
</span>
</div>
<div class="clsFraA">Right_1</div>
<div class="clsFraA">Right_2</div>
</body>
</html>
（3）页面效果
代码清单2-6执行后的效果如表2-4所示。
表2-4 页面执行效果
说明 siblings()方法与选择器prev ~ siblings区别在于，前者获取全部的相邻元素，不分前后，而后者仅获取标记后面全部相邻元素，不能获取前面部分。
2.2.3 简单过滤选择器
过滤选择器根据某类过滤规则进行元素的匹配，书写时都以冒号（:）开头；简单过滤选择器是过滤选择器中使用最广泛的一种，其详细说明如表2-5所示。
表2-5 简单过滤选择器语法
下面通过示例2-7来介绍如何通过过滤选择器定位DOM元素的方法。
示例2-7 使用jQuery基本过滤选择器选择元素
（1）功能描述
在页面中，设置一个<h1>标记用于显示主题，创建<ul>标记并在其中放置四个<li>，再创建一个<span>标记，用于执行动画效果。通过简单过滤选择器获取元素，将选中的元素改变其类名称，从而突出其被选中的状态。
（2）实现代码
新建一个HTML文件2-7.html，加入如代码清单2-7所示的代码。
代码清单2-7 使用jQuery基本过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery基本过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{width:241px;height:83px;border:solid 1px #eee}
h1{font-size:13px}
ul{list-style-type:none;padding:0px}
.DefClass,.NotClass{height:23px;width:60px;
line-height:23px;float:left;
border-top:solid 1px #eee;border-bottom:solid 1px #eee}
.GetFocus{width:58px;border:solid 1px #666;
background-color:#eee}
#spnMove{width:238px;height:23px;line-height:23px;}
</style>
<script type="text/javascript">
$(function(){ //增加第一个元素的类别
$("li:first").addClass("GetFocus");
})
$(function(){ //增加最后一个元素的类别
$("li:last").addClass("GetFocus");
})
$(function(){ //增加去除所有与给定选择器匹配的元素类别
$("li:not(.NotClass)").addClass("GetFocus");
})
$(function(){ //增加所有索引值为偶数的元素类别,从0开始计数
$("li:even").addClass("GetFocus");
})
$(function(){ //增加所有索引值为奇数的元素类别,从0开始计数
$("li:odd").addClass("GetFocus");
})
$(function(){ //增加一个给定索引值的元素类别,从0开始计数
$("li:eq(1)").addClass("GetFocus");
})
$(function(){ //增加所有大于给定索引值的元素类别,从0开始计数
$("li:gt(1)").addClass("GetFocus");
})
$(function(){ //增加所有小于给定索引值的元素类别,从0开始计数
$("li:lt(4)").addClass("GetFocus");
})
$(function(){ //增加标题类元素类别
$("div h1").css("width","238");
$(":header").addClass("GetFocus");
})
$(function(){
animateIt(); //增加动画效果元素类别
$("#spnMove:animated").addClass("GetFocus");
})
function animateIt() { //动画效果
$("#spnMove").slideToggle("slow", animateIt);
}
</script>
</head>
<body>
<div>
<h1>基本过滤选择器</h1>
<ul>
<li class="DefClass">Item 0</li>
<li class="DefClass">Item 1</li>
<li class="NotClass">Item 2</li>
<li class="DefClass">Item 3</li>
</ul>
<span id="spnMove">Span Move</span>
</div>
</body>
</html>
（3）页面效果
代码清单2-7执行后的效果如表2-6所示。
表2-6 页面执行效果
说明 选择器animated在捕捉动画效果元素时，先自定义一个动画效果函数animateIt()，然后执行该函数，选择器才能获取动画效果元素，并增加其类别。
2.2.4 内容过滤选择器
内容过滤选择器根据元素中的文字内容或所包含的子元素特征获取元素，其文字内容可以模糊或绝对匹配进行元素定位，其详细说明如表2-7所示。
表2-7 内容过滤选择器语法
下面通过示例2-8来展示在页面中如何通过内容过虑选择器查找DOM元素的方法。
示例2-8 使用jQuery内容过滤选择器选择元素
（1）功能描述
在页面中，根据需要创建四个<div>标记，并在其中的<div>中新建一个<span>标记，其余<div>标记中输入内容（或为空），通过内容过滤选择器获取指定的元素，并显示在页面中。
（2）实现代码
新建一个HTML文件2-8.html，加入如代码清单2-8所示的代码。
代码清单2-8 使用jQuery内容过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery内容过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;
width:65px;height:65px;display:none}
span{float:left;border:solid 1px #ccc;margin:8px;
width:45px;height:45px;background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //显示包含给定文本的元素
$("div:contains('A')").css("display","block");
})
$(function(){ //显示所有不包含子元素或者文本的空元素
$("div:empty").css("display","block");
})
$(function(){ //显示含有选择器所匹配的元素
$("div:has(span)").css("display","block");
})
$(function(){ //显示含有子元素或者文本的元素
$("div:parent").css("display","block");
})
</script>
</head>
<body>
<div>ABCD</div>
<div><span></span></div>
<div>EFaH</div>
<div></div>
</body>
</html>
（3）页面效果
代码清单2-8执行后的效果如表2-8所示。
表2-8 页面执行效果
说明 在:contains(text)内容过滤选择器中，如果是查找字母，则有大小写的区别。
2.2.5 可见性过滤选择器
可见性过滤选择器根据元素是否可见的特征获取元素，其详细的说明如表2-9所示。
表2-9 可见性过滤选择器语法
下面通过示例2-9介绍如何使用可见性过虑选择器锁定DOM元素的方法。
示例2-9 使用jQuery可见性过滤选择器选择元素
（1）功能描述
在页面中，创建一个<span>和<div>标记，分别设置标记的display属性为“none”和“block”；然后根据可见性过滤选择器显示页面元素。
（2）实现代码
新建一个HTML文件2-9.html，加入如代码清单2-9所示的代码。
代码清单2-9 使用jQuery可见性过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery可见性过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div,span{float:left;border:solid 1px #ccc;
margin:8px;width:65px;height:65px}
.GetFocus{border:solid 1px #666;background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //增加所有可见元素类别
$("span:hidden").show();
$("div:visible").addClass("GetFocus");
})*/
$(function(){ //增加所有不可见元素类别
$("span:hidden").show().addClass("GetFocus");
})
</script>
</head>
<body>
<span style="display:none">Hidden</span>
<div>Visible</div>
</body>
</html>
（3）页面效果
代码清单2-9执行后的效果如表2-10所示。
表2-10 页面执行效果
说明 :hidden选择器所选择的不仅包括样式为display:none所有元素，而且还包括属性type=“hidden”和样式为visibility:hidden的所有元素。
2.2.6 属性过滤选择器
属性过滤选择器根据元素的某个属性获取元素，如ID号或匹配属性值的内容，并以“[”号开始、以“]”号结束。其详细的说明如表2-11所示。
表2-11 属性过滤选择器语法
下面通过示例2-10介绍使用属性过滤选择器获取DOM元素的方法。
示例2-10 使用jQuery属性过滤选择器选择元素
（1）功能描述
在页面中，增加四个<div>标记，并设置不同的ID和Title属性值，然后通过属性过滤选择器获取所指定的元素集合，并显示在页面中。
（2）实现代码
新建一个HTML文件2-10.html，加入如代码清单2-10所示的代码。
代码清单2-10 使用jQuery属性过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery属性过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{float:left;border:solid 1px #ccc;margin:8px;
width:65px;height:65px;display:none}
</style>
<script type="text/javascript">
$(function(){ //显示所有含有id属性的元素
$("div[id]").show(3000);
})
$(function(){ //显示所有属性title的值是"A"的元素
$("div[title='A']").show(3000);
})
$(function(){ //显示所有属性title的值不是"A"的元素
$("div[title!='A']").show(3000);
})
$(function(){ //显示所有属性title的值以"A"开始的元素
$("div[title^='A']").show(3000);
})
$(function(){ //显示所有属性title的值以"C"结束的元素
$("div[title$='C']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"的元素
$("div[title*='B']").show(3000);
})
$(function(){ //显示所有属性title的值中含有"B"
且属性id的值是"divAB"的元素
$("div[id='divAB'][title*='B']").show(3000);
})
</script>
</head>
<body>
<div id="divID">ID</div>
<div title="A">Title A</div>
<div id="divAB" title="AB">ID <br />Title AB</div>
<div title="ABC">Title ABC</div>
</body>
</html>
（3）页面效果
代码清单2-10执行后的效果如表2-12所示。
表2-12 页面执行效果
说明 show()是jQuery库中的一个显示元素函数，括号中的参数表示显示时间，单位是毫秒，show(3000)表示用3 000毫秒显示。
2.2.7 子元素过滤选择器
在页面开发过程中，常常遇到突出指定某行的需求。虽然使用基本过滤选择器:eq(index)可实现单个表格的显示，但不能满足大量数据和多个表格的选择需求。为了实现这样的功能，jQuery中可以通过子元素过滤选择器轻松获取所有父元素中指定的某个元素。其详细的说明如表2-13所示。
表2-13 子元素过滤选择器语法
下面通过示例2-11来演示使用子元素过滤选择器获取元素的过程。
示例2-11 使用jQuery子元素过滤选择器选择元素
（1）功能描述
在页面中，创建三个<ul>标记，前两个标记中设置四个<li>，后一个标记中设置一个<li>，通过子元素过滤选择器获取指定的页面元素，并改变其选择后的状态，显示在页面中。
（2）实现代码
新建一个HTML文件2-11.html，加入如代码清单2-11所示的代码。
代码清单2-11 使用jQuery子元素过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery子元素过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
ul{width:241px;list-style-type:none;padding:0px}
ul li{height:23px;width:60px;line-height:23px;
float:left;border-top:solid 1px #eee;
border-bottom:solid 1px #eee;margin-bottom:5px}
.GetFocus{width:58px;border:solid 1px #666;
background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //增加每个父元素下的第2个子元素类别
$("li:nth-child(2)").addClass("GetFocus");
})
/*$(function(){ //增加每个父元素下的第一个子元素类别
$("li:first-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下的最后一个子元素类别
$("li:last-child").addClass("GetFocus");
})
$(function(){ //增加每个父元素下只有一个子元素类别
$("li:only-child").addClass("GetFocus");
})*/
</script>
</head>
<body>
<ul>
<li>Item 1-0</li>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-0</li>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
</ul>
<ul>
<li>Item 3-0</li>
</ul>
</body>
</html>
（3）页面效果
代码清单2-11执行后的效果如表2-14所示。
表2-14 页面执行效果
2.2.8 表单对象属性过滤选择器
表单对象属性过滤选择器通过表单中的某对象属性特征获取该类元素，如enabled、disabled、checked、selected属性。其详细的说明如表2-15所示。
表2-15 表单对象属性过滤选择器语法
下面通过示例2-12来介绍通过表单对象属性过滤选择器获取表单对象的方法。
示例2-12 通过表单对象属性过滤选择器获取表单对象
（1）功能描述
在一个表单中，创建两个文本框对象，一个属性设置为enabled，另一个属性设置为disabled；再放置两个复选框对象，一个设置成被选中状态，另一个设置成未选中状态；同时新建一个列表框对象，并选中其中两项，通过表单对象属性过滤选择器获取某指定元素，并处理该元素。
（2）实现代码
新建一个HTML文件2-12.html，加入如代码清单2-12所示的代码。
代码清单2-12 使用jQuery表单对象属性过滤选择器选择元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery表单对象属性过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
div{display:none}
select{height:65px}
.clsIpt{width:100px;padding:3px}
.GetFocus{border:solid 1px #666;background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //增加表单中所有属性为可用的元素类别
$("#divA").show(3000);
$("#form1 input:enabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有属性为不可用的元素类别
$("#divA").show(3000);
$("#form1 input:disabled").addClass("GetFocus");
})
$(function(){ //增加表单中所有被选中的元素类别
$("#divB").show(3000);
$("#form1 input:checked").addClass("GetFocus");
})
$(function(){ //显示表单中所有被选中option的元素内容
$("#divC").show(3000);
$("#Span2").html("选中项是："+
$("select option:selected").text());
})
</script>
</head>
<body>
<form id="form1" style="width:241px">
<div id="divA">
<input type="text" value="可用文本框"
class="clsIpt" />
<input type="text" disabled="disabled"
value="不可用文本框" class="clsIpt" />
</div>
<div id="divB">
<input type="checkbox" checked="checked"
value="1" /> 选中
<input type="checkbox" value="0" /> 未选中
</div>
<div id="divC">
<select multiple="multiple">
<option value="0">Item 0</option>
<option value="1" selected="selected">
Item 1
</option>
<option value="2">Item 2</option>
<option value="3" selected="selected">
Item 3
</option>
</select>
<span id="Span2"></span>
</div>
</form>
</body>
</html>
（3）页面效果
代码清单2-12执行后的效果如表2-16所示。
表2-16 页面执行效果
2.2.9 表单选择器
无论是提交还是传递数据，表单在页面中的作用是显而易见的。通过表单进行数据的提交或处理，在前端页面开发中占据重要地位。因此，为了使用户能更加方便地、高效地使用表单，在jQuery选择器中引入表单选择器，该选择器专为表单量身打造，通过它可以在页面中快速定位某表单对象。其详细的说明如表2-17所示。
下面通过示例2-13来介绍使用表单选择器直接获取表单对象的方法。
表2-17 表单选择器语法
示例2-13 使用jQuery表单过滤选择器获取元素
（1）功能描述
在一个页面表单中，创建11种常用的表单对象，根据表单选择器，先显示出所有表单对象的总量，然后显示各种不同类型的表单对象。
（2）实现代码
新建一个HTML文件2-13.html，加入如代码清单2-13所示的代码。
代码清单2-13 使用jQuery表单过滤选择器获取元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>使用jQuery表单过滤选择器</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:12px;text-align:center}
form{width:241px}
textarea,select,button,input,span{display:none}
.btn {border:#666 1px solid;padding:2px;width:60px;
filter: progid:DXImageTransform.Microsoft.
Gradient(GradientType=0,StartColorStr=#ffffff,
EndColorStr=#ECE9D8);}
.txt{border:#666 1px solid;padding:3px}
.img{padding:2px;border:solid 1px #ccc}
.div{border:solid 1px #ccc;
background-color:#eee;padding:5px}
</style>
<script type="text/javascript">
$(function(){ //显示Input类型元素的总数量
$("#form1 div").html("表单共找出 Input 类型元素:"+
$("#form1 :input").length);
$("#form1 div").addClass("div");
})
$(function(){ //显示所有文本框对象
$("#form1 :text").show(3000);
})
$(function(){ //显示所有密码框对象
$("#form1 :password").show(3000);
})
$(function(){ //显示所有单选按钮对象
$("#form1 :radio").show(3000);
$("#form1 #Span1").show(3000);
})
$(function(){ //显示所有复选框对象
$("#form1 :checkbox").show(3000);
$("#form1 #Span2").show(3000);
})
$(function(){ //显示所有提交按钮对象
$("#form1 :submit").show(3000);
})
$(function(){ //显示所有图片域对象
$("#form1 :image").show(3000);
})
$(function(){ //显示所有重置按钮对象
$("#form1 :reset").show(3000);
})
$(function(){ //显示所有按钮对象
$("#form1 :button").show(3000);
})
$(function(){ //显示所有文件域对象
$("#form1 :file").show(3000);
})
</script>
</head>
<body>
<form id="form1">
<textarea class="txt"> TextArea</textarea>
<select><option value="0"> Item 0</option></select>
<input type="text" value="Text" class="txt"/>
<input type="password" value="PassWord" class="txt"/>
<input type="radio" /><span id="Span1"> Radio</span>
<input type="checkbox" />
<span id="Span2"> CheckBox</span>
<input type="submit" value="Submit" class="btn"/>
<input type="image" title="Image"
src="Images/logo.gif" class="img"/>
<input type="reset" value="Reset" class="btn"/>
<input type="button" value="Button" class="btn"/>
<input type="file" title="File" class="txt"/>
<div id="divShow"></div>
</form>
</body>
</html>
（3）页面效果
代码清单2-13执行后的效果如表2-18所示。
表2-18 页面执行效果
2.3 综合案例分析—导航条在项目中的应用
2.3.1 需求分析
本案例的需求主要有以下两点：
1）在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片也随之改变。
2）单击“简化”链接时，隐藏指定的内容，并将“简化”字样改变成“更多”，单击“更多”链接时，返回初始状态，并改变指定显示元素的背景色。
2.3.2 效果界面
案例实现的界面效果如图2-4、图2-5所示。
图2-4 单击导航条标题前后的界面
图2-5 单击超级链接“简化”和“更多”后的界面
2.3.3 功能实现
在项目中，新建一个HTML文件htmNav.html，加入如代码清单2-14所示的代码。
代码清单2-14 导航条在项目中的应用
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>导航条在项目中的应用</title>
<script language="javascript" type="text/javascript"
src="Jscript/jquery-1.4.2.min.js"></script>
<style>
body{font-size:13px}
#divFrame{border:solid 1px #666;
width:301px;overflow:hidden}
#divFrame .clsHead{background-color:#eee;padding:8px;
height:18px;cursor:hand}
#divFrame .clsHead h3{padding:0px;margin:0px;float:left}
#divFrame .clsHead span{float:right;margin-top:3px}
#divFrame .clsContent{padding:8px}
#divFrame .clsContent ul {list-style-type:none;
margin:0px;padding:0px}
#divFrame .clsContent ul li{ float:left;
width:95px;height:23px;line-height:23px}
#divFrame .clsBot{float:right;padding-top:5px;
padding-bottom:5px}
.GetFocus{background-color:#eee}
</style>
<script type="text/javascript">
$(function(){ //页面加载事件
$(".clsHead").click(function(){ //图片单击事件
if($(".clsContent").is(":visible")){ //如果内容可见
$(".clsHead span img")
.attr("src","Images/a1.gif"); //改变图片
//隐藏内容
$(".clsContent").css("display","none");
}else{
$(".clsHead span img")
.attr("src","Images/a2.gif"); //改变图片
//显示内容
$(".clsContent").css("display","block");
}
});
$(".clsBot > a").click(function(){ //热点链接单击事件
//如果内容为"简化"字样
if($(".clsBot > a").text()=="简化"){
//隐藏index号大于4且不是最后一项的元素
$("ul li:gt(4):not(:last)").hide();
//将字符内容更改为"更多"
$(".clsBot > a").text("更多");
}else{
$("ul li:gt(4):not(:last)")
.show()
.addClass("GetFocus"); //显示所选元素且增加样式
//将字符内容更改为"简化"
$(".clsBot > a").text("简化");
}
});
});
</script>
</head>
<body>
<div id="divFrame">
<div class="clsHead">
<h3>图书分类</h3>
<span><img src="Images/a2.gif" alt=""/></span>
</div>
<div class="clsContent">
<ul>
<li><a href="#">小说</a><i> ( 1110 ) </i></li>
<li><a href="#">文艺</a><i> ( 230 ) </i></li>
<li><a href="#">青春</a><i> ( 1430 ) </i></li>
<li><a href="#">少儿</a><i> ( 1560 ) </i></li>
<li><a href="#">生活</a><i> ( 870 ) </i></li>
<li><a href="#">社科</a><i> ( 1460 ) </i></li>
<li><a href="#">管理</a><i> ( 1450 ) </i></li>
<li><a href="#">计算机</a><i> ( 1780 ) </i></li>
<li><a href="#">教育</a><i> ( 930 ) </i></li>
<li><a href="#">工具书</a><i> ( 3450 ) </i></li>
<li><a href="#">引进版</a><i> ( 980 ) </i></li>
<li><a href="#">其他类</a><i> ( 3230 ) </i></li>
</ul>
<div class="clsBot"><a href="#">简化</a>
<img src="Images/ a5.gif" alt=""/>
</div>
</div>
</div>
</body>
</html>
2.3.4 代码分析
在页面代码中，首先通过如下代码：
$(".clsContent").css("display","none");
获取类名称为“clsContent”的元素集合，并实现其内容的显示或隐藏。与此同时，通过下面代码变换图片：
$(".clsHead span img").attr("src","Images/a1.gif");
其中，“.clsHead span img”表示获取类型clsHead 中<span>下的<img>标记，即图片元素；attr(key，value)是jQuery中一个设置元素属性的函数，其功能是为所匹配的元素设置属性值，key是属性名称，value是属性值或内容。因此，此行代码的功能是，获取图片元素并改变其图片来源。
为了能够实现单击标题后内容可以伸缩的功能，首先通过如下代码，检测当前内容的隐藏或显示状态：
if($(".clsContent").is(":visible"))
其中“$(".clsContent")”获取内容元素，“is”是判断，“:visible”表示是否可见，此行代码用于判断内容元素是否可见，它返回一个布尔值，如果为true，则执行if后面的语句块，否则执行else后面的语句块。
在超级链接单击事件中，通过下面的代码检测单击的是“简化”还是“更多”字样。
if($(".clsBot > a").text()=="简化")
其中“$(".clsBot > a")”获取超级链接元素，text()是jQuery中一个获取元素内容的函数。此行代码的意思为，判断超级链接元素的内容是否为“简化”字样，然后根据检测结果，执行不同的语句块。
在代码中，通过如下的代码实现指定内容的隐藏：
$("ul li:gt(4):not(:last)").hide();
其中“ul li”获取元素，“:gt(4)”和“:not(:last)”分别为两个并列的过滤选择条件，前者表示Index号大于4，后者表示不是最后一个元素，二者组合成一个过滤条件，即选Index号大于4并且不是最后一个的元素集合；hide()是jQuery中一个隐藏元素的函数。此行代码的意思为，将通过过滤选择器获取的元素隐藏。
您还没有登录,请您登录后再发表评论
10 楼 porter.ruan 2015-06-17 22:24
9 楼 luogen33 2012-01-29 17:40
第6章 Ajax在jQuery中的应用/159
8 楼 luogen33 2012-01-29 17:40
7 楼 luogen33 2012-01-29 17:40
6 楼 zhangpurple 2011-09-07 16:59
5 楼 a418040445 2011-07-25 10:17
4 楼 wangshengok 2011-04-06 12:28
3 楼 wangshengok 2011-04-06 12:28
2 楼 wangshengok 2011-04-06 12:28
1 楼 yizhou1 2011-01-19 18:59