JavaScript+jQuery交互式Web前端开发

第 1章　初识JavaScript 001

学习目标　001

1.1　什么是JavaScript　001

1.1.1　JavaScript概述　001

1.1.2　JavaScript的诞生与发展　002

1.1.3　JavaScript的特点　004

1.1.4　JavaScript的组成　004

1.2　常用开发工具　005

1.3　JavaScript入门　005

1.3.1　代码书写位置　006

1.3.2　注释　008

1.3.3　输入和输出语句　009

1.3.4　控制台的使用　010

1.4　JavaScript变量　010

1.4.1　什么是变量　011

1.4.2　变量的使用　011

1.4.3　变量的应用案例　011

1.4.4　变量的语法细节　012

1.4.5　变量的命名规范　013

1.4.6　【案例】交换两个变量的值　014

本章小结　015

课后练习　015

第　2章 JavaScript基础（上）　016

学习目标　016

2.1　数据类型　016

2.1.1　变量的数据类型　016

2.1.2　数据类型分类　017

2.1.3　数字型　017

2.1.4　字符串型　018

2.1.5　布尔型　020

2.1.6　undefined和null　020

2.1.7　数据类型检测　020

2.2　数据类型转换　021

2.2.1　转换为字符串型　021

2.2.2　转换为数字型　022

2.2.3　转换为布尔型　023

2.3　运算符　023

2.3.1　算术运算符　024

2.3.2　递增和递减运算符　024

2.3.3　比较运算符　025

2.3.4　逻辑运算符　026

2.3.5　赋值运算符　027

2.3.6　三元运算符　028

2.3.7　运算符优先级　028

2.4　流程控制　029

2.5　分支结构　030

2.5.1　if语句　030

2.5.2　if…else语句　030

2.5.3　if…else if语句　032

2.5.4　switch语句　032

2.5.5　【案例】查询水果的价格　034

本章小结　034

课后练习　035

第3章　JavaScript基础（下）　036

学习目标　036

3.1　循环结构　036

3.1.1　for语句　036

3.1.2　for循环案例　038

3.1.3　循环嵌套案例　040

3.1.4　while语句　041

3.1.5　do…while语句　042

3.1.6　continue关键字　043

3.1.7　break关键字　043

3.2　初识数组　044

3.2.1　创建数组　044

3.2.2　访问数组元素　044

3.2.3　数组遍历　045

3.3　数组案例　045

3.3.1　获取数组元素中的*大值　045

3.3.2　数组转换为字符串　046

3.4　数组元素操作　046

3.4.1　修改数组长度　046

3.4.2　新增或修改数组元素　047

3.4.3　筛选数组　047

3.4.4　删除指定的数组元素　048

3.4.5　反转数组元素顺序　048

3.5　数组排序算法　049

3.5.1　冒泡排序　050

3.5.2　插入排序　050

3.6　二维数组　052

3.6.1　创建二维数组　052

3.6.2　二维数组求和　052

3.6.3　二维数组转置　053

本章小结　054

课后练习　054

第4章　JavaScript函数　055

学习目标　055

4.1　初识函数　055

4.1.1　函数的使用　055

4.1.2　什么是函数　056

4.1.3　函数的参数　056

4.1.4　函数参数的数量　057

4.1.5　函数的返回值　057

4.2　函数返回值案例　058

4.2.1　利用函数求任意两个数的*大值　058

4.2.2　利用函数求任意一个数组中的*大值　059

4.2.3　利用return提前终止函数　059

4.2.4　利用return返回数组　059

4.3　函数综合案例　060

4.3.1　利用函数求所有参数中的*大值　060

4.3.2　利用函数反转数组元素顺序　061

4.3.3　利用函数判断闰年　061

4.3.4　获取指定年份的2月份的天数　061

4.4　函数进阶　062

4.4.1　函数表达式　062

4.4.2　回调函数　062

4.4.3　递归调用　063

4.5　作用域　064

4.5.1　作用域的分类　064

4.5.2　全局变量和局部变量　064

4.5.3　作用域链　065

4.6　闭包函数　065

4.6.1　什么是闭包函数　065

4.6.2　闭包函数的实现　066

4.7　预解析　066

本章小结　067

课后练习　067

第5章　JavaScript对象　069

学习目标　069

5.1　初识对象　069

5.1.1　什么是对象　069

5.1.2　利用字面量创建对象　070

5.1.3　访问对象的属性和方法　071

5.1.4　利用new Object创建对象　071

5.1.5　利用构造函数创建对象　072

5.1.6　遍历对象的属性和方法　073

5.2　内置对象　074

5.2.1　通过查阅文档熟悉内置对象　074

5.2.2　【案例】封装自己的数学对象　076

5.3　Math对象　076

5.3.1　Math对象的使用　076

5.3.2　生成指定范围的随机数　077

5.3.3　【案例】猜数字游戏　077

5.4　日期对象　078

5.4.1　日期对象的使用　078

5.4.2　【案例】统计代码执行时间　080

5.4.3　【案例】倒计时　080

5.5　数组对象　081

5.5.1　数组类型检测　081

5.5.2　添加或删除数组元素　082

5.5.3　【案例】筛选数组　083

5.5.4　数组排序　083

5.5.5　数组索引　083

5.5.6　【案例】数组去除重复元素　084

5.5.7　数组转换为字符串　084

5.5.8　其他方法　085

5.6　字符串对象　085

5.6.1　字符串对象的使用　086

5.6.2　根据字符返回位置　086

5.6.3　根据位置返回字符　087

5.6.4　【案例】统计出现*多的字符和次数　087

5.6.5　字符串操作方法　088

5.6.6　【案例】判断用户名是否合法　089

5.7　值类型和引用类型　089

本章小结　090

课后练习　091

第6章　DOM（上）　092

学习目标　092

6.1　Web API简介　092

6.1.1　初识Web API　092

6.1.2　Web API与API的关系　093

6.2　DOM简介　093

6.2.1　什么是DOM　093

6.2.2　DOM树　093

6.3　获取元素　094

6.3.1　根据id获取元素　094

6.3.2　根据标签获取元素　095

6.3.3　根据name获取元素　096

6.3.4　HTML5新增的获取方式　096

6.3.5　document对象的属性　098

6.4　事件基础　099

6.4.1　事件概述　099

6.4.2　事件三要素　099

6.5　操作元素　100

6.5.1　操作元素内容　100

6.5.2　操作元素属性　101

6.5.3　【案例】显示隐藏密码明文　102

6.5.4　操作元素样式　103

6.5.5　【案例】显示隐藏文本框内容　106

本章小结　107

课后练习　107

第7章　DOM（下）　109

学习目标　109

7.1　排他操作　109

7.1.1　排他思想简介　109

7.1.2　【案例】鼠标指针经过时背景变色　110

7.2　属性操作　112

7.2.1　获取属性值　112

7.2.2　设置属性值　112

7.2.3　移除属性　113

7.2.4　【案例】Tab栏切换　114

7.3　自定义属性　116

7.3.1　设置属性值　116

7.3.2　获取属性值　117

7.4　节点基础　117

7.4.1　什么是节点　117

7.4.2　节点层级　118

7.4.3　【案例】下拉菜单　121

7.5　节点操作　123

7.5.1　创建节点　123

7.5.2　添加和删除节点　123

7.5.3　【案例】简易留言板　123

7.5.4　复制节点　125

7.6　事件进阶　126

7.6.1　注册事件　126

7.6.2　删除事件　128

7.6.3　DOM事件流　128

7.7　事件对象　129

7.7.1　什么是事件对象　129

7.7.2　事件对象的使用　129

7.7.3　事件对象的常用属性和方法　130

7.8　鼠标事件　132

7.8.1　鼠标事件的常用方法　132

7.8.2　鼠标事件对象　133

7.8.3　【案例】图片跟随鼠标指针移动　134

7.9　键盘事件　135

7.9.1　键盘事件的常用方法　135

7.9.2　键盘事件对象　135

7.9.3　【案例】文本框提示信息　136

本章小结　137

课后练习　137

第8章　BOM　140

学习目标　140

8.1　BOM简介　140

8.1.1　什么是BOM　140

8.1.2　BOM与DOM的区别　140

8.1.3　BOM的构成　141

8.2　window对象的常见事件　141

8.2.1　窗口加载事件　141

8.2.2　调整窗口大小事件　142

8.3　定时器　143

8.3.1　定时器方法　143

8.3.2　【案例】3秒后自动关闭广告　144

8.3.3　【案例】60秒内只能发送一次短信　144

8.4　JavaScript执行机制　146

8.4.1　单线程　146

8.4.2　同步和异步　146

8.4.3　执行机制　146

8.5　location对象　147

8.5.1　URL的组成　147

8.5.2　location的常用属性　148

8.5.3　【案例】获取URL参数　148

8.5.4　location的常用方法　149

8.6　navigator对象　149

8.7　history对象　150

本章小结　151

课后练习　151

第9章　JavaScript的网页特效　152

学习目标　152

9.1　元素偏移量offset系列　152

9.1.1　offset概述　152

9.1.2　offset与style的区别　154

9.1.3　【案例】模态框拖曳效果　155

9.1.4　【案例】放大镜效果　159

9.2　元素可视区client系列　164

9.3　元素滚动scroll系列　165

9.3.1　scroll概述　165

9.3.2　【案例】固定侧边栏效果　167

本章小结　171

课后练习　171

第　10章 jQuery（上）　173

学习目标　173

10.1　初识jQuery　173

10.1.1　什么是jQuery　173

10.1.2　获取jQuery　174

10.1.3　使用jQuery　175

10.1.4　jQuery对象　177

10.2　jQuery选择器　178

10.2.1　基本选择器　178

10.2.2　层级选择器　179

10.2.3　筛选选择器　180

10.2.4　【案例】下拉菜单　181

10.2.5　排他思想　182

10.2.6　【案例】精品展示　182

10.2.7　其他选择器　184

10.3　jQuery样式操作　186

10.3.1　修改样式　187

10.3.2　类操作　187

10.3.3　【案例】Tab栏切换　189

10.4　jQuery动画　190

10.4.1　显示与隐藏效果　190

10.4.2　滑动效果　192

10.4.3　停止动画　193

10.4.4　淡入淡出　194

10.4.5　自定义动画　195

10.4.6　【案例】手风琴　196

本章小结　199

课后练习　199

第　11章 jQuery（下）　201

学习目标　201

11.1　jQuery属性操作　201

11.1.1　prop()方法　201

11.1.2　attr()方法　202

11.1.3　data()方法　202

11.1.4　【案例】购物车商品全选　203

11.2　jQuery内容操作　206

11.2.1　jQuery中的内容操作方法　206

11.2.2　【案例】在购物车中增减商品数量　207

11.2.3　【案例】购物车商品小计　208

11.3　jQuery元素操作　209

11.3.1　遍历元素　209

11.3.2　【案例】计算购物车商品总件数和总额　210

11.3.3　创建元素　211

11.3.4　添加元素　212

11.3.5　删除元素　212

11.3.6　【案例】在购物车中删除商品　213

11.3.7　【案例】在购物车中为选中的商品添加背景色　213

11.4　jQuery尺寸和位置操作　214

11.4.1　尺寸方法　214

11.4.2　位置方法　215

11.4.3　【案例】带有动画效果的返回顶部　217

11.4.4　【案例】电梯导航　219

11.5　jQuery事件　221

11.5.1　事件绑定　221

11.5.2　事件委派　223

11.5.3　【案例】留言板　224

11.5.4　事件解绑　225

11.5.5　触发事件　226

11.5.6　事件对象　227

11.6　jQuery其他方法　228

11.6.1　$.extend()方法　228

11.6.2　$.ajax()方法　229

本章小结　232

课后练习　232

第　12章 JavaScript面向对象（上）　234

学习目标　234

12.1　面向对象概述　234

12.1.1　面向过程与面向对象　234

12.1.2　面向对象的优势　235

12.1.3　面向对象的特征　235

12.2　ES 6面向对象语法　236

12.2.1　类和对象　236

12.2.2　类的基本语法　237

12.2.3　类中的方法　237

12.2.4　继承　237

12.2.5　super关键字　238

12.3　面向对象开发标签页组件　239

12.3.1　功能分析　240

12.3.2　页面结构　240

12.3.3　切换标签页　242

12.3.4　添加标签页　243

12.3.5　删除标签页　245

12.3.6　修改标签页　246

本章小结　247

课后练习　247

第　13章 JavaScript面向对象（下）　249

学习目标　249

13.1　构造函数与原型对象　249

13.1.1　构造函数　249

13.1.2　静态成员和实例成员　250

13.1.3　构造函数和类的区别　250

13.1.4　原型对象　251

13.2　原型链　251

13.2.1　访问对象的原型对象　251

13.2.2　访问对象的构造函数　252

13.2.3　原型对象的原型对象　253

13.2.4　绘制原型链　254

13.2.5　成员查找机制　255

13.2.6　【案例】利用原型对象扩展数组方法　256

13.3　this的指向　256

13.3.1　分析this指向　256

13.3.2　更改this指向　257

13.4　错误处理　258

13.4.1　如何进行错误处理　258

13.4.2　错误对象的传递　259

13.4.3　抛出错误对象　259

13.4.4　错误类型　260

13.5　继承　260

13.5.1　借用构造函数继承父类属性　260

13.5.2　利用原型对象继承父类方法　261

本章小结　262

课后练习　263

第　14章 正则表达式　265

学习目标　265

14.1　认识正则表达式　265

14.1.1　什么是正则表达式　265

14.1.2　正则表达式的特点　265

14.1.3　正则表达式的使用　266

14.1.4　模式修饰符　266

14.2　正则表达式中的特殊字符　267

14.2.1　边界符　267

14.2.2　预定义类　267

14.2.3　字符类　268

14.2.4　取反符　269

14.2.5　【案例】用户名验证　269

14.3　量词符与括号字符　270

14.3.1　量词符　270

14.3.2　括号字符　271

14.3.3　正则表达式优先级　274

14.3.4　【案例】身份证号码验证　274

14.4　String类中的方法　275

14.4.1　match()方法　276

14.4.2　search()方法　276

14.4.3　split()方法　276

14.4.4　replace()方法　277

14.4.5　【案例】查找并替换敏感词　277

本章小结　278

课后练习　278