Js_Study

---

JavaScriptjs资源

网址：https://www.wangdoc.com/

初识JavaScript

1. 历史

JavaScript 和 Java 的关系。它们是两种不一样的语言，但是彼此存在联系。

Netscape 公司雇佣了程序员 Brendan Eich 开发这种网页脚本语言。Brendan Eich 有很强的函数式编程背景，希望以 Scheme 语言（函数式语言鼻祖 LISP 语言的一种方言）为蓝本，实现这种新语言。

2. JavaScript是什么

1. JavaScript是世界上最流行语言之一。是一种运行在客户端的脚本语言(Script是脚本的意思)
2. 脚本语言(高级语言)：不需要编译，运行由js解释器(js引擎)逐行来进行解释并执行
3. 也可以基于Node.js技术进行服务器端编程

3. JavaScript使用

1. 表单动态校验(密码强度检测)(JS产生最初的目的)
2. 网页特效
3. 服务器开发(Node.js)
4. 桌面程序(Electron)
5. App(Cordova)
6. 控制硬件-物联网(Ruff)
7. 游戏开发(cocos2d-js)

4. html/css/js关系

html：决定网页结构和内容，相当于人的身体

css：决定网页呈现给用户的模样，相当于给人穿衣服、化妆

js：实现业务逻辑和页面控制(决定功能)相当于人的各种动作

5. 浏览器执行js介绍

浏览器分为两部分：渲染引擎和js引擎

渲染引擎：解析html和css，俗称内核

js引擎：js解释器，用来读取网页中的JavaScript代码，对其处理后运行

浏览器本身不会执行js代码，而是通过内置JavaScript引擎来执行js代码，逐行执行

6. JS组成

组成：

1. ECMAScript：JavaScript语法
2. DOM：页面文档对象模型
3. BOM：浏览器对象模型

**ECMAScript：**是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。

文档对象模型：（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。

BOM：(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。

7. JS三种书写位置

1. 行内式js 直接写到元素的内部

   <!--行内式js 直接写到元素的内部-->
   <input type="button" value="唐伯虎" οnclick="alert('秋香姐')">
   

   注意：

   1. html使用双引号，js中推荐使用单引号
   2. 可以将单行或者少量js代码写在html标签的事件属性中
   3. 可读性差
   4. 引号易错，引号多层嵌套匹配时，容易错

2. 内嵌式js

   <script>
   	alert("沙漠骆驼");
   </script>
   

3. 外部式

<script src="my.js"></script>

注意：

1. 引用外部js文件的script标签中间不可以写代码
2. 适合于js代码量比较大的情况

8. JS注释

单行注释：//

快捷键：ctrl+/

多行注释：/**/

快捷键：ctrl + alt + /

9. JS输入输出语句

方法	说明
alert()	弹窗输出警示框
prompt()	弹窗输入
console.log();	浏览器控制台打印。

阻止链接跳转

在a标签href里添加 ：javascript:;

变量

1. 什么是变量

通俗：变量是用于存放数据的容器，通过变量名获取数据

2. 变量在内存中的存储

本质：变量是程序在内存中申请一块用来存放数据的空间

3. 变量的使用

分为两步：声明和赋值

1. 声明变量var

   //声明变量
   var age;
   

2. 赋值

   将值放入变量中，通过变量名

   // 赋值
   age = 18;
   

3. 变量初始化

   //初始化
   var myname = 'giao';
   

4. 变量语法扩展

01-更新变量

一个变量被重新赋值后，原来的值会被覆盖，以最后一次赋的值为准

02-同时声明多个变量

// 同时声明多个变变量
var age = 18,
    address = '火影村',
    gz = '2000';

03-声明变量特殊情况

// 1.只声明不复制，结果是？    结果是undefined 未定义的
var sex;
console.log(sex);   //undefined
// 2.不声明不复制，直接报错
console.log(tel);
// 3.不声明直接复制使用
qq = 110;
console.log(qq);    //可以直接使用，但不推荐这样使用

5. 变量命名规范

1. 由字母、数字、下划线、美元符号$组成
2. 严格区分大小写
3. 不能以数字开头
4. 不能是关键字、保留字，如：var，for，while
5. 变量名必须有意义
6. 遵循驼峰命名法，首字母小写，后面单词的首字母大写
7. 推荐翻译网站，有道

数据类型

1. 数据类型简介

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。（ES6 又新增了第七种 Symbol 类型的值，本教程不涉及。）【简单数据类型】

• 数值（number）：整数和小数（比如1和3.14）。默认：0
• 字符串（string）：文本（比如Hello World）。默认：“”
• 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）。默认：false
• undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值。默认：undefined
• null：表示空值，即此处的值为空。默认：null
• 对象（object）：各种值组成的集合。

对象是最复杂的数据类型，又可以分成三个子类型。【复杂数据类型】

• 狭义的对象（object）
• 数组（array）
• 函数（function）

js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定的

js拥有动态类型，同时也意味着相同的变量可用作不同的类型

2. 数字型number

01-数值进制

使用字面量直接表示一个数值时，JavaScript 对整数提供四种进制的表示方法：十进制、十六进制、八进制、二进制。

• 十进制：没有前导0的数值。
• 八进制：有前缀0o或0O的数值，或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
• 十六进制：有前缀0x或0X的数值。
• 二进制：有前缀0b或0B的数值。

// 八进制 前面加0o或0O
var num1 = 0o10;
console.log(num1);
// 十六进制
var num2 = 0x1f;
console.log(num2);

02-数字型范围

JavaScript 提供Number对象的MAX_VALUE和MIN_VALUE属性，返回可以表示的具体的最大值和最小值。

console.log(Number.MAX_VALUE);//1.7976931348623157e+308
console.log(Number.MIN_VALUE);//5e-324

03-数字型三个特殊值

Infinity，代表无穷大，大于任何数值

-Infinity，代表无穷小，小于任何数值

NaN，not a number，代表一个非数值

NaN是 JavaScript 的特殊值，表示“非数字”（Not a Number），主要出现在将字符串解析成数字出错的场合。

Infinity大于一切数值（除了NaN），-Infinity小于一切数值（除了NaN）。

Infinity与NaN比较，总是返回false。

//无穷大
console.log(Number.MAX_VALUE * 2);
//无穷小
console.log(-Number.MAX_VALUE * 2);

04-isNaN

isNaN方法可以用来判断一个值是否为NaN。

isNaN(NaN) // true
isNaN(123) // false

isNaN只对数值有效，如果传入其他值，会被先转成数值。比如，传入字符串的时候，字符串会被先转成NaN，所以最后返回true，也就是说，isNaN为true的值，有可能不是NaN，而是一个字符串。

2.字符串string

01-定义

1. 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。

   'abc'
   "abc"
   

2. 单引号字符串的内部，可以使用双引号。双引号字符串的内部，可以使用单引号。最好用单引号

   'key = "value"'
   "It's a long journey"
   

3. 如果要在单引号字符串的内部，使用单引号，就必须在内部的单引号前面加上反斜杠，用来转义。

4. 字符串默认只能写在一行内，分成多行将会报错。

02-转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

需要用反斜杠转义的特殊字符，主要有下面这些。

• \0 ：null（\u0000）
• \b ：后退键（\u0008）
• \f ：换页符（\u000C）
• \n ：换行符（\u000A）
• \r ：回车键（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：单引号（\u0027）
• \" ：双引号（\u0022）
• \\ ：反斜杠（\u005C）

03-字符串长度

length属性返回字符串的长度。

var s = 'hello';
s.length // 5

s.length = 3;
s.length // 5

上面代码表示字符串的length属性无法改变，但是不会报错。

04-字符串拼接

连接运算符（+）可以连接多个单行字符串，将长字符串拆成多行书写，输出的时候也是单行。

字符串 + 任何类型 = 拼接之后的新字符串

//拼接
console.log('沙漠' + '骆驼');
console.log('12' + 12);//结果：'1212'
var name = '张三';
console.log('我叫' + name + '，你好');//我叫张三，你好

+号总口诀：数值相加，字符相连

3. boolean型

布尔类型有两个值true (1)和false (0)，true表示真，false表示假

布尔型参与计算true相当于1，false相当于0

下列运算符会返回布尔值：

• 前置逻辑运算符： ! (Not)
• 相等运算符：===，!==，==，!=
• 比较运算符：>，>=，<，<=

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

4. null 和 undefined

null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，语法效果几乎没区别。

var a = undefined;
// 或者
var a = null;

在if语句中，它们都会被自动转为false，相等运算符（==）甚至直接报告两者相等。

null可以自动转为0。

Number(null) // 0

undefined与数字相加，结果为NaN

null与数字相加，结果为数字，null自动转换为0

获取数据类型

1. typeof运算符

JavaScript 有三种方法，可以确定一个值到底是什么类型。

• typeof运算符
• instanceof运算符
• Object.prototype.toString方法

typeof运算符可以返回一个值的数据类型。

数值、字符串、布尔值分别返回number、string、boolean，函数返回function，undefined返回undefined，对象返回object，null返回object。

2. 字面量

字面量是在源代码中一个固定值得表示法，通俗来说，就是字面量表示如何表达这个值

1. 数字字面量：8，9，10
2. 字符串字面量：“朱元璋”，‘人物’
3. 布尔字面量：true，false

数据类型转换

把一个数据类型的变量转换成两外一种数据类型

通常实现3种方式的转换

1. 转换为字符串型
2. 转换成数字型
3. 转换成布尔型

1. 转换为字符串

方法	说明
toString()	转换成字符串
String()强制转换	转换成字符串
加号拼接字符串 隐式转换（重点）	和字符串拼接结果都是字符串

2. 转换成数字型(重点)

方法	说明
parseInt(string)函数	将字符串转为整数。
parseFloat(string)函数	将一个字符串转为浮点数。
Number()强制转换函数	将字符串转为数值型。
js隐式转换(- * /)	利用算术运算隐式转换为数值型

parseInt进制转换

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。默认情况下，parseInt的第二个参数为10，即默认是十进制转十进制。

parseInt('1000') // 1000
// 等同于
parseInt('1000', 10) // 1000

下面是转换指定进制的数的例子

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

如果第二个参数不是数值，会被自动转为一个整数。这个整数只有在2到36之间，才能得到有意义的结果，超出这个范围，则返回NaN。如果第二个参数是0、undefined和null，则直接忽略。

parseFloat

如果参数不是字符串，或者字符串的第一个字符不能转化为浮点数，则返回NaN。

parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN

3. 转换为布尔型

方法	说明
Boolean()函数	其他类型转换成布尔值

代表空、否定的值会转换为false，如：0、NaN、null、undefined

其余值都会转换成true

4. 标志符、关键字、保留字

1. 标志符：开发人员为变量、属性、函数、参数取的名字，不能是关键字或保留字
2. 关键字：js本身使用了的字，不能再用他们充当变量名、方法名

eg：break、else、new、var、case、finally、return、void、catch、for、switch、while、continue、function、this、with、default、if、throw、delete、in、try、do、instranceof、typeof。

3. 保留字：js同样保留了一些关键字，这些关键字在当前语言版本中并没有用到，但在未来版本中可能会用到。

eg：class const enum export extends import super implements let 　　private 　　public yield 2 interface package protected static

运算符

也称操作符，用于实现赋值、比较和执行算术运算功能的符号

js中有

1. 算术运算符
2. 递增递减运算符
3. 比较运算符
4. 逻辑运算符
5. 赋值运算符

1. 算术运算符

JavaScript 共提供10个算术运算符，用来完成基本的算术运算。

• 加法运算符：x + y
• 减法运算符： x - y
• 乘法运算符： x * y
• 除法运算符：x / y
• 指数运算符：x ** y
• 余数运算符：x % y
• 自增运算符：++x 或者 x++
• 自减运算符：--x 或者 x--
• 数值运算符： +x
• 负数值运算符：-x

注意：

1. 浮点数算数运算里面会有问题
2. 不能直接拿着浮点数进行相比较

01-表达式和返回值

表达式：由数字、运算符、变量等组成的式子

表达式最终会有一个结果，称为返回值

2. 自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1。它们会修改原始变量。

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作，称为后置；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值，称为前置。

3. 比较运算符

JavaScript 一共提供了8个比较运算符。

• > 大于运算符
• < 小于运算符
• <= 小于或等于运算符
• >= 大于或等于运算符
• == 相等运算符
• === 严格相等运算符
• != 不相等运算符
• !== 严格不相等运算符

JavaScript 提供两种相等运算符：==和===。

1. 简单说，它们的区别是相等运算符（==）比较两个值是否相等，严格相等运算符（===）比较它们是否为“同一个值”。如果两个值不是同一类型，严格相等运算符（===）直接返回false，而相等运算符（==）会将它们转换成同一个类型，再用严格相等运算符进行比较。
2. 需要注意的是，NaN与任何值都不相等（包括自身）。另外，正0等于负0。
3. 严格相等运算符有一个对应的“严格不相等运算符”（!==），它的算法就是先求严格相等运算符的结果，然后返回相反值。

4. 逻辑运算符

布尔运算符用于将表达式转为布尔值，一共包含四个运算符。

• 取反运算符：!
• 且运算符：&&
• 或运算符：||
• 三元运算符：?:

三元条件运算符由问号（?）和冒号（:）组成，分隔三个表达式。它是 JavaScript 语言唯一一个需要三个运算子的运算符。如果第一个表达式的布尔值为true，则返回第二个表达式的值，否则返回第三个表达式的值。

't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"

上面代码的t和0的布尔值分别为true和false，所以分别返回第二个和第三个表达式的值。

对于非布尔值，取反运算符会将其转为布尔值。可以这样记忆，以下六个值取反后为true，其他值都为false。

• undefined
• null
• false
• 0
• NaN
• 空字符串（''）

逻辑中断(短路运算)

当有多个表达式时，左边的表达式值可以确定结果时，就不在运算右边表达式的值

1. 逻辑与

   语法：表达式1 && 表达式2

   如果第一个表达式值为真，则返回表达式2

   如果第一个表达式值为假，则返回表达式1

2. 逻辑或

   语法：表达式1 || 表达式2

   如果第一个表达式值为真，则返回表达式1

   如果第一个表达式值为假，则返回表达式2

5. 赋值运算符

概念：用来把数据赋值给变量的运算符

赋值运算符	说明
=	直接复制
+=、-=	加、减一个数 后再赋值
*=、/=、%=	乘、除、取模 后在赋值

6. 运算符优先级和左右结合

JS运算符优先级（从高到低列出)

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ – - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
|	按位或
&&	逻辑与
||	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

少数运算符是“右结合”，其中最主要的是赋值运算符（=）和三元条件运算符（?:），指数运算符（**）也是右结合。

流程控制-分支

1. 流程控制

流程控制主要有三种结构：顺序结构、分支结构、循环结构，这三种结构代表三种代码执行顺序

2. 顺序流程控制

顺序结构是程序中最简单、最基本的流程控制，没有特定语法结构，程序会按照代码的先后顺序，依次执行

3. 分支流程控制

01-分支结构

由上向下执行代码过程中，根据不同条件，执行不同的路径代码，得到不同结果

两种分支结构

1. if语句
2. switch语句

02-if语句

语法：

if ( 条件表达式 ) {
    //条件成立执行语句
}
//if else双支
        if ( 条件表达式 ) {
            //执行语句
        }else {
            //执行语句
        }
//多分支语句
        if ( 条件表达式 ) {
            //执行语句
        }else if ( 条件表达式 ){
            //执行语句
        }else {
            //执行语句
        }

03-switch语句

语法：

switch (表达式) {
    case value1:
        执行语句;
        break;
    case value2:
        执行语句;
        break;
    ...
    default:
        执行最后的语句;
}

switch注意事项

1. 表达式常写成变量
2. 表达式与value值必须是全等，值和数据类型都得一致
3. break 如果当前case里面没有break，则不会退出switch，继续执行下一个case

04-switch和if else区别

1. 一般情况下，它俩是可以互相替换
2. switch通常处理一些比较确定值得情况，而if else更加灵活，常用语范围判断
3. switch语句进行条件判断后直接执行到程序的条件语句，效率更高，if语句几个条件，就得判断多少次
4. 分支较少时，if效率会比switch高

循环

1. 循环目的

规律性的重复执行，用循环来重复执行某些语句

2. js中的循环

js中有三种循环

for循环

while循环

do…while循环

3. for循环

语法

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

for-in—循环遍历对象的属性

用 for-in 来遍历一遍数组的内容，代码如下：

const arr = [1, 2, 3];
let index;
for(index in arr) {
    console.log("arr[" + index + "] = " + arr[index]);
}
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

for-in 并不适合用来遍历 Array 中的元素，其更适合遍历对象中的属性

forEach–引入新循环

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数，那些已删除（使用 delete 方法等情况）或者从未赋值的项将被跳过（不包括那些值为 undefined 或 null 的项）。 callback 函数会被依次传入三个参数：

• 数组当前项的值；
• 数组当前项的索引；
• 数组对象本身；

const arr = [1, 2, 3];
arr.forEach((data) => {
    console.log(data);
});
// 输出结果如下
// 1 
// 2 
// 3

添加数组当前项的索引参数，注意callback 函数中的三个参数顺序是固定的，不可以调整。

const arr = [1, 2, 3];
arr.forEach((data,index,arr) => {
    console.log("arr[" + index + "] = " + data);
});
// 输出结果如下
// arr[0] = 1 
// arr[1] = 2 
// arr[2] = 3

需要注意的是，forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

const arr = [];
arr[0] = "a";
arr[3] = "b";
arr[10] = "c";
arr.name = "Hello world";
arr.forEach((data, index, array) => {
    console.log(data, index, array);
});

运行结果：

a 0 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
b 3 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]
c 10 ["a", empty × 2, "b", empty × 6, "c", name: "Hello world"]

01-断点调试

首先是普通调试，又叫单步调试。F12找到Sources后，在左侧文件夹中找到你想运行的文件，然后点击pause script execution按钮再刷新页面（F5），就可以进入单步调试，点击Step over next function call就是程序逐步调试，每点击一次，就会按照代码执行顺序，向下执行一句代码。

02-双层for循环

for (语句 1; 语句 2; 语句 3)
{
  for (语句 4; 语句 5; 语句 6)
  {
      被执行的代码块；
  }
}

4. while语句

语法：

while (条件)
{
    需要执行的代码；
    结束条件；
}

注意：如果忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

5. do while语句

语法：

do
{
    需要执行的代码；
}
while (条件);

该循环至少会执行一次，即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行

6. continue break

01-break 语句

break 语句：它用于跳出 switch() 语句。

break 语句：也可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码

02-continue 语句

continue 语句：断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。

规范

1. 标识符命名规范

变量、函数的命名必须有意义

变量一般用名词

函数一般用动词

2. 操作符语法规范

操作符的左右两侧各保留一个空格

3. 单行注释规范

单行注释前有个空格

数组array

1. 数组的概念

数组对象是使用单独的变量名来存储一系列的值。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。

2. 数组创建方法

创建一个数组，有三种方法。

下面的代码定义了一个名为 myCars的数组对象：

1: 常规方式:

var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

2: 简洁方式:

var myCars=new Array("Saab","Volvo","BMW");

3: 字面:

var myCars=["Saab","Volvo","BMW"];

4: 数组元素类型

数组中可以存放任意类型的数据，如字符串，数字，布尔值等

3. 访问数组元素

通过指定数组名以及索引号码，你可以访问某个特定的元素。

可以访问myCars数组的第一个值：

var name=myCars[0];

可以修改数组 myCars 的第一个元素:

myCars[0]="Opel";

索引(下标)：用来访问数组元素的序号。

注意：[0] 是数组的第一个元素。[1] 是数组的第二个元素。

遍历数组：for循环，下标0开头

4. 数组长度

.length：获取数组长度，一般在遍历数组时会用到。

var array3 = [10,11,12,13,14,"15","abc"];
console.log(array3.length);

数组转换成字符串：遍历之后用空字符串相连

5. 数组新增元素

1. 通过内置函数BIF添加

   // push:在数组末尾添加成员
   // pop：把末尾成员删除
   // shift删除并返回第一个成员
   // unshift 在数组头部添加成员,返回新数组的长度
   var array4 = [10,11,12,13,14,“15”,“abc”];
   array4.push(“def”);
   console.log(array4);

   array4.pop();
   console.log(array4);

   var ary = array4.shift();
   console.log(array4);
   console.log(ary);

   var ary2 = array4.unshift(“abc”);
   console.log(array4);
   console.log(ary2);

2. 新增数组元素，修改索引号，追加数组元素

   不能直接给已存在的索引号赋值，否则会覆盖掉以前的数据

函数

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

函数就是封装了一段可以被重复执行调用的代码块，目的：让大量代码重复使用

1. 函数的使用

函数声明

函数声明的语法 :

function 函数名(参数) {
  执行的代码	// 函数体
}

注意：

1. function 声明函数的关键字，全部小写
2. 函数名一般为动词
3. 函数不调用不执行

调用函数

函数名();

2. 函数的参数

//声明函数
function 函数名(形参1，形参2...) {// 声明函数小括号里面的是形参，用逗号隔开
 	函数体
}
函数名(实参1，实参2...);// 函数调用小括号里面的是 实参

3. 函数的返回值

return语句：可以实现函数的返回

function 函数名() {
  return 需要返回的结果;
}

1. 函数只是实现某种功能，结果需要返回给函数的调用这，通过return 实现
2. 只要函数遇到return 就把后面的结果返回给调用者 函数名() = return后面结果

return也可以终止函数 ，return之后代码不被执行

return只能返回一个值。如果想返回多个值，用数组

return如果有返回值，则返回return后面的值，没有则返回undefined

4. arguments的使用

JavaScript 函数有个内置的对象 arguments 对象。

argument 对象包含了函数调用的参数数组。

arguments展示形式是一个伪数组，可以进行遍历

1. 具有length属性
2. 按索引方式储存数据
3. 不具有数组push，pop等方法

5. 函数的两种声明

1. 利用函数关键字自定义函数

//声明函数
function 函数名(形参1，形参2...) {// 声明函数小括号里面的是形参，用逗号隔开
 	函数体
}

2. 函数表达式

//声明函数
var 变量名 = function(){};
//调用函数
变量名();

1. fun是变量名，不是函数名
2. 函数表达是声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达是里面存的是函数

作用域

1. 什么是作用域

它是指对某一变量和方法具有访问权限的代码空间, 在JS中, 作用域是在函数中维护的.

表示变量或函数起作用的区域，指代了它们在什么样的上下文中执行，亦即上下文执行环境。

Javascript的作用域只有两种(es6之前)：全局作用域和局部作用域，局部作用域是按照函数来区分的。

2. 变量作用域

变量作用域：根据作用域不同分为全局变量和局部变量

全局变量：在全局作用域下的变量，在全局下都可以使用

局部变量：在局部作用域下的变量，或者说是函数内部的变量就是局部变量，只能在函数内部使用

注意：如果在函数内部，乜有声明直接赋值的变量也是全局变量

从执行效率上看全局变量和局部变量

1. 全局变量只有浏览器关闭的时候才会销毁，比较占资源
2. 局部变量：当程序执行完毕就会销毁，节约内存资源

3. 作用域链

内部函数访问外部函数的变量，采取的是脸是查找的方式来决定取那个值，这种结构称为作用域链（就近原则）

JS预解析

js代码分为两步：预解析和代码执行

1. 预解析：js引擎会把js里面所有var 和 function 提升到当前作用域在前面
2. 代码执行：按照代码书写的顺序从上到下执行

预解析分为变量预解析(变量提升) 和 函数预解析(函数提升)

1. 变量提升：把所有变量声明提升到当前作用域最前面，不提升赋值操作
2. 函数提升：把所有函数声明提升到当前作用域最前面，不提升调用

对象

1. 对象是什么

对象是一个具体的事务

对象由属性和方法组成的

1. 属性：事物的特征
2. 方法：事务的特征

2. 创建对象的三种方法

01-字面量创建对象

用花括号来创建对象

var obj = {};// 创建一个空对象
//eg
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue", 
sayHi: function() {
  console.log('hi~');
}};

1. 里面的属性或方法采用键值对的形式，键：属性名；值：属性值
2. 多个属性或方法中间用逗号隔开
3. 方法冒号后面跟的是一个匿名函数

访问对象

1. 调用对象的属性：对象名.属性名

person.lastName;

2. 第二种调用舒兴国的方法：对象[‘属性名’]

person["lastName"];

3. 调用对象方法：对象名.方法名

02-利用new Object创建对象

语法：

var obj = new Object(); // 创建一个空的对象
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function () {
    console.log('hi~');
}

1. 利用等号 = 赋值来添加对象和方法
2. 每个属性和方法之间用分号隔开

03-利用构造函数创建对象

构造函数

1. 定义：通过 new 函数名 来实例化对象的函数叫构造函数。
2. 任何的函数都可以作为构造函数存在。
3. 之所以有构造函数与普通函数之分，主要从功能上进行区别的，构造函数的主要 功能为 初始化对象，特点是和new 一起使用。
4. new就是在创建对象，从无到有，构造函数就是在为初始化的对象添加属性和方法。
5. 构造函数定义时首字母大写。

语法格式

function 构造函数名() {
    this.属性 = 值;
    this.方法 = function () {};
}
new 构造函数名();

//eg
function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }

        var ldh = new Star('刘德华', 18, '男');
        console.log(ldh.age, ldh.name, ldh.sex);
        ldh.sing('冰雨');

1. 构造函数里面不需要return 就可以返回结果
2. 调用构造函数必须使用new

04-构造函数和对象

1. 构造函数：构造名(); 泛指的某一大类，类似于java的class
2. 创建对象：new 对象名(); 特指某一个，通过new创建，称对象实例化

3. new关键字

1. new构造函数可以再内存中创建一个空的对象
2. this 会指向刚才创建的空对象
3. 执行构造函数里面的代码，给空对相关添加属性和方法
4. 返回对象

4. 对象遍历

for… in 语句用于对数组或者对象的属性进行循环操作。(最好是对对象进行操作)

语法：

for (变量 in 对象) {
    
}
// eg
for (var k in ldh) {
            console.log(k); // k 变量输出可以得到属性名
            console.log(ldh[k]);// obj[k]得到属性值
}

内置对象

1. 什么是内置对象

JS对象分为三种：自定义对象、内置对象、浏览器对象

前两种对象是js基础内容

第三种是属于js独有，在JS API

内置对象：就是js语言自带的一些对象，由开发者提供，并提供了一些常用的或是最基本而必要的功能(属性和方法)

内置对象有点：帮助快速开发

内置对象有：Math、Date、Array、String等

2. 查文档

学习一个内置对象的使用，可以通过文档学习，通过MDN/W3c来查询

MDN：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript

3. Math对象(不是函数对象)

Math 是一个内置对象，它拥有一些数学常数属性和数学函数方法。Math 不是一个函数对象。

不是构造函数，不用new调用，可以直接使用

console.log(Math.PI);	//3.141592653589793
console.log(Math.max(1,2,3,34,124.23));	//124.23

常用方法

Math.abs(x) 函数返回指定数字 “x“ 的绝对值

Math.PI 表示一个圆的周长与直径的比例，约为 3.14159：

Math.ceil()函数返回大于或等于一个给定数字的最小整数。向上取值

Math.floor()返回小于或等于一个给定数字的最大整数。向下取整

Math.round() 函数返回一个数字四舍五入后最接近的整数。

Math.random() 函数返回一个浮点数, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括 1（排除1），然后您可以缩放到所需的范围。实现将初始种子选择到随机数生成算法;它不能被用户选择或重置。

Math.sqrt() 函数返回一个数的平方根

4. Date日期对象

Date是一个构造函数，需要实例化，用来处理事件

语法：

new Date();
new Date(value);
new Date(dateString);
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

创建一个新Date对象的唯一方法是通过new 操作符，例如：let now = new Date();
若将它作为常规函数调用（即不加 new 操作符），将返回一个字符串，而非 Date 对象。

date可以加参数也可以不加参数

1. 不加参数返回当前时间
2. 括号里面有时间，就返回参数里面的事件，常用字符串：‘2022-2-13’

01-获取年、月、日、时、分、秒

getFullYear() 方法根据本地时间返回指定日期的年份。

**getMonth()**根据本地时间，返回一个指定的日期对象的月份，为基于0的值（0表示一年中的第一月）。

**getDate()**根据本地时间，返回一个指定的日期对象为一个月中的哪一日（从1–31）。

getDay() 方法根据本地时间，返回一个具体日期中一周的第几天，0 表示星期天。对于某个月中的第几天

getHours() 方法根据本地时间，返回一个指定的日期对象的小时。

getMinutes() 方法根据本地时间，返回一个指定的日期对象的分钟数。

getSeconds() 方法根据本地时间，返回一个指定的日期对象的秒数。

02-获取毫秒数

getTime() 方法返回一个时间的格林威治时间数值。

valueOf() 方法返回一个 Date对象的原始值。

简单方法

var date1 = +new Date();// +new Daate() 返回总的毫秒数
cosole.log(date1);
//H5新增的 获取总的毫秒数
cosole.log(Date.now());

5. Array数组对象

Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

01-数组对象的创建

两种方式

1. 字面量创建
2. new Array();

02-检测是否为数组的两种方式

instanceof 运算符 它可以用来检测是否为数组

var arr = [];
var obj
console.log(arr instanceof Array);
console.log(arr instanceof Object);

**Array.isArray() **用于确定传递的值是否是一个Array（数组）

var arr = [];
var obj
console.log(Array.isArray(arr));
// true
console.log(Array.isArray(obj));
// false

当检测Array实例时, Array.isArray 优于 instanceof,因为Array.isArray能检测iframes.

03-添加删除数组元素方法

1. push() 方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度 (该方法修改原有数组)。

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');

console.log(count);
// expected output: 4
console.log(animals);
// expected output: Array ["pigs", "goats", "sheep", "cows"]

2. unshift() 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组**)**。

const array1 = [1, 2, 3];

console.log(array1.unshift(4, 5));
// expected output: 5
console.log(array1);
// expected output: Array [4, 5, 1, 2, 3]

3. pop()方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];

console.log(plants.pop());
// expected output: "tomato"
console.log(plants);
// expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]

4. shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];
const firstElement = array1.shift();

console.log(array1);
// expected output: Array [2, 3]
console.log(firstElement);
// expected output: 1

04-数组排序

1. reverse() 方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// expected output: "array1:" Array ["one", "two", "three"]

const reversed = array1.reverse();
console.log('reversed:', reversed);
// expected output: "reversed:" Array ["three", "two", "one"]

2. sort() 方法用原地算法对数组的元素进行排序，并返回数组。由于它取决于具体实现，因此无法保证排序的时间和空间复杂性。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

sort函数比较字符串第一个字母

要比较数字而非字符串，比较函数可以简单的以 a 减 b，如下的函数将会将数组升序排列

var arr1 = [1, 2, 5, 63, 26];
//升序
arr1.sort(function (a, b) {
    return a - b;
});
//降序
arr1.sort(function (a, b) {
    return b - a;
});

05-数组索引方法

1. **indexOf()**方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

语法：

arr.indexOf(searchElement[, fromIndex])

参数fromIndex ：开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。

2. **lastIndexOf()**方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];

console.log(animals.lastIndexOf('Dodo'));
// expected output: 3

06-数组转换成字符串

1. toString() 返回一个字符串，表示指定的数组及其元素。

const array1 = [1, 2, 'a', '1a'];

console.log(array1.toString());
// expected output: "1,2,a,1a"

2. join() 方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];

console.log(elements.join());
// expected output: "Fire,Air,Water"
console.log(elements.join('-'));
// expected output: "Fire-Air-Water"

07-截取、连接数组

1. concat() 方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);

console.log(array3);
// expected output: Array ["a", "b", "c", "d", "e", "f"]

2. slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

begin可选

1. 提取起始处的索引（从 0 开始），从该索引开始提取原数组元素。
2. 如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
3. 如果省略 begin，则 slice 从索引 0 开始。
4. 如果 begin 超出原数组的索引范围，则会返回空数组。

end 可选

1. 提取终止处的索引（从 0 开始），在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素（包含 begin，但不包含 end）。

2. 如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

3. 如果 end 被省略，则 slice 会一直提取到原数组末尾。

4. 如果 end 大于数组的长度，slice 也会一直提取到原数组末尾。

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。（重点）

语法：

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

1. start

指定修改的开始位置（从0计数）。如果超出了数组的长度，则从数组末尾开始添加内容；如果是负值，则表示从数组末位开始的第几位（从-1计数，这意味着-n是倒数第n个元素并且等价于array.length-n）；如果负数的绝对值大于数组的长度，则表示开始位置为第0位。

2. deleteCount 可选

整数，表示要移除的数组元素的个数。

如果 deleteCount 是 0 或者负数，则不移除元素。这种情况下，至少应添加一个新元素。

3. item1, item2, … 可选

要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// inserts at index 1
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May');
// replaces 1 element at index 4
console.log(months);
// expected output: Array ["Jan", "Feb", "March", "April", "May"]

6. String字符串对象

String 全局对象是一个用于字符串或一个字符序列的构造函数。

01-字符串不会变

字符串不可变是指里面的值不会变，只是地址变了，在内存中新开辟了一个内存空间

所以不要大量拼接字符串，会导致卡顿

02-根据字符返回位置

1. **indexOf()**方法返回调用它的 String对象中第一次出现的指定值的索引，从 fromIndex 处进行搜索。如果未找到该值，则返回 -1。

语法：

str.indexOf(searchValue [, fromIndex])

2. lastIndexOf() 方法返回调用String对象的指定值最后一次出现的索引，在一个字符串中的指定位置 fromIndex处从后向前搜索。如果没找到这个特定值则返回-1 。

03-根据位置返回字符(重点)

1. charAt() 方法从一个字符串中返回指定的字符。

var anyString = "Brave new world";

console.log("The character at index 0   is '" + anyString.charAt(0)   + "'");
//Output: The character at index 0 is 'B'

2. charCodeAt() 方法返回 0 到 65535 之间的整数，是相应字符ASCII值

语法：

str.charCodeAt(index)

//eg
var str = 'abcsdfjl';
console.log(str.charCodeAt(0));	//97  a对应的ASCII值为97

3. str[index] H5新增的

var str = 'abcsdfjl';
console.log(str[0]);	// a

04-拼接以及截取字符串

1. concat() 方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。

let hello = 'Hello, '
console.log(hello.concat('Kevin', '. Have a nice day.'))
// Hello, Kevin. Have a nice day.

2. substr() 方法返回一个字符串中从指定位置开始到指定字符数的字符。

str.substr(start[, length])

• start

  开始提取字符的位置。如果为负值，则被看作 strLength + ``start，其中 strLength 为字符串的长度

• length

  可选。提取的字符数。

05-其他方法

1. replace() 方法返回一个由替换值（replacement）替换部分或所有的模式（pattern）匹配项后的新字符串，只会替换第一个匹配字符，原字符串不会改变。

str.replace('被替换字符', '替换为的字符')

2. split() 方法使用指定的分隔符字符串将一个String对象分割成子字符串数组，以一个指定的分割字串来决定每个拆分的位置。 与join相反把数组转换字符串

const str = 'The quick brown fox jumps over the lazy dog.';

const words = str.split(' ');
console.log(words[3]);
// expected output: "fox"

简单数据类型和复杂数据类型

1. 简单类型和复杂类型

简单类型又叫基本数据类型或者值类型，复杂类型又叫引用类型

值类型: 简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。

string ，number，boolean，undefined，null

引用类型: 复杂数据类型，在存储变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
通过new关键字创建的对象(系统对象，自定义对象)，如object，array，date等

2. 堆和栈

堆栈空间分配区别:

1. 栈：由操作系统自动分配释放函数的参数值、局部变量的值等。其操作方式类似于数据结构中的栈；简单数据类型存放到栈里面；
2. 堆：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收；复杂数据类型存放到堆里面。

3. 简单类型的内存分配

1. 值类型：变量的数据存放在变量(栈空间)中，里面直接开辟空间，存放的是值。
2. 复杂数据类型：首先先栈里面存放地址，用十六进制表示，然后这个地址指向堆里面的数据。

4. 简单类型传参

函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传递给函数形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到外部变量。

5. 复杂类型传参

函数的形参也可以看做是一个变量，当我们应用类型变量传递给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存了同一个堆地址，所以操作的是同一个对象。

6. 小结

简单类型传参传递的是值，复杂类型传参传递的是地址

Web APIs

1. Web APIs组成

包括：

1. DOM：页面文档对象模型
2. BOM：浏览器对象模型

js基础做不了常用的网页交互，目的是为了js后面的课程打基础

Web APIs：主要学习交互效果，是js独有部分

2. API和Web APIs

1. API

   API是给程序员提供一个工具，以便能更轻松的实现想要完成的功能

2. Web APIs

   Web APIs是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)

DOM

1. 什么是DOM

文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。

DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之，它会将web页面和脚本或程序语言连接起来。

通过DOM接口可以改变网页的内容、结构和样式

2. DOM树

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Klh2kyr4-1646746022931)(D:\A_study\JavaScript_study\images_study\20190702185615278.png)]

1. 文档：一个页面就是一个文档，使用document表示
2. 元素：页面中的所有标签都是元素，使用element表示
3. 节点：网页中所有内容都是节点(标签、属性、文本、注释等)，使用node表示

DOM把以上内容都看做是对象

3. 获取元素

01-如何获取页面元素

以下方法：

1. 根据ID获取
2. 根据标签名获取
3. 通过HTML5新增方法获取
4. 特殊元素获取

02-根据ID获取

定义：

getElementById()：返回一个匹配特定 ID的元素.

语法：

var element = document.getElementById(id);

参数：

• element是一个 Element对象。如果当前文档中拥有特定ID的元素不存在则返回null.
• id是大小写敏感的字符串，代表了所要查找的元素的唯一ID.

console.dir()：打印返回元素对象，更好查看里面属性和方法

03-根据标签名获取

定义：

getElementsByTagName()：返回一个包括所有给定标签名称的元素的HTML集合，以伪数组的形式存储

语法：

var elements = document.getElementsByTagName(name);

1. 依次打印里面元素对象可以采用遍历

for(var i - 0; i < name.length; i++) {
  console.log(name[i]);
}

2. 如果页面只有一个元素，返回的还是伪数组形式
3. 如果没有元素，则返回的还是伪数组，只不过是个空的数组
4. 可以获取某个元素(父元素)内部所有指定标签名的子元素

注意：父元素必须是单个对象(必须指明是哪一个元素对象).获取的时候不包括父元素自己

04-通过HTML5新增方法获取

1. getElementsByClassName(‘类名’)：返回一个包含了所有指定类名的子元素的类数组对象。

语法：

var elements = document.getElementsByClassName(names); // or:
var elements = rootElement.getElementsByClassName(names);

• elements 是一个实时集合，包含了找到的所有元素。
• names 是一个字符串，表示要匹配的类名列表；类名通过空格分隔
• getElementsByClassName 可以在任何元素上调用，不仅仅是 document。 调用这个方法的元素将作为本次查找的根元素.

2. querySelector(‘选择器’)：返回文档中与指定选择器或选择器组匹配的第一个 Element对象。 如果找不到匹配项，则返回null。切记：里面选择器需要加符号：.box、#nav

语法：

element = document.querySelector(selectors);

3. querySelectorAll()：返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。

语法：

elementList = parentNode.querySelectorAll(selectors);

05-获取特殊元素(body、html)

1. document.body：返回当前文档中的<body>元素或者<frameset>元素。

语法：

var objRef = document.body;
document.body = objRef;

2. Document.documentElement是一个会返回文档对象document的根元素的只读属性

语法：

var element = document.documentElement;

4. 事件基础

01-事件概述

JS使我们有能力创建动态页面，事件是被JS侦测到的行为

简单理解：触发–响应机制

02-事件三要素

三部分组成：

1. 事件源
2. 事件类型
3. 事件处理程序

事件源：事件触发的对象

事件类型 ：如何触发，什么事件，比如鼠标点击(onclick)、鼠标经过、键盘按下

事件处理程序：通过一个函数赋值的方式完成

<script>
    btn.onclick = function () {
        //代码
    }
</script>

03-事件

事件	描述
鼠标、键盘事件	onclick	点击鼠标时触发此事件
ondblclick	双击鼠标时触发此事件
onmousedown	按下鼠标时触发此事件
onmouseup	鼠标按下后又松开时触发此事件
onmouseover	当鼠标移动到某个元素上方时触发此事件
onmousemove	移动鼠标时触发此事件
onmouseout	当鼠标离开某个元素范围时触发此事件
onkeypress	当按下并松开键盘上的某个键时触发此事件
onkeydown	当按下键盘上的某个按键时触发此事件
onkeyup	当放开键盘上的某个按键时触发此事件
窗口事件	onabort	图片在下载过程中被用户中断时触发此事件
onbeforeunload	当前页面的内容将要被改变时触发此事件
onerror	出现错误时触发此事件
onload	页面内容加载完成时触发此事件
onmove	当移动浏览器的窗口时触发此事件
onresize	当改变浏览器的窗口大小时触发此事件
onscroll	当滚动浏览器的滚动条时触发此事件
onstop	当按下浏览器的停止按钮或者正在下载的文件被中断时触发此事件
oncontextmenu	当弹出右键上下文菜单时触发此事件
onunload	改变当前页面时触发此事件
表单事件	onblur	当前元素失去焦点时触发此事件
onchange	当前元素失去焦点并且元素的内容发生改变时触发此事件
onfocus	当某个元素获得焦点时触发此事件
onreset	当点击表单中的重置按钮时触发此事件
onsubmit	当提交表单时触发此事件

5. 操作元素

01-改变元素内容

1. element.innerHTML：将HTML 插入到文档中而不是替换元素的内容

语法：

element.innerHTML = content;

起始位置到终止为止的内容，包括HTML标签，同时保留空格和换行

2. element.innerText：表示节点及其后代的渲染文本内容

语法：

element.innerText = content;

区别：

1. innerText：不识别html标签，去除空格和换行
2. innerHTML：识别thml标签

02-常见元素的属性操作

1. innerText、innerHTML改变内容
2. src、href
3. id、alt、title

03-表单元素的属性操作

利用DOM可以操作表单元素的属性

type、value、checked、selected、disabled

注意：表单里面的内容实通过value值来修改的

// 如果想要某个表单被禁用，不能再点击用disabled
btn.disabled = true;

04-样式属性操作

JS修改样式元素的大小、颜色、位置等样式

1. element.style	//行内样式操作
2. element.className	//类名样式操作

注意：

1. JS里面样式采取驼峰命名法
2. JS修改style样式操作，产生的是行内样式，权重比较高

05-排他思想

1. 所有元素全部清楚样式
2. 给当前元素设置样式
3. 顺序不能颠倒

<script>
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {
            //1. 去掉所有按钮背景颜色
            for (var i = 0; i < btns.length; i++) {
                btns[i].style.backgroundColor = '';
            }
            //2. 然后给当前按钮添加颜色
            this.style.backgroundColor = 'pink';
        }
    }
</script>

06-自定义属性操作

获取属性值

//1
element.属性
//2
element.getAttribute('属性')；

区别：

1. element.属性：获取内置属性值
2. element.getAttribute(‘属性’)：主要获取自定义属性值。自定义属性时程序员自己添加的属性

设置属性值

//1
element.属性 = '值';	//设置内置属性值
//2
element.setAttribute('属性','值');	//主要针对自定义属性值

移除属性

element.removeAttribute('属性');

07-H5自定义属性

自定义属性目的：是为了保存并使用数据

自定义属性获取是通过getAttribute(‘属性’)

设置H5自定义属性

H5规定自定义属性data-开头作为属性名并且赋值

//eg
<div data-index="2" data-list-name="andy"></div>

获取H5自定义属性

1. 兼容性获取：element.getAttribute(‘data-index’);
2. H5新增element.dataset.index或者element.dataset[‘index’]; ie11才支持

//eg
var div = document.querySelector('div');
// console.log(div.getAttribute('data-index'));
console.log(div.dataset.index);
console.log(div.dataset['index']);
//如果自定义属性里面有多个-链接的单词，获取时采用驼峰命名法
console.log(div.dataset.listName);

dataset 是一个集合里面存放着所有以data开头的自定义属性

6. 节点操作

01-为什么学节点操作

获取元素两种方法

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

逻辑性不强，繁琐

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

利用父子兄节点关系获取元素

逻辑性强，但兼容性稍差

02-节点概述

网页中的所有内容都是节点(标签、属性、文本、注释等)

节点都可以通过JS访问，所有节点均可被删除，创建或修改

节点至少拥有nodeType(节点类型)、nodeName(节点名称)和nodeValue(节点值)三个基本属性

1. 元素节点 nodeType为1
2. 属性节点 nodeType为2
3. 文本节点 nodeType为3（包括文字、空格、换行等）

03-节点层级

常见的是父子兄层级关系

父子节点

1. 父级节点parentNode：返回指定的节点在DOM树中的父节点，如果没有返回NULL。

parentNode = node.parentNode

得到的是里元素最近的父级节点

2. 子级节点**Node.childNodes：**返回包含指定节点的子节点的集合。（不提倡使用）

var ndList = node.childNodes;

注意：返回值里面包含了所有子节点，包括元素节点、文本节点

如果想要获取里面元素节点，需要进行处理

3. 子节点children：返回 一个Node的所有子节点

var children = node.children;

4. **Node.firstElementChild **返回树中节点的第一个子节点，如果节点是无子节点，则返回 null。

var childNode = node.firstElementChild;

5. Node.lastElementChild 返回当前节点的最后一个子节点。

var last_child = element.lastElementChild

4、5有兼容性问题，ie9才能用

//实际开发的写法
//第一个孩子
var firstchildren = node.children[0];
//最后一个孩子
var lastchildren = node.children[node.children.length - 1];

兄弟节点

1. nextElementSibling 返回当前元素下一个元素兄弟节点,如果该元素已经是最后一个元素节点,则返回null

var nextNode = elementNodeReference.nextElementSibling;

2. previousElementSibling 返回当前元素前一个元素兄弟节点,如果该元素已经是第一个元素节点,则返回null

var prevNode = elementNodeReference.previousElementSibling;

有兼容性问题，解决方案是封装一个函数

04-创建和添加节点

Node.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。

var element = document.createElement(tagName[, options]);

Node.appendChild() 方法将一个节点附加到指定父节点的子节点列表的末尾处

element.appendChild(aChild)

Node.insertBefore() 方法在参考节点之前插入一个拥有指定父节点的子节点。

parentNode.insertBefore(newNode, referenceNode);

• parentNode 新插入节点的父节点
• newNode 用于插入的节点
• referenceNode newNode 将要插在这个节点之前

05-删除节点

**Node.removeChild() **方法从DOM中删除一个子节点。返回删除的节点。

let oldChild = node.removeChild(child);
//OR
element.removeChild(child);

06-复制节点

**Node.cloneNode() **方法返回调用该方法的节点的一个副本.

node.cloneNode(deep);

1. node：将要被克隆的节点
2. deep 可选：是否采用深度克隆,如果为true,则该节点的所有后代节点也都会被克隆,如果为false,则只克隆该节点本身。

07-三种动态创建元素

1. document.write(‘markup’) 创建元素

   markup 一个包含要写入文档的文本的字符串。

document.write("<h1>Main title</h1>")

2. innerHTML 创建元素

inner.innerHTML = '<a href="#">百度</a>';

3. document.createElement() 创建元素

var create = document.createElement('a');

区别

1. write：直接将内容写入页面，但是文档流执行完毕，则它会导致页面全部重绘
2. innerHTML，将内容写入某个DOM节点，不会导致页面全部重绘，创建多个元素效率更高(不要拼接字符串，用数组形式拼接)，结构稍微复杂
3. createElement() 创建多个元素效率会稍低，结构更清晰

7. DOM核心(总结)

获取的DOM元素是一个对象，所以称为文档对象模型

主要针对元素的操作，创建。增、删、改、查、属性操作、事操作

01-创建

1. document.write
2. innerHTML
3. createElement

02-增

1. appendChild
2. inserBefore

03-删

removeChild

04-改

主要修改dom元素属性，dom元素的内容、属性，表单的值

05-查

1. DOM提供的API方法：getElementById、getElementsByTagName古老用法不推荐
2. H5提供新方法：querySelector、querySelectorAll 提倡
3. 利用节点获取元素：父(parentNode)、子(children)、兄(previousElementSibling、nextElementSibling) 提倡

06-属性操作

1. setAttribute：设置dom的属性值
2. getAttribute：得到dom的属性值
3. removeAttribute：移除dom的属性值

07-事件操作

给元素注册事件，采取 事件源.事件类型 = 事件处理程序

事件高级

1. 注册事件

给元素添加事件，称为注册事件或者绑定事件

两种方法：传统方法和方法监听注册方法

01-传统注册方式

1. 利用on开头的事件onclick
2. btn.onclick = function(){}
3. 特点：注册事件唯一性
4. 同一个元素同一个事件只能设置一个处理函数，后面的会覆盖前面的处理函数

02-方法监听注册方式

1. w3c标准推荐
2. addEventListerner()是个方法
3. IE9之前不支持此方法，使用attachEvent()代替
4. 特点：同一个元素同一个时间可以注册多个监听器
5. 按注册顺序依次执行

03-事件监听方式

**addEventListener() **方法将指定的监听器注册到 EventTarget 上，当该对象触发指定的事件时，指定的回调函数就会被执行。

语法

target.addEventListener(type, listener, useCapture);

1. type

表示监听事件类型的字符串。

2. listener

当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event`接口的对象）对象。listener 必须是一个实现了 EventListener接口的对象，或者是一个函数。

3. useCapture可选

boolean，在DOM树中，注册了listener的元素， 是否要先于它下面的EventTarget，调用该listener。

//事件监听 type是字符串必须加‘’；
btns[1].addEventListener('click',function () {
    alert('22');
})

//方法2
btns[1].addEventListener('click',fn);

function fn() {
	alert('22');
}

//可以添加多个侦听器(事件处理程序)
btns[1].addEventListener('click',function () {
	alert('33');
})

2. 删除事件(解绑事件)

01-传统方式

eventTarget.onclick = null

02-方法监听注册方式

removeEventListener() 删除事件

语法

target.removeEventListener(type, listener[, options]);

1. type

一个字符串，表示需要移除的事件类型，如 “click”。

2. listener

需要从目标事件移除的 EventListener函数。

3. useCapture可选

指定需要移除的 EventListener函数是否为捕获监听器。

//eg
element.addEventListener("mousedown", handleMouseDown, true);

element.removeEventListener("mousedown", handleMouseDown, true);      // 成功

3. DOM事件流

事件流描述的是从页面中接受事件的顺序，即事件发生时会在元素节点之间按照特定的顺序传播

DOM事件流分为3个阶段

1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段

注意

1. js代码中只能执行捕获或者冒泡其中一个阶段
2. onclick和attachEvent只能得到冒泡阶段
3. addEventListener第三个参数如果是true表示在事件捕获阶段调用事件处理，false(默认不写)，表示是冒泡阶段调用事件处理
4. 开发中更关注事件冒泡
5. 有些事件是没有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave

4. 事件对象

div.onclick = function(event) {}

1. 此处的event 就是一个事件对象，写在侦听函数小括号里面，当形参来看
2. 事件对象只有有了事件才会存在，它是系统自动创建，不需要传递函数
3. 事件对象是事件的一系列相关数据的集合，跟事件相关，比如鼠标点击里面包含鼠标的相关信息
4. 事件对象可以自己命名，event、evt、e
5. 事件对象也有兼容性问题 ie678

01-事件对象属性

Event.target 只读

对事件原始目标的引用，这里的原始目标指最初派发（dispatch）事件时指定的目标。

target和this区别

1. target 返回的是触发事件的对象
2. this 返回的是绑定事件的对象

和this非常相似的属性：currentTarget

Event.type 只读

返回事件的类型，不区分大小写。

Event.returnValue

旧版，为保证依赖此属性的网页正常运作，此属性最终被收入规范，作用：表示该事件的默认操作是否已被阻止。。

02-事件对象方法

event.preventDefault()

取消事件（如果该事件可取消）。

5. 阻止冒泡方法

stopPropagation() 阻止捕获和冒泡阶段中当前事件的进一步传播。但是，它不能防止任何默认行为的发生； 例如，对链接的点击仍会被处理。

语法

event.stopPropagation();

cancelable 表明该事件是否可以被取消，当事件被阻止之后，该事件就好像没有被触发一样。

语法

bool = event.cancelable；

//阻止冒泡
event.cancelable = true;

6. 事件委托(代理、委派)

也称事件代理，jQuery里面称为事件委派

原理

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

事件委托作用

只操作一次DOM，提高了程序的性能

7. 常用的鼠标事件

01-禁止鼠标右键菜单

contextmenu 主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单

02-禁止鼠标选中

selectstart 开始选中

03- 鼠标事件对象

event对象代表事件的状态，跟事件相关的一系列信息的集合

鼠标事件对象MouseEvent和键盘对象KeyboardEvent

属性

1. client 鼠标在可视区的x和y值

.clientX 返回鼠标相当于浏览器窗口可视区的水平坐标 (与页面坐标不同)。

.clientY 返回鼠标相当于浏览器窗口可视区的垂直坐标 (与页面坐标不同)。

2. page 鼠标在文档的x和y坐标

pageX 返回鼠标相当于文档页面的 X 坐标。

pageY 返回鼠标相当于文档页面的 Y 坐标。

8. 常用的键盘事件

01-常用键盘事件

键盘事件	触发条件
onkeyup	某个键盘按下被松开时触发
onkeydown	某个键盘按下被按下时触发 它能识别功能键 比如ctrl shift 箭头等
onkeypress	某个键盘按下被按下时触发 但是它不识别功能键 比如ctrl shift 箭头等

注意

1. 如果使用addEventListener，不需要加on
2. 三个事件顺序：keydown–onkeypress–onkeyup

02-键盘事件对象

keyup和keydown事件不区分大小写，press区分大小写

keydown 和 keypress 在文本框里面的特点：两个事件触发时候，文字还没有落入文本框

属性

key 返回用户按下的物理按键的值，它还与 shiftKey等调节性按键的状态和键盘的区域 / 和布局有关。

BOM

1. BOM概述

01-概述

BOM：Browser Object Model 是浏览器对象模型，浏览器对象模型提供了独立与内容的、可以与浏览器窗口进行互动的对象结构，BOM由多个对象构成，其中代表浏览器窗口的window对象是BOM的顶层对象，其他对象都是该对象的子对象。

BOM部分主要是针对浏览器的内容，其中常用的就是window对象和location，

1. window 是全局对象很多关于浏览器的脚本设置都是通过它。

2. location 则是与地址栏内容相关，比如想要跳转到某个页面，或者通过URL获取一定的内容。

3. navigator 中有很多浏览器相关的内容，通常判断浏览器类型都是通过这个对象。

4. screen 常常用来判断屏幕的高度宽度等。

5. history 不太常用，一般应该不会有写关于历史记录的脚本。

02-BOM构成

window对象是浏览器的顶级对象，它具有双重角色

1. 它是JS访问浏览器的一个接口
2. 它是全局对象，定义在全局作用域中的变量、函数都会编程window对象的属性和方法

注意：window下一个特殊属性 window.name

2. window对象的常见事件

01-窗口加载事件

window.onload = function() {}
//或者
window.addEventListener('load',function(){});

onload 是窗口(页面)加载事件，当文档内容完全加载完成会触发该事件，就调用处理程序

注意

1. 有了window.onload就可以把js写在页面的任意一个位置
2. 但是window.onload只能使用一次，会以最后一个为准
3. 推荐使用 window.addEventListener(‘load’,function(){});，没有限制

window.addEventListener('DOMContentloaded',function(){});

DOMContentloaded事件触发时，仅当DOM加载完，不包括样式表，图片，flash等，Ie9以上才支持

load是等页面全部加载完毕，包含页面dom元素 图片 flash css等

02-调整窗口大小事件

window.onresize = function() {}
//或者
window.addEventListener('resize',function(){});

window.onresize 是调整窗口大小加载事件，当触发时调用处理函数

注意

1. 只要窗口大小发生像素变化，就会触发这个事件
2. 利用这个事件完成响应式布局，window.innerWidth当前屏幕宽度

3. 定时器

01-两种定时器

2个非常好用的定时器

1. setTimeout()
2. setInterval()

02-setTimeout()定时器

setTimeout() 方法设置一个定时器，该定时器在定时器到期后执行一个函数或指定的一段代码。

语法

var timeoutID = window.setTimeout(function, delay);

参数

1. function

function是你想要在到期时间(delay毫秒)之后执行的函数。

2. delay 可选

延迟的毫秒数 (一秒等于1000毫秒)，函数的调用会在该延迟之后发生。如果省略该参数，delay取默认值0，意味着“马上”执行

注意

1. window在调用时可以省略
2. 调用函数可以直接写函数，还可以写函数名
3. 页面中可能有多个定时器，经常给定时器加标志符(名字)

function callback() {
    console.log('爆炸了');
}
setTimeout(callback,2000);

回调函数

setTimeout()这个调用函数称为回调函数callback ，即回头调用的函数

onclick里面的和addEventListener里面的都是回调函数

停止定时器

clearTimeout() 方法取消了先前通过调用setTimeout()建立的定时器。

语法

scope.clearTimeout(timeoutID)

参数

timeoutID： 您要取消定时器的标识符。 该ID由相应的setTimeout()调用返回。

03-setInterval()定时器

**setInterval() **方法重复调用一个函数或执行一个代码段，在每次调用之间具有固定的时间延迟。

语法

var intervalID = scope.setInterval(func回调函数, delay);

区别

1. setTimeout() 延迟事件到了，就去调用这个回调函数，只调用一次就结束
2. setInterval() 每隔这个延时时间，就会调用这个回调函数，会重复调用这个函数

停止定时器

clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务。

语法

scope.clearInterval(intervalID)

参数

intervalID：要取消的定时器的 ID。是由 setInterval() 返回的。

04-this

this的执行在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this得到最终指向的是哪个调用它的对象

1. 全局变量下或者普通函数中this指向全局对象window(注意定时器里面的this指向window)

console.log(this);

function fn() {
    console.log(this);
}

window.fn();

2. 方法调用中谁调用this指向谁

let o = {
    sayHi: function () {
        console.log(this);  //this指向o
    }
}
o.sayHi();

let btn = document.querySelector('button');
btn.onclick = function () {
    console.log(this);  //this指向btn
}

3. 构造函数中this指向构造函数的实例

function Fun() {
    console.log(this);
}

let fun = new Fun();

4. JS执行队列

01-js是单线程

JS一大特点就是单线程，同一时间只能做一件事

单线程意味着任务需要排队

02-同步与异步

1. 为了解决排队问题，利用多核cpu的计算能力，H5允许JS脚本创建多个线程，出现了同步和异步

同步

前一个任务执行结束后再执行后一个任务，程序的执行顺序与任务的排列顺序一致、同步的

异步

在一件事情同时可以去处理别的事件

2. 任务分为同步任务和异步任务

同步任务

同步任务在主线程上执行，形成一个执行线

异步任务

js异步是通过回溯函数实现的

异步任务三中类型

1. 普通时间，如click/resize等
2. 资源加载，如load/error等
3. 定时器，如setInterval、setTimeout等

5. location对象

location 属性用于获取或设置窗体的url

常用属性

1. href 属性是一个字符串化转换器, 返回一个包含了完整 URL(重点)
2. host 属性返回主机(域名)
3. port属性 返回端口号 如果未写返回 字符串
4. pathname属性 返回路径
5. search属性 返回参数 (重点)
6. hash属性 返回片段 #后面内容常见于链接 锚点

常见方法

1. **assign()**方法 使窗口在指定的 URL 处加载和显示文档。跟href一样，可以跳转页面
2. **replace()**方法 将当前资源替换为提供的 URL 中的资源 不记录历史，不能返回页面
3. **reload()**方法重新加载当前 URL，如刷新按钮相当于F5，如果参数为true强制刷新 ctrl+F5

6. URL

统一资源定位符URL 是互联网上标准的地址，互联网上的每个文件都有一个唯一的URL

语法格式

protocol :// hostname[:port] / path / [;parameters][?query]#fragment

参数

①protocol，通信协议方案，

file：资源是本地计算机上的文件。

ftp：通过FTP访问资源。

http：通过HTTP访问该资源。

https：通过安全的HTTP访问该资源。

②hostname： 主机，指定的服务器的域名系统 (DNS) 主机名或 IP 地址。

③port：端口号，整数，可选，省略时使用方案的默认端口，如http的默认端口为80，https默认为443。

④path：路径，由零或多个“/”符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。

⑤parameters：参数，这是用于指定特殊参数的可选项。

⑥query：查询，可选，用于给动态网页传参，可有多参数，用“&”符号隔开，每个参数的名和值用“=”符号隔开。

⑦fragment：信息片断，字符串，用于指定网络资源中的片断。。

7. navigator对象

包含有关浏览器的信息，常用的是userAgent，返回由客户机发送服务器的user-gaent头部的值

8. history对象

与浏览器历史记录进行交互，该对象包含用户访问过的url

常用方法

1. back() 属性 可以后退功能
2. forward() 属性 前进功能
3. go(参数) 属性 前进后退功能 参数为1 前进一个页面，-1 后退一个页面

PC端页面特效

1. 元素偏移量offset

offset可以动态得到该元素的位置(偏移)、大小等

1. 获取元素距离带有定位父元素的位置
2. 获取元素自身大小(宽度高度)
3. 注意：返回的数值不带单位

常用属性

1. offsetParent 是一个只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table,``td,``th,``body元素。
2. .offsetTop 为只读属性，它返回当前元素带有定位父元素上方的偏移
3. offsetLeft 是一个只读属性，返回当前元素带有定位父元素左边的偏移
4. .offsetWidth 是一个只读属性，返回一个元素的布局宽度，包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
5. offsetHeight 是一个只读属性，它返回该元素的像素高度，高度包含该元素的垂直内边距和边框，且是一个整数。

offset 和 style区别

1. offset可以得到任何样式值，style只能得到行内样式值
2. offset获得值没有单位，style.width带单位
3. offsetWidth包含padding+border+width，style.width只有width
4. offsetWidth只能获取不能赋值，style可读写，可获值也可赋值
5. 获取元素大小位置用offset更合适，给元素改值，则用style

2. 元素可视区client

获取元素可视区的相关信息，动态改变元素边框大小、元素大小等

1. clientTop 一个元素顶部边框的宽度（以像素表示）。不包括顶部外边距或内边距。
2. clientLeft 表示一个元素的左边框的宽度，以像素表示，不包括左外边距和左内边距。
3. clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
4. clientHeight 元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距。

3. 立即执行函数

(function[函数名](形参){})(实参)	//函数名可有可无，可以添加形参和实参

//或者

(function(){]()})

立即执行函数：不需要调用，直接执行函数

主要作用：创建一个独立的作用域，避免了命名冲突问题

4. 元素滚动scroll

scroll可以动态得到该元素大小、滚动距离等

1. scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
2. scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。
3. scrollWidth 这个只读属性是元素内容宽度的一种度量，包括由于overflow溢出而在屏幕上不可见的内容。
4. scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

scroll滚动事件当我们滚动条发生变化会触发的事件

div.addEventListener('scroll', function() {
  //执行代码
});

页面被卷去的头部：通过window.pageYOffset获取

元素被卷去的头部是：通过element.scrollTop获取

scrollHeight 这个只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。

页面被卷去头部兼容性

通常用几种写法

1. 声明了DTD，使用过document.documentElement.scrollTop (DTD：)
2. 未声明DTD，使用document.body.scrollTop
3. 新方法window.pageYOffset 和 window.pageXOffset，IE9开始支持

5. 三大系列总结

1. offset 经常用于获得元素位置 offsetLeft offsetTop
2. client 经常用于获取元素大小 clientWidth clientHeight
3. scroll 经常用于获取滚动距离 scrollTop csrollLeft
4. 注意获取页面滚动距离通过 window.pageXOffset 获得

6. mouseover和mouseenter区别

mouseenter鼠标事件

1. 鼠标移动到元素上会触发事件
2. 类似mouseover，差距是mouseover经过自身盒子会触发，经过子盒子还会触发
3. mouseenter 只会经过自身盒子触发
4. 之所以这样 是因为mouseenter不会冒泡
5. 还有mouseout和mouseleave

7. 动画函数封装

01-动画实现原理

核心原理：通过定时器setInterval()不断移动盒子位置

实现步骤 ：

1. 获得当前盒子
2. 让盒子在当前位置上加1个移动距离
3. 利用定时器不断重复这个操作
4. 加一个结束定时器条件
5. 此元素需要加定位，才能使用element.style.left

let div = document.querySelector('div');
let timer = setInterval(function () {
    if (div.offsetLeft >= 400) {
        clearInterval(timer);
    }
    div.style.left = div.offsetLeft + 5 + 'px';
}, 30);

02-简单动画函数封装

let div = document.querySelector('div');
let span = document.querySelector('span');
function animate(obj, target) {
    let timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(timer);
        }
        obj.style.left = obj.offsetLeft + 5 + 'px';
    }, 20);
}

animate(div, 1000);
animate(span, 1200);

03-给不同元素记录不同定时器

核心元素：利用js是一门动态语言，可以很方便给当前对象添加属性

优化封装函数

let div = document.querySelector('div');
let span = document.querySelector('span');
function animate(obj, target) {
    //添加定时器属性
    obj.timer = setInterval(function () {
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
        }
        obj.style.left = obj.offsetLeft + 5 + 'px';
    }, 20);
}

animate(div, 1000);
animate(span, 1200);

04-缓动效果原理

让元素运动速度有所变化

思路

1. 让盒子每次移动的距离慢慢变小，速度就会慢下来
2. 核心算法：(目标值 - 现在位置) / 10 作为每次移动的距离 步长
3. 停止条件：让当前盒子等于目标位置就停下定时器

代码实现

function animate(obj, target) {
    //不断点击按钮，速度会越来越快，因为开了太多定时器
    //开始先结束之前的定时器，就可以解决bug
    clearInterval(obj.timer);
    //添加定时器属性
    obj.timer = setInterval(function () {
        //  步长值写到定时器里面
        //取整数，不然达不到target的位置
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            clearInterval(obj.timer);
        }
        //  (目标值 - 现在位置) / 10 作为每次移动的距离 步长

        obj.style.left = obj.offsetLeft + step + 'px';
    }, 60);
}

05-动画函数添加回调函数

回调函数原理：函数可以作为一个参数，将这个函数作为参数传递到另一个函数里面，当那个函数执行之后再执行传进去的这个函数，这个过程叫做回调

代码实现

function animate(obj, target, callback) {
    //callback = function () {} 调用的时候callback（）
    //不断点击按钮，速度会越来越快，因为开了太多定时器
    //开始先结束之前的定时器，就可以解决bug
    clearInterval(obj.timer);
    //添加定时器属性
    obj.timer = setInterval(function () {
        //  步长值写到定时器里面
        let step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft >= target) {
            clearInterval(obj.timer);
            //回调函数写在定时器结束里面
            if (callback) {
                //调用函数
                callback();
            }
        }

        //  匀速动画 盒子当前位置 + 固定的值 10
        //  缓动动画  (目标值 - 现在位置) / 10 作为每次移动的距离 步长
        obj.style.left = obj.offsetLeft + step + 'px';


    }, 60);
}

06-封装单独js文件里面

以后经常使用这个动画函数，可以直接引用js文件即可

1. 单独建立一个js文件
2. 在html中外连接js文件

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .sliderbar {
            position: relative;
            top: 200px;
            left: 97%;
            width: 50px;
            height: 50px;
            background-color: pink;
        }

        span {
            position: absolute;
            top: 0;
            left: 0;
            /*background-color: purple;*/
            text-align: center;
            line-height: 50px;
            width: 50px;
            height: 50px;
        }

        .con {
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 50px;
            background-color: red;
            z-index: -1;
        }
    </style>
    <script src="animate.js"></script>
</head>
<body>

<div class="sliderbar">
    <span><-</span>
    <div class="con">问题反馈</div>
</div>

<script>
    let slideerbar = document.querySelector('.sliderbar');
    var con = document.querySelector('.con');
    slideerbar.addEventListener('mouseenter', function () {
        animate(con, -150, function () {
            slideerbar.children[0].innerHTML = '->';
        });
    });
    slideerbar.addEventListener('mouseleave', function () {
        animate(con, 0, function () {
            slideerbar.children[0].innerHTML = '<-';
        });
    });
</script>

</body>
</html>

8. 节流阀

防止轮播图按钮连续点击做成播放过快

节流阀目的：当上一个函数动画内容执行完后，再执行下一个函数动画

核心思想：利用回调函数，添加一个变脸来控制，锁住函数和解锁函数

开始设置一个变量var flag = true;

if(flag){flag = false; do something} 关闭水龙头

利用回调函数 动画执行完毕，flag = true; 打开水龙头

9. 带有动画的返回顶部

滚动窗口至文档中的特定位置

window.scroll(x,y);

代码实现

function animate(obj, target, callback) {
    //callback = function () {} 调用的时候callback（）
    //不断点击按钮，速度会越来越快，因为开了太多定时器
    //开始先结束之前的定时器，就可以解决bug
    clearInterval(obj.timer);
    //添加定时器属性
    obj.timer = setInterval(function () {
        //  步长值写到定时器里面
        let step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.timer);
            //回调函数写在定时器结束里面
            if (callback) {
                //调用函数
                callback();
            }
        }

        //  匀速动画 盒子当前位置 + 固定的值 10
        //  缓动动画  (目标值 - 现在位置) / 10 作为每次移动的距离 步长
        // obj.style.left = obj.offsetLeft + step + 'px';
        window.scroll(0, window.pageYOffset + step);
    }, 60);
}

10. 筋斗云案例

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>BOM</title>
    <style>
        body {
            height: 2000px;
        }

        div {
            background-color: pink;
            width: 50%;
            height: 700px;
        }
    </style>
</head>
<body>

<button>点击</button>
<div></div>

<script>
    let btn = document.querySelector('button');
    console.log(1);
    btn.addEventListener('click', function () {
        animate(window, 500);
    });

    function animate(obj, target, callback) {
        //callback = function () {} 调用的时候callback（）
        //不断点击按钮，速度会越来越快，因为开了太多定时器
        //开始先结束之前的定时器，就可以解决bug
        clearInterval(obj.timer);
        //添加定时器属性
        obj.timer = setInterval(function () {
            //  步长值写到定时器里面
            let step = (target - window.pageYOffset) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            if (window.pageYOffset == target) {
                clearInterval(obj.timer);
                //回调函数写在定时器结束里面
                if (callback) {
                    //调用函数
                    callback();
                }
            }

            //  匀速动画 盒子当前位置 + 固定的值 10
            //  缓动动画  (目标值 - 现在位置) / 10 作为每次移动的距离 步长
            // obj.style.left = obj.offsetLeft + step + 'px';
            window.scroll(0, window.pageYOffset + step);
        }, 60);
    }
</script>

</body>
</html>

移动端网页特效

1. 触屏事件

移动端兼容性较好，不需要考虑js兼容性问题

移动端也有自己独特的地方，比如触屏时间touch(也成触摸事件)

touch对象代表一个触摸点，触屏事件可响应用户手指(或者触控笔)对屏幕或者触控板操作

01-触屏touch事件

1. touchstart 当一个或多个触摸点与触控设备表面接触时触发事件.
2. touchmove 当触点在触控平面上移动时触发事件。
3. touchend 当触点离开触控平面时触发事件.

02-触摸对象

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

touchstart、touchmove、touchend都会各自有事件对象

出没时间对象三个常见对象列表

1. touches 其会列出所有当前在与触摸表面接触的touch对象
2. targetTouches 是一个只读的 列表，包含仍与触摸面接触的所有DOM元素的Touch对象。
3. changedTouches 手指状态改变的列表，从无到有，从有到无变化

03-移动端拖动元素

拖动元素三部曲

1. 触摸远古三stouchstart：获取手指初始坐标，同时获得盒子原来位置
2. 移动手指touchmove：计算手指滑动距离，并移动盒子
3. 离开手指touchleave

手指移动距离：手指滑动距离减去 手指刚开始触摸的位置

拖动原理：手指移动中，计算出手指移动距离，然后用盒子原来的位置+手指移动位置

注意：手指移动也会触发滚动屏幕所以要阻止默认的屏幕滚动 e.preventDefault();

2. 移动端常见特效

移动端轮播图功能和基本PC端一致

1. 可以自动播放图片
2. 手指可以拖动播放轮播图

01-classList属性

classList 是一个只读属性，返回一个元素的类属性的实时DOMTokenList 集合。

classList属性时HTML5新增的一个属性，返回元素的类名，ie10以上才支持

该属性用于元素中添加、移除及切换css类，以下方法

1. append() 方法在 Element的最后一个子节点之后插入类名，不会覆盖其它类名。
2. remove() 方法，删除类名。
3. toggleAttribute() 方法切换给定元素的某个布尔值属性的状态（如果属性不存在则添加属性，属性存在则移除属性）。

02-click延时解决方案

移动端click事件会有300秒延时，原因是移动端屏幕双击会缩放页面

解决方案

1. 禁止缩放

<meta name="viewport" content="user-scalable=no">

2. 利用 touch事件自己封装这个解决300ms延迟

原理是：

1. 当我们手指触摸屏幕，记录当前触摸时间
2. 当我们手指离开屏幕，用离开的时间去减去触摸时间
3. 如果时间小于150ms，并且没有滑动过屏幕，那么就定义为点击

3. 常用移动端开发插件

01-fastclick插件使用

JS插件就是js文件拥有特定功能且方便调用

特点：为了解决某种问题撰文存在，其功能单一且比较小

fastclick插件解决300ms延迟

GitHub官网地址：https://github.com/ftlabs/fastclick

02-Swiper插件的使用

中文官网：https://www.swiper.com.cn/

1. 引入插件相关文件

从文档中把css文件和js文件拉入自己的文档下，然后引入文件

<!-- Link Swiper's CSS -->
<link
      rel="stylesheet"
      href="./swiper/swiper-bundle.min.css"
/>

<!-- Swiper JS -->
<script src="./swiper/swiper-bundle.min.js"></script>

2. 按照规定语法使用

步骤

1. 引入结构和部分样式
2. 引入script内容

使用方法

官网：https://www.swiper.com.cn/usage/index.html

03-移动端其他插件的方法

1. 确定插件实现的功能
2. 去官网查看使用说明
3. 下载插件
4. 打开demo示例文件，查看需要引入的相关文件并引入
5. 复制demo示例文件中的结构html、样式css以及js代码

04-视频插件

视频插件：zy.media.js

H5提供得到视频video标签，但浏览器的支持情况不同

不同的视频格式文件可以通过source解决

但是外观样式，还有暂停，播放，全屏等功能之恶能自己写代码解决

所以这个时候可以使用插件方式来制作

4. 移动端常用开发框架

前端常用框架：Bootstrap、Vue、Angular、React等，既能开发PC段、也能开发移动端

前端常用移动端插件有：swiper、superslide、iscroll等

框架是一套架构，比较完整，大而全

插件一般是为了解决某个问题而专门存在，功能单一且比较小，小而专一

本地存储

在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。

1. 本地存储特性

1. 存储在用户浏览器中
2. 设置、读取方便、甚至页面刷新不丢失数据
3. 容量大，sessionStorage约5M、localStorage约20M
4. 只能存储字符串，可以讲对象JSON.stringfy()编码后存储

2. window.sessionStorage

特性

1. 生命周期为关闭浏览器
2. 在同一个窗口下数据可以共享
3. 以键值对形式存储使用

方法

1. **setItem() ** 接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

sessionStorage.setItem(keyName, keyValue);

2. getItem() 接受一个键名（key name）作为参数，并返回对应键名的值（key’s value）。

var aValue = sessionStorage.getItem(keyName);

3. removeItem() 接受一个键名作为参数，会从给定的Storage对象中删除该键名（如果存在）。

sessionStorage.removeItem(keyName);

4. clear() 调用它可以清空存储对象里所有的键值。

sessionStorage.clear();

3. window.localStorage

localStorage 属性允许你访问一个Document源（origin）的对象Storage；存储的数据将保存在浏览器会话中。

区别：存储在 localStorage 的数据可以长期保留；而当页面会话结束——也就是说，当页面被关闭时，存储在 sessionStorage 的数据会被清除 。

方法

1. **setItem() ** 接受一个键名和值作为参数，将会把键名添加到存储中，如果键名已存在，则更新其对应的值。

localStorage.setItem(keyName, keyValue);

2. getItem() 接受一个键名（key name）作为参数，并返回对应键名的值（key’s value）。

var aValue = localStorage.getItem(keyName);

3. removeItem() 接受一个键名作为参数，会从给定的Storage对象中删除该键名（如果存在）。

localStorage.removeItem(keyName);

4. clear() 调用它可以清空存储对象里所有的键值。

localStorage.clear();

jQuery

1. jQuery概述

01-JS库

仓库：可以吧很多东西放在这个仓库里面，找东西只需要到仓库里面查找就可以

JS库简单理解：就是JS文件，里面对我们原生JS代码进行封装，存放到里面，可以快速高效地使用这些封装好的功能

比如jQuery，就是为了快速方便的操作DOM，里面基本到时函数

常见JS库：jQuery、Prototype、YUI、DOjo、Ext JS、移动端的zepto

这些库都是对原生js的封装，内部都是js实现的

02-jQuery概念

jQuery是一个快速、简介的js库，可以快速查询使用里面的功能

学习jQuery本质：就是学习调用函数(方法)

jQuery下载官网：https://jquery.com/download/

打开文档：Download the uncompressed, development jQuery 3.6.0(https://code.jquery.com/jquery-3.6.0.js)

创建一个jQuery.mim.js来存放里面代码，引入页面即可使用

03-jQuery入口函数

$(function(){
  ...	//此处是页面DOM加载完成入口
})；

$(document).ready(function()) {
  ...	// 此处为页面DOM加载完毕入口
});

1. 等着DOm结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕
2. 相当于原生js中的DOMContentLoaded
3. 不同的是js中load事件是等页面文档、外部js文件、css文件、图片加载完毕后才执行内部代码

04-jQuery顶级对象$

1. $ 是jQuery的别称，可以使用 它代替，同时
2. 也是jQuery的顶级对象

05-jQuery对象和DOM对象

DOM对象：原生js获取的对象是DOM对象

jQuery对象：使赢jQuery方式获取过来的对象是jQuery对象

jQuery对象本质是：利用$对DOM对象包装后产生的对象

jQuery对象只能使用jQuery方法，DOM对象只能使用DOM方法

DOM对象和jQuery对象可以互相转换

原生js比jQuery更大，原生的一些属性和方法jQuery没有封装，可以jQuery转换成DOM对象才能使用

1. DOM对象转换成jQuery对象：$(DOM对象)

$('div');

2. jQuery对象转为DOM对象两种方法

$('div')[index]	//index是索引号
//或者
$('div').get(index)

2. jQuery常用API

API官网：https://jquery.cuishifeng.cn/

01-jQuery选择器

1.1 jQuery基础选择器

原生js获取元素方法有很多，很杂，兼容性不一致，jQuery做了封装，使得元素统一标准

$('选择器')	//里面选择器直接写css选择器即可，但是要加引号

选择器	实例	选取
*	$(“*”)	所有元素
#id	$(“#lastname”)	id=“lastname” 的元素
.class	$(“.intro”)	所有 class=“intro” 的元素
element	$(“p”)	所有 元素
.class.class	$(“.intro.demo”)	所有 class=“intro” 且 class=“demo” 的元素

02-隐式迭代(重要)

隐式迭代 遍历内部DOM元素(伪数组形式存储)的过程；就是把匹配的所有元素内部进行遍历循环

03-jQuery筛选选择器

属性

选择器	实例	选取
:first	$(“p:first”)	第一个 元素
:last	$(“p:last”)	最后一个 元素
:even	$(“tr:even”)	所有偶数
:eq(index)	$(“ul li:eq(3)”)	列表中的第四个元素（index 从 0 开始）
:odd	$(“tr:odd”)	所有奇数
:gt(no)	$(“ul li:gt(3)”)	列出 index 大于 3 的元素
:lt(no)	$(“ul li:lt(3)”)	列出 index 小于 3 的元素
:not(selector)	$(“input:not(:empty)”)	所有不为空的 input 元素

元素 元素

方法重点

函数	描述
.children()	获得匹配元素集合中每个元素的所有子元素。
.parent()	获得当前匹配元素集合中每个元素的父元素，由选择器筛选（可选）。
.find()	获得当前匹配元素集合中每个元素的后代，由选择器进行筛选。
.siblings()	获得匹配元素集合中所有元素的同辈元素，由选择器筛选（可选）。
.nextAll()	获得匹配元素集合中每个元素之后的所有同辈元素，由选择器进行筛选（可选）。
.prevAll()	获得匹配元素集合中每个元素之前的所有同辈元素，由选择器进行筛选（可选）。
.hasClass(class)	检查当前元素是否含有某个特定的类，如果有则返回true
.eq()	将匹配元素集合缩减为位于指定索引的新元素。
parents(class)	取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素,指定元素）。

04-jQuery排他思想

$(function () {
    $('button').click(function () {
        //让选中颜色改变
        $(this).css("background", "pink");
        //其他颜色不变
        $(this).siblings("button").css("background", "");
    });
});

05-链式编程

链式编程是为了节省 代码量，看起来更优雅

$(this).css("background", "pink").siblings("button").css("background", "");

3. jQuery样式操作

01-操作css方法

jQuery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式

1. 参数只写属性名，则是返回属性值

$(选择器).css('color');

2. 设置 CSS 属性和值

$(选择器).css(属性名,value)

3. 参数可以是对象形式，方便设置多组样式

$(*selector*).css({属性：value,'color'：'red', ...});

02-设置类样式方法

为每个匹配的元素添加指定的类名。和classList作用等同

1. 添加类addClass(class)

$("p").addClass("selected");
$("p").addClass("selected1 selected2");

2. 删除类removeClass(class)

$("p").removeClass("selected");
$("p").removeClass();	//删除所有类

3. 切换类toggleClass(class)

如果存在（不存在）就删除（添加）一个类。

$("p").toggleClass("selected");

与className区别

1. 原生js中className会覆盖掉元素原来里面的雷明光
2. jQuery里面类操作只是针对指定类进行操作，不影响原来的类名

4. jQuery效果

01-显示隐藏效果

1. 显示show

显示隐藏的匹配元素。

show([speed,[easing],[fn]])；

//eg

$("p").show()

参数

speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn：在动画完成时执行的函数，每个元素执行一次。

2. 隐藏hide

隐藏所有段落

hide([speed,[easing],[fn]]);

//eg

$("p").hide();

参数

speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

fn：在动画完成时执行的函数，每个元素执行一次。

3. 切换toggle

如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。

toggle([speed],[easing],[fn])

//eg

$('td).toggle();

参数

speed： 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”

easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：在动画完成时执行的函数，每个元素执行一次。

02-滑动效果与事件切换

1. 下滑效果slideDown

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来

slideDown([speed],[easing],[fn])

//eg

$(".btn2").click(function(){
  $("p").slideDown();
});

参数

speed： 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”

easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：在动画完成时执行的函数，每个元素执行一次。

2. 上滑效果slideUp

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。

slideUp([speed,[easing],[fn]])

//eg

$("p").slideUp("slow");

参数

speed： 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”

easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：在动画完成时执行的函数，每个元素执行一次。

3. 切换效果slideToggle

这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。

slideToggle([speed],[easing],[fn])

//eg

$("p").slideToggle("slow");

参数

speed： 隐藏/显示 效果的速度。默认是 “0"毫秒。可能的值：slow，normal，fast。”

easing：(Optional) 用来指定切换效果，默认是"swing"，可用参数"linear"

fn：在动画完成时执行的函数，每个元素执行一次。

4. 事件切换hover

两个参数：当鼠标移动到一个匹配的元素上面，会触发指定的第一个函数。当鼠标移出这个元素，会触发指定的第二个函数。

一个参数 ：鼠标经过和鼠标离开都会出发这个函数。

hover([over,]out)

//eg

$("td").hover(
  function () {
    $(this).addClass("hover");
  },
  function () {
    $(this).removeClass("hover");
  }
);

03-动画队列及停止排队方法

动画或者效果一旦触发就会执行，如果多次执行，就会造成多个动画或者效果排队执行

停止排队stop

停止所有在指定元素上正在运行的动画。

stop([clearQueue],[jumpToEnd])

//eg

$("#stop").click(function(){
  $("#box").stop();
});

参数

queue：用来停止动画的队列名称

clearQueue：如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd：如果设置成true，则完成队列。可以立即完成动画。

注意

stop()写到动画或者效果前面，相对停止结束上一次动画

04-淡入淡出效果

1. 淡入效果fadeIn

通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。

fadeIn([speed],[easing],[fn])

//eg

$("p").fadeIn("slow");

参数解释同上

2. 淡出效果

通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。

fadeOut([speed],[easing],[fn])

//eg

$("p").fadeOut("slow");

参数解释同上

3. 渐进方式调整到指定的不透明度

把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数。

fadeTo([[speed],opacity,[easing],[fn]])

//eg

$("p").fadeTo("slow", 0.66);

opacity: 一个0至1之间表示透明度的数字。(必须写)

其他参数同上

4. 淡入淡出切换效果

通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数。

fadeToggle([speed,[easing],[fn]])

//eg

$("p").fadeToggle("slow","linear");

参数同上

05-自定义动画animate

用于创建自定义动画的函数。

这个函数的关键在于指定动画形式及结果样式属性对象。

这个对象中每个属性都表示一个可以变化的样式属性（如“height”、“top”或“opacity”）。

注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left.

animate(params,[speed],[easing],[fn])

//eg

// 在一个动画中同时应用三种类型的效果
$("#go").click(function(){
  $("#block").animate({ 
    width: "90%",
    height: "100%", 
    fontSize: "10em", 
    borderWidth: 10
  }, 1000 );
});

参数

params: 一组包含作为动画属性和终值的样式属性和及其值的集合，以对象的方式写

speed: 三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)

easing: 要使用的擦除效果的名称(需要插件支持).默认jQuery提供"linear" 和 “swing”.

fn: 在动画完成时执行的函数，每个元素执行一次。

5. jQuery属性操作

01-设置或获取元素固有属性

获取prop()

获取在匹配的元素集中的第一个元素的属性值。

prop(name)

//eg

$("input[type='checkbox']").prop("checked");

02-设置或获取元素自定义属性值

设置或返回attr()

设置或返回被选元素的属性值。

attr(name)
attr(name , value)
//eg

$("img").attr("src");

03-数据缓存

data()

在元素上存放或读取数据,返回jQuery对象。

当参数为两个时，为像该jQuery对象对应的DOM中存储key-value键值对的数据。

当参数只有一个key的时候，为读取该jQuery对象对应DOM中存储的key对应的值

data([key],[value])

//eg

<div data-test="this is test" ></div>
$("div").data("test"); //this is test!;

这个获取data-index H5自定义属性 第一个不用写data- 而且返回的是数字型

6. jQuery内容文本值

主要针对元素内容和表单值操作

01-普通元素的内容html()

取得第一个匹配元素的html内容。相当于inner HTML

html()
html("内容")	//设置html内容

//eg

$('p').html();

02-普通元素文本内容text()

取得所有匹配元素的内容。相当于inner Text

text()
text("内容")	//设置text内容

//eg

$('p').text();

03-获取表单里的值val

获得匹配元素的当前值。相当于value

val()
val("内容")	//设置val内容

//eg

$("input").val();

7. jQuery元素操作

主要是遍历 、创建、添加、删除元素事件

01-遍历元素

each()

以每一个匹配的元素作为上下文来执行一个函数。意味着，每次执行传递进来的函数时，函数中的this关键字都指向一个不同的DOM元素（每次都是一个不同的匹配元素）。

each(callback);	//callback：每次匹配的元素要执行的函数
//语法2
$.each($(选择器),callback);

//eg

$("img").each(function(index,domEle){
   //	回调函数第一个参数一定是索引号
 });
$.each($('div'),function(index,domEle){});	// 主要用于遍历数据(数组、对象)，处理数据

里面的回调函数有2个参数：index是每个元素的索引号，domEle是每个DOM元素对象，不是jQuery对象

所以想要使用jQuery方法，需要对这个dom元素转换为iquery对象$(domEle)

02-创建元素

语法

$("<li>动态创建的li</li>")

03-添加元素

内部添加 append

向每个匹配的元素内部追加内容。添加到内容最后面

append(content|fn)

//eg

$("p").append("<b>Hello</b>");

内部添加 prepend

向每个匹配的元素内部前置内容。添加到内容最前面

prepend(content)

//eg

$("p").prepend("<b>Hello</b>");

外部添加 before

在每个匹配的元素之前插入内容。放在内容前面

before(content|fn)

//eg

$("p").before("<b>Hello</b>");

外部添加 after

在每个匹配的元素之前插入内容。放在内容后面面

after(content|fn)

//eg

<p>I would like to say: </p>
$("p").after("<b>Hello</b>");
<p>I would like to say: </p><b>Hello</b>

注意

内部添加元素，生成之后，是父子关系

外部添加元素，生成之后，是兄弟关系

04-删除元素

remove()

从DOM中删除所有匹配的元素。

remove([expr])

//eg

$("p").remove();

empty()

删除匹配的元素集合中所有的子节点。

empty()

//eg

$("p").empty();

8. jQuery尺寸操作

1. width/Height

取得第一个匹配元素当前计算的宽度值（px）。

width([val|fn])

//eg

$("p").width();

2. innerwidth/innerHeight

获取第一个匹配元素内部区域宽度（width + padding）。

innerWidth()

3. outerWidth/outerWidth(true)

获取第一个匹配元素外部宽度（width + padding + border）。

outerWidth([options])

outerWidth(true) / outerHeight(true)	// width+padding+border+margin

9. jQuery位置

位置主要有三个：offset()、position、scrollTop()/scrollLeft()

01-offset

获取匹配元素在当前视口的相对偏移。

返回的对象包含两个整型属性：top 和 left，以像素计。

1. offset() 可以设置或返回相对于文档的偏移值对象，有top、left属性
2. position() 只能获取相当于带有定位的父级的偏移值对象，父级都没带定位则相对于文档，有top 和 left
3. scrollTop()/scrollLeft() 设置和获取匹配元素相对滚动条顶部的偏移。

10. jQuery事件

01-事件注册

单个事件注册

语法

element.事件(function(){})

其他事件和原生事件基本一致

02-事件处理on()绑定事件

on()在选择元素上绑定一个或多个事件的事件处理函数。

on(events,[selector],[data],fn)

参数

1. events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。
2. selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。
3. data:当一个事件被触发时要传递event.data给事件处理函数。
4. fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。

//绑定多个事件格式
$('div').on({
  mouseenter: function(){
    //执行的函数
  },
  
  click:function(){
    //执行的函数
  }
});

//或者
$('div').on("mouseenter mouseleave", function(){
  //执行的函数,一般是toggle...方法
});

on()方法优势2

可以事件委托，把原本加给子元素身上的事件绑定在父元素身上

on()方法优势3

动态创建元素，click()没有办法绑定事件，on()可以动态生成的元素绑定事件

//事件委托动态绑定
$('div').on('click',"li",function(){})

03-事件处理off()解绑事件

off()：在选择元素上移除一个或多个事件的事件处理函数。

off(events,[selector],[fn])

参数

1. events: 一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间
2. selector: 一个最初传递到.on()事件处理程序附加的选择器。
3. fn: 事件处理程序函数以前附加事件上，或特殊值false.

04-事件处理one()执行一次事件

one()：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。

one(type,[data],fn)

参数

1. **type:**添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
2. **data:**将要传递给事件处理函数的数据映射
3. **fn:**每当事件触发时执行的函数。

05-事件处理trigger()自动触发事件

trigger：在每一个匹配的元素上触发某类事件。

trigger(type,[data])

element.click() //	简写方法
element.trigger("type");
element.triggerHandler('事件')	//不会触发元素的默认行为

$("p").on("click", function(){
  alert("hi~");
});
$("p").trigger("click");	//此时自动触发点击事件

参数

1. **type:**一个事件对象或者要触发的事件类型
2. **data:**传递给事件处理函数的附加参数

06-事件对象

和原生js相似

element.on('click',function(e){
  //e便是事件对象
});

阻止默认行为：e.preventDefault() 或者 return false

阻止冒泡：e.stopPropagation()

11. jQuery其他方法

01-对象拷贝

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。

$.extend([deep], target, object1, [objectN])

参数

1. deep:如果设为true，则深拷贝。
2. target:待修改对象。
3. object1:待拷贝的第一个对象的对象。

浅拷贝：被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝：前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象

02-多库共存

jQuery使用$作为标识符，随着jQuery流行，其他js库也会用$ 作为标识符，这样会引起冲突

解决方案

1. 把里面的$符号统一改为jQuery
2. jQuery变量规定新的名称：$.noConflict() var xx = $.noConflict();

03-jQuery插件

jQuery功能比较有限，想要更复杂的特效，可以借助于jQuery插件完成

注意：这些插件都是依赖于jQuery完成的，必须先引入jQuery文件

jQuery插件常用网站

1. jQuery插件库：https://www.jq22.com/
2. jQuery之家：http://www.htmleaf.com/

使用步骤

1. 引入相关文件(jQuery文件和插件文件)
2. 复制相关html、css、js(调用插件)

04-图片懒加载技术

图片是用延迟加载可提高网页下载速度，帮助减轻服务器负载

当我们页面滑动到可视区域。再显示图片

功能实现：在jQuery插件库里

05-全屏滚动(fullpage.js)

github：https://github.com/alvarotrigo/fullPage.js

中文网：http://www.dowebok.com/demo/2014/77/

06-Bootstrap Js插件

BootStrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

组件、js插件

数据可视化

1. 什么是数据可视化

01-数据可视化

目的：借助于图形化首端，清晰有效传达与沟通信息

数据可视化可以把数据从冰冷的数据转换成图形，解释蕴含在数据中的规律和道理

02-数据可视化场景

1. 通用报表
2. 移动端图标
3. 大屏可视化
4. 图编辑&图分析
5. 地理可视化

03-常见的数据可视化库

1. D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
2. ECharts.js 百度出品的一个开源 Javascript 数据可视化库
3. Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
4. AntV 蚂蚁金服全新一代数据可视化解决方案 等等
5. Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

2. 数据可视化项目

01-项目目的

1. 市场需求：用来展示数据，让数据更加直观，数据特点更加突出
2. 学习需求：起着承上启下作用

02-项目技术

1. HTML+CSS3布局
2. CSS3动画、渐变
3. jQuery库+原生JavaScript
4. flex布局和renm适配方案
5. 图片边框border-image
6. ES6模板字符
7. ECharts可视化库等等

3. ECharts简介

• 是一个JS插件
• 性能好可流畅运行PC与移动设备
• 兼容主流浏览器
• 开源免费
• 提供很多常用图表，且可定制。
  • 折线图、柱状图、散点图、饼图、K线图

官网地址：https://echarts.apache.org/zh/index.html

4. ECharts使用

使用步骤

1. 引入echarts 插件文件到html页面中
2. 准备一个有宽、高的DOM容器
3. 初始化echarts实例对象
4. 指定配置项和数据(option)
5. 将配置项设置给echarts实例对象

<style>
    .box {
        width: 500px;
        height: 500px;
        background-color: #ff9;
    }
</style>
<body>
//步骤2.容器必须有大小
<div class="box"></div>
</body>

<script>
    //步骤3.初始化ECharts实例对象
    var myECharts = echarts.init(document.querySelector(".box"));

    //步骤4.指定配置项和数据，即在官网选择一个你想要图表
    var options;  //要先声明options
    option = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //步骤5.将配置项设置给实例化对象
    myECharts.setOption(option);
</script>

5. ECharts相关配置

主要配置

1. series：系列列表。每个系列通过 type 决定自己的图表类型。图标数据，指定什么类型的图标，可以多个图表重叠。

2. xAxis：直角坐标系 grid 中的 x 轴

3. yAxis：直角坐标系 grid 中的 y 轴

   主要包含两个属性：

   • name 坐标轴名称 （标注）
   • data 类目数据

   y 轴的分割设置：

   • splitNumber 分割段数
   • interval 强制设置坐标轴分割间隔
   • minInterval 坐标轴最小间隔
   • maxInterval 坐标轴最大间隔

4. grid：直角坐标系内绘图网格。

5. title：标题组件

   属性

   • 主标题 text
   • 副标题 subtext
   • 位置 left
   • 主标题样式 textStyle
   • 副标题样式 subtextStyle
   • 可见性 show

6. tooltip：提示框组件

   分类

   • item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
   • axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
   • none 什么都不触发

7. legend：图例组件

8. color：调色盘颜色列表。

9. toolbox：工具栏

   一些可以给用户使用的按钮工具：

   • 保存图片 saveAsImage
   • 配置项还原 restore
   • 数据视图工具 dataView
   • 数据区域缩放 dataZoom
     /e便是事件对象
     });

阻止默认行为：e.preventDefault() 或者 return false

阻止冒泡：e.stopPropagation()

## 11. jQuery其他方法

#### 01-对象拷贝

用一个或多个其他对象来扩展一个对象，返回被扩展的对象。

 如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。 

$.extend([deep], target, object1, [objectN])

参数

1. **deep**:如果设为true，则深拷贝。
2. **target**:待修改对象。
3. **object1**:待拷贝的第一个对象的对象。

浅拷贝：被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象

深拷贝：前面加true，完全克隆(拷贝的对象，而不是地址)，修改目标对象不会影响被拷贝对象

#### 02-多库共存

jQuery使用`$`作为标识符，随着jQuery流行，其他js库也会用`$` 作为标识符，这样会引起冲突

解决方案

1. 把里面的$符号统一改为jQuery
2. jQuery变量规定新的名称：$.noConflict()    var xx = $.noConflict();

#### 03-jQuery插件

jQuery功能比较有限，想要更复杂的特效，可以借助于jQuery插件完成

注意：这些插件都是依赖于jQuery完成的，必须先引入jQuery文件

**jQuery插件常用网站**

1. jQuery插件库：https://www.jq22.com/
2. jQuery之家：http://www.htmleaf.com/

**使用步骤**

1. 引入相关文件(jQuery文件和插件文件)
2. 复制相关html、css、js(调用插件)

#### 04-图片懒加载技术

图片是用延迟加载可提高网页下载速度，帮助减轻服务器负载

当我们页面滑动到可视区域。再显示图片

功能实现：在jQuery插件库里

#### 05-全屏滚动(fullpage.js)

github：https://github.com/alvarotrigo/fullPage.js

中文网：http://www.dowebok.com/demo/2014/77/

#### 06-Bootstrap Js插件

BootStrap框架也是依赖于jQuery开发的，因此里面的js插件使用，也必须引入jQuery文件

组件、js插件

# 数据可视化

## 1. 什么是数据可视化

#### 01-数据可视化

目的：借助于图形化首端，清晰有效传达与沟通信息

数据可视化可以把数据从冰冷的数据转换成图形，解释蕴含在数据中的规律和道理

#### 02-数据可视化场景

1. 通用报表
2. 移动端图标
3. 大屏可视化
4. 图编辑&图分析
5. 地理可视化

#### 03-常见的数据可视化库

1. **D3.js** 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
2. **ECharts.js** 百度出品的一个开源 Javascript 数据可视化库
3. **Highcharts.js** 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
4. **AntV** 蚂蚁金服全新一代数据可视化解决方案 等等
5. **Highcharts** 和 **Echarts** 就像是 Office 和 WPS 的关系

## 2. 数据可视化项目

#### 01-项目目的

1. 市场需求：用来展示数据，让数据更加直观，数据特点更加突出
2. 学习需求：起着承上启下作用

#### 02-项目技术

1. HTML+[CSS3](https://so.csdn.net/so/search?q=CSS3&spm=1001.2101.3001.7020)布局
2. CSS3动画、渐变
3. [jQuery](https://so.csdn.net/so/search?q=jQuery&spm=1001.2101.3001.7020)库+原生JavaScript
4. [flex](https://so.csdn.net/so/search?q=flex&spm=1001.2101.3001.7020)布局和renm适配方案
5. 图片边框border-image
6. ES6模板字符
7. ECharts可视化库等等

## 3. ECharts简介

- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 开源免费
- 提供很多常用图表，且可**定制**。
  - 折线图、柱状图、散点图、饼图、K线图


官网地址：https://echarts.apache.org/zh/index.html

## 4. ECharts使用

使用步骤

1. 引入echarts 插件文件到html页面中
2. 准备一个有宽、高的DOM容器
3. 初始化echarts实例对象
4. 指定配置项和数据(option)
5. 将配置项设置给echarts实例对象

```JavaScript
<style>
    .box {
        width: 500px;
        height: 500px;
        background-color: #ff9;
    }
</style>
<body>
//步骤2.容器必须有大小
<div class="box"></div>
</body>

<script>
    //步骤3.初始化ECharts实例对象
    var myECharts = echarts.init(document.querySelector(".box"));

    //步骤4.指定配置项和数据，即在官网选择一个你想要图表
    var options;  //要先声明options
    option = {
        title: {
            text: 'Referer of a Website',
            subtext: 'Fake Data',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: 'Search Engine'},
                    {value: 735, name: 'Direct'},
                    {value: 580, name: 'Email'},
                    {value: 484, name: 'Union Ads'},
                    {value: 300, name: 'Video Ads'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    //步骤5.将配置项设置给实例化对象
    myECharts.setOption(option);
</script>

5. ECharts相关配置

主要配置

1. series：系列列表。每个系列通过 type 决定自己的图表类型。图标数据，指定什么类型的图标，可以多个图表重叠。

2. xAxis：直角坐标系 grid 中的 x 轴

3. yAxis：直角坐标系 grid 中的 y 轴

   主要包含两个属性：

   • name 坐标轴名称 （标注）
   • data 类目数据

   y 轴的分割设置：

   • splitNumber 分割段数
   • interval 强制设置坐标轴分割间隔
   • minInterval 坐标轴最小间隔
   • maxInterval 坐标轴最大间隔

4. grid：直角坐标系内绘图网格。

5. title：标题组件

   属性

   • 主标题 text
   • 副标题 subtext
   • 位置 left
   • 主标题样式 textStyle
   • 副标题样式 subtextStyle
   • 可见性 show

6. tooltip：提示框组件

   分类

   • item 图形触发，主要在散点图，饼图等无类目轴的图表中使用。
   • axis 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表
   • none 什么都不触发

7. legend：图例组件

8. color：调色盘颜色列表。

9. toolbox：工具栏

   一些可以给用户使用的按钮工具：

   • 保存图片 saveAsImage
   • 配置项还原 restore
   • 数据视图工具 dataView
   • 数据区域缩放 dataZoom
   • 动态类型切换 magicType