web前端入门和进阶js笔记

js和esmscript的关系

js和ecmscrpit的关系
ecmscript是一种有ecma国际制定和发布的脚本语言规范
ecmscript不是一门语言，而是一种标准
js包括ecmpscript(语言核心功能基于ES规范)
DOM js需要支持对DOM的维护，通过document element
BOM js需要支持对BOM的维护，通过window对象实现，这些都是在es6中没有的
提一下nodejs.nodejs是基于chrome V8引擎。上文提到V8引擎是用来解析执行JS，并且V8是基于ECMAscirpt标准实现的.换个角度说,nodejs里头没有DOM和BOM的操作,只保留的javascript的语法核心(ES),并且增加了事件驱动的非阻塞I/O模型，使其轻量级和高效。nodejs作为服务运行在linux,mac,window,把javascipt的角色从前台开发,转移到了后台开发。
js与ecmscript的关系
js是弱变量类型的语言，变量声明用var来实现。而java中必须带类型
var a;

浏览器工作原理

1、User Interface 用户界面，我们所看到的浏览器

2、Browser engine 浏览器引擎，用来查询和操作渲染引擎

3、Rendering engine 用来显示请求的内容，负责解析HTML、CSS

4、Networking 网络，负责发送网络请求

5、JavaScript Interpreter(解析者) JavaScript解析器，负责执行JavaScript的代码

6、UI Backend UI后端，用来绘制类似组合框和弹出窗口

7、Data Persistence(持久化) 数据持久化，数据存储 cookie、HTML5中的sessionStorage

js分为3部分组成
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。
DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。
BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。
PS：JS机械重复性的劳动几乎为0，基本都是创造性的劳动。而不像HTML、CSS中margin、padding都是机械重复劳动。
js是解释型语言，事先不需要被编译成机器码再执行，逐行执行，无需进行严格的变量声明。
解释型语言：边解析边执行，不需要事先编译。例如：JavaScript、php。

编译型语言：事先把所有的代码翻译成计算机能够执行的指令，然后整体执行。例如：c、c++。
分号不是必须加的，如果不写分号，浏览器会自动添加，但是会消耗一些系统资源。
用户输入
prompt()就是专门用来弹出能够让用户输入的对话框，用得少，测试的时候会用

1 2	var a = prompt("请随便输入点东西"); //不管是什么语句输入都是字符串 console.log(a);

基本对象和引用对象

基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。
引用数据类型（引用类型）：Object 对象。
注意：内置对象function、Array、Date、RegExp、Error等都是属于Object类型。也就是说，除了那五种基本数据类型之外，其他的，都称之为 Object类型。
面试问：引用数据类型有几种？
面试题：只有一种，即object类型。
基本数据类型：参数赋值的时候，传数值
引用数据类型：参数赋值的时候，传地址
（2）引号不能嵌套：双引号里不能再放双引号，单引号里不能再放单引号。但是单引号里可以嵌套双引号。
\” \’ \n换行
无穷大 Infinity 无穷小 -Infinity
注意：typeof Infinity的返回结果是number。
NaN:是一个特殊的数字，表示Not a Number
typeof NaN返回的是number
null和undefined有最大的相似性。看看null == undefined的结果(true)也就更加能说明这点。
其他数据类型 -> Number
字符串 -> 数字
1.字符串是纯数字则将其转化为数字
2.字符串有非数字的内容，则转化为NaN,
3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为0。
null -> 数字 0 undefined -> 数字 NaN
parseInt的作用，将字符串中有效的整数内容转化为数字
console.log(parseInt(“2017.01在公众号上写了6篇文章”)); //打印结果仍是：2017 （说明只会取整数）
只能取开头的，中间的不能截取
对非String使用parseInt()或者parseFloat() 先转换成string再操作

1 2	var a = true; console.log(parseInt(a));

转化为字符串”true”,然后再操作，打印出来NaN
转化为Boolean
数字 -> 布尔除了0和NaN 其余都转化为true
字符串 -> 布尔除了空串其余都是true
null和undefined 转化为false
对象转化为true
布尔值进行与或运算时，会先将其转换为布尔值，然后再运算，但返回结果是原值

1 2	var result = 5 && 6; console.log('result' + result);

与运算的返回结果：（以两个非布尔值的运算为例）

如果第一个值为true，则必然返回第二个值（所以说，如果所有的值都为true，则返回的是最后一个值）

如果第一个值为false，则直接返回第一个值

或运算的返回结果：（以两个非布尔值的运算为例）

如果第一个值为true，则直接返回第一个值

如果第一个值为false，则返回第二个值
== 这个符号并不严谨，会将不同类型的东西，转为相同类型进行比较（大部分情况下，都是转

 console.log("6" == 6);		// 打印结果：true。这里的字符串"6"会先转换为数字6，然后再进行比较
console.log(true == "1");   // 打印结果：true
console.log(0 == -0);       // 打印结果：true

console.log(null == 0);   // 打印结果：true
   console.log(undefined == null) //打印true
   console.log(NaN == NaN) //false

如果要保证完全等于，我们就要用三个等号===。全等不会做类型转换。例如：

1 2	console.log("6" === 6); //false console.log(6 === 6);

js中的代码块

js中的代码块，只具有分组的作用，没有其他用途
代码块中的内容，在外部是完全可见的

{
	var a = 2;
}	
console.log(a);

switch语句，条件分支语句。

switch(表达式){
	case 1:
	break;
	case 2:
	break;
	default:
	breeak;
}

break语句一般建议不要省略，否则会出现case穿透现象
continue用来跳过当次循环
基本数据类型是直接保存在栈内存中，值与值之间是独立存在的，修改一个变量不会影响其他变量。
对象：只要不是那5种基本数据类型，就全都是对象。
如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟一个新的空间，变量保存的是对象的内存地址(对象的引用)
换言之，对象的值是保存在堆内存里的，但是对象的引用是保存在栈内存中的
对象的分类：内置对象，由ES标准定义的对象，在任何的ES的实现中都可以使用
比如Math,String,Number,Boolean,Function,Object
宿主对象：由js运行环境提供的对象，就是主要由浏览器提供的对象
比如DOM,BOM,console document等
自定义对象由开发人员自己创建的
in运算符，通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true,没有返回false
“属性名” in 对象
console.log(“name” in obj);
js中所有的变量都是保存在栈中的。
基本数据类型:基本数据类型的值，直接保存在栈内存中。值与值之间是独立存在，修改一个变量不会影响其他的变量。
引用数据类型:对象是保存在堆内存中的，每创建一个新的对象，就会在堆内存中开辟一块新的空间，而变量保存了对象的地址,对象的引用，如果两个变量保存了同一个对象的引用，当一个通过变量去修改属性时，另一个也会修改。
函数的介绍：将一些功能语句进行封装函数也是一个对象使用typeof检查一个函数对象时，返回function
函数表达式:将匿名函数赋值给一个变量
fn()与fn的区别
fn()调用函数，相当于获取了函数的返回值
fn:函数对象，相当于直接获取了函数对象
在js中，只有2种作用域：全局作用域和函数作用域
直接编写在script标签中的JS代码，都在全局作用域。

全局作用域在页面打开时创建，在页面关闭时销毁。

在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。

在全局作用域中：

创建的变量都会作为window对象的属性保存。

创建的函数都会作为window对象的方法保存。

全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到
变量的声明提前(变量提升)
使用var关键字声明的变量var = 1 会在所有代码执行之前声明(但不赋值)
但是如果声明时不用var 比如a = 1 则变量不会被声明提前
函数声明：下面就为函数声明的过程

1
2
3

function fn1() {
	console.log("我是函数fn1");
}

所以函数的声明会提前，也就是说，整个函数会在所有的代码执行之前就被创建完成，所以我们可以在函数声明之前，调用函数。
fn1()后再声明函数
函数表达式不会提前
在函数作用域中可以访问到全局作用域的变量，在全局作用域中无法访问到函数作用域的变量。
当函数执行时，会创建一个执行期上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们之间是相互独立的。当函数执行完毕，它所产生的执行期上下文会被销毁。参考链接：
this:解析器在调用函数每次都会向函数内部传递一个隐含的参数，这个隐含的参数便是this,this指向的是一个对象，这个对象我们称之为函数的执行上下文对象,
以函数形式调用,this指向window,比如func()
以方法形式调用，this是调用方法的那个对象
以构造函数形式调用，this是新创建的那个对象
使用call和apply调用，this指定的是那个对象

箭头函数中this的指向

es6的箭头函数中并不会使用上面4条标准的绑定规则，而是会继承外层函数调用的this绑定(无论this绑定到什么)
在调用函数式，浏览器每次都会传递2个隐含参数,this和arguments

function foo() {
	console.log(arguments);
	console.log(typeof arguments);
}
foo();

arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度。
arguments代表的是实参,我们所传递的实参都会在arguments中保存。有个讲究的地方是：arguments只在函数中使用。

function fn(a,b){
	console.log(fn.length);//获取形参个数
	console.log(arguments.length);//获取实参个数
}

3、arguments可以修改元素
之所以说arguments是伪数组，是因为：arguments可以修改元素，但不能改变数组的长短。举例：
new 一个构造函数的执行流程
(1)开辟内存空间，存储新创建的对象
(2)将新建的对象设置为构造函数中的this,在构造函数中可以使用this来引用新对象。
(3)执行函数中的代码，(包括设置对象属性和方法等)。
(4)将新建的对象作为返回值返回
所有的对象都是Object的后代，因此，任何对象instanceof Object返回的结果都是true.
JSON:json的属性必须用双引号来括起来，

{
            "name" : "zs",
            "age" : 18,
            "sex" : true,
            "sayHi" : function() {
                console.log(this.name);
            }
        };

json的遍历与对象的遍历一样，用for…in…来进行遍历

var myJson = {
       "name": "smyhvae",
       "aaa": 111,
       "bbb": 222
   };

   //json遍历的方法：for...in...
   for (var key in myJson) {
       console.log(key);   //获取 键
       console.log(myJson[key]); //获取 值（第二种属性绑定和获取值的方法）
       console.log("------");
   }

原型prototype

原型prototype的概念：
认识1：我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype,这个属性对应着一个对象，这个对象就是我们所谓的原型对象，
如果函数作为普通函数调用prototype没有任何作用，当函数以构造函数的形式调用时，它所创建的实例对象中都会有一个隐含的属性，指向该构造函数的原型，我们可以通过proto来访问该属性。

function Person() {}
	var per1 = new Person();
	var per2 = new Person();
console.log(Person.prototype); //打印结果[object object]
console.log(per1.__proto__ == Person.prototype); //相等

原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，我们可以将对象中共有的内容，统一设置到原型对象中。
使用in来检查，如果对象中没有但是原型中有，也会返回true.
可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性。

JS的垃圾回收机制

当一个对象没有任何的变量或者属性对他进行引用时，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在堆内存中：如果堆内存中的对象，没有任何变量指向它时，这个堆内存里的对象就会成为垃圾。
js中有自动的垃圾回收机制，会自动回收这些垃圾。如果你不再使用这些对象，将其置为null即可。
数组Array是属于内置对象。
数组和普通对象的功能类似，也是用来存储一些值的。不同的是：
普通对象是使用字符串来作为属性名的，而数组是使用数字来作为索引来操作元素。
数组的存储性能比普通对象要好。在实际开发中我们经常使用数组来存储一些数据，使用频率非常高。

1	var arr = new Array("参数");

数组常用方法

如果修改的length大于原长度，则多出来部分会空出来，置为null.
如果修改的length小于原长度，则多出来部分会被删除，数组将从后面删除元素。
数组的基本方法
unshift(),在数组最前面插入一个或多个元素，返回结果为数组新的长度。
shift(),删除数组的第一个元素，返回结果为被删除的元素
forEach()没有返回值，也就是说，返回值是undefined.
filter()返回结果是true的项，将组成新的数组，可以起到过滤的作用。
map()对原数组中的每一项进行加工
every()如果有一项返回false,则停止遍历
some()只要有一项返回true,则停止遍历
注意：这几个方法不会修改原数组。都会组成新的数组等。
forEach循环

var arr = ["网一","网二"];
arr.forEach(function(item,index,obj){
	console.log(item);
	console.log(index);
	console.log(obj);
})
//表示当前正在遍历的元素，正在遍历元素的索引，和正在遍历的数组
//filter函数
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.filter(function(item,index){
	if(item > 2)
	return true;
	return false;
})
//map方法 解释：对数组中每一项运行回调函数，返回该函数的结果，组成的新数组（返回的是加工之后的新数组）。

  var arr1 = [1, 3, 6, 2, 5, 6];

    var arr2 = arr1.map(function (item, index) {
        return item + 10;  //让arr1中的每个元素加10

    })
    console.log(arr2);
	//every方法 只有全部返回true,才返回true
	 var arr1 = ["千古", "宿敌", "南山忆", "素颜"];
    var bool1 = arr1.every(function (element, index, array) {
        if (element.length > 2) {
            return false;
        }
        return true;
    });
    console.log(bool1);  //输出结果：false。只要有一个元素的长度是超过两个字符的，就返回false

some()方法
解释：对数组中每一项运行回调函数，只要有一项返回true，则停止遍历，此方法返回true。
如果都返回false,则返回值是false。如果有一项返回true,则停止遍历，返回true.

数组的常用方法
slice 从数组中提取指定的一个或多个元素，返回新的数组，不会改变原数组
splice从数组中删除指定的一个或多个元素，返回新的数组，会改变原数组
concat连接两个或多个数组，返回新的数组，不会改变原数组
jon将数组转化为字符串，返回转换后的字符串，不会改变原数组
reverse反转数组，返回翻转后的数组，会改变原数组
sort,对数组元素，按unicode编码，从小到大排序，会改变原数组。
slice

1
2
3

var result1 = arr.slice(2);//从第二个位置开始提取
var result2 = arr.slice(-2);//提取最后2个元素
var result3 = arr.slice(2,4);//提取从第二个到第四个 不包含4

将伪数组转化为真数组

1	array = Array.from(arrayLike);

splice 删除一个或多个元素，返回新的数组，会改变原数组
新数组 = 原数组.splice(起始索引index,需要删除的个数,第三个参数，第四个参数)

var arr1 = ["a","b","c","d","e","f"];
   var result1 = arr1.splice(1);
   console.log(arr1); //第1个删除后返回arr1
   console.log(result1); //原数组的第一个删除了 给result

从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素

var arr4 = ["a", "b", "c", "d", "e", "f"];

//从第index为1的位置开始删除元素,一共删除三个元素。并且在 index=1 的前面追加两个元素
var result4 = arr4.splice(1, 3, "千古壹号", "vae");

concat连接 arr1.concat(arr2);将arr2中的元素追加到arr1的尾部
join方法指定一个字符串作为参数，这个字符串将会成为数组元素连接的连接符，如果不指定连接符，则默认使用’,’作为连接符，此时和 toString()的效果是一致的。
reverse反转字符串
sort函数中的自定义方法，
如果返回一个大于0的值，则元素会交换位置，
如果返回一个小于0的值，则元素位置不变
如果返回0，则认为2个元素相等，则不交换位置。
var result = arr3.sort(function(a,b){
if(a > b){
return a - b; //升序排列
return b - a;//降序排列
return 1;//如果a > b则交换a和b的位置，就是进行升序排列
}else if(a < b){
return -1; //元素位置保持不变
}else
return 0;
})
indexOf,lastIndexOf获取数据的索引
从后往前索引，获取 value 在数组中的最后一个下标从后往前，找到最后一次出现的，也就是排在最后的出现的那位。
find(function (item, index){

})
Array.from将伪数组转化为真数组
伪数组的原型链中没有Array.prototype,而真数组的原型链中有Array.prototype
Array.of(1,’abc’,true);//将一系列值转化成数组
isArray 判断是否是数组
valueOf,返回数组本身数组本身 = 数组.valueOf();
内置对象简介：内置对象就是指这个语言自带的一些对象，供开发者使用，这些对象提供了一些常用的或是最基本而必要的功能。
内置对象对象说明
Arguments 函数参数组合
Array 数组
Boolean 布尔对象
Date 日期时间
Error 异常对象
Function 函数构造器
Math 数学对象
Number 数值对象
Object 基础对象
RegExp 正则表达式对象
String 字符串对象
Date对象

1 2	var date = new Date(); console.log(date);

传递一个表示时间的字符串

1 2	var date2 = new Date("2017/09/06 09:00:00"); console.log(date2);

Date和Math方法

获取日期和时间
getDate() //获取日子 1-31
getDay() //获取星期0-6 0代表周末 1代表周一
getMonth() //获取月份0-11 0代表1月
getTime() //获取时间戳
时间戳指的是从格林威治标准时间的1970.1.1号0时0分0秒到现在日期所花费的毫秒数(1s = 1000 ms)
内置对象Math的常见方法
Math.abs()返回绝对值
Math.floor()向下取整(向小取)
Math.ceil()向上取整(向大取)
Math.round()四舍五入(正数四舍五入,负数五舍六入)
Math.random()生成0-1之间的随机数
Math.max(x,y,z)返回多个数中的最大值
Math.min(x,y,z)返回多个数中的最小值
生成0-x之间的随机数

1	Math.round(Math.random() * x);

生成x-y之间的随机数

1	Math.round(Math.random() * (y - x) + x);

url编码和解码

URI 通用资源标识符，进行编码，以便发送给浏览器，有效的URI编码不能包含某些字符，例如空格，而这URI编码方法就可以对URL进行编码，它们用特殊的UTF-8编码替换所有无效的字符，从而让浏览器能够接受和理解。

1	encodeURIComponent(); //把字符串作为 URI 组件进行编码

包装类的介绍：
js中的数据类型包括以下几种，
基本数据类型：string,number,boolean,null,undefined
引用数据类型：object
js为我们提供了3个包装类
String(),将基本数据类型字符串，转化为String对象
Number(),将基本数据类型数字，转化为Number对象。
Boolean()：将基本数据类型的布尔值，转换为Boolean对象。

1 2	var num = new Number(3); var str = new String("hello");

需要注意的是：我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果。
方法和属性只能添加给对象，不能添加给基本数据类型。
slice方法从字符串中截取指定的内容，不会修改原字符串而是将截取到的内容返回
(2,5)截取时，包左不包右
字符串 = str.slice(开始索引,结束索引);
(2)表示从指定的索引位置开始，截取到最后
(-3)表示从倒数第几个开始，截取到最后
(1,-1)表示从第一个截取到倒数第一个
(5,2)表示前面的大，后面的小，返回值为空
substring,不能接受负值作为参数，如果传递了一个负值，默认使用0
substring还会自动调整参数的位置，如果第二个参数小于第一个，则自动交换。
substr从字符串中截取指定的内容，不会修改原来的字符串，而是将及截取到的内容返回。
字符串 = str.substr(开始索引, 截取的长度);
开始所以，截取的长度
用逗号来隔开字符串，split
trim去除字符串前后的空白。replace替换所有的
toLowerCase()转换成小写
定义：正则表达式用于定义一些字符串的规则。

作用：计算机可以根据正则表达式，来检查一个字符串是否符合指定的规则；或者将字符串中符合规则的内容提取出来。
语法：

1 2	var 变量 = new RegExp("正则表达式","匹配模式"); console.log(reg.test(str1));

来进行测试，检查是否符合。

let var function，eval的区别

let变量不存在变量提升问题，在我们声明(初始化)他们之前，他们是不可访问的。这被称为暂时死区
let 的「创建」过程被提升了，但是初始化没有提升。
var 的「创建」和「初始化」都被提升了。
function 的「创建」「初始化」和「赋值」都被提升了。
eval会为字符串传递的代码求值，如果它是一个表达式，就像如下所示：

1	const sum = eval("10 * 10 + 5");

sum为105 先计算出来再赋值
所有对象键：(不包括Symbol)都会被存储为字符串形式，即使你没有给定字符串类型的键。
默认情况下：事件处理程序在冒泡阶段执行

function a(){
    console.log(a);
}
console.log(typeof a);//返回function
console.log*typeof null)//返回object

[[0, 1], [2, 3]].reduce(
  (acc, cur) => {
    return acc.concat(cur);
  },
  [1, 2]
);

[1,2]是初始值，随后第一轮连接上[1,2,0,1]，第二轮连接上[1,2,0,1,2,3]

function aaa(...args) {
      console.log(args);
  }
  aaa(2,34);

这种情况下，将会把传入的数据全都组装成一个数组。
所以，打印出的args为[2,34];
事件的三要素：事件源，事件，事件驱动程序
事件源：应发后续事件的html标签
事件：js已经定义好的
事件驱动程序：对样式和html的操作，也就是DOM
获取事件源：document.getElementById(“box”);
绑定事件：box.onclick = function(){}
书写事件驱动程序：关于DOM的操作
js的加载和html是同步加载的，因此，如果使用元素在定义元素之前，容易报错。这个时候，onload事件就能派上用场了，我们可以把使用元素的代码放在onload里，就能保证这段代码是最后执行。
建议是：整个页面上所有元素加载完毕之后执行js内容。
所以,window.onload可以预防使用标签在预定义之前。
DOM:文档对象模型，DOM为文档提供了结构化表示，并定义了如何通过脚本来访问文档结构，目的其实是为了能让js操纵DOM形成一种规范。
渲染引擎将把内存中把HTML文档，生成一个DOM树。

var arr1 = document.getElementsByTagName("div");     //方式二：通过 标签名 获得 标签数组，所以有s

	var arr2 = document.getElementsByClassName("hehe");  //方式三：通过 类名 获得 标签数组，所以有s
//返回数组
 var div1 = document.getElementById("box1");      //方式一：通过id获取单个标签
//返回object

下一个兄弟节点 = 节点.nextElementSibling || 节点.nextSibling
获取父节点：节点.parentNode获取到父节点
前一个兄弟节点 = 节点.previousElementSibling || 节点.previousSibling
childNodes:标准属性，返回的是指定元素的子节点的集合（包括元素节点、所有属性、文本节点）
子节点数组 = 父节点.childNodes;
创建一个li标签

1	var a1 = document.createElement("li");

插入节点
appendChild(新的子节点);
逐一获取属性

1	myNode.getAttribute("src");

设置属性

1	setAttribute("src","imgs");

删除节点属性

1	removeAttributes(属性名);

1
2
3

<div id = "box" value = "111">
声明
</div>

上面这个标签就包含了3种标签，元素节点(标签) 属性节点文本节点

var element = document.getElementById("box1");  //获取元素节点（标签）
  var attribute = element.getAttributeNode("id"); //获取box1的属性节点
  var txt = element.firstChild;                   //获取box1的文本节点

  var value = element.getAttribute("id");         //获取id的属性值

nodeType = 1表示的是元素节点
nodeType = 2 表示属性节点
nodeType = 3表示文本节点
nodeName表示名称，nodeValue表示值
添加事件

1
2
3

element.addEventListener('click',function() {

},false);

参数1：事件名(注意，没有on)
参数2：事件名（执行函数)
参数3：true表示捕获阶段触发，false表示冒泡阶段触发，如果不写，默认为false
//addEventListener: 事件监听器。原事件被执行的时候，后面绑定的事件照样被执行
//第二种事件绑定的方法不会出现层叠。（更适合团队开发）
第二件添加的事件不会覆盖第一件的
DOM事件流：
事件传播的3个阶段：事件捕获，事件目标，事件冒泡
事件捕获：事件从上一级标签开始往下寻找，直到捕获到事件目标 target，从祖元素到子元素，DOM树结构，在这个过程中，事件相应的监听函数不会被触发。
事件目标：当到达目标元素之后，执行目标元素事件对应的处理函数，如果没有绑定监听函数，那就不执行。
事件冒泡：事件从事件目标target开始，网上逐渐冒泡到页面最上层一级。
在js中，如果想获取html节点，方法是document.documentElement
如果想获取body节点，方法是docuemt.body 二者不要混淆
事件冒泡：鼠标点击一个按钮，同样这个事件会在所有父元素上被触发。
通俗来讲，冒泡指的是：子元素的事件被触发时，父盒子的同样的事件也会被触发。取消冒泡就是取消这种机制。
冒泡顺序：
一般的浏览器: （除IE6.0之外的浏览器）
div -> body -> html -> document -> window
IE6.0：
div -> body -> html -> document
不是所有的事件都能冒泡：
以下事件不冒泡：blur,focus,load,unload,onmouseenter,onmouseleave,意思是事件不会向父元素那里传递。
检查一个元素是否会冒泡，可以通过事件的如下参数：event.bubbles.
阻止冒泡的方法(火狐，谷歌，IE11)event.stopPropagation();
IE10以下则是event.cancelBubble = true;
事件委托：事件委托：通俗来说，就是把一个元素响应事件函数委托到另一个元素上
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的也可称为window子对象
window对象是js中的顶级对象，全局变量，自定义函数也是window对象的属性和方法
alert(1);confirm(1) prompt()不推荐使用弹出框
打开窗口window.open(url,target,param)
url:打开地址 target:新窗口位置_blank _self _parent
param:新窗口的一些设置
返回值：新窗口的句柄
window.location简写成location,locaton相当于浏览器地址栏，可以将url解析成独立的字段
href:跳转 hash:返回url中#后面的内容 host:主机名 hostname:主机名 protocol 协议一般是http、https
使用href的作用就是调用assign
window.location.assign(“https://www.baidu.com");
设置location.href 就会调用assign()。一般使用location.href 进行页面之间的跳转。assign会记录到历史记录中去
location.replace()：替换浏览器地址栏的地址，不会记录到历史中
navigator对象会获取客户端的一些信息
console.log(navigator.userAgent);
history.back() 表示后退 history.go(-1) 0是刷新
与普通函数相比，构造函数有以下明显特点：
用new关键字调用，不需要return显示返回值的，默认为返回this。建议函数名首字母大写，与普通函数区分开。
原型规则
规则1 所有的引用类型(数组，对象，函数)都具有对象特性，都可以自由扩展属性。null除外。
所有的引用类型(数组，对象，函数)都有proto属性，属性值是一个普通的对象。proto的含义是隐式原型。

1 2	var obj = {}; console.log(obj.__proto__);

所有的构造函数都有prototype类型指向原型对象
通过for…in循环遍历对象，针对上面的那个fn对象，它自身有两个属性：name、printName，另外从原型中找到了第三个属性alertName。现在，如果我们对fn进行遍历，能遍历到两个属性还是三个属性呢？
答案：2个，因为高级浏览器已经屏蔽了来自原型的属性，。但是，为了保证代码的健壮性，我们最好自己加上判断，手动将第三个属性屏蔽掉：

call和apply

这2个方法都是函数对象的方法，需要通过函数对象来调用
当函数调用call和apply时，函数会立即执行
都可以用来改变函数的this对象的指向
第一个参数都是this要指向的对象(函数执行时，this将指向这个对象)
thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。
传递一个别的函数名时，函数中的this将指向这个函数的引用。
传递值为数字，布尔值，字符串时,this会指向这些基本类型的包装对象Number,Boolean,String
传递一个对象时，函数中的this则指向传递的这个对象。
call和apply的区别，call后面的实参和say方法中是一一对应的，而apply在传递实参时，要封装成一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。
call()和apply()的作用
改变this的指向
实现继承。Father.call(this)
bind()
都能改变this的指向
call()/apply()是立即调用函数
bind()是将函数返回，因此后面还需要加()才能调用。
bind传参 xw.say.bind(xh,”实验”,”六年级”)();
或者xw.say.bind(xh)(“实验”,”小学”);
apply方法xw.say.apply(xh,[“实验小学”,”六年级”]);
call方法xw.say.call(xh,”实验小学”,”六年级”);
函数赋值给变量时，this指向window
var foo1 = args.getInfo;
foo1()
var foo2 = function() {};
foo2();
//this都是指向window
执行上下文主要有2种情况：
全局代码，一段script标签内，有一个全局的执行上下文。所做的事情是：变量定义，函数声明
函数代码：每个函数里面有一个上下文，所做的事情是：变量定义、函数声明、this,arguments
var定义的为全局变量 => undefined
function声明的全局变量 ===> 赋值fun 添加为window的方法
this => 赋值(window)(
函数执行上下文：调用函数时，准备执行函数体之前，创建对应的函数执行上下文对象，(虚拟的，存在于栈中)
对局部数据进行预处理
形参变量 ===> 赋值(实参) 添加为执行上下文的属性
arguments ===> 赋值(实参列表) 添加为执行上下文的属性
var 定义的局部变量 ===> undefined 添加为执行上下文的属性
function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
this ===> 赋值(调用函数的对象)
执行上下文栈：
在全局代码执行前，JS引擎会创建一个栈来存储管理所有的执行上下文对象
在全局执行上下文window确定后，将其添加到栈中
在函数执行上下文创建之后，将其添加到栈中
在当前函数执行完后，将栈顶的对象移除
当所有的代码执行完后，栈中只剩下window
this指的是，调用函数的那个对象。this永远指向函数运行时所在的对象。
解析器在调用函数的时候每次都会向函数内部传递一个隐藏的参数，这个隐藏的参数就是this
以函数形式调用,this会指向window
以构造函数创建，this是新创建的那个对象
使用call和apply调用时，this指向那个对象
作用域指一个变量的作用范围，是静态的(相对于上下文对象)
全局作用域函数作用域
调用函数时会创建函数作用域，函数执行完毕以后，函数作用域会销毁。
每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的。
在函数作用域中可以访问到全局作用域中的变量，在全局作用域中无法访问到函数作用域中的变量。
使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
在函数作用域中有效，而且会在函数中所有代码执行前会被声明。
全局执行上下文是在全局作用域确定之后，js代码马上执行之前就创建了。
函数执行上下文实在调用函数时，函数体代码执行之前创建
作用域是静态的，只要函数定义好就一直存在,且不再变化
执行上下文是动态的，调用函数时创建，函数调用结束时就会自动释放
执行上下文(对象)是从属于所在的作用域
全局上下文环境 ===> 全局作用域
函数上下文环境 ===> 对应的函数使用域
闭包：能够读取其他函数内部数据(变量/函数)的函数
因此可以把闭包简单理解成”定义在一个函数内部的函数”。
object.prototype.toString.call(‘’) 检测类型[object:string]
this的值是在执行的时候才能确认，但是不能在定义的时候确认
箭头函数this指向：箭头函数没有自己的this,看其外层的是否有函数，如果有，外层函数的this就是内部箭头函数的this,
如果没有，this就是window
执行栈认为是一个存储函数调用的结构，遵循先进后出原则。

手写实现ajax

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            alert(xhr.responseText);
        }
    }
}
xhr.open("GET","/api",false);
xhr.send(null);

动态创建DOM元素的3种方式

document.write()不常用因为容易覆盖掉原来的页面
innerHTML = () 用的比较多，绑定属性和内容比较方便
document.createElement() 用的也比较多，，指定数量的时候一般用它。
vue双向绑定原理：通过数据劫持结合发布者-订阅者模式的方式来实现
利用object.defineProperty()这个方法重新定义了对象获取属性值(get)和设置属性值(set)。
jquery是事件驱动而其余是数据驱动
jquery业务和UI更改混杂在一起，UI里面还涉及交互逻辑，让本来混乱的逻辑更加混乱
node js借助事件驱动，非阻塞I/O模型变得更加轻量和高效，非常适合于运行在分布式设备的数据密集型实时应用。
offsetWidth和offsetHight
offsetWitdh用于检测盒子自身的宽高+padding+border
offsetWidth = width + padding + border;
offsetLeft 可以返回没有定位盒子的距离左侧的位置。如果父系盒子中都没有定位，以body为准。
style.left 只能获取行内式，如果没有，则返回””（意思是，返回空）;
scrollWidth = width + padding;
scrollHeight = height + padding;
client家族的形成
clientWidth:获取盒子区域宽度(padding + width)
clientHeight:获取盒子区域高度(padding + height)
body/html调用时，
clientWidth获取网页可视区域宽度
clientHeight获取网页可视区域高度

clientX:event调用：鼠标距离可视区域左侧距离
clientY:event调用：鼠标距离可视区域上侧距离

clientTop：盒子的上border。
clientLeft：盒子的左border。

宽高：
offsetWidth = width + padding + border;
offsetHeight = height + padding + border;

window.onresize事件指的是：在窗口或框架被调整大小时发生：
window.onscroll()屏幕滑动
window.onresize()浏览器大小变化
window.onload()页面加载完毕
div.onmousemove()鼠标在盒子上移动

1
2
3

window.onresize = function() {
    document.title = window.screen.width + window.screen.height;
}

获取显示屏的分辨率1920 * 1080
jQuery的两大特点链式编程比如.show和.html可以连写成.show().html()
通常情况下：只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回获取到的相应值，无法返回this.
隐式迭代的意思是：在方法的内部会为匹配到的所有元素进行循环遍历，执行相应的方法；而不用我们再进行循环，简化我们的操作，方便我们调用。
jquery加载完

//dom树生成即可
$(document).ready(function(){

})

//文档加载完毕，图片不用加载完写下面这个

1
2
3

$(function() {
    alert(1);
})

onload是网页全部加载完毕，包括图片,ready只需要dom加载完毕，生成dom树即可
通过jquery获取的元素是一个数组数组中包含着原生JS中的DOM对象
通过原生js获取这些元素节点的方式是

1
2
3

var myBox = document.getElementById("box");           //通过 id 获取单个元素
var boxArr = document.getElementsByClassName("box");  //通过 class获取的是数组
var divArr = document.getElementsByTagName("div");    //通过标签获取的是数组

总结：jquery就是把dom对象重新包装了一下，让其具有了jquery方法
子代选择器 > 表示儿子后代选择器表示全部的都会被选中
属性选择器:$(“a[href]”) $(“a[href = ‘itcast’]”)
添加类样式
$(selector).addClass(“listItem”);
删除类样式
$(selector).removeClass(“listItem”);
判断是否有样式
$(selector).hasClass(“listItem”);
切换类样式
$(selector).toggleClass(“listItem”);
有则移除没有则添加
jquery设置和获取属性
设置属性attr(“title”,”生命一号”);
获取属性attr(“title”);
val() 设置或返回form表单元素中的value值
$(selector).val();
获取文本内容
$(selector).text();
jquery设置宽度和高度
$(selector).height();//不带参数表示获取高度
$(selector).height(200);//带参数表示设置高度

$(selector).width(); //不带参数表示获取宽度
$(selector).width(200); //带参数表示设置高宽度

$(“div”).css() //返回的是string类型，例如30px
$(“div”).height() 返回的是number类型,30常用于数学计算
click是单击事件 blur失去焦点 mouseenter鼠标进入 mouseleave 鼠标离开等
解除匹配元素的所有事件
$(selector).off()
阻止事件冒泡
event.stopProgation()
阻止默认行为
event.preventDefault()
$(selector).each(function(index,element){

})
参数一表示当前元素所在匹配元素中的索引号，
参数而表示当前元素
多库共存指的是：jquery占用了$和jquery两个变量，当在同一个页面引用了jquery和其他库时，恰好其他库也使用了jquery或者$
,那么要保证多库共用，
获取jquery库的版本号console.log($.fn.jquery);
办法一：让jquery放弃对$的使用权
$.noConflict();
办法二：同时放弃2个符号的使用权，并定义一个新的使用权
$.noConflict(true);
zepto库介绍
zepto是轻量级js库，专门为移动端定制
与jquery有类似的API,俗称：会jquery就会zepto
css3现状
浏览器支持程度不够好，有些需要添加私有前缀
移动端支持优于PC端
不断改进中
应用相对广泛
过渡:transition 2D转换:transform 3D转换:transform 动画:animation
实现不同状态间的平滑过渡
transition-property: all; 如果希望所有的属性都发生过渡，就使用all。
transition-duration:1s;过渡的持续时间
transition-timing-function: linear; 运动曲线
transition:all 3s linear 0s;
缩放：scale
transform:scale(x,y);x轴的缩放和y轴的缩放
x：表示水平方向的缩放倍数。y：表示垂直方向的缩放倍数。如果只写一个值就是等比例缩放。
translate 参数为百分比，表示相对于自身移动
正值：向右和向下负值：向左和向上

{
width:600px;
height:60px;
background-color:red;
position:absolute; 绝对定位
left:50%; 让左边线居中
top:0;
transform:translate(-50%); 然后利用translate,往左走自己一半的宽度
}

transform:rotate(角度);rotate(45deg); 正值：顺时针负值：逆时针
3D旋转 rotateX,rotateY,rotateZ
动画可通过设置多个节点，来精确控制一个或一组动画，常用来实现复杂的动画效果。
@keyframes 动画名{
from{初始状态}
to{结束状态}
}

@keyframes move1 {
from {
transform: translateX(0px) rotate(0deg);
}
to {
transform: translateX(500px) rotate(555deg);
}
}

flex布局

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
flex-direction:row;reverse-row; column; reverse-column
justify-content:设置子元素在主轴上的对齐方式
justify-content:flex-start flex-end center space-around space-between
align-items：设置子元素在侧轴上的对齐方式。

align-items:flex-start; 设置子元素在侧轴上的对齐方式。属性值可以是：
flex-start 从侧轴开始的方向对齐
flex-end 从侧轴结束的方向对齐
baseline 基线默认同flex-start
center 中间对齐
stretch 拉伸
通过window.online来检测用户当前的网络状况，返回一个布尔值。另外：
window.online用户网络连接时被调用 window.offline用户网络断开时被调用
boostrap标签

1	<meta = http-equiv = "X-UA-Compatible" content = "IE=edge">

解释：设置浏览器的兼容模式版本，表示如果在IE浏览器下则使用最新的标准，渲染当前文档

1	<meta name = "viewport" content = "width=device-width,inital-scale=1.0,user-scalable=no" >

解释：声明当前网页在移动端浏览器中展示的相关位置，我们在做移动 web 开发时，就用上面这行代码设置 viewport。
视口的作用：在移动浏览器中，当页面超出设备时，浏览器内部虚拟的一个页面容器，将页面容器缩放到设备这么大，然后展示。
目前大多数手机浏览器视口：宽度都是980
此属性为移动端页面视口设置，上方代码设置的值，表示在移动端页面的宽度为设备的宽度，并且不缩放(缩放级别为1)
width:设置viewport的宽度 initial-scale:初始化缩放比例 minimum-scale:最小缩放比例 maximum-scale:最大缩放比例
user-scalable:是否允许用户手动缩放（值可以写成yes/no，也可以写成1/0）
C/S架构和B/S架构
是Client/Server这两个单词的首字母，指的是客户端和服务器
优点：
性能较高：可以将一部分的计算工作放在客户端上,这样服务器只需要处理数据即可。
界面酷炫:客户端可以使用更多系统提供的效果,做出更为炫目的效果。
缺点:
更新软件：如果有新的功能，就要推出新的版本。
不同设备访问：如果使用其他的电脑，没有安装客户端的话就无法登陆软件。
B/S架构：浏览器/服务器类型
优点：
更新简洁：如果需要更新内容了,对开发人员而言需要更改服务器的内容，对用户而言只需要刷新浏览器即可。
多设备同步：所有数据都在网上,只要能够使用浏览器即可登录使用。
缺点:
性能较低：相比于客户端应用性能较低,但是随着硬件性能的提升,这个差距在缩小。
浏览器兼容：处理低版本的浏览器显示问题一直是前端开发人员头痛的问题之一。移动设备兼容性较好，ie6已经越来越少人用了。
php代码执行方式：在服务器端执行，然后返回给用户结果，如果直接使用浏览器打开，则会是一串文本
意思：需要浏览器通过http请求，才能够执行php页面。
ajax:可以在不刷新页面的情况下，通过ajax方式去获取一些新的内容
ajax的核心是js对象：XMLHttpRequest
发送请求
open(method,url,async);
method 请求的类型 get或post
url:文件在服务器上的位置
async:true(异步) 或 false(同步)
send(string)仅用于post请求

xmlhttp.open("POST","ajax_test.php", true);

xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

xmlhttp.send("name=smyhvae&age=27");

注册onreadystatechange事件，每当readyState属性改变时，就会调用该事件
readyState:0请求未初始化 1服务器建立连接 2请求已接收
3请求处理中 4请求已完成
200 “OK” 404 “未找到页面”
jquery已经封装好

$.ajax({
    url:"01.php",
    data:"name=fox&age=18',
    type:"GET",
    success:function(){
     },
    beforeSend:function(){
  }
})

同源策略：是浏览器的一种安全策略，指的是域名，协议，端口完全相同
jsonp 带补丁的json,本质是利用了

1	<script src = ""></script>

标签具有可跨域性，由服务端返回一个预先定义好的js函数的调用，并且将服务器数据以该函数参数的形式传递过来。

1 2	<!-- jsonp 就是利用 src，实现的跨域用的是 script标签 --> <script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>