JavaScript基础学习、复习笔记

---

前言

本文包含JavaScript基础大致内容，参考于pink老师所讲解视频通过自己理解整理，所以这是一篇用于小白新手入门，或者复习使用笔记，JavaScript高级知识以后也会更新。
如有做的不好地方，敬请谅解，欢迎指出，持续更新改正

---

一、js基础知识 （变量、数据类型、运算符）

输入输出语句

prompt('请输入')
alert('请输入')
console.log(1);

---

1.变量

（存放数据的容器；申请内存中空间）

1.1 声明变量及初始化

      //声明变量   variable
var age
      //赋值
age = 10
      //变量的初始化
var myname = 'zt'

---

1.2 变量更新

var myname = 'zt'
myname = 'tz'
console.log(myname); //tz

---

1.3 变量语法拓展

声明多个变量

var age,myname,gz

只声明不赋值

var sex
console.log(sex);           //undefined

不声明直接赋值

qq=110
console.log(qq);           //可以,不报错

不声明不赋值报错

qq
console.log(qq);           //Uncaught ReferenceError: qq is not defined

---

1.4 变量命名

1.字母，数字，下划线，美元符号
2.区分大小写
3.不能以数字开头
4.驼峰命名法 首字母小写，后面单词首字母大写 myFirstName
name 不要用

---

1.5 交换两个变量的值

需要一个临时变量temp

var apple1, apple2, temp
apple1 = '青苹果'
apple2 = '红苹果'
temp = apple1
apple1 = apple2
apple2 = temp

---

2. 数据类型（重点）

不同数据占用存储空间不同，才定义了不同数据类型
变量的数据类型

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

 var x = 10
 x = 'zt'          //体现了数据类型可变

---

2.1 数据类型分类

简单（Number,String,Boolean,Undefined,Null），复杂（object）

2.1.1 Number

八进制 数字前面加0 十六进制 数字前面加0x

         数字型最大值  
 console.log(Number.MAX_VALUE);
 		 数字型最小值
 console.log(Number.MIN_VALUE);

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

---

NaN 非数字
NaN是一个特殊的（数字值） （typeof NaN的结果为number）
NaN是唯一一个和自身不相等的值

 console.log('zt' - 10);            //NaN
       isNaN() 					    判断非数字，并返回布尔值 是数字false 不是数字true
 console.log(isNaN(12));           //false
 console.log(isNaN('zt'));         //true

---

2.1.2 String

引号嵌套，内双外单，内单外双

 var str = '我是"高富帅"程序员'
 var str1 = "我是'高富帅'程序员"

字符串转义符 \

检测获取字符串长度length

      var str = 'sasascadcac'
 console.log(str.length);

---

字符串拼接+ 数值相加，字符相连
引引加加 ’ ‘+ +’ ’

console.log('沙漠' + '骆驼');
console.log('zt' + 18);
console.log('zt' + true);

---

2.1.3 Boolean

true,false 参与加法运算 当1，0

 console.log(true + 1);     //2
 console.log(false + 1);    //1

---

2.1.4.Undefined

声明变量没有赋值

 var v = undefined
 console.log(undefined + 1);        //NaN
 console.log(undefined + true);     //NaN

---

2.1.5 Null

var space = null
 console.log(space + 1);            //1

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

var num = 10
 console.log(typeof num);		   //number
 var timer = null
 console.log(typeof timer);        //object

它不正确地表明null是一个对象，这是一个错误，不幸的是无法修复，因为它会破坏现有代码

为什么会出现这种情况呢？
因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用低位存储了变量的类型信息
000 开头代表是对象，然而 null 表示为全零，所以将它错误的判断为 object 。
虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来

---

2.2 数据类型转换

转化为字符串，数字型，布尔型

2.2.1 转化为字符串

toString() String() 字符串拼接

 var num = 10
 var str = num.toString()
 console.log(str);
 
 String()
 console.log(String(10));

当字符串和数字比较时，会把字符串转换为数字

---

2.2.2 转化为数字型

parseInt() 得到整数
parseFloat() 可得到小数
Number()

var age = '12'
 console.log(parseInt(age));
 console.log(parseInt('120px'));    //120    会去掉单位
       
 Number()
 var str = '123'
 console.log(Number(str));

 隐式转换
 console.log('12' - 0);// 12
 console.log('123' - '120');// 3

---

2.2.3 转化为布尔型

Boolean() 代表 空，否定 的值都转化为false
‘’ 0 NaN null undefined 都转化为false 其余都为true

 小练习
 var name = prompt('请输入姓名')
 var age = prompt('请输入年龄')
 var sex = prompt('请输入性别')
 alert('您的姓名是:' + name + '\n您的年龄是:' + age + '\n您的性别是:' + sex)

2.2.4 隐式转换

当运算符在运算时，如果两边数据不统一，
CPU就无法计算，这时我们编译器会自动将运算符两边的数据做一个数据类型转换，
转成一样的数据类型再计算

1.转成string类型： +（字符串连接符）

console.log(10 + '');

2.转成number类型：++/–(自增自减运算符)
- * / %(算术运算符) > < >= <= == != === !=== (关系运算符)

 console.log(10 - '2');
 console.log(10 > '8');

3 转成boolean类型：!（逻辑非运算符）

---

3 运算符

3.1 算数运算符

+— * / %(取余)

浮点数 算数运算里会有问题 有精度问题

console.log(0.1+0.2);                   //0.3000000000000004

余数为零，证明这个数能被整除

表达式： 数字，运算符，变量组成 都有返回值

---

3.2.递增递减运算符

前置 ++n --n 后置n++ n–

前置 先加一 后返回值 后置 先返回原值 后加一

---

3.3 比较运算符 返回布尔值

== 会转型（隐式转换） 把字符串型转换为数字型

 console.log(18 == '18');                  //true

===全等 值和数据类型 一模一样

---

3.4 逻辑运算符

&& || ！多个条件的判断 返回值也是布尔

逻辑与&&  逻辑中断（短路）
 console.log(123 && 456); //456           表达式1为真，返回表达式2
 console.log(0 && 456); //0               表达式1为假，返回表达式1
逻辑或 短路
 console.log(123 || 456); //123           表达式1为真，返回表达式1
 console.log(0 || 456); //456             表达式1为假，返回表达式2

---

3.5 赋值运算符

= += -= *= /= %=

---

3.6 优先级问题

由于&& 和 ||优先级较低,可以用来划分

1.小括号
2.一元运算符    ++  --  !
3.算术运算符    先*/后 +-
4.关系运算符    >  >=  <  <=
5.相等运算符    ==  !=  === !==
6.逻辑运算符    先&& 后||
7.赋值运算符    =
8.逗号运算符    ,

---

二、js流程控制 （条件、循环）

1 条件语句

流程控制 : 顺序 分支 循环## 1. 分支流程控制 if switch

闰年案例 能被4整除且不能被100整除,或能被400整除

var year = prompt('请输入年份')
 if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
     alert(year + '是润年')
 } else {
     alert(year + '是平年')
 }    

switch 利用特定值 匹配时是全等

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

2. 循环

2.1 for循环

断点调试 在sources里打断点，然后刷新

for (var i = 1; i <= 100; i++) {
     console.log('你好吗');
 } 

1加到100

 var sum = 0
 for (var i = 1; i <= 100; i++) {
     sum += i
 }
 console.log(sum);

1到100，奇数和 偶数和

 var even = 0
 var odd = 0
 for (var i = 1; i <= 100; i++) {
     if (i % 2 == 0) {
         even += i
     } else {
         odd += i
     }
 }
 console.log(even);
 console.log(odd);

求学生成绩案例

var num = prompt('请输入班级人数')
 var sum = 0
 var avg = 0
 for (var i = 1; i <= num; i++) {
     var score = prompt('请输入第' + i + '个学生的成绩')
     sum += parseFloat(score)
 }
 avg = sum / num
 console.log(sum);
 console.log(avg);

在一行上打印五个星星

var str = ''
 for (var i = 1; i <= 5; i++) {
     str += '星'
 }
 console.log(str);

双重for循环 把里面循环看出外面循环的语句 外面循环执行一次，里面循环执行全部
五行五列星星

var str = ''
 for (var i = 1; i <= 5; i++) {
     for (var j = 1; j <= 5; j++) {
         str += '星'
     }
     str += '\n'
 }
 console.log(str);

打印倒三角

 var str = ''
 for (var i = 1; i <= 10; i++) {
     for (var j = i; j <= 10; j++) {
         str += '星'
     }
     str += '\n'
 }
 console.log(str);

打印九九乘法表

 var str = ''
 for (var i = 1; i <= 9; i++) {
     for (var j = 1; j <= i; j++) {
         str += j + '×' + i + '=' + i * j + '\t'
     }
     str += '\n'
 }
 console.log(str);

---

2.2while循环

输入我爱你，提示结束，否则一直询问

 var m = prompt('你爱我吗？')
 while (m !== '我爱你') {
     m = prompt('你爱我吗？')
 }
 alert('我也爱你啊！')

---

2.3 do while循环

do{ }while()
continue跳出本次循环，继续下一个循环 break跳出整个循环

求1到100间，除了能被7整除外的整数和

 var sum = 0
 for (var i = 1; i <= 100; i++) {
     if (i % 7 == 0) {
         continue
     }
     sum += i
 }
 console.log(sum);

练习
输入用户名，密码，不正确一直让输入，正确探出登录成功

 var un = prompt('请输入用户名')
 var pass = prompt('请输入密码')
 while (un != 'admin' || pass != 123456) {
     un = prompt('请输入用户名')
     pass = prompt('请输入密码')
 }
 alert('登录成功')

 do {
     var un = prompt('请输入用户名')
     var pass = prompt('请输入密码')
 } while (un != 'admin' || pass != '123456')
 alert('登录成功')       

---

三、js函数 （附加数组）

1 数组

将一组数据存储在单个变量名下 (先做了解，熟悉思路，内置对象详细说明)

1.1 创建数组

利用new

 var arr=new Array();

利用数组字面量创建数组
字面量：一看就知道什么数据类型

 var arr = []
 var arr1 = [1, 2, 'zt', true]       //里面数据称为数组元素

---

1.2 获取数组元素

数组名[索引号]

 console.log(arr1[2]);               //zt

没有数组元素输出的话，返回undefined

1.3 遍历数组

从头到尾访问一次

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

求数组最大值

 var arr = [2, 6, 1, 77, 52, 25, 7]
 var max = arr[0]
 for (var i = 1; i < arr.length; i++) {
     if (arr[i] > max) {
         max = arr[i]
     }
 }
 console.log(max);

数组转化为分割字符串

 var arr = ['red', 'green', 'blue', 'pink']
 var str = ''
 var sep = '|'
 for (var i = 0, i < arr.length; i++) {
     str += arr[i] + sep
 }
 console.log(str);

1.4 新增数组元素

修改length长度 新的值是undefind

 arr.length = 5

修改数组索引新增数组元素 如果索引有的话就替换

 var arr = ['red', 'green', 'blue']
 arr[3] = 'zt'

新建数组，里面新增10个整数

 var arr = []
 for (var i = 0; i < 10; i++) {
     arr[i] = i + 1
 }
 console.log(arr);

将数组大于10的元素选出来，放入新数组

 var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
 var newArr = []
 for (var i = 0; i < arr.length; i++) {
     if (arr[i] > 10) {
         // 新增数组索引号应该从0开始  依次递增
         newArr[newArr.length] = arr[i]
     }
 }
 console.log(newArr);

数组翻转

 var arr = [1, 2, 3, 4]
 var newArr = []
 for (var i = arr.length - 1; i >= 0; i--) {
     newArr[newArr.length] = arr[i]
 }
 console.log(newArr);

数组排序，冒泡排序
原理：一次比较两个元素，如果错误就交换，一个元素交换为一趟交换次数
双重for循环

var arr = [5, 4, 3, 2, 1]
 for (var i = 0; i <= arr.length - 1; i++) {            //外层循环管趟数
     for (var j = 0; j <= arr.length - i - 1; j++) {    //里层循环管每一趟交换
         if (arr[j] > arr[j + 1]) {
             var temp = arr[j]
             arr[j] = arr[j + 1]
             arr[j + 1] = temp
         }
     }
 }
 console.log(arr);

2.函数

封装了一段可以被重复执行调用的代码块 让大量代码重复使用

2.1 函数的声明和调用

第一种声明函数

 function 函数名() {
     函数体
 }

 function sayHi() {
     console.log('hi');
 }

第二种声明函数

 函数表达式(匿名函数)  跟声明变量差不多
 
 var fun = function() {
     console.log('我是函数表达式');
 }
 fun()

---

调用函数
函数名()

 sayHi()

---

立即执行函数

 (function(){})()    
        
 (function(){}())

---

2.2 函数的参数

形参和实参
形参是接受实参的，相当于一个变量（不用声明的）

function cook(a) {
     console.log(a);
 }
 cook('酸辣土豆丝')

---

形参和实参个数不匹配

 function getSum(num1, num2) {
     console.log(num1 + num2);
 }
 getSum(1,2,3)          //3        实参多于形参，取到形参个数
 getSum(1)              //NaN      实参小于形参，多余的形参定义为undefined

---

函数的返回值
函数将值返回给调用者，用到return
函数名()=return后面的结果

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

 function cook(aru) {
     return aru
 }
 console.log(cook('大肘子'));
 function getSum(n1, n2) {
     return n1 + n2
 }
 console.log(getSum(1, 2));

终止函数 return 后面的代码不会执行
只能返回一个值

---

求任意两个数的加减乘除结果

 function getResult(n1, n2) {
     return [n1 = n2, n1 - n2, n1 * n2, n1 / n2]
 }
 var re = getResult(1, 2)
 console.log(re);

---

没有return 则返回undefined

 function fun() {
 }
 console.log(fun());//undefined  

2.3 arguments的使用（只有函数有，已经内置好了）

存储了传递的所有实参
展示的是一个伪数组
有数组的length属性 按照索引存储 没有真正数组的一些方法

function fn() {
     console.log(arguments);          //1,2,3
     console.log(arguments.length);   //3
     console.log(arguments[2]);       //3
     //       可以按照数组的方法遍历arguments
     for (var i = 0; i < arguments.length; i++) {
         console.log(arguments[i]);
     }
 }
 fn(1, 2, 3)

---

利用函数求任意个数的最大值

function getMax() {
     var max = arguments[0]
     for (var i = 0; i < arguments.length; i++) {
         if (arguments[i] > max) {
             max = arguments[i]
         }
     }
     return max
 }
 console.log(getMax(1, 2, 3));
 console.log(getMax(1, 2, 3, 4, 5));
 console.log(getMax(1, 2, 3, 33, 55));

---

函数可以调用另一个函数

function fn1() {
     console.log(11);
     fn2()
 }
 fn1()
 function fn2() {
     console.log(22);
 }

用户输入年份，输出当前年份2月天数

function backDay() {
     var year = prompt('请输入年份')
     if (isRunYear(year)) {
         alert('2月有29天')
     } else {
         alert('2月有28天')
     }
 }
 backDay()
 function isRunYear(year) {
     var flag = false
     if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
         flag = true
     }
     return flag
 }

---

四、js对象 （附加作用域）

1 作用域

代码名字在某个范围起作用 减少命名冲突

• 全局作用域 整个script标签 或者一个单独js文件
• 局部作用域（函数作用域） 函数内部

1.1 变量的作用域

全局变量 局部变量
注意 函数内部，没有声明直接赋值的变量也是全局变量
函数的形参也是局部变量

 function fun() {
     var num1 = 10
     num2 = 20
 }
 fun()
 console.log(num1);     //报错
 console.log(num2);     //20

全局变量只有在浏览器关闭才会销毁，比较占资源
局部变量当程序执行完毕后就会销毁，比较节约资源
作用域链（内部函数访问外部函数变量，采取链式查找） 就近原则 链式查找

---

1.2 预解析 变量提升 函数提升

js引擎运行js分两步： 预解析 代码执行
预解析：js引擎会把js里所有var 和function提升到当前作用域的最前面
代码执行：按照书写顺序从上往下执行

1.2.1 变量提升

提升声明，不提升赋值

 console.log(num);
 var num = 10
 
 相当于
 
 var num
 console.log(num);
 num = 10

---

1.2.2 函数表达式提升

调用必须写在函数表达式下面

 fun()
 var fun = function() {
     console.log(22);
 }
 
 相当于
 
 var fun
 fun()
 fun = function() {
     console.log(22);
 }

---

1.2.3 函数提升

提升声明 不提升调用

 var a = b = c = 9//相当于
 var a = 9
 b = 9
 c = 9
 f1()
 console.log(c);
 console.log(b);
 console.log(a);
 function f1() {
     var a = b = c = 9
     console.log(a);
     console.log(b);
     console.log(c);
 }
 
 相当于
 
 function f1() {
     var a
     a = b = c = 9
     console.log(a);    //9
     console.log(b);    //9
     console.log(c);    //9
 }
 f1()
 console.log(c);        //9    不声明只赋值是全局变量 
 console.log(b);        //9
 console.log(a);       //报错

---

2.js对象

对象（一组 无序 的相关 属性 和 方法 的集合） 一个具体的事物
所有的事物都是对象 字符串，数值，数组，函数
保存一个值时可以用变量，保存多个值（一组值）可以用数组，保存一个人完整信息用对象

2.1 创建对象三种方式

2.1.1 字面量创建对象

创建一个空的对象

 var obj = {}  

采取键值对 多个属性方法用 ，号隔开 方法后面跟一个匿名函数

var obj = {
    uname: '张三丰',
    age: 18,
    sex: 男,
    sayHi: function() {
        console.log('hi');
    }
}

使用对象
调用对象属性 1.对象名.属性名 (.理解为 的) 2.对象名[‘属性名’]

 console.log(obj.uname);
 console.log(obj['age']);

调用对象方法 对象名.方法名()

 obj.sayHi()

---

2.1.2 new Object创建对象

利用等号赋值方法添加属性方法

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

---

2.1.3 利用构造函数创建对象

为什么需要使用构造函数 因为以上两种只能创建一个对象
一次创建一个对象，里面很多属性和方法大致相同

可以利用函数方法 重复这些相同代码 封装起来 称为构造函数
里面封装的不是普通代码，是对象

构造函数： 把对象里相同的属性和方法抽象出来封装到函数里面
语法格式

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

function Star(uname, age, sex) {         //构造函数名首字母大写
    this.name = uname                    //必须加this
    this.age = age
    this.sex = sex
    this.sing=function(song){
        console.log(song);
    }
}
var ldh= new Star('刘德华', 18, '男')    //调用构造函数  必须用new  
    //只要new Star() 调用函数就创建一个对象
console.log(ldh);                        //构造函数不需要return，就可以返回结果
ldh.sing('冰雨')

---

2.2 变量、属性 和 函数、方法 区别

2.2.1 变量和属性

相同点 都是用来存储数据的

var num = 10
var obj = {
    age: 18
}

不同
变量 单独声明并赋值 使用时直接写变量名 单独存在
属性 在对象里面不需要声明 使用必须对象.属性

2.2.2 函数和方法

相同点 都是实现某种功能 做某事

不同
函数 单独声明 调用 使用时直接写函数名()调用 单独存在
方法 在对象里面不需要声明 使用必须对象.方法()

2.3 构造函数和对象总结

构造函数 明星 泛指一个大类，类似于Java里的类
对象 是一个具体的事物

构造函数创建对象的过程我们也称为对象实例化

new 关键字的执行过程
new在内存中创建了一个空的对象
this会指向刚才创建的对象
执行构造函数里面代码 给这个空对象添加属性方法
返回这个对象

• 生宝宝举例
  生一个宝宝 必须是亲生this指向 教孩子读书添加东西 长大挣钱return父母

2.4 遍历对象 for in

var obj = {
    name: 'pink老师',
    age: 18,
    sex: '男'
}

for (var k in obj) {
    console.log(k);
    console.log(obj[k]);
}

---

2.5 原型（prototype）（先了解）

所有实列的公共祖先

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype，
这个属性对应着一个对象，这个对象就是我们所谓的原型对象，即显式原型，

原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
我们可以将对象中共有的内容，统一设置到原型对象中。

• 构造函数.prototype 访问原型对象

• 实例对象.proto 访问原型对象

• 构造函数.prototype == 实例对象.proto

• Object.prototype是所有原型对象的祖先

• Object.prototype === 实例对象.proto.proto

• constructor是原型的内置属性 指向构造函数 返回访问

使用构造函数来创建对象

function Person(name, age) {
    // 设置对象的属性
    this.name = name;
    this.age = age;
}
      // 在Person类的原型对象中添加方法
Person.prototype.sayName = function() {
    console.log(this.name);
};
var person1 = new Person("孙悟空", 18);
var person2 = new Person("猪八戒", 19);
var person3 = new Person("沙和尚", 20);
person1.sayName();
person2.sayName();
person3.sayName();

---

2.6 继承 （先了解）

1、原型链继承 函数1.prototype= new 函数2()
有引用值共享问题
2、构造函数继承 构造函数.call(this)
没办法拿原型上方法
3、组合继承(伪经典继承)
4、寄生组合继承(经典继承)

---

2.7 toString()（先了解）

  函数用于将当前对象以字符串的形式返回。
  该方法属于Object对象，由于所有的对象都"继承"了Object的对象实例，
  因此几乎所有的实例对象都可以使用该方法，所有主流浏览器均支持该函数。
  JavaScript的许多内置对象都重写了该函数，以实现更适合自身的功能需要。


类型         行为描述
String       返回 String 对象的值。
Number       返回 Number 的字符串表示。
Boolean      如果布尔值是true， 则返回 "true"。  否则返回 "false"。
Object       (默认) 返回 "[object ObjectName]"，其中 ObjectName 是对象类型的名称。
Array        将 Array 的每个元素转换为字符串， 将它们依次连接起来，两个元素之间用英文逗号作为分隔符进行拼接。
Date         返回日期的文本表示。
Error        返回一个包含相关错误信息的字符串。
Function     返回如下格式的字符串， 其中 functionname 是一个函数的名称此函数的 toString 方法被调用：“ 
function functionname() {
[native code]
}”

---

五、js内置对象

js对象有三种
自定义对象 内置对象 浏览器对象
内置对象就是指JS语言自带的一些对象，这些对象供开发者使用，并提供一些常用的或者是最基本的而必要的功能（属性和方法）

内置对象方法属性太多，不一一列举，拿常用的举例，其他可以查文档
查文档 MDN W3C

---

1 Math对象

不是一个构造函数，不用new调用，直接使用里面方法和属性

 console.log(Math.PI);
 console.log(Math.max(1, 99, 3));
 console.log(Math.max(1, 99, 'zt'));       //NaN
 console.log(Math.max());                  //-Infinity

---

封装一个自己的数学对象

var myMath = {
     PI: 3.1415926535,
     max: function() {
         var max = arguments[0]
         for (var i = 1; i < arguments.length; i++) {
             if (arguments[i] > max) {
                 max = arguments[i]
             }
         }
         return max
     },
     min: function() {
         var min = arguments[0]
         for (var i = 1; i < arguments.length; i++) {
             if (arguments[i] < min) {
                 min = arguments[i]
             }
         }
         return min
     }
 }
 console.log(myMath.PI);
 console.log(myMath.max(1, 5, 9));
 console.log(myMath.min(1, 5, 9));

---

Math.abs('-1')// 1         绝对值       隐式转换     
Math.floor(1.9)//1         往最小取
Math.ceil(1.9)//2          往大取    
Math.round(1.5)//2         四舍五入    -1.5      往大取  -1
Math.random()              返回一个随机的小数 [0,1)

得到两个数之间随机整数

function getRandom(min, max) {
     Math.floor(Math.random() * (max - min + 1)) + min  }

猜1-10之间的数

 function getRandom(min, max) {
     Math.floor(Math.random() * (max - min + 1)) + min
 }
 var random = getRandom(1, 10)
 while (true) {
     var num = prompt('猜1-10的数')
     if (num < random) {
         alert('猜小了')
     } else if (num > random) {
         alert('猜大了')
     } else {
         alert('猜对了')
         break
     }
 }

---

2. Date对象

日期时间 是一个构造函数 必须使用new

 var date = new Date()                  //没参数  返回当前系统时间
 var date = new Date(2019, 10, 1)       //数字型 2019，10，1   字符串型  '2019-10-1 8:8:8'
 console.log(date);

日期格式化

 console.log(date.getFullYear());    //返回当前日期年
 console.log(date.getMonth());       //返回当前日期月     0-11 所以要加一
 console.log(date.getDate());        //返回当前日期日
 console.log(date.getDay());         //返回当前日期星期   周日返回的是0

 var date = new Date()
 var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
 var day = date.getDay()
 console.log(arr[day]);
 console.log(date.getHours());      //时
 console.log(date.getMinutes());    //分
 console.log(date.getSeconds());    //秒
 function getTime() {
     var time = new Date()
     var h = time.getHours()
     h = h < 10 ? '0' + h : h
     var m = time.getMinutes()
     m = m < 10 ? '0' + m : m
     var s = time.getSeconds()
     s = s < 10 ? '0' + s : s
     return h + ':' + m + ':' + s
 }
 console.log(getTime());

---

获取日期的总毫秒数(时间戳) 距离1970年1月1日

     valueof()      getTime()
 var date = new Date()
 console.log(date.valueOf());
 console.log(date.getTime());


 var date = +new Date()        //简单写法
 console.log(date);
 
 console.log(Date.now());      //超级简单写法

---

倒计时案例

 d = parseInt(总秒数 / 60 / 60 / 24)     //计算天数
 h = parseInt(总秒数 / 60 / 60 % 24)     //计算小时
 m = parseInt(总秒数 / 60 % 60)          //计算分钟
 s = parseInt(总秒数 % 60)               //计算秒数
 function countDown(time) {
     var nowTime = +new Date()
     var inputTime = +new Date(time)
     var times = (inputTime - nowTime) / 1000
     var d = parseInt(times / 60 / 60 / 24)
     var h = parseInt(times / 60 / 60 % 24)    
     var m = parseInt(times / 60 % 60) 
     var s = parseInt(times % 60)
     return d + '天' + h + '时' + m + '分' + s + '秒'
 }
 console.log(countDown('2022-5-3 21:00:00'));

---

3 数组对象

是一个构造函数 需要new

 var arr = new Array()             //创建了一个空数组   里面参数只有一个的话表示数组元素个数
 var arr1 = new Array(2, 3)        //里面有两个元素，2和3，必须写两个以上

3.1 检测是否为数组

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

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

 Array.isArray(参数)

 console.log(Array.isArray([1, 2, 3])); //true

---

3.2 添加和删除元素

push() 在数组后面添加 返回值时数组的长度

 var arr = []
 arr.push(1,'zt')
 console.log(arr);      //[ 1 , 'zt' ]

unshift() 在数组的前面添加 返回值是数组长度

 var arr = [1, 23, 4]
 arr.unshift('zt')
 console.log(arr);      //['zt', 1 , 23 , 4]

---

删除数组元素
pop() 删除最后一个元素 返回值是删除的元素

 var arr = [1, 23, 4]
 arr.pop()
 console.log(arr);					//[1 , 23]
 console.log(arr.pop());			// 4 

shift() 删除第一个元素 返回值是删除元素

 var arr = [1, 23, 4]
 arr.shift()
 console.log(arr);                 //[23 , 4]
 console.log(arr.shift());         // 1

---

3.3 数组排序、翻转数组

数组排序 sort()
数组翻转 reverse()

var arr = [1, 23, 4]
arr.reverse()
console.log(arr);        //[4, 23, 1]

arr.sort()                 //只能一位数
arr.sort(function(a, b) {  //升序的顺序   b-a  降序
        return a - b
    })
console.log(arr);

---

3.4 数组索引

indexOf() 返回该数组元素索引 只返回第一个满足 找不到返回-1
lastIndexOf() 从后往前查

 var arr = ['red', 'bule', 'green']
 console.log(arr.indexOf('bule'));    // 1

3.5 数组去重

遍历旧数组，放到新数组 再利用indexOf() 返回-1说明没查到，就可以往里插入了

 function unique(arr) {
    var newArr = []
    for (var i = 0; i < arr.lenght; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i])
        }
    }
    return newArr
 }
 var demo = unique(['a', 'a', 'b'])
 console.log(demo);                //['a' , 'b']

---

3.6 数组转化为字符串

toString() join(‘分隔符’)

---

4 字符串对象

基本包装类型
把简单数据类型包装成 复杂数据类型 (String Number Boolean)

 var str='zt'
 console.log(str.length);
 
      包装成
      
 var temp =new String('zt')
 str=temp
 temp=null

字符串的不可变性 里面值不变，开辟了一个新的空间，只是地址变了

---

根据字符返回位置 str.indexOf(‘要查找的字符’,[起始的位置])
返回字符位置和次数

var str = 'absxascasbcabsbzz'
var index = str.indexOf('a')
var num = 0
while (index != -1) {
    console.log(index);
    num++
    str.indexOf('a', index + 1)
}
console.log('次数' + num);

根据位置返回字符
charAt(index)返回本身 charCodeAt(index)返回ASC码 str[index]

---

统计出现次数最多的字符

var str = 'lssabscascaaaaaass'
var o = {}
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i)
    if (o[chars]) {
        o[chars]++
    } else {
        o[chars] = 1
    }
}
console.log(o);
var max = 0
var ch = ''
for (var k in o) {
    if (o[k] > max) {
        max = o[k]
        ch = k
    }
}
console.log(max);
console.log('最多的字符是' + ch);

---

字符串拼接以及截取字符串
concat(字符串1,字符串2…)

var str1 = 'zt'
console.log(str1.concat('tz'));

---

substr(‘截取的起始位置’,‘截取几个字符’)

var str1 = '改革春风吹满地'
console.log(str1.substr(2, 2));      //春风

---

替换字符串以及转换为数组
replace(‘被替换的字符’,‘替换为的字符’) 只会替换第一个字符

var str = 'andy'
console.log(str.replace('a', 'b'));   //bndy

---

将字符转化为数组
split(‘分隔符’) join()把数组转化为字符串

 var str1 = 'red,pink,blue'
 console.log(str1.split(','));   // ['red' , 'pink' , 'blue']
 var str2 = 'red&pink&blue'
 console.log(str2.split('&'));   // ['red' , 'pink' , 'blue']

---

toUpperCase()方法演示：将一个字符串转换为大写并返回
toLowerCase()方法演示：将一个字符串转换为小写并返回

var str = "Hello,World!";
var result = str.toUpperCase();
console.log(result);				//HELLO,WORLD
     
var str = "Hello,World!";
var result = str.toLowerCase();
console.log(result);				//hello,world

---

5. RegExp对象 （正则表达式）

5.1 创建

var 变量名 = new RegExp(“正则表达式”,“匹配模式”);

匹配模式

• i： 忽略大小写
• g： 全局匹配模式
• ig： 忽略大小写且全局匹配模式

使用字面量创建
var 变量名 = /正则表达式/匹配模式;

   i： 忽略大小写
   g： 全局匹配模式
   m： 执行多行匹配

[ ] 里的内容也是或的关系
[a - z]： 任意小写字母
[A - Z]： 任意大写字母
[A - z]： 任意字母
[0 - 9]： 任意数字

---

检查一个字符串中是否含有abc或adc或aec

  var reg = /a[bde]c/;
  var str = "abc123";
  var result = reg.test(str);
  console.log(result);

---

[ ^ a - z]： 除了任意小写字母
[ ^ A - Z]： 除了任意大写字母
[ ^ A - z]： 除了任意字母
[ ^ 0 - 9]： 除了任意数字

检查一个字符串中是否除了数字还有其它字母

 var reg = /[^0-9]/;
 var str = "0123456789";
 var result = reg.test(str);
 console.log(result);

---

5.2 正则方法

search()方法演示：该方法可以搜索字符串中是否含有指定内容，
如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1

 var str = "hello abc hello aec afc";
 var result = str.search(/a[bef]c/);
 console.log(result);

match()方法演示：该方法可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，
默认情况下我们的match()只会找到第一个符合要求的内容

 var str = "1a2a3a4a5e6f7A8B9C";
 var result = str.match(/[a-z]/ig);
 console.log(result);

replace()方法演示：该方法可以将字符串中指定内容替换为新的内容，默认只会替换第一个

 var str = "1a2a3a4a5e6f7A8B9C";
 var result = str.replace(/[a-z]/gi, "@_@");
 console.log(result);

---

5.3 正则量词

{n} ：          正好出现n次
{m,} ：         出现m次及以上
{m,n} ：        出现m-n次
+ ：            至少一个，相当于{1,}
* ：            0个或多个，相当于{0,}
? ：            0个或1个，相当于{0,1}
^ ：            表示开头，注意它在[^字符序列]表达的意思不一样
$ ：            表示结尾
\w ：           任意字母、数字、_，相当于[A-z0-9_]
\W ：           除了字母、数字、_，相当于[^A-z0-9_]
\d ：           任意的数字，相当于[0-9]
\D ：           除了任意的数字，相当于[^0-9]
\s ：           空格
\S ：           除了空格
\b ：           单词边界
\B ：           除了单词边界

---

6 简单与复杂数据类型

简单数据类型（值类型）储存值本身
复杂数据类型（引用数据类型）储存的仅仅是地址

简单 string number boolea undefined null（返回一个空对象） 引用
通过new创建的对象（系统，自定义） 如Object，Array，Date

堆（引用） 首先在栈里面存放地址（十六进制表示） 然后地址指向堆里数据
栈（简单） 里面直接开辟一个新空间，存放的是值

---

六、DOM初步

API是一种工具接口 会使用就行

Web API（函数或方法）是浏览器提供的一套操作浏览器功能和页面元素的API（ DOM BOM）
DOM 一个页面就是一个文档，DOM中用document表示

所有标签都是元素，elemen
所有的内容都是节点（标签，属性，文本，注释），node

1 获取元素

通过id 获取元素
getElementById()

 <div id="time">2022-5-3</div>
 
 var timer = document.getElementById('time')    //必须是字符串  返回元素对象
 console.log(timer);
 console.dir(timer)                             //更好查看里面属性和方法

---

getElementsByTagName()
如果页面只有一个li 返回还是伪数组 如果没有返回空的伪数组

 <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
 </ul>

 var lis = document.getElementsByTagName('li')     //元素对象的集合，为数组形式存储
 console.log(lis);
 console.log(lis[0]);

---

指定父元素 必须指明哪一个元素对象

var ol = document.getElementsByTagName('ol')
console.log(ol[0].getElementsByTagName('li'));

---

根据类名获取某些元素
getElementsByClassName()

<div class="box">2022-5-3</div>

var boxs = document.getElementsByClassName('box')
console.log(boxs);

---

querySelector() 万能获取
只能获取第一个元素对象
class用 . id用#

var firstBox = document.querySelector('.box')      
console.log(firstBox);

querySelectorAll()
指定选择器的所有元素对象集合

var allBox = document.querySelectorAll('.box')
console.log(allBox);

---

获取body和html元素

      body
var bodyEle = document.body
console.log(bodyEle);

      html
var htmlEle = document.documentElement
console.log(htmlEle);

---

2 事件 触发响应机制

事件源 事件类型 事件处理程序

事件源： 被触发的对象 谁 按钮
var btn = document.getElementById(‘btn’)

事件类型 如何触发 鼠标点击等

事件处理程序 通过一个函数赋值方法
btn.onclick = function() {
alert(‘点秋香’) }

3 操作元素

3.1 获取元素

var btn = document.querySelector('button')
var div = document.querySelector('div')

3.2 注册事件

btn.onclick = function() {
    div.innerText = '2019-6-6'
}

3.3 不添加事件直接操作

<p> 11 </p>

var p = document.querySelector('p')
p.innerHTML = '1111'

<p> 1111 </p>

3.4 innerHTML和innerText

都可以获取元素里面内容（可读写）

innerText 不识别html标签 去除空格和换行
innerHTML 识别html 不去除保留

3.5 修改元素属性

var ldh = document.querySelector('ldh')
var zxy = document.querySelector('zxy')
var img = document.querySelector('img')
ldh.onclick = function() {
    img.src = '1'
}
zxy.onclick = function() {
    img.src = '2'
}

---

3.6 修改表单属性

var btn = document.querySelector('button')
var input = document.querySelector('input')
btn.onclick = function() {
    input.value = '被点击了'
    btn.disabled = true
    this.disabled = true                           //this 指向事件函数调用者  btn
}

---

隐藏密码

var eye = document.getElementById('eye')
var pwd = document.getElementById('pwd')
var flag = 0
eye.onclick = function() {
    if (flag == 0) {
        pwd.type = 'text'
        flag = 1
        this.innerHTML = '关'
    } else {
        pwd.type = 'password'
        flag = 0
        this.innerHTML = '开'
    }
}

---

3.7 修改样式属性 在行内 权重高

var div = document.getElementById('eye')
div.onclick = function() {
    this.style.backgroundColor = 'pink'
}

循环精灵图

var lis = document.querySelectorAll('li')
for (var i = 0; i < lis.length; i++) {
    var index = i * 44
    lis[i].style.backgroundPosition = '0 -' + index + 'px'
}
      onfocus和onblur
var text = document.querySelector('input')
text.onfocus = function() {
    if (this.value === '手机') {
        this.value = ''
    }
    this.style.color = '#333'
}
text.onblur = function() {
    if (this.value === '') {
        this.value = '手机'
    }
    this.style.color = '#999'
}

---

3.8 className修改样式属性

样式多的情况 会覆盖以前的类名（可以加上之前的类名加空格）

 this.className='chang'

3.9 总结

元素内容 innerText和innerHTML
元素属性 src href title alt
表单元素属性 type value disabled
元素样式属性 element.style. className

---

4 排他思想

先循环所有元素清除样式 再给自己设置元素

var btns = document.querySelectorAll('button')
 for (var i = 0; i < btns.length; i++) {
     btns[i].onclick = function() {
         for (var i = 0; i < btns.length; i++) {
             btns[i].style.backgroundColor = ''
         }
         this.style.backgroundColor = 'pink'
     }
 }

---

5.获取、设置、移除属性值

获取自定义属性值
第一种 element.属性（内置属性）
第二种 element.getAttribute(‘属性’) (自己添加的)

设置元素属性值
第一种 element.属性=‘值’
第二种 element.setAttribute(‘属性’, 值)

移除元素属性 removeAttribute(属性)

---

tab栏切换

         模块选项卡  点击某一个  当前的底色就是红色
 var tab_list = document.querySelector('.tab_list')
 var lis = tab_list.querySelectorAll('li')
 var items=document.querySelectorAll('.item')
 for (var i = 0; i < lis.length; i++) {
        开始给五个li 设置索引号
 lis[i].setAttribute('index',i)
     lis[i].onclick = function() {
         //先干掉所有人  其余的li清除class类
         for (var i = 0; i < lis.length; i++) {
             lis[i].className = ''
         }
         //留下自己
         this.className = 'currnet'
         //2.显示内容模块
         var index = this.getAttribute('index')
         for(var i=0;i<items.length;i++){
           items[index].style.display='none'
         }
         item[index].style.display='block'
     }
 }

---

H5自定义属性 以data- 开头
新增获取自定义属性方法
dataset.index

---

6 节点操作 利用父子集

nodeType（节点类型）
nodeName（节点名称）
nodeValue（节点值）
元素节点nodeType为1 属性为2 文本为3（文字 空格 换行）

6.1 父子节点

父节点
parentNode 得到离元素最近的父级节点 找不到返回空
子节点
childNodes（不提倡） 包含所有的子节点 包含换行

子节点
children
ul.children

第一 和 最后一个节点
firstElementChild lastElementChild
实际开发常用
children[0]

---

6.2 兄弟节点

nextSibling（下一个） previousSibling（上一个） 包含文本节点
nextElementSibling previousElementSibling 下一个上一个元素节点

---

6.3 创建、添加、删除节点(动态)

创建节点
document.creatElement(‘tagName’)

添加节点
node.appendChild(child) node父级 child 子级 （后面追加）
node.insertBefore(child, 指定元素) （前面追加）

发布留言案例

 var btn = document.querySelector('button')
 var text = document.querySelector('textarea')
 var ul = document.querySelector('ul')
 btn.onclick = function() {
     if (text.value == '') {
         alert('没有出入内容')
         return false
     } else {
         var li = document.createElement('li')
         li.innerHTML = text.value + "删除"
         ul.appendChild(li)
         ul.insertBefore(li, ul.children[0])
             //删除元素  删除的当前链接的父亲li
         var as = document.querySelectorAll('a')
         for (var i = 0; i < as.length; i++) {
             as[i].onclick = function() {
                 ul.removeChild(this.parentNode)
             }
         }
     }
 }

---

删除节点

 node.removeChild(child)

阻止链接跳转 herf里面 javascript:;

---

6.4 复制节点

node.cloneNode(true)
如果括号里面为空或flase 则只是浅拷贝 只复制节点本身，不复制子节点

innerHTML（不采用字符串拼接，采用数组拼接） 效率高于 creatElement()

7 DOM核心总结

返回的是一个对象，所以叫文档对象模型

创建 增删改查 属性和事件

   创建         innerHTML  creatElement()
   增           appenfChild      insertBefore
   删           removeChild
   改           修改dom元素属性，元素内容 样式 属性 表单值
   查           id tagname    querySelector   节点  父子兄
   属性         setAttribute 设置属性   getAttribute  得到属性  removeAttribute 移除属性
   事件         事件源.事件类型=事件处理程序

---

七、DOM高级

1 事件监听与删除

注册事件两种方式

传统注册方式 唯一性：只能处理一个处理函数 后面会把前面覆盖
方法监听注册方式 addEventListener()

EventTarget.addEventListener(type, listener[, useCapture])

• type 事件类型字符串
• listener 事件处理函数
• useCapture 可选参数， 布尔值， 默认false

 var btns = document.querySelector('button')
 btns.addEventListener('click', function() {
     alert(22)
 })
 btns.addEventListener('click', function() {
     alert(33)
 })

---

删除事件（解绑事件）

• 传统 element.onclick = null
• 监听 removeEventListener(type,listener)

div.addEventListener('click', fn)
 function fn() {
     alert(22)
     div.removeEventListener('click', fn)
 }

---

2.DOM事件流

按照特定的顺序 传播过程

捕获阶段（上到下）
当前目标阶段
冒泡阶段（下到上）

• 捕获阶段 addEventListener 第三个参数是true 则处于捕获阶段
• 冒泡阶段 addEventListener 第三个阶段为false或省略 则处于冒泡阶段

onclick 只能得到冒泡阶段
onblur onfoucus onmouseenter 等没有冒泡阶段

---

3 事件对象

事件处理程序 () 里面的就是事件对象 当形参看

只有有了事件才会存在 系统创建 不需要传参
是事件一系列相关数据的集合 鼠标点击就关于鼠标信息

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

1. e.target 返回的是触发事件的对象（点击的对象） (this返回的是绑定事件的对象)

2. e.type 返回事件类型

3. 阻止默认行为（事件） 让链接不跳转 不让按钮点击
   e.preventDefault() return false(后面代码不执行 只限于传统方式)

4. e.stopPropagation() 阻止事件冒泡

---

4 事件委托

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

<ul>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
        <li>111</li>
</ul>

 var ul=document.querySelector('ul')
  ul.addEventListener('click',function(){
     alert('111')									//点击li会冒泡到ul
 })

---

5 常用的鼠标、键盘事件

contextmenu 菜单 通常可以禁用菜单

 document.addEventListener('contextmenu', function(e) {
     e.preventDefault()
 })

selectstart 开始选中 可以禁止选中

 document.addEventListener('selectstart', function(e) {
     e.preventDefault()
 })

获得鼠标在页面中的坐标

• clientX和clientY 可视区x和y坐标
• pageX和pageY 文档页面的x和y坐标

跟随鼠标的我

 var pic = document.querySelector('img')
 document.addEventListener('mousemove', function(e) {
     var x = e.pageX
     var y = e.pageY
     pic.style.left = x - 25 + 'px'               // 不要忘记加单位
     pic.style.top = y - 35 + 'px'
 })

---

键盘事件 顺序keydown – keypress – keyup
onkeyup 按键弹起时

 document.onkeyup = function() {
     console.log('我弹起了');
 }

onkeydown 按键按下时

 document.addEventListener('keydown', function() {
     console.log('我按下了');
 })

onkeypress（区分字母大小写） 按键按下时 不能识别功能键

 document.addEventListener('keypress', function() {
     console.log('我按下了press');
 })

keyCode ASCII码值

---

八、BOM

浏览器对象模型 内容与浏览器窗口进行交互
window（ 包含document location navigation screen history）
window对象也是接口

DOM 把文档看作一个对象（顶级是document）
BOM 把浏览器当作一个对象（顶级是window）
BOM 比 DOM大

全局对象 定义在全局作用域中的变量， 函数都会变成window对象的属性和方法

---

1 window对象常见事件

1.1 窗口加载事件

 window.onload=function(){}                          //重复的话只执行最后一个

 window.addEventListener('load',function(){})        //则没有限制  图片 css等所有加载完
 
 document.addEventListener('DOMContentLoaded',function(){})    //DOM加载完就可以

---

1.2 调整窗口大小事件

 window.onresize=function() {}    //是调整窗口大小加载事件
 
 window.addEventListener('resize',function(){})

---

1.3 两种定时器 （window可以省略）

window.setTimeout (调用函数,[延时毫秒数])
window.setInterval (调用函数,[延时毫秒数]) 反复调用这个函数

 setTimeout(function() {
     console.log('时间到了');
 }, 2000)

 setIntervsl(function() {
     console.log('时间到了');       //每两秒输出一次，重复操作
 }, 2000)

回调函数：就是上一件事作完，回头调用这个函数 例如：监听事件里的函数 定时器里面函数

停止定时器
window.clearTimeout(名字)
window.clearInterval(名字)

---

1.3 其他窗口方法

window.open(URL,name,specs,replace); 打开新的窗口

---

2 this指向问题

2.1 全局作用域下或普通函数中

this指向全局对象window 还有定时器里的window

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

---

2.2 方法调用中谁调用this指向谁

 var o = {
     sayHi: function() {
         console.log(this); //this指向的是o这个对象
     }
 }
 o.sayHi()

---

2.3 构造函数中的this指向构造函数的实例

function Fun() {
     console.log(this);   //this 指向的是fun  实例对象
 }
 var fun = new Fun()

---

3 js执行队列

（同步） 单线程 同一时间只能做一件事
（异步） 多线程 同时做多个任务
同步任务：都在主线程上执行，形成一个执行栈
异步任务：是通过回调函数实现的

1.普通事件：click resize
2.资源加载：load error
3.定时器：setinterval settimeout

执行过程

1. 先执行执行栈里的同步任务
2. 遇到异步任务（回调函数）放到任务队列中
3. 执行栈里同步任务执行完毕，系统会读取任务队列的异步任务，解除等待状态，放到执行栈里执行

执行栈相当于 主车道， 任务队列相当于 应急车道

 执行栈        -->当有异步任务时，提交给异步进程处理-->        异步API
    \                                                  /
      主线程执行                               异步任务完毕
       完毕，查询                             推入到任务
        任务队列，                           队列中   
         取出任务  
                \                           /
                         任务队列
   事件循环：主线程不断重复获得任务，执行，再获取，再执行

---

4 location对象

console.log(location);                 //输出location对象
console.log(location.href);            //输出当前地址的全路径地址
console.log(location.origin);          //输出当前地址的来源
console.log(location.protocol);        //输出当前地址的协议
console.log(location.hostname);        //输出当前地址的主机名
console.log(location.host);            //输出当前地址的主机
console.log(location.port);            //输出当前地址的端口号
console.log(location.pathname);        //输出当前地址的路径部分
console.log(location.search);          //输出当前地址的?后边的参数部分

属性：herf（整个URL地址） 和search（返回参数）

document.addEventListener('click', function() {
     console.log(location.href);
     location.href = 'http://www.baidu.com'
 })

---

location对象中方法

• location.assign(地址) 页面跳转 记住浏览历史，可以实现页面跳转
• location.replace(地址) 页面跳转 不记住浏览历史
• location.reload() 页面刷新 空或false 直接刷新 true 强制刷新

document.addEventListener('click', function() {
     location.assign('http://www.baidu.com')
 })

---

5 navigator对象

包含浏览器信息 常用userAgent判断哪个页面打开

---

6 history对象

浏览器历史记录

• history.forward() 前进
• history.back() 后退
• history.go() 1前进 -1后退

---

九、BOM拓展

1 offset系列

可以得到元素的偏移，位置，返回不带 单位 的数值
offsetTop 上
offsetLeft 左
以带有定位的父亲为准，没父亲或父亲没定位，则以body为准

可以得到元素的大小 宽度 和高度
offsetWidth 宽
offsetHeight 高

可以返回带有定位的父亲 否则返回body
offsetParent

offset和style区别
offset 只读 不带单位 可以得到任意样式表中的 包含padding和border
style 可读写 带单位 只能行内样式表 只包含width
拖动模态框：先获取鼠标在盒子内的坐标，再用鼠标在页面的坐标减去鼠标在盒子内坐标

---

2 client系列 只不包含边框

clientTop 返回元素上边框的大小
clientLeft 返回元素左边框大小
clientWdith 返回自身包含padding 内部宽度
clientHeight 返回自身包括padding 内部高度

---

3 scroll系列 真正内容大小

scrollWidth 返回自身实际宽度，不含边框，不带单位
scrollHeight 返回自身实际高度，不含边框 ，不带单位
scrollTop scrollLeft 超出的部分

滚动条事件 onscroll

offset 包含边框 scroll 包含文字超出部分 client

mouseenter和mouseover区别
over 经过自身会触发，经过自盒子还会触发 （冒泡事件）
enter 经过自身盒子才会

---

4 动画函数 （setinterval不断移动位置）

 var div = document.querySelector('div')
 var timer = setInterval(function() {
     if (div.offsetLeft >= 400) {
         clearInterval(timer)
     }
     div.style.left = div.offsetLeft + 1 + 'px'
 }, 30)
 
       封装起来
       
 function animate(obj, target) {
     var timer = setInterval(function() {         //可以将var timer改为obj 添加不同的定时器
         if (div.offsetLeft >= 400) {         
             clearInterval(timer)
         }
         div.style.left = div.offsetLeft + 1 + 'px'
     }, 30)
 }
 var div = document.querySelector('div')
 animate(div, 300)

缓动动画 运动速度变化 核心算法：（目标值-现在位置）/10 做为每次移动的距离步长 最好取整Math.ceil

---

函数调用实参可以添加一个函数，形参也就是可以收一个函数

 function fn(fn2) {
     console.log(11);
     fn2()
 }
 fn(function() {
     console.log(22);
 })

---

5 Touch触摸事件

touchstart
touchmove
touchend

TouchEvent对象

• touchs 所有手指的一个列表
• touchTouches 正在触摸当前DOM元素上手指的一个列表
• changedTouches 手指状态发生改变的列表

---

6 本地存储 sessionStorage

数据存储在用户浏览器中

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

6.1 存储数据

 var ipt = document.querySelector('input')
 var set = document.querySelector('.set')
 var get = document.querySelector('.get')
 var remove = document.querySelector('.remove')
 var del = document.querySelector('.del')
 set.addEventListener('click', function() {
     var val = ipt.value
     sessionStorage.setItem('uname', val)
 })

6.2 获取数据

 get.addEventListener('click', function() {
     console.log(sessionStorage.getItem('uname'));
 })

6.3 删除数据

 remove.addEventListener('click', function() {
     sessionStorage.removeItem('uname')
 })

6.4 清空数据

 del.addEventListener('click', function() {
     sessionStorage.clear()
 })

7 本地存储 localStorage

1. 生命周期永久生效，除非手动删除，否则关页面也存在
2. 可以多窗口（页面）共享（同一浏览器）
3. 还是键值对
   使用方法同 sessionStorage