JavaScript

• 1、编程语言
• • 1.1 编程
  • 1.2 计算机语言
  • 1.3 编程语言
  • 1.4 翻译器
  • 1.5 编程语言和标记语言区别
  • 1.6 总结
• 2、计算机基础
• • 2.1 计算机组成
  • 2.2 数据存储
  • 2.3 数据存储单位
  • 2.4 程序运行
• 3、初识JavaScript
• • 3.1 JavaScript 历史
  • 3.2 JavaScript 是什么
  • 3.3 JavaScript 的作用
  • 3.4 HTML/CSS/JS 的关系
  • 3.5 浏览器执行JS简介
  • 3.6 JS 的组成
  • • 3.6.1 ECMAScript
    • 3.6.2 DOM ---- 文档对象模型
    • 3.6.2 BOM ---- 浏览器对象模型
  • 3.7 JS 初体验
  • • 3.7.1 行内式JS
    • 3.7.2 内嵌式JS
    • 3.7.3 外部JS文件
  • 3.8 JS 注释
  • 3.9 JS 输入输出语句
  • 3.10 命名规范
  • • 3.10.1 标识符命名规范
    • 3.10.2 操作符规范
    • 3.10.3 单行注释规范
    • 3.10.4 其他规范
• 4、变量
• • 4.1 什么是变量
  • 4.2 变量在内存中的存储
  • 4.3 变量的使用
  • • 4.3.1 声明变量
    • 4.3.2 赋值
    • 4.3.3 变量的初始化
    • 4.3.4 变量的语法扩展
    • • 4.3.4.1 更新变量
      • 4.3.4.2 声明多个变量
      • 4.3.4.3 声明变量特殊情况
  • 4.4 变量命名规范
  • 4.5 小结
• 5、数据类型
• • 5.1 为什么需要数据类型
  • 5.2 变量的数据类型
  • 5.3 数据类型的分类
  • • 5.3.1 简单数据类型（基本数据类型）
    • • 5.3.1.1 数字型 Number
      • • 5.3.1.1.1 数字型进制
        • 5.3.1.1.2 数字型范围
        • 5.3.1.1.3 数字型三种特殊值
        • 5.3.1.1.4 isNaN()
      • 5.3.1.2 字符串型 String
      • • 5.3.1.2.1 字符串引号嵌套
        • 5.3.1.2.2 字符串转义符
        • 5.3.1.2.2 字符串长度
        • 5.3.1.2.3 字符串拼接
        • 5.3.1.2.4 字符串拼接加强
      • 5.3.1.3 布尔型 Boolean
      • 5.3.1.4 Undefined 和 Null
    • 5.3.2 复杂数据类型
    • 5.3.3 获取变量数据类型
    • • 5.3.3.1 获取检测变量的数据类型
      • 5.3.3.2 字面量
    • 5.3.4 数据类型转换
    • • 5.3.4.1 什么是数据类型转换
      • 5.3.4.2 转换为字符串类型
      • 5.3.4.3 转换为数字类型
      • 5.3.4.4 转换为布尔型
  • 5.4 解释型语言和编译型语言
  • • 5.4.1 概述
    • 5.4.2 执行过程
  • 5.5 标识符、关键字、保留字
  • • 5.5.1 标识符
    • 5.5.2 关键字
    • 5.5.3 保留字
• 6、运算符
• • 6.1 算术运算符
  • • 6.1.1 算术运算符概述
    • 6.1.2 浮点数的精度问题
    • 6.1.3 表达式和返回值
  • 6.2 递增和递减运算符
  • • 6.2.1 递增和递减运算符概述
    • • 6.2.1.1 前置递增（递减）运算符
      • 6.2.1.2 后置递增（递减）运算符
    • 6.2.2 前置递增（递减）和 后置递增（递减）小结
  • 6.3 比较运算符
  • • 6.3.1 比较运算符概述
    • 6.3.2 = 小结
  • 6.4 逻辑运算符
  • • 6.4.1 逻辑运算符概述
    • 6.4.2 逻辑与 &&
    • 6.4.3 逻辑或 ||
    • 6.4.4 逻辑非 ！
    • 6.4.5 短路运算（逻辑中断）
    • • 6.4.5.1 逻辑与
      • 6.4.5.2 逻辑或
  • 6.5 赋值运算符
  • 6.6 运算符优先级
• 7、流程控制
• • 7.1 顺序结构
  • 7.2 分支结构
  • • 7.2.1 if 语句（单分支语句）
    • • 7.2.1.1 语法结构
      • 7.2.1.2 执行流程
    • 7.2.2 if else 语句（双分支语句）
    • • 7.2.2.1 语法结构
      • 7.2.2.2 执行流程
    • 7.2.3 if else if 语句（多分支语句）
    • • 7.2.3.1 语法结构
      • 7.2.3.2 执行流程
    • 7.2.4 三元表达式
    • 7.2.5 switch 语句
    • • 7.2.5.1 语法结构
      • 7.2.5.2 switch语句和if else if 语句的区别
  • 7.3 循环结构
  • • 7.3.1 for 循环
    • • 7.3.1.1 for 单循环
      • • 7.3.1.1.1 语法结构
        • 7.3.1.1.2 断点调试
        • 7.3.1.1.3 for 循环重复相同的代码
        • 7.3.1.1.4 for 循环重复不相同的代码
        • 7.3.1.1.5 for 循环重复某些相同的操作
      • 7.3.1.2 双重 for 循环
      • 7.3.1.3 for 循环小结
    • 7.3.2 while 循环
    • 7.3.3 do...while 循环
    • 7.3.4 循环小结
    • 7.3.5 continue break
    • • 7.3.5.1 continue
      • 7.3.5.2 break
• 8、数组
• • 8.1 数组的概念
  • 8.2 创建数组
  • • 8.2.1 利用 new 创建数组
    • 8.2.2 利用数组字面量创建数组
  • 8.3 获取数组元素
  • • 8.3.1 数组的索引
  • 8.4 遍历数组
  • 8.5 数组中新增元素
  • • 8.5.1 通过修改 length 长度新增数组元素
    • 8.5.2 通过修改数组索引新增数组元素
  • 8.6 数组案例
  • 8.7 伪数组
• 9、函数
• • 9.1 函数的概念
  • 9.2 函数的使用
  • • 9.2.1 函数有两种声明方式
    • • 9.2.1.1 函数关键字声明函数（命名函数）
      • 9.2.1.2 函数表达式声明函数（匿名函数）
    • 9.2.2 调用函数
    • 9.2.3 函数封装
  • 9.3 函数的参数
  • • 9.3.1 形参和实参
    • 9.3.2 函数形参和实参个数不匹配问题
    • 9.3.3 小结
  • 9.4 函数的返回值
  • • 9.4.1 return 语句
    • 9.4.2 return 终止函数
    • 9.4.3 函数没有return 返回 undefined
    • 9.4.4 break,continue,return 的区别
  • 9.5 通过榨汁机看透函数
  • 9.6 arguments的使用
  • 9.7 函数相互调用
  • 9.8 函数案例
• 10、作用域
• • 10.1 作用域概述
  • 10.2 变量的作用域
  • • 10.2.1 全局变量
    • 10.2.2 局部变量
    • 10.2.3 全局变量和局部变量的区别
  • 10.3 块级作用域
  • 10.4 作用域链
• 11、预解析
• 12、对象
• • 12.1 什么是对象
  • 12.2 为什么需要对象
  • 12.3 创建对象的三种方式
  • • 12.3.1 字面量创建对象
    • 12.3.2 new Object 创建对象
    • • 12.3.2.1 new 关键字
    • 12.3.3 构造函数创建对象
    • • 12.3.3.1 构造函数和对象
  • 12.4 遍历对象
  • 12.5 小结
• 13、内置对象
• • 13.1 Math 对象
  • 13.2 日期对象
  • • 13.2.1 Date 概述
    • 13.2.2 Date() 方法的使用
    • • 13.2.2.1 获取当前时间必须实例化
      • 13.2.2.2 Date() 构造函数的参数
    • 13.2.3 日期格式化
    • 13.2.4 获取日期的总的毫秒形式
    • 13.2.5 倒计时案例
  • 13.3 数组对象
  • • 13.3.1 数组对象的创建
    • 13.3.2 检测是否为数组
    • 13.3.3 添加删除数组元素的方法
    • 13.3.4 数组排序
    • 13.3.5 数组索引方法
    • 13.3.6 数组转换为字符串
  • 13.4 字符串对象
  • • 13.4.1 基本包装类型
    • 13.4.2 字符串的不可变
    • 13.4.3 根据字符返回位置
    • 13.4.4 根据位置返回字符
    • 13.4.5 字符串操作方法
• 14、简单类型和复杂类型
• • 14.1 堆和栈
  • 14.2 简单类型的内存分配
  • 14.3 复杂类型的内存分配
  • 14.4 简单类型传参
  • 14.5 复杂类型传参
• 15、Web APIs
• • 15.1 Web APIS
  • • 15.1.1 API
    • 15.1.2 Web API
    • 15.1.3 API和Web API的小结
  • 15.2 DOM 基础
  • • 15.2.1 DOM简介
    • 15.2.2 DOM树
    • 15.2.3 获取元素
    • • 15.2.3.1 如何获取元素
      • • 15.2.3.1.1 根据ID获取
        • 15.2.3.1.2 根据标签名获取
        • 15.2.3.1.3 H5新增的方法获取
        • 15.2.3.1.4 获取特殊元素（body,html）
    • 15.2.4 事件基础
    • • 15.2.4.1 事件概述
      • 15.2.4.2 执行事件的步骤
      • 15.2.4.3 常见的鼠标事件
    • 15.2.5 操作元素
    • • 15.2.5.1 改变元素的内容
      • 15.2.5.2 常用元素的属性操作
      • 15.2.5.3 表单元素的属性操作
      • 15.2.5.4 样式属性操作
      • 15.2.5.5 操作元素小结
      • 15.2.5.5 排他思想
      • 15.2.5.6 自定义属性的操作
      • • 15.2.5.6.1 获取属性值
        • 15.2.5.6.2 设置属性值
        • 15.2.5.6.3 移除属性值
        • 15.2.5.6.4 H5自定义属性
    • 15.2.6 节点操作
    • • 15.2.6.1 利用DOM提供的方法获取元素
      • 15.2.6.2 利用节点层级关系获取元素
      • 15.2.6.3 节点概述
      • 15.2.6.4 节点层级
      • • 15.2.6.4.1 父级节点
        • 15.2.6.4.2 子级节点
        • 15.2.6.4.3 兄弟节点
      • 15.2.6.5 创建节点
      • 15.2.6.6 添加节点
      • 15.2.6.7 删除节点
      • 15.2.6.8 复制节点（克隆节点）
      • 15.2.6.9 三种动态创建元素区别
  • 15.3 DOM 重点核心
  • • 15.3.1 创建
    • 15.3.2 增
    • 15.3.3 删
    • 15.3.4 改
    • 15.3.5 查
    • 15.3.6 属性操作
    • 15.3.7 事件操作
  • 15.4 DOM 高级
  • • 15.4.1 注册事件（绑定事件）
    • • 15.4.1.1 ★addEventListener 事件监听方式
      • 15.4.1.2 attachEvent 事件监听方式
      • 15.4.1.3 注册事件兼容性解决方案
    • 15.4.2 删除事件（解绑事件）
    • • 15.4.2.1 删除事件方式
      • 15.4.2.2 删除事件兼容性解决方案
    • 15.4.3 DOM 事件流
    • 15.4.4 ★事件对象
    • • 15.4.4.1 事件对象的常见属性和方法
    • 15.4.5 阻止事件冒泡
    • 15.4.6 事件委托（代理、委派）
    • 15.4.7 常用的鼠标事件
    • • 15.4.7.1 mouseenter 和 mouseover的区别
      • 15.4.7.2 鼠标事件对象（MouseEvent）
    • 15.4.8 常用的键盘事件
    • • 15.4.8.1 键盘事件对象
  • 15.5 BOM
  • • 15.5.1 BOM 构成
    • 15.5.2 window 对象的常见事件
    • • 15.5.2.1 窗口加载事件
      • 15.5.2.2 调整窗口大小事件
    • 15.5.3 定时器
    • • 15.5.3.1 setTimeOut() 定时器
      • 15.5.3.2 停止setTimeOut() 定时器
      • 15.5.3.3 setInterval() 定时器
      • 15.5.3.4 停止setInterval() 定时器
      • 15.5.3.5 this
    • 15.5.4 JS执行队列
    • • 15.5.4.1 JS是单线程
      • 15.5.4.2 同步和异步
    • 15.5.5 location 对象
    • • 15.5.5.1 URL
      • 15.5.5.2 location 对象的属性
      • 15.5.5.3 对象的方法
    • 15.5.6 navigator 对象
    • 15.5.7 history 对象
    • 15.5.8 案例：表格添加/删除事件
    • 15.5.9 案例：更换主题
    • 15.5.10 案例：提交表单
    • 15.5.11 案例：注册页面的校验
• 16、网页特效
• • 16.1 元素偏移量offset系列
  • • 16.1.1 offset 与 style 区别
  • 16.2 元素可视区 client 系列
  • • 16.2.1 立即执行函数
  • 16.3 元素滚动 scroll 系列
  • • 16.3.1 元素 scroll 系列属性
    • 16.2.2 页面被卷去的头部兼容性解决方案
  • 16.4 三大系列小结
  • 16.5 动画函数封装
  • • 16.5.1 动画实现原理
    • 16.5.2 动画函数封装
    • 16.5.3 缓动效果原理
    • 16.5.4 动画函数添加回调函数
    • 16.5.5 动画函数封装到单独JS文件中‘
    • 16.5.6 节流阀
  • 16.6 触屏事件
  • • 16.6.1 触摸事件对象（TouchEvent）
    • 16.6.3 移动端拖动元素

1、编程语言

1.1 编程

1.2 计算机语言

1.3 编程语言

1.4 翻译器

1.5 编程语言和标记语言区别

1.6 总结

2、计算机基础

2.1 计算机组成

2.2 数据存储

2.3 数据存储单位

2.4 程序运行

3、初识JavaScript

3.1 JavaScript 历史

3.2 JavaScript 是什么

3.3 JavaScript 的作用

3.4 HTML/CSS/JS 的关系

3.5 浏览器执行JS简介

3.6 JS 的组成

3.6.1 ECMAScript

3.6.2 DOM ---- 文档对象模型

3.6.2 BOM ---- 浏览器对象模型

3.7 JS 初体验

3.7.1 行内式JS

3.7.2 内嵌式JS

3.7.3 外部JS文件

3.8 JS 注释

3.9 JS 输入输出语句

3.10 命名规范

3.10.1 标识符命名规范

3.10.2 操作符规范

3.10.3 单行注释规范

3.10.4 其他规范

4、变量

4.1 什么是变量

4.2 变量在内存中的存储

4.3 变量的使用

4.3.1 声明变量

• var a = b =c = 9 《----------》只有a用var声明了，b和c 没有被var声明
• var a = 9,b = 9,c = 9 《---------------》a、b、c均被var声明
  
  

4.3.2 赋值

4.3.3 变量的初始化

<script>// 1、声明变量var age;// 2、赋值 把值存入这个变量age = 18;// 3、在控制台上输出结果console.log(age);// 变量初始化var myName = "John";console.log(myName);// 用户输入姓名var myName = prompt('请输入您的名字');// 输出姓名alert('myName'); </script>

4.3.4 变量的语法扩展

4.3.4.1 更新变量

4.3.4.2 声明多个变量

4.3.4.3 声明变量特殊情况

• 变量名：name；在js中有特殊含义的，只声明name未赋值，不会报错，所以尽量不要直接使用name作为变量名
  

4.4 变量命名规范

4.5 小结

5、数据类型

5.1 为什么需要数据类型

5.2 变量的数据类型

5.3 数据类型的分类

5.3.1 简单数据类型（基本数据类型）

5.3.1.1 数字型 Number

5.3.1.1.1 数字型进制

5.3.1.1.2 数字型范围

5.3.1.1.3 数字型三种特殊值

5.3.1.1.4 isNaN()

5.3.1.2 字符串型 String

5.3.1.2.1 字符串引号嵌套

5.3.1.2.2 字符串转义符

5.3.1.2.2 字符串长度

5.3.1.2.3 字符串拼接

5.3.1.2.4 字符串拼接加强

5.3.1.3 布尔型 Boolean

5.3.1.4 Undefined 和 Null

<script>//undefinedvar str;console.log(str); //undefinedvar variable = undefined;console.log(variable + 'AA');//undefinedAA 任何类型+字符串类型=字符串类型console.log(variable + 1);//NaN undefined不能确定是什么类型的，和数字相加，结果为NaN//null 空值var space = null;console.log(space + 'AA'); //nullAAconsole.log(space + 1); //1 </script>

5.3.2 复杂数据类型

5.3.3 获取变量数据类型

5.3.3.1 获取检测变量的数据类型

5.3.3.2 字面量

5.3.4 数据类型转换

5.3.4.1 什么是数据类型转换

5.3.4.2 转换为字符串类型

<script>var num = 10;var str = num.toString();console.log(typeof str);console.log(typeof String(num));console.log(typeof(num + '')); </script>

5.3.4.3 转换为数字类型

<script>// 其他类型转换为数字型// parseInt 把字符型转换为数字型 结果为整数console.log(parseInt('3.14')); //3 console.log(parseInt('3.94')); //3console.log(parseInt('120px')); //120console.log(parseInt('rem120pxabc')); //NaN// parseFloat 把字符型转换为数字型 结果为小数console.log(parseFloat('3.14')); //3.14console.log(parseFloat('120px')); //120console.log(parseFloat('rem120px')); //NaN// Number(变量)var str = '123';console.log(Number(str)); //123// 利用算术运算 - * / 隐式转换为数字型console.log('12' - 0); //12console.log('120' - '118'); //2console.log('12' / 1); //12 </script>

5.3.4.4 转换为布尔型

5.4 解释型语言和编译型语言

5.4.1 概述

5.4.2 执行过程

5.5 标识符、关键字、保留字

5.5.1 标识符

5.5.2 关键字

5.5.3 保留字

6、运算符

6.1 算术运算符

6.1.1 算术运算符概述

6.1.2 浮点数的精度问题

<script>//浮点数在运算时会有问题console.log(0.1 + 0.2); //0.30000000000000004console.log(0.07 * 100); //7.000000000000001// 不能直接拿浮点数进行比较var num = 0.1 + 0.2; console.log(num == 0.3); //false </script>

6.1.3 表达式和返回值

6.2 递增和递减运算符

6.2.1 递增和递减运算符概述

6.2.1.1 前置递增（递减）运算符

6.2.1.2 后置递增（递减）运算符

<script>// 递增运算符var e = 10;var f = e++ + ++e;console.log(f); //22 </script>

6.2.2 前置递增（递减）和 后置递增（递减）小结

6.3 比较运算符

6.3.1 比较运算符概述

6.3.2 = 小结

<script>// 比较运算符// == 类型会隐式转换，只要求值相等即可console.log(18 == '18'); //true // === 全等 一模一样:要求数值和类型完全一致console.log(18 === 18); //trueconsole.log(18 === '18'); //false </script>

6.4 逻辑运算符

6.4.1 逻辑运算符概述

6.4.2 逻辑与 &&

6.4.3 逻辑或 ||

6.4.4 逻辑非 ！

6.4.5 短路运算（逻辑中断）

6.4.5.1 逻辑与

6.4.5.2 逻辑或

<script>// 逻辑与短路运算//表达式1为真，返回表达式2console.log(123 && 456); //456//表达式1为假，返回表达式1console.log(0 && 456); //0console.log(0 && 1 + 2 && 456 * 567); //0// 逻辑或短路运算// 表达式1为真，返回表达式1console.log(123 || 345); //123// 表达式1为假，返回表达式2console.log(0 || 456 || 456 + 123); //456// 逻辑中断很重要，直接影响着程序运行的结果var num = 0;console.log(123 || num++); //123console.log(num); //0 </script>

6.5 赋值运算符

6.6 运算符优先级

7、流程控制

7.1 顺序结构

7.2 分支结构

7.2.1 if 语句（单分支语句）

7.2.1.1 语法结构

7.2.1.2 执行流程

7.2.2 if else 语句（双分支语句）

7.2.2.1 语法结构

7.2.2.2 执行流程

7.2.3 if else if 语句（多分支语句）

7.2.3.1 语法结构

7.2.3.2 执行流程

7.2.4 三元表达式

7.2.5 switch 语句

7.2.5.1 语法结构

7.2.5.2 switch语句和if else if 语句的区别

7.3 循环结构

• 在实际问题中，有许多具有规律性的重复操作，一次在程序中要完成这类操作就需要重复执行某些语句

7.3.1 for 循环

7.3.1.1 for 单循环

7.3.1.1.1 语法结构

7.3.1.1.2 断点调试

7.3.1.1.3 for 循环重复相同的代码

7.3.1.1.4 for 循环重复不相同的代码

7.3.1.1.5 for 循环重复某些相同的操作

7.3.1.2 双重 for 循环

7.3.1.3 for 循环小结

7.3.2 while 循环

7.3.3 do…while 循环

7.3.4 循环小结

7.3.5 continue break

7.3.5.1 continue

7.3.5.2 break

8、数组

8.1 数组的概念

8.2 创建数组

8.2.1 利用 new 创建数组

8.2.2 利用数组字面量创建数组

<script>// 利用new创建数组var arr = new Array(); //创建一个空的数组// 利用字面量创建数组var arr = []; // 创建一个空的数组// 数组里面的数据一定逗号分隔，数组里面的数据，称为数组元素var arr1 = [1, 2, 'AAA', true];console.log(arr1); </script>

8.3 获取数组元素

8.3.1 数组的索引

• 如果没有这个数组元素，输出的结果是 undefined

8.4 遍历数组

• 数组的长度：数组名.length
  
  
  
  
• 求数组 [2, 6, 1, 77, 52, 25, 7] 中的最大值

<script>var arr = [2, 6, 1, 77, 52, 25, 7];var max = arr[0];for (var i = 1; i < arr.length; i++) {if (arr[i] > max) {max = arr[i];}}console.log('该数组里面的最大值是：' + max); </script>

• 数组 [‘red’, ‘green’, ‘blue’, ‘pink’] 转换为字符串

<script>var arr = ['red', 'green', 'blue', 'pink'];var str = '';// 把变化的数值抽取成变量sep，这样 for 循环里的代码块就不需要改动了var sep = '|';for (var i = 0; i < arr.length; i++) {str += arr[i] + sep;}console.log(str);</script>

8.5 数组中新增元素

• 可以通过修改length长度以及索引号增加数组元素

8.5.1 通过修改 length 长度新增数组元素

8.5.2 通过修改数组索引新增数组元素

<script>var arr = ['red', 'green', 'blue'];console.log(arr.length);// 修改数组的长度arr.length = 5;console.log(arr.length);console.log(arr[3]); // undefinedconsole.log(arr[4]); // undefined// 新增数组元素 修改索引号var arr1 = ['red', 'green', 'blue'];// 如果没有元素，就追加数组元素arr1[3] = 'pink';console.log(arr1);arr1[4] = 'hotpink';console.log(arr1);// 有元素，就替换数组元素arr1[0] = 'yellow';console.log(arr1);// 不要直接给数组名赋值 否则会覆盖掉之前的数据arr1 = '有点意思';console.log(arr1); </script>

• 将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于10的元素选出来，放入新数组

//方法一： <script>var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];// 声明新数组var newArr = [];var j = 0;//遍历数组for (var i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// 新数组每次应该从0开始 依次递增，切记不能直接把元素赋值给数组名，否则会覆盖数组的数据newArr[j] = arr[i];j++;}}console.log(newArr); </script>//方法二： <script>var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];// 声明新数组var newArr = [];//遍历数组for (var i = 0; i < arr.length; i++) {if (arr[i] >= 10) {// newArr.length:新数组的长度，数组能自动检测长度newArr[newArr.length] = arr[i];}}console.log(newArr); </script>

8.6 数组案例

• 冒泡排序

<script>// 冒泡排序var arr = [5,4,3,2,1];//遍历数组for (var i = 0; i <= arr.length - 1; i++) {for (var j = 0; j <= arr.length - i - 1; j++) { // 外层循环管交换轮数if (arr[j] > arr[j + 1]) { // 内层循环在每轮中管元素交换次数var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}console.log(arr); </script>

8.7 伪数组

• 1、伪数组并不是真正意义的数组
• 2、具有数组的 length 的属性
• 3、按照数组索引的方式存储的
• 4、没有真正数组的一些方法 pop()、push() 等等

9、函数

9.1 函数的概念

9.2 函数的使用

9.2.1 函数有两种声明方式

9.2.1.1 函数关键字声明函数（命名函数）

9.2.1.2 函数表达式声明函数（匿名函数）

var 变量名 = function() {};

<script>// 函数表达式声明函数（匿名函数）// 1、fun 是变量名 不是函数名// 2、函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值，而函数表达式里面存的是函数// 3、函数表达式也可以传递参数var fun = function() {console.log('我是匿名函数');}fun();var fun1 = function(aru) {console.log('我是匿名函数');console.log(aru);}fun1('您好呀'); </script>

9.2.2 调用函数

9.2.3 函数封装

9.3 函数的参数

9.3.1 形参和实参

<script>// 求任意两个数的和function getSum(num1, num2) {console.log(num1 + num2);}getSum(1, 3);getSum(3, 8);// 求任意两个数之间的和function getSums(start, end) {var sum = 0;for (var i = start; i <= end; i++) {sum += i;}console.log(sum);}getSums(1, 100);getSums(1, 20);// 注意点// 1、多个参数之间用逗号隔开// 2、形参可以看做是不用声明的变量 </script>

9.3.2 函数形参和实参个数不匹配问题

<script>// 函数形参实参个数不匹配function getSum(num1, num2) {console.log(num1 + num2);}// 如果实参的个数多于形参的个数，会取到形参的个数getSum(1, 2, 3); // getSum的结果为3// 如果实参的个数小于形参的个数// 形参可以看做是不用声明的变量 num2 是一个变量 但是没有接受值 结果就是undefinedgetSum(1); // getSum的结果为NaN </script>

9.3.3 小结

9.4 函数的返回值

9.4.1 return 语句

<script>// 求两个数的最大值function getMax(num1, num2) {// 方法一：// if (num1 > num2) {// return num1; // return 终止函数，后面的代码是不会执行的// }// return num2;// 方法二：return (num1 > num2) ? num1 : num2; // 三元运算符}console.log('两个数的最大值：' + getMax(11, 111));// 求数组中元素的最大值function getArrMax(arr) {// 假定arr[0]为最大值，然后通过遍历数组，判断出数组元素中的最大值var max = arr[0];for (var i = 0; i < arr.length; i++) {if (arr[i] > max) {max = arr[i];}}return max;}// 在开发中，常用变量接收函数的返回值var result = getArrMax([5, 2, 99, 101, 67, 77]);console.log('数组中元素的最大值：' + result); </script>

9.4.2 return 终止函数

• return 后面的代码是不会执行的
• return 只能返回一个值

<script>// return 终止函数function getSum(num1, num2) {return num1 + num2; // return 后面的代码不会被执行alert("return 后面的代码是不会执行的！");}console.log(getSum(1, 2));// return 只能返回一个值function fn(num1, num2) {return num1, num2; // 返回的结果是最后一个值}console.log(fn(1, 2)); // 2// 求任意两个数 的 + - * / 的结果function getResult(num1, num2) {return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];}var result = getResult(1, 2);console.log(result); // [3, -1, 2, 0.5] </script>

9.4.3 函数没有return 返回 undefined

<script>// 函数有return，返回return 后面的值，如果没有return ，则返回undefinedfunction fun() {}console.log(fun); // undefined </script>

9.4.4 break,continue,return 的区别

9.5 通过榨汁机看透函数

9.6 arguments的使用

<script>// arguments 的使用,只有函数才有 arguments 对象function fn() {console.log(arguments); // arguments 里面存储了所有传递过来的实参，得到的结果是伪数组console.log(arguments.length); // 3console.log(arguments[2]); // 获取索引为2的元素：3// 遍历数组for (var i = 0; i < arguments.length; i++) {console.log(arguments[i]);}}fn(1, 2, 3);// 求任意个数的最大值function getMax() {var max = arguments[0];for (var i = 1; i < arguments.length; i++) {if (arguments[i] > max) {max = arguments[i];}}return max;}console.log(getMax(11, 2, 3));console.log(getMax(1, 2, 3, 4, 5, 6)); </script>

9.7 函数相互调用

• 每个函数都是独立的代码块，由于完成特殊任务，因此经常会用到函数相互调用的情况

<script>// 函数的相互调用function fn1() {console.log(11);fn2(); // 在函数fn1中调用函数fn2}fn1(); function fn2() {console.log(22);} </script>

9.8 函数案例

<script>// 翻转任意数组function reverse(arr) {var newArr = [];for (var i = arr.length - 1; i >= 0; i--) {newArr[newArr.length] = arr[i];}return newArr;}var reverseArr = reverse([4, 1, 2, 7]);console.log(reverseArr);// 冒泡排序function sort(arr) {for (var i = 0; i < arr.length - 1; i++) {for (var j = 0; j < arr.length - i - 1; j++) {if (arr[j] > arr[j + 1]) {var temp = arr[j];arr[j] = arr[j + 1];arr[j + 1] = temp;}}}return arr;}var sortArr = sort([11, 2, 1, 34, 2]);console.log(sortArr);// 判断闰年function isRunYear(year) {// 闰年为true，否则返回falsevar flag = false;if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {flag = true;}return flag;}console.log(isRunYear(2000));// 用户输入年份，输出当前年份2月份的天数；// 如果是闰年，2月份是29天，如果是平年，则2月份是28天function backDay() {var year = prompt('请您输入年份：');if (isRunYear(year)) { // if的条件表达式调用了isRunYear函数alert('当前年份是闰年，2月份的天数是29天');} else {alert('当前年份是平年，2月份的天数是28天');}}backDay(); </script>

10、作用域

10.1 作用域概述

10.2 变量的作用域

10.2.1 全局变量

10.2.2 局部变量

10.2.3 全局变量和局部变量的区别

10.3 块级作用域

<script>if (3 < 5) {var num = 10;}console.log(num); //10,是由于块级作用域的原因，可访问块级作用域中的变量 </script>

10.4 作用域链

• 就近原则
  

11、预解析

<script>console.log(num); // undefinedvar num = 10;/* 通过预解析相当于执行了以下的代码：（变量提升）var num;console.log(num);num = 10;*/fn(); // 打印的结果为11function fn() {console.log(11);}/* 通过预解析相当于执行了以下的代码：（函数提升）function fn() {console.log(11);}fn();*/fun(); // fun is not a functionvar fun = function() {console.log(22);}/* 通过预解析相当于执行了以下的代码：（变量提升）var fun;fun(); // fun函数未定义,所以会报错fun = function() {console.log(22); }*/// 预解析案例var num = 10;fun();function fun() {console.log(num);var num = 20;}/* {通过预解析相当于执行了以下的代码：var num;function fun() {var num;console.log(num);num = 20;}fun();*/// 预解析案例f1();console.log(c);console.log(b);console.log(a);function f1() {var a = b = c = 9;console.log(a);console.log(b);console.log(c);}/* {通过预解析相当于执行了以下的代码：var b;var c;function f1() {var a;a = 9;b = 9;c = 9;console.log(a);console.log(b);console.log(c);}f1();console.log(c);console.log(b);console.log(a);*/ </script>

12、对象

12.1 什么是对象

12.2 为什么需要对象

12.3 创建对象的三种方式

12.3.1 字面量创建对象

<script>// 利用对象字面量创建对象 {}var obj = {uname: '张三丰',age: 18,sex: '男',sayHi: function() {console.log('hi~');}}// 1）属性和方法是以键值对的形式呈现// 2）多个属性和方法是以逗号结束的// 3）方法冒号后面跟的是匿名函数// 使用对象有两种方式// 1）对象名.属性名// 2）对象名['属性名']console.log(obj.age);console.log(obj['uname']);// 调用对象的方法: 对象名.方法名obj.sayHi(); </script>

• 变量、属性、函数、方法的区别
  

12.3.2 new Object 创建对象

<script>// 利用new Object()创建对象// 1) 等号 = 赋值的方法 添加对象的属性和方法// 2）属性和方法是以分号结束的var obj = new Object(); // 创建了一个空的对象obj.uname = '张三丰';obj.age = 18;obj.sex = '男';obj.sayHi = function() {console.log('hi~');}console.log(obj.uname);console.log(obj['age']);obj.sayHi(); </script>

12.3.2.1 new 关键字

12.3.3 构造函数创建对象

<script>// 利用构造函数创建对象// 前两种方式一次只能创建一个对象// 利用构造函数把一些相同代码封装起来，这也是优于前两种创建对象的方式。封装的表示普通代码，而是对象// 构造函数的名字首字母要大写// 属性和方法前面必须添加thisfunction Star(uname, age, sex) {this.uname = uname;this.age = age;this.sex = sex;this.sing = function(sang) {console.log(sang);}}// new 调用构造函数// 构造函数不需要return也能返回结果// new 关键字执行过程// 1）new 构造函数可以在内存中创建了一个空的对象// 2）this 就会指向刚才创建的空对象// 3）执行构造函数里面的代码 给这个空对象添加属性和方法// 4）返回这个对象var ldh = new Star('刘德华',18,'男'); // 返回对象console.log(typeof ldh); // objectconsole.log(ldh.uname);console.log(ldh['age']);ldh.sing('冰雨');var jacky = new Star('张学友',19,'男');console.log(jacky); // Star {uname: "张学友", age: 19, sex: "男"}console.log(jacky.uname);console.log(jacky['sex']);jacky.sing('李春兰'); </script>

12.3.3.1 构造函数和对象

12.4 遍历对象

<script>// 遍历对象var obj = {name: 'pink对象',age: 18,sex: '男',fn: function(){}}// for in 遍历对象// for (变量 in 对象){}for (var k in obj) {console.log(k); // 获取属性名console.log(obj[k]); // 获取属性值} </script>

12.5 小结

13、内置对象

13.1 Math 对象

<script>console.log(Math.max(1,20,'AA')); // NaNconsole.log(Math.max()); // -Infinityconsole.log(Math.abs('-1')); // 1 隐式转换，会把字符串型 -1 转换为数字型console.log(Math.abs('pink')); // NaNconsole.log(Math.floor(1.9)); // 1 向下取整console.log(Math.ceil(1.1)); // 2 向上取整console.log(Math.round(-1.5)); // -1 对于四舍五入，取大值 </script>

• 随机数方法 random()

<script>// 随机数方法 random()console.log(Math.random()); // 0~1的随机小数function getRandomInt(min, max) {min = Math.ceil(min);max = Math.floor(max);// 两数之间的随机整数// return Math.floor(Math.random() * (max - min)) + min;// 两数之间的随机整数 包括两个数在内return Math.floor(Math.random() * (max - min + 1)) + min;} console.log(getRandomInt(1,20)); </script>

13.2 日期对象

13.2.1 Date 概述

13.2.2 Date() 方法的使用

13.2.2.1 获取当前时间必须实例化

13.2.2.2 Date() 构造函数的参数

<script>var date = new Date();console.log(date); // 返回系统当前时间var date1 = new Date(2019,10,1);console.log(date1); // 返回的是 11月 不是10月var date2 = new Date('2019-10-1 8:8:0');console.log(date2); </script>

13.2.3 日期格式化

<script>// 格式化日期var date = new Date();console.log(date.getHours()); // 时console.log(date.getMinutes()); // 分console.log(date.getSeconds()); // 秒// 要求封装一个函数返回当前的时分秒 function getTime() {var date = new Date();var h = date.getHours();h = h < 10 ? '0' + h : h;var m = date.getMinutes();m = m < 10 ? '0' + m : m;var s = date.getSeconds();s = s < 10 ? '0' + s : s; return h + ':' + m + ':' + s;}console.log(getTime()); </script>

13.2.4 获取日期的总的毫秒形式

<script>// 获取Date的毫秒数// valueOf()、getTime() 获取毫秒数的方法var date = new Date();console.log(date.valueOf()); console.log(date.getTime());// 简单写法(最常用的写法)var date1 = +new Date(); // 获取毫秒数console.log(date1);// h5 新增的方法console.log(Date.now()); // 获取毫秒数 </script>

13.2.5 倒计时案例

<script>// 倒计时案例function countDown(time) {var nowTime = +new Date(); // 返回的是当前时间的总毫秒数var inputTime = +new Date(time); // 返回用户输入时间的总好秒数var times = (inputTime - nowTime) / 1000; // 获取时间的秒数var days = parseInt(times / 60 / 60 / 24); // 剩余天数days = days < 10 ? '0' + days : days;var hours = parseInt(times / 60 / 60 % 24); // 剩余小时数hours = hours < 10 ? '0' + hours : hours;var minutes = parseInt(times / 60 % 60); // 剩余分钟数minutes = minutes < 10 ? '0' + minutes : minutes;var seconds = parseInt(times % 60); // 剩余秒数seconds = seconds < 10 ? '0' + seconds : seconds;return days + '天' + hours + '时' + minutes + '分' + seconds + '秒';}console.log(countDown('2021-5-25 18:00:00')); </script>

13.3 数组对象

13.3.1 数组对象的创建

<script>// 利用数组字面量创建数组var arr = [1,2,3];console.log(arr[0]);// 利用new Array()var arr1 = new Array(2); // 参数表示数组的长度console.log(arr1); // [empty × 2]var arr2 = new Array(2,3); // 等价于创建 [2,3] 的数组console.log(arr2); // [2, 3] </script>

13.3.2 检测是否为数组

<script>// 检测是否为数组// 1）instanceof 运算符 它可以用来检测是否为数组var arr = [];var obj = {};console.log(arr instanceof Array);console.log(obj instanceof Array);// 2）Array.isArray(参数) 检测是否为数组 H5 新增的方法console.log(Array.isArray(arr));console.log(Array.isArray(obj));// 翻转数组function reverse(arr) {// 对传入的参数，判断是否为数组if (arr instanceof Array) {var newArr = [];for (var i = 0; i < arr.length; i++){newArr[newArr.length] = arr[i];}return newArr;} else {return 'error 传入的参数必须为数组';}} </script>

13.3.3 添加删除数组元素的方法

<script>// 添加删除数组元素// 1、push() 数组的末尾 添加一个或多个数组元素var arr = [1,2,3];// arr.push(4,'red');console.log(arr.push(4,'red')); // 返回的数组个素console.log(arr); // 返回的是数组元素，原数组也会发生变化// 2、unshift() 数组的开头 添加一个或者多个数组元素// arr.unshift('red',18);console.log(arr.unshift('red',18)); // 返回的数组个数console.log(arr); // 原数组发生变化，返回数组的元素// 3、pop() 删除最后一个元素console.log(arr.pop()); // 返回删除的元素console.log(arr); // 原数组发生变化，返回删除后的数组元素// 4、shift() 删除开头的元素console.log(arr.shift()); // 返回删除的元素console.log(arr); // 原数组发生变化，返回删除后的数组元素 </script>

13.3.4 数组排序

<script>// reverse() 数组翻转var arr = ['pink','red','blue'];arr.reverse();console.log(arr);// sort() 数组排序var arr1 = [3,1,4,2];console.log(arr1.sort()); // 适合单位数的冒泡排序// 数组中含有双位数，上述排序方法就不能实现，需引入函数var arr2 = [13,4,77,1,7];arr2.sort(function(a,b) {return a - b; // 按照升序排序});console.log(arr2); </script>

13.3.5 数组索引方法

<script>// 数组去重案例// 封装数组去重的函数function unique(arr) {var newArr = [];for (var i = 0; i < arr.length; i++) {if(newArr.indexOf(arr[i]) === -1) {newArr.push(arr[i]);}}return newArr;}var demo = unique(['a','c','c','ab','a']);console.log(demo); </script>

13.3.6 数组转换为字符串

<script>// 数组转换为字符串// 1、toString() 数组转换为字符串var arr = [1,2,3];console.log(arr.toString()); // 1,2,3// 2、join(分隔符)var arr1 = ['green','red','pink'];console.log(arr1.join()); // 'green','red','pink' 参数为空，默认以逗号分隔console.log(arr1.join('-')); // green-red-pink </script>

13.4 字符串对象

13.4.1 基本包装类型

13.4.2 字符串的不可变

13.4.3 根据字符返回位置

<script>// 查找字符串"abcoefoxaaoihyersoo"中所有o出现的位置以及次数var str = 'abcoefoxaaoihyersoo';var index = str.indexOf('o');var num = 0;while(index !== -1) {console.log(index);index = str.indexOf('o',index + 1);num++;}console.log('o出现的次数：' + num); </script>

13.4.4 根据位置返回字符

<script>// 根据位置返回字符// 1、charAt(index) 根据位置返回字符var str = 'andy';//遍历字符for (var i = 0; i < str.length; i++) {// console.log(str.charAt(i)); // 返回字符// console.log(str.charCodeAt(i)); // 返回字符的ASCIIconsole.log(str[i]); // h5新增 } </script>

<script>var str = 'abcoefoxyozzopp';var o = {}for (var i = 0; i < str.length; i++) {var chars = str.charAt(i); // 通过遍历得到每一个字符if (o[chars]) {o[chars]++;} else {o[chars] = 1;}}console.log(o);// 遍历对象,打印出最大的次数var max = 0;for (var k in o) {if (o[k] > max) {max = o[k];}}console.log(max); </script>

13.4.5 字符串操作方法

<script>var str= 'andy';console.log(str.concat('red')); // andyred// substr('截取的起始位置','截取几个字符')var str1 = '附近的咖啡就大';console.log(str1.substr(2,2));// 替换字符 replace('被替换的字符','替换的字符') var str2 = 'andyaaa';// console.log(str.replace('a','b')); // 只会替换第一个字符// 替换所有的awhile (str2.indexOf('a') !== -1) {var str2 = str2.replace('a','b');}console.log(str2);// 字符转换为数组 split('分隔符') join 是把数组转换为字符串var str4 = 'red,pink,blue';console.log(str4.split(',')); </script>

14、简单类型和复杂类型

<script>// 简单数据类型 null 返回的是一个空的对象 如果对象不知道存储什么的时候，可以用null占位var timer = null;console.log(typeof timer); // object </script>

14.1 堆和栈

14.2 简单类型的内存分配

14.3 复杂类型的内存分配

14.4 简单类型传参

14.5 复杂类型传参

15、Web APIs

15.1 Web APIS

15.1.1 API

15.1.2 Web API

15.1.3 API和Web API的小结

15.2 DOM 基础

15.2.1 DOM简介

15.2.2 DOM树

15.2.3 获取元素

15.2.3.1 如何获取元素

15.2.3.1.1 根据ID获取

<body><div id="time">2021-09-09</div><script>// 因为文档页面从上往下加载，所以标签要在js语句上面，方能获取DOM对象// 通过 ID获取DOM对象// 参数必须是字符串 参数 id 大小写敏感var timer = document.getElementById('time');console.log(timer);console.log(typeof timer); // object// console.dir 打印返回的元素对象，更好的查看里面的属性和方法console.dir(timer);</script> </body>

15.2.3.1.2 根据标签名获取

<body><ul><li>AA1</li><li>AA2</li></ul><ul id="nav"><li>BB1</li><li>BB2</li></ul><script>var lis = document.getElementsByTagName('li');console.log(lis); // 获取元素的集合，以伪数组的形式存储console.log(lis[0]); // 遍历lis中的元素for (var i = 0;i < lis.length; i++) {console.log(lis[i]);}// element.getElementsByTagName() 可以得到这个元素里面的某些标签var nav = document.getElementById('nav'); // 获取id 的元素var navLis = nav.getElementsByTagName('li');console.log(navLis);</script> </body>

15.2.3.1.3 H5新增的方法获取

15.2.3.1.4 获取特殊元素（body,html）

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><script></script></head><body><div class="box"></div><div class="box"></div><div id="nav"><ul><li>AA1</li><li>AA2</li></ul></div><script>// getElementByClassName 获取元素集合var boxs = document.getElementsByClassName('box');console.log(boxs);// querySelector 返回指定选择器的第一个元素对象var firstBox = document.querySelector('.box');console.log(firstBox);var nav = document.querySelector('#nav');console.log(nav);var firstLi = document.querySelector('li');console.log(firstLi);// querySelectorAll() // 返回指定选择器的所有元素对象var allBox = document.querySelector('.box');console.log(allBox);// 获取body 元素var bodyEle = document.body;console.log(bodyEle);// 获取html元素var htmlEle = document.documentElement;console.log(htmlEle);</script> </body></html>

15.2.4 事件基础

15.2.4.1 事件概述

15.2.4.2 执行事件的步骤

15.2.4.3 常见的鼠标事件

15.2.5 操作元素

15.2.5.1 改变元素的内容

<body><button>显示当前系统时间</button><div>某个时间</div><p></p><script type="text/javascript">var btn = document.querySelector('button');var div = document.querySelector('div');btn.onclick = function() {div.innerText = getDate();}function getDate() {var date = new Date();var year = date.getFullYear();var month = date.getMonth() + 1;var dates = date.getDate();var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];var day = date.getDay();return '今天是：' + year + '年' + month + '月' + dates + '日' + arr[day];}var p = document.querySelector('p');p.innerText = getDate(); // 改变元素的内容</script> </body> <body><div></div><p>我是文字<span>123</span></p><script type="text/javascript">// 1. innerText 不识别html标签 去除空格和换行var div = document.querySelector('div');div.innerText = '<strong>AAA</strong>';// 2. innerHTML 识别HTML标签 保留空格和换行div.innerHTML = '<strong>AAA</strong>';// 可以获取元素里面的内容var p = document.querySelector('p');console.log(p.innerText);console.log(p.innerHTML);</script> </body>

15.2.5.2 常用元素的属性操作

<body><img src="images/s.gif" ><div>hello</div><script type="text/javascript">// 1 获取元素var img = document.querySelector('img');var div = document.querySelector('div');// 2 当前时间var date = new Date()var h = date.getHours();if (h < 12) {img.src = 'images/s.gif'; // 图片src属性的操作div.innerHTML = '上午好';} else if (h < 18) {img.src = 'images/x.gif';div.innerHTML = '下午好';} else {img.src = 'images/w.gif';div.innerHTML = '晚上好';}</script> </body>

15.2.5.3 表单元素的属性操作

<body><button>按钮</button><input type="text" value="输入内容"><script type="text/javascript">var btn = document.querySelector('button');var input = document.querySelector('input');btn.onclick = function() {// input.innerHTML = '点击了'; // 只能修改普通的盒子里的内容 如div// 表单里的值，通过value来修改input.value = '被点击了';// 如果表单被禁用 不能点击 disabled// btn.disabled = true; // 表单的按钮被禁用了this.disabled = true; // this 指向的是是事件函数的调用者 btn}</script> </body>

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>.box {position: relative;width: 400px;border-bottom: 1px solid #ccc;margin: 100px auto;}.box input {width: 370px;height: 30px;border: 0;outline: none;}.box img {position: absolute;top: 2px;right: 2px;width: 24px;}</style> </head><body><div class="box"><label for=""><img src="images/logo1.png" id="eye"></label><input type="password" name="" id="pwd"></div><script>// 获取元素var eye = document.getElementById('eye');var pwd = document.getElementById('pwd');// var flag = 0;eye.onclick = function() {if (flag == 0) {pwd.type = 'text';eye.src = 'images/logo2.png';flag = 1;} else {pwd.type = 'password';eye.src = 'images/logo1.png'flag = 0;}}</script> </body></html>

15.2.5.4 样式属性操作

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>div {width: 200px;height: 200px;background-color: pink;}.change {background-color: purple;color: #fff;font-size: 25px;margin-top: 100px;}</style> </head><body><div class="first">文本</div><script type="text/javascript">var text = document.querySelector('div');// element.style 获取修改元素样式，如果样式比较少或者功能简单的情况下使用// 如果改变的样式比较多或功能复杂的情况，element.className 类名样式操作text.onclick = function() {// 可能造成覆盖原类名的风险// this.className = 'change';// 保留原先的类名,使用多类名选择器操作this.className = 'first change';}</script> </body></html>

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>.box {position: relative;width: 74px;height: 88px;border: 1px solid #ccc;margin: 100px auto;font-size: 12px;text-align: center;color: #f40;}.box img {width: 60px;margin-top: 5px;}.close-btn {position: absolute;top: -1px;left: -16px;width: 14px;height: 14px;border: 1px solid #ccc;line-height: 14px;font-family: Arial, Helvetica, sans-serif;cursor: pointer;font-style: normal;}</style> </head><body><div class="box">淘宝二维码<img src="images/taobao.png" ><i class="close-btn">x</i></div><script>var btn = document.querySelector('.close-btn');var box = document.querySelector('.box');btn.onclick = function() {box.style.display = 'none';}</script> </body></html>

<body><div class="box"><ul><li></li><li></li><li></li></ul></div><script>// 获取所有的livar lis = document.querySelectorAll('li');for (var i = 0; i < lis.length; i++) {var index = i * 44;lis[i].style.backgroundPosition = '0 -'+ index +'px';}</script> </body>

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>input {color: #999;}</style> </head><body><input type="text" value="手机"><script>var input = document.querySelector('input');// 获取焦点事件 onfocusinput.onfocus = function() {if (this.value == '手机') {this.value = '';} // 获取焦点需要把文字变黑this.style.color = '#333';}// 失去焦点 onblurinput.onblur = function() {if (this.value === '') {this.value = '手机';}// 失去焦点 把文字变浅色this.style.color = '#999';}</script> </body></html>

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><style>div {width: 600px;margin: 100px auto;}.message {display: inline-block;font-size: 12px;color: #999;background: url(images/logo1.png) no-repeat left center;padding-left: 20px;}.wrong {color: red;background-image: url(images/wrong.png);}.right {color: green;background-image: url(images/right.png)}</style> </head><body><div class="register"><input type="password" class="ipt"><p class="message">请输入6~16位密码</p></div><script type="text/javascript">var ipt = document.querySelector('.ipt');var message = document.querySelector('.message');// 失去焦点ipt.onblur = function() {if (this.value.length < 6 || this.value.length) {message.className = 'message wrong';message.innerHTML = '您输入的位数不对';} else {message.className = 'message right';message.innerHTML = '您输入的正确';}}</script> </body></html>

15.2.5.5 操作元素小结

15.2.5.5 排他思想

<body><button>按钮1</button><button>按钮2</button><button>按钮3</button><button>按钮4</button><script type="text/javascript">// 获取所有的按钮元素var btns = document.getElementsByTagName('button');for (var i = 0; i < btns.length; i++) {btns[i].onclick = function() {// 先把所有的背景颜色清除掉for (var i = 0; i < btns.length; i++) {btns[i].style.backgroundColor = ''; // 背景颜色设置为空}// 然后再设置当前背景颜色this.style.backgroundColor = 'pink';}}</script> </body>

15.2.5.6 自定义属性的操作

15.2.5.6.1 获取属性值

15.2.5.6.2 设置属性值

15.2.5.6.3 移除属性值

<body><div id="demo" index="1" class="nav"></div><script>var div = document.querySelector('div');// 获取元素的属性值 // 1）element.属性console.log(div.id);// 2）element.getAttribute() 获取自定义的属性console.log(div.getAttribute('index'));// 设置元素属性值// 1）element.属性 = '值'div.id = 'test';div.className = 'navs';// 2) element.setAttribute('属性','值') 主要针对自定义属性div.setAttribute('index',2);div.setAttribute('class','navss');// element.removeAttribute(属性) 移除属性div.removeAttribute('index');</script> </body>

<body><script>// 获取元素var tab_list = document.querySelector('.tab_list');var lis = tab_list.querySelectorAll('li');// 获取内容的5个livar items = document.querySelector('.item');// for 循环绑定点击事件for (var i = 0; i < lis.length; i++) {// 给5个li标签 设置索引号lis[i].setAttribute('index',i);lis[i].onclick = function() {// 上面的模块选项卡，点击某一个，当前的底色是红色，其余不变 修改类名// 排他思想for (var i = 0; i < lis.length; i++) {lis[i].className = '';}this.className = 'current';// 显示下面的内容模块var index = this.getAttribute('index');// 内容模块使用排他思想for (var i = 0; i < items.length; i++) {items[index].style.display = 'none';}items[index].style.display = 'block';}}</script> </body>

15.2.5.6.4 H5自定义属性

<body><div getTime="20" data-index="2" data-list-name="andy"></div><script>var div = document.querySelector('div');// 获取自定义属性console.log(div.getAttribute('getTime'));// 设置自定义属性div.setAttribute('data-time',20);// 获取自定义属性console.log(div.getAttribute('data-index'));console.log(div.getAttribute('data-list-name'));// H5新增获取自定义属性的方法console.log(div.dataset); // dataset 是一个集合里面存放了所有以data开头的自定义属性console.log(div.dataset.index); console.log(div.dataset['index']);// 如果自定义属性里面有多个-链接的单词，获取的时候需采取驼峰命名法console.log(div.dataset.listName);console.log(div.dataset['listName']); </script> </body>

15.2.6 节点操作

15.2.6.1 利用DOM提供的方法获取元素

15.2.6.2 利用节点层级关系获取元素

15.2.6.3 节点概述

15.2.6.4 节点层级

15.2.6.4.1 父级节点

15.2.6.4.2 子级节点

<body><!-- 节点 --><div>div</div><span>span</span><ul><li>li1</li><li>li2</li><li>li3</li><li>li4</li><li>li5</li></ul><div class="demo"><div class="box"><span class="erweima">x</span></div></div><script>var erweima = document.querySelector('.erweima');// 节点操作 获取父结点// 得到的是离元素最近的父级节点console.log(erweima.parentNode);var ul = document.querySelector('ul');var lis = document.querySelectorAll('li');// 子结点 childNodes 所有的子结点 包含元素节点 文本节点等等console.log(ul.childNodes);// children 获取所有的子元素节点 也是实际开发常用的console.log(ul.children);// firstChild获取第一个子结点 不管是文本节点还是元素节点 都能获取到console.log(ul.firstChild);// lastChild获取最后一个子结点 不管是文本节点还是元素节点 都能获取到console.log(ul.lastChild);// firstElementChild 返回第一个子元素节点console.log(ul.firstElementChild);// firstElementChild 返回最后一个子元素节点console.log(ul.lastElementChild);// 实际开发 既没有兼容性问题又能返回第一个子元素console.log(ul.children);// 获取第一个子元素节点console.log(ul.children[0]);// 获取最后一个子元素节点console.log(ul.children[ul.children.length - 1]);</script> </body>

<body><script>// 1 获取元素var nav = document.querySelector('.nav');var lis = nav.children; // 得到4个li// 循环注册事件for (var i = 0; i < lis.length; i++) {lis[i].onmouseover = function() {this.children[1].style.display = 'block';}lis[i].onmouseout = function() {this.children[1].style.display = 'none';}}</script> </body>

15.2.6.4.3 兄弟节点

<body><div>div</div><span>span</span><script>var div = document.querySelector('div');// nextSibling 下一个兄弟节点 包含文本节点 元素节点console.log(div.nextSibling);console.log(div.previousSibling);// nextElementSibling 得到下一个兄弟元素节点console.log(div.nextElementSibling);console.log(div.previousElementSibling);</script> </body>

15.2.6.5 创建节点

15.2.6.6 添加节点

15.2.6.7 删除节点

<body><ul></ul><script type="text/javascript">// 创建元素节点var li = document.createElement('li');// 添加节点 node.appendChild(child) node 父级 child 是子级 追加元素var ul = document.querySelector('ul');ul.appendChild(li);// 添加节点 node.insertBefore(child,指定元素位置);var lili = document.createElement('li');ul.insertBefore(lili,ul.children[0]);</script> </body>

<body><textarea></textarea><button>发布</button><ul></ul><script type="text/javascript">// 获取元素var btn = document.querySelector('button');var text = document.querySelector('textarea');var ul = document.querySelector('ul');btn.onclick = function() {if (text.value == '') {alert('请输入内容。。。');return false;} else {// 创建元素var li = document.createElement('li');// 先有li 然后才能赋值li.innerHTML = text.value + "<a href='javascript:;'>删除</a>";// 添加元素 后面追加元素// ul.appendChild(li);// 一般发布的消息，先在前面显示ul.insertBefore(li,ul.children[0]);// 删除元素 删除当前链接的li var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// node.removeChild(child) 删除的是li 当前a所在的li this.parentNodeul.removeChild(this.parentNode);}}}}</script> </body>

15.2.6.8 复制节点（克隆节点）

<body><ul><li>1</li><li>2</li></ul><ul></ul><script type="text/javascript">var ul = document.querySelector('ul');// 复制节点var lili = ul.children[0].cloneNode(true);ul.appendChild(lili);</script> </body>

<body><script type="text/javascript">// 先准备数据var datas = [{name: '魏璎珞',subject: 'javascript',score: 100},{name: '弘历',subject: 'javascript',score: 90},{name: '傅恒',subject: 'javascript',score: 99},{name: '明玉',subject: 'javascript',score: 89}]// tbody里面创建行var tbody = document.querySelector('tbody');for (var i = 0; i < datas.length; i++) { // 外循环管行 tr// 创建tr行var tr = document.createElement('tr');tbody.appendChild(tr);// 行里面创建单元格 td(与数据有关的单元格)for (var k in datas[i]) { // 内循环管列 td// 创建单元格var td = document.createElement('td');// 把对象里面的属性值 datas[i][k] 给 tdtd.innerHTML = datas[i][k];tr.appChild(td);}// 创建删除2个字的单元格var td = document.createElement('td');td.innerHTML = '<a href="javascript:;">删除</a>';tr.appendChild(td);}// 删除操作var as = document.querySelectorAll('a');for (var i = 0; i < as.length; i++) {as[i].onclick = function() {// 点击a 删除 当前a 所在的行（链接的爸爸的爸爸） node.removeChild(child)tbody.removeChild(this.parentNode.parentNode);}}</script> </body>

15.2.6.9 三种动态创建元素区别

<body><button></buttton><p>abc</p><script type="text/javascript">// 三种创建元素方式区别var btn = document.querySelector('button');// 1） document.write() 页面加载完毕，在调用这句话会导致页面重绘btn.onclick = function() {document.write('<div>123</div>');}// 2) innerHTML 创建元素var inner = document.querySelector('.inner');// 创建一次// inner.innerHTML = '<a href="#">百度</a>';// 循环创建// for (var i = 0; i <= 100; i++) {// // 效率慢// inner.innerHTML += '<a href="#">百度</a>';// }var arr = [];for (var i = 0; i <= 100; i++) {arr.push('<a href="#">百度</a>');}inner.innerHTML = arr.join('');// 2) document.createElement() 创建元素var create = document.querySelector('.create');var a = document.createElement('a');// 创建一次create.appendChild(a);// 循环创建for (var i = 0; i <= 100; i++) {// 效率快var a = document.createElement('a');create.appendChild(a);}</script></body>

15.3 DOM 重点核心

15.3.1 创建

15.3.2 增

15.3.3 删

15.3.4 改

15.3.5 查

15.3.6 属性操作

15.3.7 事件操作

15.4 DOM 高级

15.4.1 注册事件（绑定事件）

15.4.1.1 ★addEventListener 事件监听方式

15.4.1.2 attachEvent 事件监听方式

15.4.1.3 注册事件兼容性解决方案

<body><button>传统注册事件</button><button>方法监听注册事件</button><button type="button">ie9 attachEvent</button><script type="text/javascript">var btns = document.querySelectorAll('button');// 1）传统注册事件btns[0].onclick = function() {alert('hi');}// 后面的事件会覆盖前面的事件btns[0].onclick = function() {alert('hello');}// 2）方法监听注册事件btns[1].addEventListener('click',function() {alert(22);})// 3) attachEvent ie9以前的版本支持 ie 独有的btns[2].attachEvent('onclick',function() {alert(11);})</script></body>

15.4.2 删除事件（解绑事件）

15.4.2.1 删除事件方式

15.4.2.2 删除事件兼容性解决方案

<body><div>1</div><div>2</div><div>3</div><script type="text/javascript">var divs = document.querySelectorAll('div');divs[0].onclick = function() {alert(11);// 1）传统方式解绑事件divs[0].onclick = null;}divs[1].addEventListener('click',fn); // 函数调用不需要加括号function fn() {alert(22);// 2）删除监听事件divs[1].removeEventListener('click',fn);}divs[2].attachEvent('onclick',fn1);function fn1() {alert(33);// 3) 删除事件 适用于IE浏览器divs[2].detachEvent('onclick',fn1);}</script></body>

15.4.3 DOM 事件流

<body><div class="father"><div class="son"></div></div><script type="text/javascript">// dom 事件流 三个阶段// addEventListener() 第三个参数为true,表示处于捕获阶段// 捕获阶段: document -> html -> body -> father -> sonvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, true);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, true); // 捕获：father -> son// addEventListener() 第三个参数为false,表示处于冒泡阶段// 冒泡阶段：son -> father -> body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false); document.addEventListener('click', function() {}, false); // 冒泡：son -> father -> document</script></body>

15.4.4 ★事件对象

<body><div>123</div><script type="text/javascript">// 事件对象var div = document.querySelector('div');// event 事件对象// 传统方法div.onclick = function(e) {// console.log(e);// ie678 通过window.event// console.log(window.event);// 解决兼容问题e = e || window.event;console.log(e);}// 事件监听方法 有兼容问题div.addEventListener('click', function(event) {console.log(event);})</script></body>

15.4.4.1 事件对象的常见属性和方法

<body><div>123</div><a href="http://www.baidu.com">百度</a><ul><li>abc</li><li>abc</li><li>abc</li></ul><script type="text/javascript">// 常见时间对象的属性和方法var div = document.querySelector('div');// e.target 返回的是触发事件的对象（元素） this 返回的是绑定事件的对象（元素）div.addEventListener('click', function(e) {console.log(e.target);console.log(this);});var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// 给ul绑定了事件，this 就指向ulconsole.log(this); // <ul>...</ul>// this 相似的属性：currentTarget ie678不能兼容console.log(e.currentTarget); // <ul>...</ul>// e.target 指向点击的对象 谁触发了这个事件 就指向谁console.log(e.target); // <li>abc</li>});// 解决兼容问题div.onclick = function(e) {e = e || window.event;var target = e.target || e.srcElement;console.log(target);};var div = document.querySelector('div');div.addEventListener('click', fn);div.addEventListener('mouseover', fn);div.addEventListener('mouseout', fn);function fn(e) {// 事件类型console.log(e.type);}// 阻止默认行为（事件）var a = document.querySelector('a');a.addEventListener('click', function(e) {e.preventDefault(); // 不支持低版本浏览器});// 传统注册方式a.onclick = function(e) {// 低版本浏览器e.returnValue; // 阻止默认行为// 利用 return false 也能阻止默认行为 没有兼容性问题return false; // 缺点：后面的代码不能执行};</script></body>

15.4.5 阻止事件冒泡

<body><div class="father"><div class="son"></div></div><script type="text/javascript">// addEventListener() 第三个参数为false,表示处于冒泡阶段// 冒泡阶段：son -> father -> body -> html -> documentvar son = document.querySelector('.son');son.addEventListener('click', function() {alert('son');// 阻止事件冒泡e.stopPropagation();e.cancelBubble = true; // 非标准 阻止事件冒泡}, false);var father = document.querySelector('.father');father.addEventListener('click', function() {alert('father');}, false); document.addEventListener('click', function() {}, false); // 冒泡：son -> father -> document</script></body>

15.4.6 事件委托（代理、委派）

<body><ul><li>AA1</li><li>AA2</li><li>AA3</li><li>AA4</li></ul> <script type="text/javascript">// 事件委托的核心原理： 给父节点添加监听器，利用事件冒泡影响每一个子节点var ul = document.querySelector('ul');ul.addEventListener('click', function(e) {// alert('AAA');// e.target 可以得到点击对象e.target.style.backgroundColor = 'pink';});</script></body>

15.4.7 常用的鼠标事件

<body>Hello world! <script type="text/javascript">// contextmenu 禁用右键菜单document.addEventListener('contextmenu', function(e) {e.preventDefault();});// 禁止 选中文字 selectstartdocument.addEventListener('selectstart', function(e) {e.preventDefault();});</script></body>

15.4.7.1 mouseenter 和 mouseover的区别

15.4.7.2 鼠标事件对象（MouseEvent）

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title>、<style type="text/css">img {position: absolute;}</style> </head><body><img src="images/logo.png" alt=""><script type="text/javascript">// 鼠标事件对象 MouseEvent// document.addEventListener('click', function(e) {// // 1) client 鼠标在可视区的x和y坐标// console.log(e.clientX);// console.log(e.clientY);// // 2）page 鼠标在页面文档的x和y坐标// console.log(e.pageX);// console.log(e.pageY);// });var pic = document.querySelector('img');document.addEventListener('mouseover', function(e) {var x = e.pageX;var y = e.pageY;console.log('x坐标是：' + x + ' y坐标是：' + y);// 一定要给left top 加px单位,x、y 减 40 目的是让图片居中pic.style.left = x - 40 + 'px';pic.style.top = y - 40 + 'px';});</script></body></html>

15.4.8 常用的键盘事件

<script type="text/javascript">// 常用键盘事件// 1）keyup 按键弹起的时候触发// document.onkeyup = function() {// console.log('onkeyup');// }// document.addEventListener('keyup', function() {// console.log('keyup');// });// 2) keydown 按键按下的时候触发// document.addEventListener('keydown', function() {// console.log('keydown');// });// 3）keypress 按键按下的时候触发 功能键不能识别 如ctrl shift等document.addEventListener('keypress', function() {console.log('keypress');});// 三个事件的执行顺序 keydown -> keypress -> keyup </script>

15.4.8.1 键盘事件对象

<script type="text/javascript">// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值// keyup keydown事件不区分大小写 a和A 得到的都是65document.addEventListener('keyup', function(e) {console.log(e.keyCode);// 可利用keycode返回ASCII码值来判断用户按下了那个键if (e.keyCode === 65) {alert('按下的是a键');} else {alert('按下的不是a键');}});// keypress事件是区分大小写document.addEventListener('keypress', function(e) {console.log(e.keyCode);}); </script>

<body><input type="text"><script type="text/javascript">var search = document.querySelector('input');// keydown 会在搜索框输入内容 而keyup不会，因为键盘弹起才触发事件document.addEventListener('keyup', function(e) {if (e.keyCode === 83) {// 获取焦点search.focus();}});</script></body>

<body><div class="search"><div class="con">123</div><input type="text" placeholder="请输入您的快递单号" class='jd'></div><script type="text/javascript">var con = document.querySelector('.con');var jd_input = document.querySelector('.jd');jd_input.addEventListener('keyup', function(e) {if (this.value == '') {con.style.display = 'none';} else {// 输入的内容给大盒子con.style.display = 'block';con.innerText = this.value;}});// 失去焦点 隐藏大盒子jd_input.addEventListener('blur', function() {con.style.display = 'none';});// 获得焦点 显示大盒子jd_input.addEventListener('focus', function(){// 输入框内有内容，才显示大盒子if (this.value !== '') {con.style.display = 'block';}});</script></body>

15.5 BOM

15.5.1 BOM 构成

15.5.2 window 对象的常见事件

15.5.2.1 窗口加载事件

<script type="text/javascript">window.onload = function() {var btn = document.querySelector('button');btn.addEventListener('click', function(){alert('AA1');});}// 后面的事件会覆盖前面的事件window.onload = function() {alert('AA2');}// 下面的方式不会冲突window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function(){alert('AA3');});})window.addEventListener('load', function() {alert('AA4');})// load 页面内容全部加载完毕，包含页面dom元素 图片 flash css 等等// 页面图片很多的话，DOMContentLoaded 加载DOM加载完毕，不包含falsh css，加载速度比 load更快一些document.addEventListener('DOMContentLoaded', function() {alert(33);}) </script>

15.5.2.2 调整窗口大小事件

<body><div></div><script type="text/javascript">// 页面加载，解决js书写位置而无效的问题window.addEventListener('load', function() {var div = document.querySelector('div');window.addEventListener('resize', function() {// 获取到屏幕的宽度console.log(window.innerWidth);if (window.innerWidth <= 800) {// 屏幕宽度为800,div的盒子隐藏div.style.display = 'none';}});});</script> </body>

15.5.3 定时器

15.5.3.1 setTimeOut() 定时器

<body><div></div><script type="text/javascript">window.addEventListener('load', function() {// 1) setTimeoutsetTimeout(function() {console.log('time is over');}, 2000);function callback() {console.log('hi~');}// 可以写函数名setTimeout(callback, 2000);// 可以给定时器加标识符var timer = setTimeout(callback, 3000);});</script> </body>

15.5.3.2 停止setTimeOut() 定时器

<body><script type="text/javascript">window.addEventListener('load', function() {var btn = document.querySelector('button');var timer = setTimeout(function() {console.log('AAA');},5000);btn.addEventListener('click', function() {clearTimeout(timer);});});</script><button>点击停止定时器</button> </body>

15.5.3.3 setInterval() 定时器

<body><script type="text/javascript">// setInterval() 重复调用 setTimeout() 只调用一次window.addEventListener('load', function() {setInterval(function() {console.log('hello');},1000);});</script><button>点击停止定时器</button> </body>

<body><script type="text/javascript">window.addEventListener('load', function() {var hour = document.querySelector('.hour');var minute = document.querySelector('.minute');var second = document.querySelector('.second');var inputTime = +new Date();countDown(); // 先调用一次函数，防止第一次刷新页面有空白// 开启定时器setInterval(countDown, 1000);function countDown(time) {var nowTime = +new Date();var times = (inputTime - nowTime) / 1000;var h = parseInt(times / 60 / 60 % 24);h = h < 10 ? '0' + h : h;hour.innerHTML = h;var m = parseInt(times / 60 % 60);m = m < 10 ? '0' + m : m;minute.innerHTML = m;var s = parseInt(times % 60);s = s < 10 ? '0' + s : s;second.innerHTML = s;}});</script><div><span class="hour"></span><span class="minute"></span><span class="second"></span></div> </body>

15.5.3.4 停止setInterval() 定时器

<body><script type="text/javascript">window.addEventListener('load', function() {var begin = document.querySelector('.begin');var stop = document.querySelector('.stop');var timer = null;begin.addEventListener('click', function() {timer = setInterval(function() {console.log('hello');}, 1000);});stop.addEventListener('click',function() {clearInterval(timer);});});</script><button class="begin">开启定时器</button><button class="stop">停止定时器</button> </body>

<body><script type="text/javascript">window.addEventListener('load', function() {var btn = document.querySelector('button');var time = 2;var timer = null;btn.addEventListener('click', function() {this.disabled = true;// button 特殊，是通过innerHTML修改值的var timer = setInterval(function() {if (time == 0) {// 清除定时器，恢复按钮clearInterval(timer);btn.disabled = false;btn.innerHTML = '发送';time = 2; // 重新开始计时} else {btn.innerHTML = '还剩下'+ time-- +'秒';}},1000);});});</script>手机号码：<input type="number"> <button>发送</button> </body>

15.5.3.5 this

<body><script type="text/javascript">window.addEventListener('load', function() {// 1）全局作用域或者普通函数中this指向全局对象 window （注意定时器里面的this指向window）console.log(this); // this指向windowfunction fn() {console.log(this); // this指向window}// window 可省略window.fn();// window 可省略window.setTimeout(function() {console.log(this); // this指向window},1000)// 2）方法调用中谁调用this指向谁var o = {sayHi: function() {cconsole.log(this); // this指向对象o}}o.sayHi();// var btn = document.querySelector('button');// btn.onclick = function() {// console.log(this); // this指向对象btn// };btn.addEventListener('click',function() {console.log(this); // this指向对象btn});// 3) 构造函数中this指向构造函数的实例function Fun() {console.log(this); // this 指向Fun的实例对象}var fun = new Fun();});</script><button>按钮</button> </body>

15.5.4 JS执行队列

15.5.4.1 JS是单线程

15.5.4.2 同步和异步

15.5.5 location 对象

15.5.5.1 URL

15.5.5.2 location 对象的属性

<body><script type="text/javascript">window.addEventListener('load', function() {var btn = document.querySelector('button');btn.addEventListener('click', function() {// console.log(window.location.href); // 获取urllocation.href = 'http://www.baidu.com'; // 在浏览器跳转页面的效果});var div = document.querySelector('div');var timer = 5;setInterval(function() {if (timer == 0) {// 5秒后跳转到首页location.href = 'http://www.baidu.com';} else {div.innerHTML = '将在'+ timer-- +'秒后跳转到首页';}},1000);});</script><button>点击</button><div></div> </body>

• login.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><form action="index.html">用户名：<input type="text" name="uname"><input type="submit" value="登录"></form></body> </html>

• index.html

<html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title> </head><body><div></div><script>console.log(location.search);// 先去掉？var params = location.search.substr(1);console.log(params);// 利用=把字符串分割为数组var arr = params.split('=');console.log(arr);var div = document.querySelector('div');// 把数据写入div中div.innerHTML = arr[1] + '欢迎~';</script> </body></html>

15.5.5.3 对象的方法

<body><button>点击</button><script>var btn = document.querySelector('button');btn.addEventListener('click', function() {// 跳转的页面，记录浏览历史的，可以后退// location.assign('http://www.baidu.com');// 跳转的页面，不记录浏览历史的，不可以后退// location.replace('http://www.baidu.com');location.reload(true); // 强制刷新});</script> </body>

15.5.6 navigator 对象

15.5.7 history 对象

• index.html

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title> </head><body><a href="list.html">点击我去往列表页</a><button>前进</button><script>var btn = document.querySelector('button');btn.addEventListener('click',function() {// 前进// history.forward();history.go(1);});</script> </body></html>

• list.html

<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><a href="index.html">点击我去往首页</a><button>后退</button><script type="text/javascript">var btn = document.querySelector('button');btn.addEventListener('click',function() {// 后退// history.back();history.go(-1);});</script></body> </html>

15.5.8 案例：表格添加/删除事件

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">tr {height: 70px;}td, th {width: 150px;text-align: center;}</style><script type="text/javascript">function addNode() {// 获取tablevar tab = document.getElementById("tab");// 创建tr节点对象var tr = document.createElement("tr");// 创建td对象var td1 = document.createElement("td");td1.innerHTML = "<input type='text' size='10px' οnblur='saveVal(this)'>";var td2 = document.createElement("td");td2.innerHTML = "<input type='text' size='10px' οnblur='saveVal(this)'>";var td3 = document.createElement("td");td3.innerHTML = "<input type='button' value='添加'>" + "<input type='button' value='删除' οnclick='removeNode(this)'>";// 追加节点tab.appendChild(tr);tr.appendChild(td1);tr.appendChild(td2);tr.appendChild(td3);}function saveVal(thi) {// 获取父结点var td = thi.parentNode;td.innerText = thi.value;}function removeNode(thi) {// 获取tr节点var tr = thi.parentNode.parentNode;tr.remove();}</script></head><body><table border="1px" align="center" id="tab"><tr><th>图书名称</th><th>图书价格</th><th>操作</th> </tr><tr><td>javaSE</td><td>19</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="删除" ></td></tr><tr><td>javaEE</td><td>39</td><td><input type="button" value="添加" onclick="addNode()"><input type="button" value="删除" ></td></tr></table></body> </html>

15.5.9 案例：更换主题

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><style type="text/css">body {background-image: url(images/1.jpg.dpg);background-repeat: no-repeat;background-size: 1600px 800px;}a {font-size: 25px;color: #FFFFFF;}.div1 {width: 300px;height: 200px;background-color: gray;text-align: center;}input {width: 40px;height: 30px;}</style><script>var i = -1;// 更换主题function changebc() {var arr = ['1.jpg.dpg','2.jpg.dpg','3.jpg.dpg'];if (i < arr.length - 1) {i++;} else {i = 0;}document.body.style.backgroundImage = "url(images/"+ arr[i] +")";}function changemove() {// 获取div对象var div = document.getElementById("div_1");div.style.marginTop = Math.random() * 500 + "px";div.style.marginLeft = Math.random() * 800 + "px";}function changechlick() {document.body.style.backgroundImage = "url(images/1.jpg.dpg)";document.getElementById('div_1').display = "none";}</script></head><body><a href="javascript:changebc()">点击更换主题</a><div class="div1" id="div_1"><h3>hello world</h3><input type="button" value="是" onclick="changechlick()"><input type="button" value="否" onmouseover="changemove()"></div></body> </html>

15.5.10 案例：提交表单

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><script type="text/javascript">// 判断账号是否为空function checkName() {var unameValue = document.getElementById("uname").value;var span = document.getElementById("uname_span");if (unameValue == null || unameValue == "") {span.innerText = "账号不能为空";// return false; // 方法一} else {span.innerText = "账号合法";// return true; // 方法一// 手动提交表单document.fom.submit();}}</script></head><body><!-- readonly和disabled: 1）两者可以看到数据，但不可以修改数据；2）readonly的数据可以提交到后台，但disabled的数据无法提交到后台 --><!-- 方法一：--><!-- οnsubmit="return checkName()" --><!-- 表单提交时的判断 --> <form action="#" name="fom"><p>账号：<input type="text" name="uname" value="123" id="uname" onblur="checkName()"><span id="uname_span"></span></p><p>密码：<input type="password" name="pwd" value="123"></p><p><!-- 方法二：--><input type="submit" value="提交" onclick="checkName()"></p></form></body> </html>

15.5.11 案例：注册页面的校验

<!DOCTYPE html> <html><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1"><title></title><script>var ran;// 验证码的生成function YZM() {// 四位随机整数ran = Math.floor(Math.random()*9000 + 1000);var span = document.getElementById("yzm_span");span.innerText = ran;}// 校验用户名function checkName() {// 正则表达式var reg = /^[\u4e00-\u9fa5]{3,5}$/;return check('uname', reg);// var nameValue = documetn.getElementById('uname').value;// var span = document.getElementById('uname_span');// if (nameValue == null || nameValue == '') {// span.innerText = 'X用户名不能为空';// span.style.color = 'red';// } else if(reg.test(nameValue)) {// span.innerText = '√用户名合法';// span.style.color = 'green';// } else {// span.innerText = '×用户名不合法';// span.style.color = 'red';// }}// 校验密码function checkPwd() {// 正则表达式var reg = /^\d{3,6}$/;return check('pwd', reg);// var nameValue = documetn.getElementById('pwd').value;// var span = document.getElementById('pwd_span');// if (nameValue == null || nameValue == '') {// span.innerText = 'X密码不能为空';// span.style.color = 'red';// } else if(reg.test(nameValue)) {// span.innerText = '√密码合法';// span.style.color = 'green';// } else {// span.innerText = '×密码不合法';// span.style.color = 'red';// }}// 校验邮箱function checkEmail() {var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;return check('email', reg);}// 抽取表单验证的公共方法function check(id, reg) {var uname = documetn.getElementById(id);var val = uname.value;// 获取alt属性var alt = uname.alt;var span = document.getElementById(id + '_span');if (nameValue == null || nameValue == '') {span.innerText = 'X'+ alt +'不能为空';span.style.color = 'red';return false;} else if(reg.test(nameValue)) {span.innerText = '√'+ alt +'合法';span.style.color = 'green';return true;} else {span.innerText = '×'+ alt +'不合法';span.style.color = 'red';return false;}}// 性别检验function checkSex() {// 获取所有的性别对象var sex = document.getElementsByName('sex');var span = document.getElementById('sex_span');for (var i in sex) {if (sex[i].checked) {span.innerHTML = "性别选择成功";span.style.color = "green";return true;}}span.innerHTML = "请选择性别";span.style.color = "green";return true;}// 籍贯的校验function checkAddress() {var selValue = document.getElementById('sel').value;var span = document.getElementById('sel_span');if (sel == 0) {span.style.color = "red";span.innerText = "请选择籍贯";return false;} else {span.style.color = "green";span.innerText = "籍贯选择成功";return true;}}// 验证码输入校验function checkYZM() {// 获得自己输入的验证码var yzm = document.getElementById('yzm').value;// 获得span标签var span = document.getElementById('yzm2_span');if (ran == yzm) {span.style.color = "green";span.innerText = "验证码正确";return true;} else {span.style.color = "red";span.innerText = "验证码错误";return false;}}// 是否同意协议function checkAgree() {var check = document.getElementById("check");var sub = document.getElementById("sub");sub.disabled = !check.checked;}// 对所有的方法要进行校验function zong() {var flag = checkName()&&checkPwd()&&checkEmail()&&checkSex()&&checkYZM()&&checkAddress()&&checkAgree();return flag;}</script></head><body> </body> </html>

16、网页特效

16.1 元素偏移量offset系列

<body><div class="father"><div class="son"></div></div><div class="w"></div><script>// offset系列var father = document.querySelector('.father');var son = document.querySelector('.son');// 1) 得到元素的偏移位置 返回的不带单位的数值console.log(father.offsetTop);console.log(father.offsetLeft);// 有定位，以父亲为准，有父亲或者父亲没有定位，则以body为准console.log(son.offsetLeft);var w = document.querySelector('.w');// 2）得到元素的大小 宽度和高度 包含padding + border + widthconsole.log(w.offsetWidth);console.log(w.offsetHeight);// 3）返回带有定位的父亲 否则返回的是bodyconsole.log(son.offsetParent);console.log(son.parentNode); // 返回的是最近的父级节点，不管父级是否有定位</script> </body>

16.1.1 offset 与 style 区别

<body><div class="box"></div><script>var box = document.querySelector('.box');box.addEventListener('mousemove', function(e) {// console.log(e.pageX);// console.log(e.pageY);// console.log(box.offsetTop);// console.log(box.offsetLeft);var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;this.innerHTML = 'x坐标是' + x + 'y坐标是' + y;});</script> </body>

<body><script>var login = document.querySelector('.login');var mask = document.querySelector('.login-bg');var link = document.querySelector('#link');var closeBtn = document.querySelector('#closeBtn');var title = document.querySelector('#title');// 点击弹出层这个链接 link 让mask 和 login 显示出来link.addEventListener('click', function() {mask.style.display = 'block';login.style.display = 'block';});// 点击closeBtn 就隐藏 mask 和 logincloseBtn.addEventListener('click', function() {mask.style.display = 'none';login.style.display = 'none';});// 开始拖拽// 1) 鼠标按下，就获得鼠标在盒子内的坐标title.addEventListener('mousedown', function(e) {var x = e.pageX - login.offsetLeft;var y = e.pageY - login.offsetTop;// 2) 鼠标移动的时候，把鼠标在页面的坐标 减去 鼠标在盒子内的坐标 就是模态框的left和top的值document.addEventListener('mousemove', move);function move(e) {login.style.left = e.pageX - x + 'px';login.style.top = e.pageY -y + 'px';}// 3) 鼠标弹起，就让鼠标移动事件移除document.addEventListener('mouseup', function() {document.removeEventListener('mousemove', move);});});</script> </body>

window.addEventListener('load', function() {var preview_img = document.querySelector('.preview_img');var mask = document.querySelector('.mask');var big = document.querySelector('.big');// 1) 鼠标经过preview_img 就显示和隐藏 mask 遮挡层 和 big 盒子preview_img.addEventListener('mouseover', function() {mask.style.display = 'block';big.style.display = 'block';});preview_img.addEventListener('mouseout', function() {mask.style.display = 'none';big.style.display = 'none';});preview_img.addEventListener('mousemove', function(e) {// 计算出鼠标在盒子内的坐标var x = e.pageX - this.offsetLeft;var y = e.pageY - this.offsetTop;// 把鼠标的坐标 给黄色的盒子,鼠标的坐标分别减去黄色盒子宽、高的一半，光标就能居中// mask 移动的距离var maskX = x - mask.offsetWidth / 2;var maskY = y - mask.offsetHeight / 2;var maskMaxX = preview_img.offsetWidth - mask.offsetWidth; // 遮挡层最大移动距离var maskMaxY = preview_img.offsetHeight - mask.offsetHeight;if (maskX <= 0 /* mask的x坐标不能小于0*/) {maskX = 0;} else if (maskX >= maskMaxX /* 不能超过 小图片盒子宽度减去遮挡层宽度*/) {maksX = maskMaxX;}if (maskY <= 0 /* mask的y坐标不能小于0*/) {maskY = 0;} else if (maskX >= maskMaxY /* 不能超过 小图片盒子高度减去遮挡层高度*/) {maksY = maskMaxY;}mask.style.left = maskX + 'px';maks.style.top = maskY + 'px';// 大图片移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层最大移动距离var bigImg = document.querySelector('.bigImg');var bigMaxX = bigImg.offsetWidth/* 大图片的宽度 */ - big.offsetWidth/* 大盒子的宽度 */; // 大图片最大移动距离var bigMaxY = bigImg.offsetWidth/* 大图片的宽度 */ - big.offsetWidth/* 大盒子的宽度 */// 大图片移动距离 var bigX = maskX * bigMaxX / maskMaxX;var bigY = maskY * bigMaxY / maskMaxY;bigImg.style.left = -bigX + 'px';bigImg.style.top = -bigY + 'px';}); });

16.2 元素可视区 client 系列

<body><div></div><script>var div = document.querySelector('div');console.log(div.clientWidth);</script> </body>

16.2.1 立即执行函数

<body><div></div><script>// 立即执行函数：不需要调用，立马能够自己执行的函数 可以传递参数// 写法： (function() {})() 或者 (function() {}())(function(a) {console.log(a);})(1);// 立即执行函数最大的作用就是 独立创建了一个作用域,里面的变量都是局部变量且不会有冲突(function(a,b) {console.log(a + b);var num = 10;}(2,3))</script> </body>

16.3 元素滚动 scroll 系列

16.3.1 元素 scroll 系列属性

<body><div style="overflow: auto; height: 50px; width: 50px;">附近的空间发扣kjfkdjfkafdkjfkdasjfkajfkdasjf</div><script>// scroll 系列var div = document.querySelector('div');console.log(div.scrollHeight);console.log(div.clientHeight);// scroll 事件 滚动条发生变化会触发的时间div.addEventListener('scroll', function() {console.log(div.scrollTop);});</script> </body>

<body><div class="slider-bar"><span class="goBack">返回顶部</span></div><div class="header">头部区域</div><div class="banner">banner区域</div><div class="main w">主体部分</div><script>var sliderbar = document.querySelector('.slider-bar');var banner = document.querySelector('.banner');var main = document.querySelector('.main');var goback = document.querySelector('.goBack');// banner.offsetTop 被卷去头部的大小，一定要写在外面var bannerTop = banner.offsetTop;// 固定定位之后应该变化的数值var sliderbarTop = sliderbar.offsetTop - bannerTop;var mainTop = main.offsetTop;// 页面滚动事件document.addEventListener('scroll', function() {// window.pageYOffset 页面被卷去的头部cconsole.log(window.pageYOffset);// 当页面被卷去的头部大于等于 172 时， 侧边栏就改为固定定位if (window.pageYOffset >= bannerTop) {sliderbar.style.position = 'fixed';sliderbar.style.top = sliderbarTop + 'px';} else {sliderbar.style.position = 'absolute';sliderbar.style.top = '300px';}// 页面滚动到main盒子，就显示goback模块if (window.pageYOffset >= mainTop) {goback.style.display = 'block';} else {goback.style.display = 'none';}});</script> </body>

16.2.2 页面被卷去的头部兼容性解决方案

16.4 三大系列小结

16.5 动画函数封装

16.5.1 动画实现原理

<body><div></div><script>// 动画原理var div = document.querySelector('div');var timer = setInterval(function() {if (div.offsetLeft >= 400) {// 停止动画，本质是停止定时器clearInterval(timer);}// 盒子移动距离div.style.left = div.offsetLeft + 1 + 'px';} ,30);</script> </body>

16.5.2 动画函数封装

<body><button class="btn500">目标位置500</button><button class="btn800">目标位置800</button><div></div><span></span><script>// 动画函数的封装 动画必须要定位 obj 目标对象 target 目标位置function animate(obj, target, callback) {// 如果不断点击，导致动画速度变快，因为开启太多的定时器，解决方案：让元素只有一个定时器执行// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);// 给不同的元素指定了不同的定时器obj.timer /* 不用给timer开辟新的内存空间，而是使用的是obj的一个属行，这样做节省资源，提高性能*/= setInterval(function() {// 步长值写在定时器里面 步长公式：(目标值 - 现在的位置) / 10var step = (target - obj.offsetLeft) / 10; // 小数要取整 才能保证盒子移动到整数目标位置step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止动画，本质是停止定时器clearInterval(obj.timer);// 回调函数一定写在定时器结束里面if (callback) {callback();}}// 盒子移动距离// 把每次加1 这个步长值改为一个慢慢变小的值 // obj.style.left = obj.offsetLeft + 1 + 'px';obj.style.left = obj.offsetLeft + step + 'px';} ,30);}var div = document.querySelector('div');var span = document.querySelector('span');var btn500 = document.querySelector('.button500');var btn800 = document.querySelector('.button800');// 调用函数animate(div, 300);btn500.addEventListener('click', function() {animate(span, 500)});btn800.addEventListener('click', function() {animate(span, 800, function() {// 前面的动作执行完成，回调函数才执行// alert('hello');span.style.backgroundColor = 'red';})});// 匀速动画 盒子当前的位置 + 固定的值// 缓动动画 盒子当前的位置 + 变化的值</script> </body>

16.5.3 缓动效果原理

16.5.4 动画函数添加回调函数

16.5.5 动画函数封装到单独JS文件中‘

• animate.js

// 动画函数的封装 动画必须要定位 obj 目标对象 target 目标位置 function animate(obj, target, callback) {// 如果不断点击，导致动画速度变快，因为开启太多的定时器，解决方案：让元素只有一个定时器执行// 先清除以前的定时器，只保留当前的一个定时器执行clearInterval(obj.timer);// 给不同的元素指定了不同的定时器obj.timer /* 不用给timer开辟新的内存空间，而是使用的是obj的一个属行，这样做节省资源，提高性能*/ = setInterval(function() {// 步长值写在定时器里面 步长公式：(目标值 - 现在的位置) / 10var step = (target - obj.offsetLeft) / 10;// 小数要取整 才能保证盒子移动到整数目标位置step = step > 0 ? Math.ceil(step) : Math.floor(step);if (obj.offsetLeft == target) {// 停止动画，本质是停止定时器clearInterval(obj.timer);// 回调函数一定写在定时器结束里面// if (callback) {// callback();// }callback&&callback(); // 短路运算符}// 盒子移动距离// 把每次加1 这个步长值改为一个慢慢变小的值 // obj.style.left = obj.offsetLeft + 1 + 'px';obj.style.left = obj.offsetLeft + step + 'px';}, 30); }

<!DOCTYPE html> <html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>JavaScript</title><script src="js/animate.js" type="text/javascript" charset="utf-8"></script> </head><body><div class="sliderbar"><span>←</span><div class="con">问题反馈</div></div><script>var sliderbar = document.querySelector('.sliderbar');// var span = document.querySelector('span');var con = document.querySelector('.con');// 鼠标经过 sliderbar 就会让 con 盒子滑动到左侧// 鼠标离开 sliderbar 就会让 con 盒子滑动到右侧sliderbar.addEventListener('mouseenter', function() {animate(con,-160, function() {// 动画执行完毕，就把'←'改为'→'// span.innerHTML = '→';sliderbar.children[0].innerHTML = '→'; });});sliderbar.addEventListener('mouseleave', function() {animate(con,0, function() {// 动画执行完毕，就把'→'改为'←'// span.innerHTML = '←';sliderbar.children[0].innerHTML = '←';});});</script> </body></html>

16.5.6 节流阀

16.6 触屏事件

<body><div></div><script>var div = document.querySelector('div');// 触摸DOM元素事件div.addEventListener('touchstart', function() {console.log('hi');});// DOM元素上移动div.addEventListener('touchmove', function() {console.log('hi');});// 离开DOM元素div.addEventListener('touchend', function() {console.log('hi');});</script> </body>

16.6.1 触摸事件对象（TouchEvent）

<body><div></div><script>var div = document.querySelector('div');// 触摸DOM元素事件div.addEventListener('touchstart', function(e) {console.log('hi');// touches 触摸屏的所有手指的列表// targetTouches 触摸当前DOM元素的手指列表// changedTouched 手指状态发生了改变的列表// 可以得到正在触摸dom元素的第一个手指相关信息console.log(e.targetTouches[0]);});// DOM元素上移动div.addEventListener('touchmove', function(e) {console.log('hi');});// 离开DOM元素div.addEventListener('touchend', function(e) {// 当手指离开的时候，没有touches 和 targetTouches，但是有changedTouchedconsole.log(e);});</script> </body>

16.6.3 移动端拖动元素

<body><div></div><script>var div = document.querySelector('div');// 获取手指初始位置var startX = 0;var startY = 0;// 获取盒子的原来的位置var x = 0;var y = 0;div.addEventListener('touchstart', function(e) {startX = e.targetTouches[0].pageX;startY = e.targetTouches[0].pageY;x = this.offsetLeft;y = this.offsetTop;});div.addEventListener('touchmove', function(e) {// 计算手指的移动距离：手指移动之后的坐标减去手指初始的坐标var moveX = e.targetTouches[0].pageX - startX;var moveY = e.targetTouches[0].pageY - startY;// 移动盒子this.style.left = x + moveX + 'px';this.style.top = y + moveY + 'px';e.preventDefault(); // 阻止屏幕滚动的默认行为});</script> </body>

总结

以上是生活随笔为你收集整理的JavaScript详细教程的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。