第 1 章 JavaScript概述 …………………………………………………………………… 001

任务1.1 认识JavaScript …………………………………………………………… 001

1.1.1 JavaScript的起源 ……………………………………………………… 001

1.1.2 JavaScript的作用 ……………………………………………………… 002

1.1.3 JavaScript的基本特点 ………………………………………………… 004

1.1.4 JavaScript的组成 ……………………………………………………… 005

任务1.2 在页面显示个人信息 ……………………………………………………… 006

1.2.1 选择JavaScript脚本编辑器 …………………………………………… 006

1.2.2 脚本的基本结构 ………………………………………………………… 006

1.2.3 在网页中引用JavaScript的方式 ……………………………………… 007

1.2.4 常用的输入/输出语句 ………………………………………………… 009

1.2.5 任务实现 ………………………………………………………………… 011

任务1.3 Chrome浏览器的调试使用 ……………………………………………… 011

1.3.1 开发者工具介绍 ………………………………………………………… 012

1.3.2 Chrome浏览器使用postman插件 …………………………………… 016

小结 ……………………………………………………………………………………… 018

实训 ……………………………………………………………………………………… 019

课后练习 ………………………………………………………………………………… 022

第 2 章 JavaScript基础 …………………………………………………………………… 024

任务2.1 显示变量数据类型 ………………………………………………………… 024

2.1.1 变量 ……………………………………………………………………… 024

2.1.2 数据类型 ………………………………………………………………… 025

2.1.3 运算符 …………………………………………………………………… 028

2.1.4 任务实现 ………………………………………………………………… 030

任务2.2 根据成绩给出学生考评 …………………………………………………… 031

2.2.1 if语句 …………………………………………………………………… 031

2.2.2 switch语句 ……………………………………………………………… 032

2.2.3 任务实现 ………………………………………………………………… 033

任务2.3 实现猜数游戏 ……………………………………………………………… 034

2.3.1 for循环 ………………………………………………………………… 035

2.3.2 while循环 ……………………………………………………………… 036

2.3.3 do...while循环 ………………………………………………………… 036

2.3.4 for..i.n循环 ……………………………………………………………… 036

2.3.5 中断循环语句 …………………………………………………………… 036

2.3.6 任务实现 ………………………………………………………………… 037

任务2.4 制作简易计算器 …………………………………………………………… 037

2.4.1 数值判断函数 …………………………………………………………… 038

2.4.2 自定义函数 ……………………………………………………………… 038

2.4.3 任务实现 ………………………………………………………………… 041

小结 ……………………………………………………………………………………… 042

实训 ……………………………………………………………………………………… 042

课后练习 ………………………………………………………………………………… 046

第 3 章 JavaScript对象编程 ……………………………………………………………… 049

任务3.1 实现京东秒杀效果 ………………………………………………………… 049

3.1.1 Date对象的创建 ………………………………………………………… 050

3.1.2 Date对象的常用方法 …………………………………………………… 050

3.1.3 任务实现 ………………………………………………………………… 052

任务3.2 制作随机选号页面 ………………………………………………………… 055

3.2.1 Math对象的常用属性 ………………………………………………… 056

3.2.2 Math对象的常用方法 ………………………………………………… 056

3.2.3 任务实现 ………………………………………………………………… 057

任务3.3 制作简单的焦点图效果 …………………………………………………… 057

3.3.1 数组的创建 ……………………………………………………………… 058

3.3.2 数组的访问 ……………………………………………………………… 059

3.3.3 数组的常用属性和方法 ………………………………………………… 059

3.3.4 任务实现 ………………………………………………………………… 062

任务3.4 使用对象实现新闻 ………………………………………………………… 064

3.4.1 什么是对象 ……………………………………………………………… 065

3.4.2 JSON …………………………………………………………………… 068

3.4.3 原型对象 ………………………………………………………………… 070

3.4.4 任务实现 ………………………………………………………………… 073

任务3.5 验证注册页面信息 ………………………………………………………… 076

3.5.1 String对象的创建 ……………………………………………………… 077

3.5.2 String对象的常用属性和方法 ………………………………………… 078

3.5.3 任务实现 ………………………………………………………………… 080

任务3.6 使用正则表达式验证注册页面信息 ……………………………………… 084

3.6.1 定义正则表达式 ………………………………………………………… 085

3.6.2 正则表达式的操作方法 ………………………………………………… 086

3.6.3 正则表达式的模式 ……………………………………………………… 088

3.6.4 任务实现 ………………………………………………………………… 089

小结 ……………………………………………………………………………………… 092

实训 ……………………………………………………………………………………… 093

课后练习 ………………………………………………………………………………… 101

第 4 章 BOM 与 DOM ……………………………………………………………………… 105

任务4.1 制作弹出窗口特效 ………………………………………………………… 105

4.1.1 BOM 对象模型参考 …………………………………………………… 106

4.1.2 window 对象的常用方法 ……………………………………………… 107

4.1.3 任务实现 ………………………………………………………………… 109

任务4.2 使用本地存储实现登录效果 ……………………………………………… 111

4.2.1 sessionStorage ………………………………………………………… 112

4.2.2 localStorage …………………………………………………………… 113

4.2.3 任务实现 ………………………………………………………………… 115

任务4.3 使用 CoreDOM 实现留言板效果 ………………………………………… 118

4.3.1 什么是 DOM …………………………………………………………… 119

4.3.2 获取页面元素的方法 …………………………………………………… 120

4.3.3 创建和增加节点 ………………………………………………………… 123

4.3.4 删除和替换节点 ………………………………………………………… 124

4.3.5 任务实现 ………………………………………………………………… 125

任务 4.4 使用 HTMLDOM 动态添加表格 ……………………………………… 128

4.4.1 HTMLDOM 对象 ……………………………………………………… 130

4.4.2 访问 HTMLDOM 对象的属性………………………………………… 130

4.4.3 表格对象 ………………………………………………………………… 131

4.4.4 任务实现 ………………………………………………………………… 134

小结 ……………………………………………………………………………………… 137

实训 ……………………………………………………………………………………… 138

课后练习 ………………………………………………………………………………… 144

第 5 章 JavaScript网页特效 ……………………………………………………………… 147

任务5.1 实现仿京东商品切换选项卡效果 ………………………………………… 147

5.1.1 操作元素样式 …………………………………………………………… 148

5.1.2 JavaScript事件 ………………………………………………………… 155

5.1.3 任务实现 ………………………………………………………………… 162

任务5.2 实现手风琴动画效果 ……………………………………………………… 167

5.2.1 scroll系列属性 ………………………………………………………… 167

5.2.2 任务实现 ………………………………………………………………… 170

任务5.3 实现电梯导航定位效果 …………………………………………………… 172

5.3.1 页面高度的获取 ………………………………………………………… 173

5.3.2 任务实现 ………………………………………………………………… 175

小结 ……………………………………………………………………………………… 177

实训 ……………………………………………………………………………………… 178

课后练习 ………………………………………………………………………………… 184

第 6 章 ES6新特性 ………………………………………………………………………… 188

任务6.1 使用箭头函数实现简易计算器 …………………………………………… 188

6.1.1 ECMAScript版本 ……………………………………………………… 188

6.1.2 let与const ……………………………………………………………… 188

6.1.3 字符串的扩展 …………………………………………………………… 190

6.1.4 对象的扩展 ……………………………………………………………… 191

6.1.5 箭头函数 ………………………………………………………………… 192

6.1.6 任务实现 ………………………………………………………………… 196

任务6.2 使用类实现党的二十大报告提到的中国古语选项卡效果 ……………… 197

6.2.1 类基本语法 ……………………………………………………………… 197

6.2.2 Class的继承 …………………………………………………………… 200

6.2.3 Class静态方法 ………………………………………………………… 201

6.2.4 任务实现 ………………………………………………………………… 201

任务6.3 使用 ES6实现商品查询效果 ……………………………………………… 203

6.3.1 解构赋值 ………………………………………………………………… 203

6.3.2 数组的扩展 ……………………………………………………………… 204

6.3.3 Set/Map数据结构 ……………………………………………………… 207

6.3.4 任务实现 ………………………………………………………………… 209

小结 ……………………………………………………………………………………… 212

实训 ……………………………………………………………………………………… 212

课后练习 ………………………………………………………………………………… 214

第 7 章 jQuery基础………………………………………………………………………… 217

任务7.1 使用jQuery在警告框中显示“HelloWorld!”…………………………… 217

7.1.1 jQuery的优势 …………………………………………………………… 218

7.1.2 配置jQuery环境………………………………………………………… 218

7.1.3 jQuery开发工具和插件 ………………………………………………… 219

7.1.4 任务实现 ………………………………………………………………… 221

任务7.2 仿京东商城品牌分类列表展开与收起效果 ……………………………… 221

7.2.1 基本选择器 ……………………………………………………………… 222

7.2.2 层次选择器 ……………………………………………………………… 226

7.2.3 过滤选择器 ……………………………………………………………… 227

7.2.4 任务实现 ………………………………………………………………… 239

任务7.3 拓展 ………………………………………………………………………… 240

7.3.1 jQuery对象与 DOM 对象 ……………………………………………… 240

7.3.2 表单选择器 ……………………………………………………………… 242

小结 ……………………………………………………………………………………… 244

实训 ……………………………………………………………………………………… 244

课后练习 ………………………………………………………………………………… 247

第 8 章 jQuery中的 DOM 操作 …………………………………………………………… 250

任务8.1 制作图片展示效果 ………………………………………………………… 250

8.1.1 获取和设置属性 ………………………………………………………… 251

8.1.2 删除属性 ………………………………………………………………… 252

8.1.3 任务实现 ………………………………………………………………… 252

任务8.2 仿制京东商城购物车前端局部更新效果 ………………………………… 254

8.2.1 查找节点 ………………………………………………………………… 255

8.2.2 创建节点 ………………………………………………………………… 255

8.2.3 插入节点 ………………………………………………………………… 257

8.2.4 删除节点 ………………………………………………………………… 258

8.2.5 复制节点 ………………………………………………………………… 259

8.2.6 替换节点 ………………………………………………………………… 260

8.2.7 遍历节点 ………………………………………………………………… 260

8.2.8 事件方法on()…………………………………………………………… 262

8.2.9 任务实现 ………………………………………………………………… 262

任务8.3 仿制京东购物车前后端交互效果 ………………………………………… 267

8.3.1 jQueryAJAX方法 ……………………………………………………… 268

8.3.2 任务实现 ………………………………………………………………… 269

小结 ……………………………………………………………………………………… 275

实训 ……………………………………………………………………………………… 276

课后练习 ………………………………………………………………………………… 279

第 9 章 jQuery制作动画…………………………………………………………………… 282

任务9.1 实现选项卡淡入/淡出效果 ……………………………………………… 282

9.1.1 show()和hide()方法 …………………………………………………… 283

9.1.2 fadeIn()和fadeOut()方法 ……………………………………………… 284

9.1.3 slideDown()、slideUp()和slideToggle()方法………………………… 285

9.1.4 任务实现 ………………………………………………………………… 285

任务9.2 实现图片幻灯片效果 ……………………………………………………… 288

9.2.1 自定义动画方法animate() …………………………………………… 289

9.2.2 动画回调函数 …………………………………………………………… 292

9.2.3 停止动画和判断是否处于动画状态 …………………………………… 292

9.2.4 hover事件 ……………………………………………………………… 297

9.2.5 任务实现 ………………………………………………………………… 297

任务9.3 拓展:焦点幻灯片效果 …………………………………………………… 301

小结 ……………………………………………………………………………………… 303

实训 ……………………………………………………………………………………… 304

课后练习 ………………………………………………………………………………… 311

第 10 章 jQuery插件应用 ………………………………………………………………… 314

任务10.1 使用ss-Menu固定侧边栏插件 ………………………………………… 314

10.1.1 ss-Menu插件简介 …………………………………………………… 315

10.1.2 ss-Menu插件下载 …………………………………………………… 315

10.1.3 任务实现 ……………………………………………………………… 316

任务10.2 PinterestGrid实现响应式网格瀑布流布局 …………………………… 319

10.2.1 PinterestGrid插件简介 ……………………………………………… 321

10.2.2 PinterestGrid插件参数 ……………………………………………… 321

10.2.3 任务实现 ……………………………………………………………… 321

小结 …………………………………………………………………………………… 323

实训 …………………………………………………………………………………… 323

课后练习 ……………………………………………………………………………… 333

第 11 章 项目案例:融合工厂企业官网…………………………………………………… 334

任务11.1 案例分析 ………………………………………………………………… 334

11.1.1 需求概述 ……………………………………………………………… 334

11.1.2 开发环境 ……………………………………………………………… 341

11.1.3 案例覆盖的技能点 …………………………………………………… 341

11.1.4 开发技巧 ……………………………………………………………… 341

任务11.2 页面交互效果实现 ……………………………………………………… 342

11.2.1 整站通用交互效果 …………………………………………………… 342

11.2.2 首页交互效果 ………………………………………………………… 343

11.2.3 传媒服务页面交互效果 ……………………………………………… 347

小结 …………………………………………………………………………………… 349

参考文献……………………………………………………………………………………… 35