用实例学习jQuery开发,全面提升Web实战技能 ,jQuery中文社区推荐!
93个实例剖析,10个插件详解,13.5小时配套教学视频,送教学PPT
立足实战,以短小精悍的代码解析jQuery开发技巧
通过实际应用,体验jQuery在Web开发中的无穷魅力
《Web开发典藏大系:jQuery网页开发实例精解》是一本介绍jquery网页开发基础应用的书籍,是一本简单易懂,把复杂问题简单化的书。本书立足于jquery入门基础技术,对jquery的产生、jquery基础、如何将jquery应用于页面开发、如何产生页面元素特效等都进行了细致入微的讲解。这必将使每一个阅读本书的读者少走弯路,快速上手,建立用jquery进行开发网页的信心。
《Web开发典藏大系:jQuery网页开发实例精解》共15章,分2篇。第1篇jquery基础理论,主要介绍javascript脚本、html dom、div的控制等知识,这些内容都是学习后续章节所必须掌握的基础知识。第2篇jquery实战开发与应用,主要介绍如何利用jquery控制页面元素;如何使页面元素产生特殊效果;不同功能插件的使用方法及注意事项;如何编写jquery插件,以帮助读者理解、使用和开发插件。
《Web开发典藏大系:jQuery网页开发实例精解》配带1张光盘,收录了本书涉及的源代码和书中重点内容的教学视频。本书适合没有基础的jquery入门新手阅读;对于有一定基础的读者,可通过本书进一步理解jquery的各个重要知识点和概念;对于大、中专院校的学生和培训班的学员,本书不失为一本好教材。
超值、大容量DVD光盘
13.5小时配套教学视频
16小时Java入门教学视频(赠送)
本书源文件
1章 了解jQuery
本章是全书的开篇,主要讲解jQuery的基本入门知识及jQuery的相关特点。随着互联网的迅速发展,在前台页面的用户体验需求越来越高。虽然JavaScript这种动态语言极大的灵活性导致了项目中每个人的代码风格截然不同,但是其在功能和浏览器的兼容性上并不能实现高标准、严要求。正是在这种情形下出现了jQuery,它能够帮助我们实现各种酷炫的页面效果而不用担心浏览器的兼容性。
1.1 认识jQuery
本节主要介绍jQuery的起源和jQuery到底是什么。
1.1.1 jQuery的起源
jQuery的起源要从JavaScript说起。JavaScript是网景公司在它自己的LiveScript基础上产生的。JavaScript的出现是前台脚本语言发展的一个里程碑。它是一种基于对象的事件驱动的解释性语言。它的实时性、跨平台、开发使用简单并且相对安全的特点决定了它在Web前台设计中的重要地位。
但是,随着浏览器种类的推陈出新,JavaScript的兼容性受到了挑战。对前台设计效果的要求越来越高,于是,JavaScript语言本身的设计能力变得捉襟见肘。2006年,美国人John Resig创建了JavaScript的另一个框架,它就是jQuery。
与JavaScript相比,jQuery更简洁,浏览器的兼容性更强,语法更灵活,对Xpath的支持更强大,一个$符就可以遍历文档中的各级元素。下面用一个示例来具体比较一下。
具体需求是这样的:在页面上有一个无序列表,我们需要将所有列表项中的文本内容提取出来并显示。效果如图1.1所示。
首先,我们来看一下JavaScript的实现。
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 </head>
6 <body>
7 <ul>
8 <li>List Item 1</li>
9 <li>List Item 2</li>
10 <li>List Item 3</li>
11 <li>List Item 4</li>
12 <li>List Item 5</li>
13 </ul>
14 <script type="text/javascript">
15 var listitems=document.getElementsByTagName("li");
//获取所有列表项组成的数组
16 var str=""; //定义保存文本内容的变量
17 for(i=0;i<listitems.length;i++) //循环数组元素
18 str+=listitems[i].firstChild.nodeValue;//提取列表项的文本内容
19 alert(str); //显示所有文本内容
20 </script>
21</body>
22</html>
图1.1 JavaScript与jQuery的代码比较
通过上面的代码可以了解JavaScript实现这个功能的基本步骤:获取所有元素对象,通过遍历这些元素对象得到文本内容,然后显示。下面看一下jQuery的实现。
1 <html>
2 <head>
3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>无标题文档</title>
5 <script type="text/javascript" src="jslib/jquery-1.6.js"></script>
6 <script type="text/javascript">
7 $(function(){alert($("li").text());}); //获取所有列表项的文本并输出
8 </script>
9 </head>
10<body>
11 <ul>
12 <li>List Item 1</li>
13 <li>List Item 2</li>
14 <li>List Item 3</li>
15 <li>List Item 4</li>
16 <li>List Item 5</li>
17 </ul>
18</body>
19</html>
两段代码相比较,可以发现使用jQuery处理简洁很多,代码量明显减少。jQuery实现中的第7行代码就是jQuery实现功能部分。
1.1.2 什么是jQuery
jQuery是什么?在jQuery官方网站上是这样解释的:jQuery是一个快速简洁的JavaScript库,它可以简化HTML文档的元素遍历、事件处理、动画及Ajax交互,快速开发Web应用。它的设计是为了改变JavaScript程序的编写风格。jQuery特点如下。
(1)轻量型,jQuery是一个轻量型框架,程序短小,配置简单。
(2)DOM选择,可以轻松获取任意DOM元素或DOM元素封装后的jQuery对象。
(3)CSS处理,可以轻松设置、删除、读取CSS属性。
(4)链式函数调用,可以将多个函数链接起来被一个jQuery对象一次性调用。
(5)事件注册,可以对一个或多个对象注册事件,让画面和事件分离。
(6)对象克隆,可以克隆任意对象及其组件。
(7)Ajax支持,跨浏览器,支持Internet Explorer 6.0+、Opera 9.0+、Firefox 2+、Safari 2.0+、Google Chrome 1.0+。
如图1.2所示是jQuery的官方网站截图。可以在这个网站上获取各种版本的jQuery库文件及官方插件,学习jQuery,并且还可以提交在使用jQuery的过程中所发现的Bug。
……
第1篇 jQuery基础理论
第1章 了解jQuery(教学视频:31分钟)
1.1 认识jQuery 2
1.1.1 jQuery的起源 2
1.1.2 什么是jQuery 4
1.2 jQuery能做什么 5
1.2.1 jQuery能实现什么 5
1.2.2 jQuery与其他脚本库的区别 7
1.3 搭建jQuery运行环境 8
1.3.1 jQuery库的选择 8
1.3.2 jQuery库的引入 9
1.3.3 jQuery的第一个示例 11
1.3.4 如何学习jQuery 12
1.4 小结 12
第2章 jQuery原理与运行机制(教学视频:87分钟)
2.1 JavaScript的浏览器对象模型BOM操作 13
2.1.1 Window对象——窗口对象 14
2.1.2 Navigator对象——浏览器对象 24
2.2 JavaScript的HTML文档DOM操作 29
2.2.1 什么是DOM 29
2.2.2 DOM节点 29
2.2.3 访问文档节点 30
2.2.4 节点操作 33
2.3 Ajax原理 40
2.3.1 Ajax组成 40
2.3.2 Ajax与基本Web应用工作比较 40
2.3.3 Ajax核心对象XMLHTTPRequest 42
2.3.4 Ajax工作示例 42
2.4 jQuery工作原理 44
2.5 jQuery运行机制 45
2.5.1 jQuery的元素选择 45
2.5.2 jQuery事件 47
2.6 小结 50
第2篇 jQuery实战开发与应用
第3章 DIV层的控制(教学视频:85分钟)
3.1 DIV的鼠标选取 52
3.1.1 利用鼠标悬停实现DIV的选取 52
3.1.2 利用鼠标单击实现DIV的选取 54
3.2 DIV层的尺寸 55
3.2.1 jQuery动态读取DIV层的尺寸 55
3.2.2 jQuery动态修改DIV层的尺寸 56
3.3 层的显示与隐藏 59
3.3.1 利用jQuery的显示与隐藏函数实现 59
3.3.2 利用jQuery的滑动效果实现 62
3.3.3 利用jQuery的淡入淡出效果实现 64
3.4 DIV内的内容控制 66
3.4.1 内容清空 66
3.4.2 内容替换 67
3.4.3 内容复制 68
3.4.4 内容添加 69
3.4.5 内容包装 73
3.5 层的定位 74
3.6 小结 74
3.7 习题 75
第4章 设计列表(教学视频:41分钟)
4.1 控制列表宽度 76
4.1.1 参差不齐的列表 76
4.1.2 截取文字内容实现控制列表宽度 77
4.1.3 修改层的宽度控制列表宽度 78
4.2 控制列表项符号图片 81
4.2.1 样式死板的列表项符号 82
4.2.2 利用jQuery与CSS控制列表项符号图片 82
4.3 列表项的滚动 83
4.4 图片列表 86
4.4.1 大小不一的图片不规则排列 86
4.4.2 利用jQuery控制图片列表 86
4.5 列表的显示与收缩 88
4.5.1 占用页面空间的静态列表 88
4.5.2 利用jQuery动态控制列表内容展开与收缩 89
4.6 列表项动态排序 91
4.6.1 构建一个无序列表 91
4.6.2 利用jQuery对无序列表排序 92
4.7 小结 94
4.8 习题 94
第5章 网站导航(教学视频:50分钟)
5.1 菜单设计 95
5.1.1 普通下拉菜单 95
5.1.2 下拉级联菜单 98
5.1.3 横向伸缩菜单 100
5.2 第三方菜单插件 101
5.2.1 jQuery级联菜单插件 101
5.2.2 SuperFish菜单插件 103
5.2.3 折叠菜单插件 106
5.2.4 滚动动态列表菜单插件 107
5.2.5 滑动效果菜单 108
5.2.6 仿Mac的停靠菜单插件 109
5.3 TreeView设计 111
5.3.1 普通TreeView 111
5.3.2 加入淡入淡出效果的TreeView 112
5.4 第三方TreeView插件 114
5.5 小结 117
5.6 习题 118
第6章 设计表格(教学视频:66分钟)
6.1 表格基本设计 119
6.1.1 表格边框样式的变换 119
6.1.2 表格单元格的合并 120
6.1.3 表格行列的添加与删除 123
6.1.4 jQuery控制表格行的上下移动 125
6.2 表格内容动态排序 128
6.3 设置分页 130
6.4 表格行条纹效果 131
6.5 表格的折叠和展开 132
6.6 表格动态内容筛选 134
6.7 可编辑表格 135
6.8 表格插件 137
6.8.1 jExpand表格插件 137
6.8.2 Table Pagination表格分页插件 138
6.8.3 Spreadsheet Web电子表格插件 139
6.9 小结 140
6.10 习题 141
第7章 设计表单(教学视频:116分钟)
7.1 表单基本操作 142
7.1.1 表单清空 142
7.1.2 重置表单 144
7.1.3 表单元素的赋值与取值 145
7.2 表单验证框架 146
7.2.1 基本验证功能 147
7.2.2 API使用方法 149
7.2.3 自定义验证方法 155
7.2.4 radio、checkbox、select的验证 157
7.3 表单特效 159
7.3.1 文本输入框特效 159
7.3.2 单选按钮、复选框特效 163
7.3.3 按钮特效 163
7.4 表单插件 165
7.4.1 Validation插件 165
7.4.2 JQF1插件 173
7.5 小结 175
7.6 习题 175
第8章 设计图片(教学视频:55分钟)
8.1 图片切换 176
8.1.1 利用淡入效果实现图片切换 176
8.1.2 利用自定义动画切换图片 177
8.2 图片滚动 179
8.3 图片动态弹出 181
8.4 动态图文结合 183
8.5 图片剪切 184
8.6 图片预览 186
8.7 图片局部平移 187
8.8 图片插件 189
8.8.1 MobilyNotes插件 189
8.8.2 Fancybox插件 190
8.8.3 desSlideshow插件 195
8.9 小结 197
8.10 习题 197
第9章 设计对话框(教学视频:53分钟)
9.1 设计基本对话框 198
9.2 模式对话框 199
9.3 输入对话框 201
9.4 提示对话框 202
9.5 确认对话框 204
9.6 对话框插件 206
9.6.1 jqModal对话框插件 206
9.6.2 jQuery.UI.Dialog对话框插件 212
9.7 小结 222
9.8 习题 222
第10章 设计滑动条(教学视频:64分钟)
10.1 自定义滑动条 223
10.2 滑动条插件 225
10.2.1 jQuery.UI.Slider插件 225
10.2.2 jScrollPane插件 236
10.3 小结 247
10.4 习题 247
第11章 页面编辑器插件(教学视频:22分钟)
11.1 markItUp插件 248
11.1.1 安装插件 248
11.1.2 键盘的使用 249
11.1.3 标记语言定制 249
11.2 jwysiwyg插件 253
11.2.1 jwysiwyg插件基本介绍 253
11.2.2 基本应用 255
11.2.3 全功能编辑器 256
11.2.4 可调整大小的编辑器 260
11.2.5 编辑器内容的左右移动 261
11.2.6 根据内容自动调整大小的编辑器 261
11.2.7 自定义功能控制按钮 263
11.3 HtmlBox插件 265
11.3.1 如何安装 266
11.3.2 属性特点 266
11.3.3 内置函数 267
11.3.4 编辑器可使用的工具 267
11.3.5 插件应用举例 268
11.4 Lightweight RTE插件 271
11.5 小结 273
11.6 习题 273
第12章 多媒体(教学视频:35分钟)
12.1 jQuery.Flash插件 274
12.1.1 基本Flash文件嵌入 274
12.1.2 Flash替换文本内容 275
12.1.3 MP3播放示例 276
12.1.4 使用内联样式设定插件播放 277
12.2 jPlayer插件 278
12.2.1 jPlayer插件基本介绍 278
12.2.2 jPlayer插件基本使用方式:播放音频文件 280
12.2.3 jPlayer插件基本使用方式:播放视频文件 282
12.2.4 自定义播放器操作 283
12.3 jlEmbed插件 291
12.3.1 插件基本使用 292
12.3.2 使用Windows Media Player播放 292
12.3.3 使用QuickTime播放 293
12.3.4 使用SilverLight播放 293
12.3.5 使用Flash Player播放 293
12.4 小结 294
12.5 习题 294
第13章 动画设计(教学视频:38分钟)
13.1 jQuery动画基础
13.1.1 jQuery动画函数 295
13.1.2 jQuery动画简单示例 298
13.2 jQuery UI中实现的动画效果 299
13.2.1 jQuery UI动画特效使用 299
13.2.2 百叶窗效果 301
13.2.3 跳跃效果 302
13.2.4 缩减效果 305
13.2.5 移动效果 306
13.2.6 分裂效果 307
13.2.7 折叠效果 309
13.2.8 高亮淡入淡出效果 311
13.2.9 脉冲闪烁效果 313
13.2.10 摆动效果 314
13.3 小结 316
13.4 习题 316
第14章 拖动插件(教学视频:25分钟)
14.1 jQuery UI拖动插件 317
14.1.1 jQuery UI拖动插件基本介绍 317
14.1.2 jQuery UI拖动插件示例 318
14.2 jQuery UI投放插件 328
14.2.1 jQuery UI投放插件基本介绍 328
14.2.2 jQuery UI投放插件示例 328
14.3 小结 333
14.4 习题 333
第15章 插件开发(教学视频:39分钟)
15.1 jQuery插件开发基础 334
15.1.1 jQuery插件介绍 334
15.1.2 jQuery插件开发基础知识 335
15.1.3 创建一个简单jQuery插件 335
15.2 插件示例 343
15.3 插件开发规范 349
15.4 小结 350
15.5 习题 350
★《jQuery网页开发实例精解》一书用通俗易懂的实例、简单生动的文字,引领jQuery初学者进入网页交互开发的殿堂,是一本适合广大jQuery初学者入门的经典好书,值得阅读!
——jQuery中文社区