JQUERY动态网页设计与制作

第1章 jQuery快速入门 1
1.1 认识jQuery 2
1.1.1 jQuery能做什么 2
1.1.2 jQuery的特点 2
1.2 下载并安装jQuery 3
1.2.1 下载jQuery 3
1.2.2 安装jQuery 4
1.3 测试jQuery 4
1.4 jQuery与CSS 5
1.4.1 CSS 构造规则 5
1.4.2 jQuery的引入 6
1.5 通过案例理解jQuery的技术优势 7
1.6 上机练习 9
第2章 jQuery的选择器 11
2.1 jQuery中美元符号$的使用 12
2.1.1 $符号的使用 12
2.1.2 功能函数的前缀 13
2.1.3 创建DOM元素 14
2.2 基本选择器 14
2.2.1 通配符选择器(*) 15
2.2.2 ID选择器(#id) 16
2.2.3 类名选择器(.class) 17
2.2.4 元素选择器(element) 18
2.2.5 复合选择器 19
2.3 层级选择器 20
2.3.1 祖先后代选择器(ancestor descendant) 20
2.3.2 父子选择器(parent>child) 22
2.3.3 相邻元素选择器(prev next) 23
2.3.4 兄弟元素选择器(prev~siblings) 25
2.4 过滤选择器 26
2.4.1 简单过滤选择器 26
2.4.2 内容过滤选择器 32
2.4.3 可见性过滤器 38
2.4.4 表单过滤器 41
2.5 表单选择器 43
2.5.1 :input 43
2.5.2 :text 44
2.5.3 :password 45
2.5.4 :radio 46
2.5.5 :checkbox 47
2.5.6 :submit 48
2.5.7 :reset 49
2.5.8 :button 50
2.5.9 :image 50
2.5.10 :file 51
2.6 属性选择器 52
2.6.1 [attribute] 52
2.6.2 [attribute=value] 53
2.6.3 [attribute!=value] 55
2.6.4 [attribute$=value] 56
2.7 上机练习 58
第3章 使用jQuery控制页面 59
3.1 对页面的内容进行操作 60
3.1.1 对文本内容进行操作 60
3.1.2 对HTML内容进行操作 61
3.2 对标记的属性进行操作 63
3.2.1 获取属性的值 63
3.2.2 设置属性的值 64
3.2.3 删除属性的值 65
3.3 对表单元素进行操作 66
3.3.1 获取表单元素的值 66
3.3.2 设置表单元素的值 67
3.4 对元素的CSS样式进行操作 68
3.4.1 添加CSS类 68
3.4.2 删除CSS类 70
3.4.3 动态切换CSS类 71
3.4.4 获取和设置CSS样式 72
3.5 获取与编辑DOM节点 74
3.5.1 插入节点 74
3.5.2 删除节点 76
3.5.3 复制节点 78
3.5.4 替换节点 79
3.6 上机练习 80
第4章 使用jQuery操作事件 83
4.1 jQuery的事件机制 84
4.1.1 什么是jQuery的事件机制 84
4.1.2 切换事件 84
4.1.3 事件冒泡 85
4.2 页面加载响应事件 86
4.3 jQuery中的事件函数 87
4.3.1 键盘操作事件函数 87
4.3.2 鼠标操作事件 89
4.3.3 其他的常用事件 92
4.4 事件的基本操作 94
4.4.1 绑定事件 94
4.4.2 触发事件 95
4.4.3 移除事件 96
4.5 上机练习 97
第5章 使用jQuery操作动画 99
5.1 网页动画特效的实现方法 100
5.1.1 通过CSS实现动画特效 100
5.1.2 通过jQuery实现动画特效 101
5.2 jQuery的基本动画效果 103
5.2.1 隐藏元素 103
5.2.2 显示元素 106
5.2.3 状态切换 108
5.3 淡入淡出的动画效果 109
5.3.1 淡入隐藏元素 109
5.3.2 淡出可见元素 111
5.3.3 切换淡入淡出元素 112
5.3.4 淡入淡出元素至指定数值 113
5.4 滑动效果 114
5.4.1 滑动显示匹配的元素 114
5.4.2 滑动隐藏匹配的元素 116
5.4.3 通过高度的变化动态切换元素的可见性 117
5.5 自定义的动画效果 119
5.5.1 创建自定义动画 119
5.5.2 停止动画 120
5.6 上机练习 121
第6章 jQuery的功能函数 123
6.1 功能函数概述 124
6.2 常用的功能函数 124
6.2.1 操作数组和对象 125
6.2.2 操作字符串 128
6.2.3 序列化操作 130
6.3 上机练习 131
第7章 jQuery插件的应用与开发 133
7.1 理解插件 134
7.1.1 什么是插件 134
7.1.2 从哪里获取插件 134
7.1.3 如何使用插件 134
7.2 流行的jQuery插件 135
7.2.1 jQueryUI插件 135
7.2.2 Form插件 139
7.2.3 提示信息插件 140
7.2.4 jcarousel插件 141
7.3 自定义插件 141
7.3.1 插件的工作原理 141
7.3.2 自定义一个简单的插件 142
7.4 上机练习 144
第8章 jQuery与Ajax技术的应用 147
8.1 Ajax概述 148
8.1.1 什么是Ajax 148
8.1.2 Ajax的工作原理 149
8.1.3 Ajax的优缺点 150
8.2 Ajax技术的组成 150
8.2.1 XMLHttpRequest对象 150
8.2.2 XML语言 150
8.2.3 JavaScript语言 152
8.2.4 CSS技术 152
8.2.5 DOM技术 152
8.3 XMLHttpRequest对象 153
8.3.1 初始化XMLHttpRequest对象 153
8.3.2 XMLHttpRequest对象的属性 153
8.3.3 XMLHttpRequest对象的方法 155
8.4 Ajax异步交互的应用 157
8.4.1 什么是异步交互 157
8.4.2 异步对象连接服务器 157
8.4.3 GET和POST模式 159
8.4.4 服务器返回XML文档 161
8.4.5 处理多个异步请求 164
8.5 jQuery中的Ajax 166
8.5.1 load()方法 166
8.5.2 $.get()方法和$.post()方法 169
8.5.3 $.getScript()方法和$.getJson()方法 171
8.5.4 $.ajax()方法 173
8.6 上机练习 174
第9章 jQuery的经典交互特效案例 177
9.1 设计时间轴特效 178
9.2 设计tab页面切换效果 181
9.3 设计滑动门特效 183
9.4 设计焦点图轮播特效 185
9.5 设计网页定位导航特效 189
9.6 设计导航条菜单效果 191
9.7 设计瀑布流特效 194
9.8 设计弹出层效果 196
9.9 设计倒计时效果 198
9.10 设计抽奖效果 200
9.11 上机练习 203
第10章 设计响应式网页 205
10.1 什么是响应式网页设计 206
10.2 像素和屏幕分辨率 207
10.3 视口 207
10.3.1 视口的分类和常用属性 207
10.3.2 媒体查询 208
10.4 响应式网页的布局设计 209
10.4.1 常用布局类型 209
10.4.2 布局的实现方式 210
10.4.3 响应式布局的设计与实现 211
10.5 响应式图片 212
10.5.1 使用标签 212
10.5.2 使用CSS图片 213
10.6 响应式视频 215
10.7 响应式导航菜单 216
10.8 响应式表格 218
10.8.1 隐藏表格中的列 218
10.8.2 滚动表格中的列 221
10.8.3 转换表格中的列 223
10.9 上机练习 226
第11章 流行的响应式开发框架 Bootstrap 227
11.1 Bootstrap概述 228
11.1.1 Bootstrap的特色 228
11.1.2 Bootstrap 4的重大更新 229
11.2 下载Bootstrap 229
11.3 安装和使用Bootstrap 231
11.3.1 本地安装Bootstrap 231
11.3.2 初次使用Bootstrap 232
11.4 使用常用组件 233
11.4.1 使用下拉菜单 233
11.4.2 使用按钮组 234
11.4.3 使用导航组件 235
11.4.4 绑定导航和下拉菜单 237
11.4.5 使用面包屑导航 239
11.4.6 使用广告屏 240
11.4.7 使用card(卡片) 241
11.4.8 使用进度条 243
11.4.9 使用模态框 248
11.4.10 使用滚动监听 250
11.5 胶囊导航选项卡(Tab栏) 252
11.6 上机练习 253
第12章 综合项目1——开发商品信息展示系统 255
12.1 项目需求分析 256
12.2 项目技术分析 258
12.3 系统的代码实现 258
12.3.1 设计首页 258
12.3.2 开发控制器类的文件 260
12.3.3 开发数据模型类文件 261
12.3.4 开发视图抽象类的文件 263
12.3.5 项目中的其他js文件 说明 266
第13章 综合项目2——开发企业门户网站 267
13.1 系统分析 268
13.2 系统设计 268
13.2.1 系统目标 268
13.2.2 系统功能结构 268
13.2.3 文件夹组织结构 268
13.3 网页预览 269
13.3.1 网站首页 269
13.3.2 产品分类页面 270
13.3.3 产品介绍页面 271
13.3.4 新闻中心页面 271
13.3.5 新闻详情页面 272
13.4 项目代码实现 273
13.4.1 网站首页页面代码 273
13.4.2 图片动态效果代码 279
13.4.3 公司简介页面代码 280
13.4.4 产品介绍页面代码 281
13.4.5 新闻中心页面代码 286
13.4.6 联系我们页面代码 288
13.5 项目总结 289
第14章 综合项目3——开发连锁咖啡响应式网站 291
14.1 网站概述 292
14.1.1 网站结构 292
14.1.2 设计效果 292
14.1.3 设计准备 293
14.2 设计首页布局 294
14.3 设计可切换导航 295
14.4 主体内容 300
14.4.1 设计轮播广告区 301
14.4.2 设计产品推荐区 303
14.4.3 设计登录注册按钮 和Logo 303
14.4.4 设计特色展示区 305
14.4.5 设计产品生产流程区 307
14.5 设计底部隐藏导航 309
第15章 综合项目4——开发网上商城网站 311
15.1 系统分析 312
15.2 系统设计 312
15.2.1 系统功能结构 312
15.2.2 文件夹组织结构 312
15.3 网页预览 313
15.3.1 网站首页效果 313
15.3.2 关于我们效果 314
15.3.3 商品展示效果 315
15.3.4 商品详情效果 317
15.3.5 购物车效果 317
15.3.6 品牌故事效果 318
15.3.7 用户登录效果 318
15.3.8 用户注册效果 318
15.4 项目代码实现 319
15.4.1 首页页面代码 319
15.4.2 动态效果代码 331
15.4.3 购物车代码 332
15.4.4 登录页面代码 334
15.4.5 商品展示页面代码 335
15.4.6 “联系我们”页面代码 340
15.5 项目总结 341