JavaScript笔记

根据撩课学院的课程资料整理所得，仅用于学习使用，如有侵权，请联系删除。

JavaScript

JS入门

JS书写格式

• 行内式

• 页内式

  • <script></script>
    

• 外链式

  • <script src=""></script>
    

JS中的注释

• 单行注释
  • //
• 多行注释
  • /* */
• 文档注释
  • /** * */

常用的输出方式

• 弹窗 阻断式
  • alert
• 控制台输出
  • console.log()
  • console.warn()
  • console.error()
• 在body中输出
  • document.write()
• 输入
  • prompt()
• 弹出提示框，一般与if判断语句结合使用
  • confirm()

JS基础语法

字面量、变量、常量

字面量

• 值
  • 1
  • a
  • abc

变量

• var 变量名称

  • var num;
    var name, age, score;
    

• 变量初始化

  • var num;
    num = 1;
    var age = 18;
    

• 变量的默认值

  • undefined

• 内存中的表现形式

  • 栈
    • 基本数据类型
  • 堆
    • 引用(复杂)数据类型

• 变量命名规则和规范

  • 字母、数字、下划线、$符号组成，不能以数字开头
  • 不能是关键字和保留字，例如if、for、break
  • 区分大小写
  • 见名知意
  • 驼峰命名法

常量

• const 常量名称

  • const PI = 3.14;
    const API = "www.baidu.com"
    

• 建议常量的命名全为大写

数据类型

概念

简单数据类型

• Number
• String
• Boolean
• Undefined
• Null

引用(复杂)数据类型

• Object

数据类型查看

• typeof操作符

  • console.log(typeof 100);
    var name = "djl";
    console.log(typeof name);
    

简单数据类型

Number

• 整数和小数
• 最大值
  • Number.MAX_VALUE
• 最小值
  • Number.MIN_VALUE
• 无穷大
  • Infinity
• 无穷小
  • -Infinity
• NaN
  • 非法数字

String

• 字符串由单引号或双引号括起

  • var str1 = "abc";
    var str2 = 'def';var
    

• 相同引号不能嵌套

• 引号必须成对出现

• 给变量加上引号,那么变量将变成一个字面量

Boolean

• true/false
• 任何非零数值都是true,只有0和NaN是false
• 任何非空字符串都是true,只有空字串是false
• 任何对象都是true,只有null和undefined是false

Undefined

• 表示变量未赋值
• undefined是Undefined的字面量

Null

• 表示一个空的对象
• undefined值实际是由null衍生而来的

引用(复杂)数据类型

Object

数据类型转换

转换成String类型

toString()

• 常规使用

  • var num = 123;
    var res1 = name.toString();
    

• 该方法不会影响到原变量,它会将转换的结果返回

• 数值类型调用toString()方法,可以携带一个参数,输出对应进制的值

  • var num = 10;
    console.log(num.toString(2));  //1010
    console.log(num.toString(8));  //12
    console.log(num.toString(10));  //10
    console.log(num.toString(16));  //a
    

• null和undefined没有toString方法,调用会报错

String()

• 常规使用

  • var num = 123;
    var res1 = String(num);
    

• null和undefined

  • var str1 = null;
    var str2 = undefined;
    var res1 = String(str1); //null
    var res2 = String(str2); //undefined
    

拼接字符串

• 任何数据和 + " "连接到一起都会转换为字符串

  • var s1 = 10010; //undefined,null,true
    var n1 = s1 + "";
    console.log(n1); //10010,undefined,null,true
    console.log(typeof(n1)); //string
    

转化成Number类型

字符串转数字

• 如果是纯数字的字符串,则直接将其转换为数字

  • var num = "123";
    var res1 = Number(num);
    console.log(res1); //123
    console.log(typeof(res1)); //number
    

• 如果字符串为空或者是一个全是空格的字符串,则转换为0

  • var num = "";
    var res1 = Number(num);
    console.log(res1); //0
    
    var num = "          ";
    var res1 = Number(num);
    console.log(res1); //0
    

• 如果字符串中有非数字内容,则转换为NaN

  • var num = "18djl";
    var res1 = Number(num);
    console.log(res1); //NaN
    

布尔转数字

• true转成1,false转成0

  • var num = true;
    var res1 = Number(num);
    console.log(res1); //1
    
    var num = false;
    var res1 = Number(num);
    console.log(res1); //0
    

null转数字

• null转数字为0

  • var num = null;
    var res1 = Number(num);
    console.log(res1); //0
    

undefined转数字

• undefined转数字为NaN

  • var num = undefined;
    var res1 = Number(num);
    console.log(res1); //NaN
    

parseInt()函数/parseFloat()函数

使用意义

• Number()函数中无论字符串中是否存在有效整数都会直接返回NaN
• 利用parseInt()和parseFloat()可以提取字符串中的有效整数和浮点数

parseInt

• 有两个参数,第一个参数是要转换的字符串,第二个参数是要转换的进制

• 从第一位有效数字开始,直到遇到无效数字

• 如果第一位不是有效数字,则直接返回NaN

  • var s1 = "10rem";
    var r1 = parseInt(s1);
    console.log(r1); //10
    
    var s1 = "200X300";
    var r1 = parseInt(s1);
    console.log(r1); //200
    
    var s1 = "djl18";
    var r1 = parseInt(s1);
    console.log(r1); //NaN
    
    var s1 = "";
    var r1 = parseInt(s1);
    console.log(r1); //NaN
    

parseFloat

• 不支持第二个参数,只能解析十进制数

• 如果解析的内容里只有整数,则只解析成整数

• 如果第一位不是有效数字,则直接返回NaN

• 从第一位有效数字开始,直到遇到无效数字

  • var s1 = "10.5rem";
    var r1 = parseInt(s1);
    console.log(r1); //10.5
    
    var s1 = "10.5.6.7.8rem";
    var r1 = parseInt(s1);
    console.log(r1); //10.5
    

对非string使用parseInt()或parseFloat(),会先将其转换为string类型然后再操作

var s1 = false;
var r1 = parseInt(s1);
console.log(r1); //NaN

+和-0运算符

添加+号,不会修改数据的正负性

var s1 = "12306";
var r1 = +s1;
console.log(r1); //12306
console.log(typeof(r1)); //number

var s1 = "12306";
var r1 = s1 - 0;
console.log(r1); //12306
console.log(typeof(r1)); //number

var s1 = "1.01";
var r1 = +s1;
console.log(r1); //1.01
console.log(typeof(r1)); //number

var s1 = "20rem";
var r1 = +s1;
console.log(r1); //NaN
console.log(typeof(r1)); //number

var s1 = true;
var r1 = +s1;
console.log(r1); //1
console.log(typeof(r1)); //number

var s1 = false;
var r1 = +s1;
console.log(r1); //0
console.log(typeof(r1)); //number

转换成Boolean类型

Boolean(),0 “” null undefined NaN 会转换成false 其他都会转换成true

console.log(Boolean(0)); //fase
console.log(Boolean("")); //fase
console.log(Boolean(null)); //fase
console.log(Boolean(undefined)); //fase
console.log(Boolean(NaN)); //fase
console.log(Boolean(-1)); //true

var str = "djl";
var num1 = 123;
var num2 = -1;
consloe.log(Boolean(str)); //true
consloe.log(Boolean(num1)); //true
consloe.log(Boolean(num2)); //true

运算符

分类

按功能划分

• 算术运算符
• 位运算符
• 关系运算符
• 逻辑运算符

按照操作个数划分

• 单目运算符
• 双目运算符
• 三目运算符
  • 问号表达式 a > b ? 1 : 0

结合性

• 左结合
  • x - y +z
• 右结合
  • x = y = z

加法运算符

• 格式： Number1 + Number2

  • var res = 1 + 1;
    console.log(res); //2
    
    var num1 = 10;
    var num2 = 20;
    var res2 = num1 + num2;
    console.log(res2); //30
    

• 非Number类型的值进行计算时，会将这些值转换为Number然后再计算

  • var res = true + 100;
    console.log(res); //101
    
    var res true + true;
    console.log(res); //2
    
    var res = null + 10;
    console.log(res); //10
    

• 任何值和NaN做运算都得NaN

  • var result = 1 + NaN;
    console.log(result); //NaN
    

• 任何的值和字符串做加法运算，都会先转换为字符串，然后再和字符串做拼接操作

  • var result = 10 + "123";
    console.log(result); //10123
    result = 1 + "true";
    console.log(result);
    

减法运算符

• 格式： Number1 - Number2
• 非Number类型的值进行计算时，会将这些值转换为Number然后再计算
• 任何值和NaN做运算都得NaN
• 字符串做减法也会转换为Number

乘法运算符

• 格式： Number1 * Number2
• 非Number类型的值进行计算时，会将这些值转换为Number然后再计算
• 任何值和NaN做运算都得NaN
• 字符串做乘法也会转换为Number

除法运算符

• 格式： Number1 / Number2
• 非Number类型的值进行计算时，会将这些值转换为Number然后再计算
• 任何值和NaN做运算都得NaN
• 字符串做除法也会转换为Number
• 分母为0，结果为Infinity

取余运算符

• 格式： Number1 % Number2

• 非Number类型的值进行计算时，会将这些值转换为Number然后再计算

• 任何值和NaN做运算都得NaN

• 字符串做求余也会转换为Number

• m % n求余，相当于m/n获取余数

  • var res = 10 % 4;
    console.log(res);  //2
    var num1 = 10;
    var num2 = 2.5;
    var res2 = num1 % num2;
    console.log(res2); //0
    

• n等于0，返回NaN

• m等于0，结果为0

• m>n，正常求余，如 8 % 3 = 2

• m<n,结果是m，如 2 % 4 = 2

一元运算符

正好

• +正好不会对数字产生任何影响
• 对于非Number类型的值，会将先转换为Number，然后再运算

负号

• -负号可以对数字进行负号的取反

赋值运算符

• 格式 ： 变量 = 数据
• 赋值运算符左边只能是变量
• 多个赋值运算符可以组成赋值表达式，赋值表达式具备右结合性
• 复合赋值运算符
  • +=
  • -=
  • *=
  • /=
  • %=

自增/自减运算运算符

• ++

---

逻辑运算符

• &&
• ||
• ！

关系运算符

• 对于非数值进行比较时，会将其转换为数值然后再比较

• 如果符号两侧的值都是字符串时，不会将其转换为数字进行比较，而会分别比较字符串中字符的Unicode编码

• null、undefined、NaN比较

  • console.log(null == 0); //false
    console.log(undefined == 0); //false
    console.log(NaN == NaN); //false
    
    var num = NaN;
    console.log(isNaN(num)); //true
    
    console.log(null == undefined); //true
    console.log(null == undefined); //false
    
    console.log("123" == 123); //true
    console.log("123" === 123); //false
    

逗号表达式

var a,b,c,d;
d = (a = 1 + 1, b = 3 * 4, c = 10 / 2);
consloe.log(d); //5

三目运算符

c = a > b ? 1 : 0

var num1,num2,num3,max;

num1 = +(prompt("请输入第一个数"));
num2 = +(prompt("请输入第二个数"));
num3 = +(prompt("请输入第三个数"));

max = num1 > num2 ? num1 : num2;
max = max > num3 ? max : num3;

console.log(max);

运算符的优先级

代码块

流程控制语句

结构

• 顺序结构
• 选择结构
• 循环结构

if

var age = 20;

if (age > 18){
    console.log("可以上网");
}
else {
    console.log("不可以上网");
}

switch

switch(3){
    case 1 : 
        console.log("壹"); break;
    case 2 :
        console.log("贰"); break;
    case 3 :
        console.log("叁"); break;
    default :
        console.log("其他数字");
}

• 在js中，switch语句中，既要判断数据的值，也要判断数据的类型
• case后面既可以是字面量也可以是变量

循环

while

• 条件不成立，循环体中的语句不会执行

var num = 0;
while (num < 300){
    num++;
    console.log("爱你" + num +"遍！\n");
}

do while

• 不论条件是否成立，循环体中的语句都会至少执行一次

var num = 1;
do{
	console.log(num);
    num++;
}
while (num < 10)

for

for (var i = 0; var <=300; var++)
    {
		console.log("爱你" + i + "遍\n");
    }

数组

使用Array构造函数

• var arr1 = new Array(); //空数组
  
  var arr2 = new Array(20); //长度为20的数组
  
  var arr3 = new Array("djl","lhw","wait");
  

使用数组字面量

• var arr1 = []; //空数组
  
  var arr2 = [];
  arr2.length = 20; //长度为20的数组
  
  var arr3 = ["djl","lhw","wait"];
  

• 练习

  • var numArr = [1,2,3,4,5];
    for(var i = 0; i <= numArr.length; i++){
        if(numArr[i] % 2 === 0)
            console.log(numArr[i]); //2,4
    }
    

函数

• function getSum(count){
      var sum = 0;
      for(var i = 0; i <= count; i++)
          {
              sum+=i;
  		}
      console.log(sum);
  }
  
  getSum(100);
  

常用的声明方式

• 函数声明方式

  • function sum(a, b){
        console.log(a + b); //410
    }
    sum(20, 390);
    

• 函数表达式声明方式

  • var sum = function (a, b){
        console.log(a + b); //410
    }
    sum(20, 390);
    

• 使用function构造函数

  • var sum = new Function("console.log(a + b);");
    sum(20, 390);
    

arguments

• function sum(num1, num2){
  	console.log(arguments.length); //5
      console.log(sum.length); //2
      console.log(arguments.length === sum.length); //false
  }
  sum(100,200,300,400,500);
  

• arguments.callee

  • 用来查看函数本身

• 使用

  • function sum(){
        var value = 0;
        for (var i =0; i <=arguments.length; i++){
            value += argunments[i];
        }
        console.log(value); //60
    }
    sum(10,20,30);
    

length

• 函数形参的个数

return

• 如果函数没有显式的return语句，那么函数有默认的返回值：undefined
• 如果函数使用return语句，那么跟在return后面的值，就成了函数的返回值
• 如果函数使用return语句，但是return后面没有任何值，那么函数的返回值也是：undefined

函数直接声明和函数表达式声明的区别

• 函数声明必须有函数名，而函数表达式的函数名可以省略
• JavaScript解析器首先会把当前作用域的函数声明提前到整个作用域的最 前面

匿名函数

• 绑定事件

document.onclik = function () {
	alert(1);
}

• 定时器

setInterval(function () {
    console.log("每秒爱你1遍!");
},1000)

• 立即执行函数(闭包)

(function (num1, num2) {
	console.log(num1, num2);
})(1,2)

函数是一种数据类型

function fn(){};
console.log(typeof fn); //function
console.log(typeof fn()); //undefined

• 函数，属于object

回调函数

• 在函数里调用另外的函数

  • function add(num1, num2) {
        return num1 + num2;
    }
    function cal (num1, num2, fnc) {
    	return fnc(num1, num2);
    }
    var res = cal(20, 50, add);
    console.log(res); //70
    

变量的作用域

作用域

• 变量可以起作用的范围
• 在js中函数是一个可以创建作用域的对象
• script标签构成的全局作用域

全局变量

• 在任何地方都可以访问的变量就是全局变量；对应全局作用域；

局部变量

• 只在固定的代码片段内可以访问的变量，最常见的例如函数内部，对应局部作用域(函数作用域)
• 局部变量，先在函数内部的作用域找变量name，若果找到则使用，如果找不到去父级作用域找name变量

注意

• 不适用var生命的变量是全局变量，不推荐使用
• 变量推出作用域之后会销毁，全局变量关掉网页或浏览器才会销毁

块级作用域

• 在js中没有块级作用域

作用域链

• 只有函数可以制造作用于结构
• 只要是代码，就至少有一个作用域，即全局变量

var color = "yellow";
function getColor() {
    var anotherColor = "red";
    
    function swapColor() {
        var tmpColor = color; //yellow
        color = anotherColor; //red
        anotherColor = tmpColor; //yellow
    }
    swapColor();
}

getColor();
console.log(color);

预解析

概念

• JS代码的执行是由浏览器中的JS解析器来执行的
• JS解析器在执行JS代码的时候，分为两个过程：预解析过程和代码执行过程

预解析过程

• 把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值
• 把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用
• 先提升var,再提升function

var num1 = 10;
function fn1() {
    console.log(num1); //undefined
    var num1 = 20;
}
fn1();

变量提升

变量提升

• 定义变量的时候，变量的声明会被提升到作用域的最上面，变量的赋值不会提升

函数提升

• JS解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

对象(object)

JS中的对象

• JS中的对象是无序属性的集合，其属性可以包含基本值、对象或函数
• 对象就是一组没有顺序的值，由一组组键值对构成
• 事物的特征在对象中用属性来表示
• 事物的行为在对象中用方法来表示

JS中对象的分类

• 内建对象
  • 由ES标准中定义的对象，在任何的ES的实现中都可以使用
  • 比如：String Number Boolean Function Object Math
• 宿主对象
  • 由JS的运行环境提供的对象，现在主要指由浏览器提供的对象
  • 比如：BOM对象、DOM对象
• 自定义对象
  • 我们自己创建的对象
  • 比如：Person ,Dog…

常见创建对象方式

对象字面量

var lhw = {
	name:"李贺文",
    age:"20",
    sex:"女",
    desc:function(){
        console.log("这是一个特殊的人！");
    }
};

console.log(lhw);
console.log(typeof lhw); //object

new Object()创建对象

var lhw = new Object();
lhw.name = "李贺文";
lhw.age = 20;
lhw.sex = "sex";

工厂函数创建对象

function createPerson(name, age, sex){
    var p =new Object();
    p.name = name;
    p.age = age;
    p.sex = sex;
    p.desc = function(){
        console.log("很特殊！");
    };
    return p;
};

var lhw = createPerson("李贺文", 19, "女")；
var yd = createPerson("XXX", 20, "女")；

console.log(lhw);
console.log( typeof lhw); //object

console.log(yd);
console.log(typeof yd); //object

自定义构造函数

function Person(name, age, sex){
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.desc = function(){
        console.log("等啊等");
    }
    //return this；
}

var lhw = new Person("李贺文", 19, "女");
var yd= new Person("XXX", 20, "女");

console.log(lhw);
console.log(typeof lhw); //object

console.log(yd);
console.log(typeof yd); //object

终极写法

function Person(option){
    this._init(option)
}

Person.prototype = {
    _init : function(option){
        this.name = option.name;
        this.age = option.age;
    },
    
    eat : function(someThing){
        console.log(this.name + "吃" + someThing);
    },
    
    run : function(someWhere){
        console.log(this.name + "跑" + someWhere);
    }
}

var djl = new Person({name : "杜金亮", age : 20});

属性和方法

属性

• 如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征

方法

• 如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是一个动词，描述事物的行为和功能

new关键字

概念

• new关键字一般和构造函数一起配合使用
• 构造函数
  • 构造函数，是一种特殊的函数
  • 构造函数用于创建一类对象，首字母要大写
  • 构造函数要和new一起使用才有意义

new做了哪些事

1. new先在内存中创建一个新的空对象
2. new会让this指向这个新的对象
3. 执行构造函数，给这个新对象加属性和方法
4. 返回这个新对象
   

this关键字

概念

• this是一个指针

特点

• 普通函数执行时，内部this指向全局对象window

  • var str = "djl";
    function func(){
        console.log(this); //window
        console,.log(this.str); //djl
    }
    func();
    

• 函数在定义的时候this是不确定的，只有在调用的时候才可以确定

• 如果函数作为一个对象的方法，被该对象所调用，那么函数内的this则指向该对象

  • var obj = {
        name: "djl";
        function func(){
            console.log(this); //obj(对象)
            console.log(this.name); //djl
        }
    };
    obj.func();
    

• 构造函数中的this是一个隐式对象，类似一个初始化模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

• function Func(){
      this.name = "djl";
      this.age = 20;
      console.log(this); //Func(对象)
  }
  new Func();
  

对象使用

遍历对象

• for…in…

var lhw = {
	name:"李贺文",
    age:"20",
    sex:"女",
    desc:function(){
        console.log("真的很特殊！");
    }
};

for(var key in lhw){
	console.log(key + ":" +lhw[key]);
}

删除对象属性

delete

var lhw = {
	name:"李贺文",
    age:"20",
    sex:"女",
    desc:function(){
        console.log("很特殊的哦！");
    }
};

delete lhw.age;

增加对象的属性

lhw.friends = ["djl","lx"];

改变对象的属性

lhw.age = 19;

基本类型和引用类型在堆栈中表示

基本数据类型

• 基本类型又叫值类型，在存储时，变量中存储的值是本身，因此叫做值类型
• String Number Boolean Null Undefined

引用数据类型

• 复杂数据类型，在存储时，变量中存储的仅仅是地址(引用)，因此叫做引用数据类型
• Object

区别

• JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响其他的变量
• 对象是保存到堆内存中的，每创建好一个对象，就会在堆内存中开辟出一个新的空间，而变量保存的是对象的内存地址(对象的引用)，如果两个变量保存的是同一个对象引用，当一个通过变量修改属性时，另一个也会受到影响

内置对象

概念

• JavaScript提供多个内置对象：String/Math/Array/Date…

Array对象

• 检测一个对象是否是数组

  • instanceof

    • var arr = ["张三", "李四"];
      console.log(arr instanceof Array); //true
      

  • isArray()

    • var arr = ["张三", "李四"];
      console.log(Array.isArray(arr)); //true
      

  • toString()/valueOf()

    • toString()

      • 把数组转换成字符串，逗号分隔每一项

    • valueOf()

      • 返回数组对象本身

      • var arr = ["张三", "李四", "王五"];
        console.log(arr.toString()); //张三，李四，王五
        console.log(arr.valueOf()); //数组对象本身
        console.log(arr.valueOf() === arr); //true
        

• 常用方法

  • join(separator)

    • 将数组的元素组起一个字符串，以separator为分隔符，省略的话则默认用逗号为分隔符，该方法只接受一个参数：即分隔符。

    • var arr = ["张三", "李四", "王五"]；
      var str = arr.join("---");
      console.log(str); //张三---李四---王五
      

  • push()和pop()

    • push() 接受任意数量的参数，把他们逐个添加到数组末尾，并返回修改后数组的长度

      • var arr = ["张三"， "李四", "王五"];
        console.log(arr.push("赵六")); //4
        console.log(arr); //["张三"， "李四", "王五", "赵六"]
        

    • pop() 数组末尾移除最后一项，减少数组的length值，然后返回移除的值

      • var arr = ["张三"， "李四", "王五"];
        console.log(arr.pop()); //王五
        console.log(arr); //["张三"， "李四"]
        

  • shift()和unshift()

    • shift() 删除原数组第一项，并返回删除元素的值，如果数组为空，则返回undefined

      • var arr = ["张三"， "李四", "王五"];
        console.log(arr.shift()); //张三
        console.log(arr); //[李四", "王五"]
        

    • unshift() 将参数添加到原数组开头，并返回数组的长度

      • var arr = ["张三"， "李四", "王五"];
        console.log(arr.unshift("赵六")); //4
        console.log(arr); //["赵六", 张三"， "李四", "王五"]
        

  • reverse()

    • 反转数组顺序

      • var arr = [1,3,5,7];
        console.log(arr.reverse()); //[7,5,3,1]
        console.log(arr); //[7,5,3,1] 原数组发生改变
        

  • concat()

    • 将参数添加到原数组中，这个方法会先copy一个当前数组，然后将接收到的参数添加到这个copy数组的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，他只是复制当前数组并返回。

      • var arr1 = [1,2,3];
        var arr2 = [4,5,6];
        var arr3 = [7];
        
        var newArr = arr1.concat(arr2,arr3,8,9);
        console.log(newArr); //1,2,3,4,5,6,7,8,9
        

  • indexOf()和 lastIndexOf()

    • var arr = [2,4,6,8,8,6,4,2];
      console.log(arr.indexOf(4)); //1
      console.log(arr.indexOf(4,2)); //6
      console.log(arr.lastIndexOf(2)); //7
      console.log(arr.lastIndexOf(2,1)); //0
      

  • forEach()

    • 使用

      • forEach()方法需要一个函数作为参数，该函数，由我们创建但是不由我们调用的，称为回调函数

      • 数组中有几个元素，函数就会执行几次，每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，我们可以来定义形参，来读取这些内容

      • 浏览器会在回调函数中，传第三个参数

        • 第一个参数，就是当前正在遍历的元素
        • 第二个参数，就是当前正在遍历的元素的索引
        • 第三个参数，就是正在遍历的数组

      • var = ["张三", "李四", "王五"];
        arr.forEach(function (value,index,array)) {
                    console.log(value);	//每个元素的值
        			console.log(index);	//每个元素的下标
        			console.log(array); //数组本身
                    }
        

  • sort()

    • 使用

      • sort()方法用于对数组的元素进行排序，默认是按照字符编码的顺序进行排序

        • var arr = ["Tim", "Andy", "John", "Kobe", "James"];
          console.log(arr); //"Andy","James","John","Kobe","Tim"
          

      • 如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字，比较函数应该具有两个参数 a 和 b ，其返回值如下

        • 若 a 小于 b ,在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值

        • 若 a 等于 b, 则返回 0

        • 若 a 大于 b,则返回一个大于 0 的值

        • function sortNumber(a, b) {
              return a - b;
          }
          
          var arr = [5,20,30,15,65];
          console.log(arr.sort(sortNumber)); //5,15,20,30,65
          

  • map()

    • 使用

      • 映射（——对应），[].map()基本用法跟forEach方法类似：array.map(callback,[thisObject]);

      • 但是callback需要return值(如果没有，就会返回undefined)

        • var arr = [10, 20, 5, 1000, 50];
          var newArray = arr.map(function(value, index, array){
              return value * 2;
          };
          console.log(newArray); //[20,40,10,2000,100]
          

  • filter

    • 使用

      • 过滤筛选

      • callback在这里担任的是过滤器的角色，当元素符合条件，过滤器就返回true，而filter则会返回所有符合过滤条件的元素

      • var arr = [1, 2, 3, 4, 5, 6, 7, 8];
        var newArray = arr.filter(function(value, index, array){
           return value %2 === 0; 
        });
        console.log(newArray); //[2, 4, 6, 8]
        

  • every(且)

    • 使用

      • every(callback,[thisObject])当数组中每一个元素在callback上都为真时就返回true

      • var arr = [11,2,3,4,5];
        var result = arr.every(function(value, index){
           return value > 1; 
        });
        console.log(result); //true
        

  • some(或)

    • 使用

      • some(callback,[thisObject])当数组中只要有一个元素在callback上为真时就返回true

      • var arr = [11,2,3,4,5];
        var result = arr.some(function(value, index){
           return value > 4; 
        });
        console.log(result); //false
        

Math对象

• 概念

  • Math对象不是构造函数，它具有数学常数和函数的属性和方法，都是以静态成员的方式提供

  • 常用方法

    • Math.PI //yuanzhoulv

    • Math.random() //生成随机数

    • Math.floor()/Math.ceil() //向下取整/向上取整

    • Math.round() //取整，四舍五入

    • Math.abs() //绝对值

    • Math.max()/Math.min() //求最大值/最小值

    • Math.sin()/Math.cos() //正弦/余弦

    • Math.power()/Math.sqrt() //求指数次幂/求平方根

    • console.log(Math.ceil(Math.PI));  //4
      

    • console.log(Math.random()); //默认是0-1的随机数
      console.log(Math.random()*10); //0-10
      
      // 公式  :  Math.random * (y - x) + x
      console.log(Math.random() * (8 - 3) + 3); //3-8
      

• 静态成员和实例成员

  • 静态成员

    • var LKToo1 = {
          height = 500,
          doIT : function (){
              
          }
      };
      console.log(LKToo1.height);
      

  • 实例成员

    • function Dog (name, age) {
      	this.name=name;
      	this.age=age;
      }
      var Dog = new Dog("xx", 19);
      console.log(Dog.name);
      

String对象

• 概念

  • 字符串所有的方法,都不会修改字符串本身(字符串是不可变的),操作完成会返回一个新的字符串
  • 性能问题
    • 拼接大量字符串的时候,会有性能问题
      • 服务器渲染
      • 模板引擎

• 常用方法

  • 获取字符串中字符的个数

    • str.length

  • 字符方法

    • charAt() //获取指定位置处字符

      • var str = "dujinliang";
        console.log(str.charAt(2)); //j
        

    • charCodeAt() //获取指定位置处字符的ASCII码

      • var str = "dujinliang";
        console.log(str.charCodeAt(0)); //106
        

    • 下标获取

      • var str = "dujinliang";
        console.log(str[2]); //j
        

  • 字符串操作方法

    • concat() //拼接字符串,等效于+,+更常用

    • slice() //从start位置开始,截取到end位置,end取不到

    • substring() //从start位置开始,截取到end位置,end取不到

    • substr() //从start位置开始,截取length个字符

      • var str1 = "dujinliang";
        var newStr1 = str1.substr(2,5);
        console.log(newStr1); //"jinl"
        
        var str2 = "baidu.com";
        var str3 = "baidu.cn";
        var str4 = "baidu.html";
        var newStr2 = str2.substr(str2.lastIndexOf("."));
        var newStr2 = str3.substr(str3.lastIndexOf("."));
        var newStr2 = str4.substr(str4.lastIndexOf("."));
        console.log(newStr2); //com
        console.log(newStr3); //cn
        console.log(newStr4); //html
        

  • 位置方法

    • indexOf() //返回指定内容在元字符串中的位置
    • lastIndexOf() //从后往前找,只找第一个匹配的

  • 去除空白

    • trim() //只能去除字符串前后的空白

    • var str = "    abc    ";
      console.log(str.trim());  //"abc"
      

  • 大小写转换法

    • toUpperCase() //转换大写
    • toLowerCase() //转换小写

  • 其他

    • search()

    • var str = "abcde";
      var n = str.search("c");
      console.log(n); //2
      

    • split() //分割

  • function getUrlParams(url){
        var index = url.indexOf("?")+1;
        var params = url.substr(index);
        var ParamsArr = params.split("&");
        
        var obj = {};
        paramsArr.forEach(function (value, index1, array){
            var tempArr = value.split("=");
            var key = tempArr[0];
            obj[key] = tempArr[1];
        });
        return obj;
    }
    
    var url = "http://www.itlike.com/user?name=xl&pwd=lovexl&sex=女&age=20";
    var obj = getUrlParams(url);
    console.log(obj); //{name="xl", pwd="lovexl", age="20"}
    console.log(obj.sex); 女
    

正则表达式

概念

• 正则表通常被用来检索、替换那些符合某个模式（规则）的文本
• 正则表达式是对字符串操作的一种逻辑公式，用事先定义好的一些特殊字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑

作用

• 匹配
  • 判断给定的字符串是否符合正则表达式的过滤逻辑
• 提取
  • 可以通过正则表达式，从字符串中获取需要的特定部分
• 替换
  • 正则有很大的字符串替换能力

特点

• 灵活性，逻辑性和功能性非常强
• 运用广，比如：爬虫
• 对于刚接触的人来说，比较绕、晦涩、难懂

组成

• 普通字符
  • “dujinliang” “123”
• 元字符
  • 正则表达式中有特殊意义的字符
    • \d 匹配数字
    • \w 匹配字母或数字或下划线
• 元字符
  • 在线测试

    • https：//c.runoob.com/front-end/854

    • 常用元字符串

      • 

    • 限定符

      • 

    • 其他

      • 

常用案例

• 单字符匹配
  • . 任意一个字符除\n
  • \d 数字0-9
  • \D 非数字
  • \s 空白
    • 空格
    • \t
    • \n
    • \r
  • \S 非空白
  • \w 单词字符
    • a-z
    • A-Z
    • 0-9
  • \W 非单词
  • []
    • []中列举的字符
      • ^ 取反
      • - 范围
    • 以上都可以使用[]等价
• 数量规则
  • * 匹配前一个字符出现任意次 可有可无
  • + 匹配前一个字符出现一次及以上 至少一次
  • ? 匹配前一个字符出现零次或者一次
  • {m} 匹配前一个字符出现m次
  • {m,} 匹配前一个字符至少出现m次
  • {m,n} 匹配前一个字符出现m-n次
• 处理原始字符串
  • “\\nabc”
• 匹配分组
  • | 匹配左右任意一个表达式
  • () 将括号中的规则作为一个分组

在JS中的使用

• 创建正则对象

var reg = new RegExp('ab[a-z]','i');
var str = 'ABC';
console.log(reg.test(str)); //true

var reg = /ab[a-z]/i;
var str = 'ABC';
console.log(reg.test(str)); //true

• 与正则表达式相关的方法

  • 针对RegExp对象
    • test() 匹配
    • exec() 提取 提取一个内容(单个)
  • 针对String对象
    • match() 提取 可以提取多个内容
    • replace() 替换
    • split() 切割
    • search() 搜索

• 匹配

  • 匹配日期

    • var dateStr = '2020-05-01';
      var dateReg = /^\d{4}-\d{1,2}-\d{1,2}$/;
      console.log(dateReg.test(dateStr)); //true
      

  • 匹配手机

    • var phoneStr = '15530372016';
      var phoneReg = /^13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9]\d{8}$/;
      console.log(phoneReg.test(phoneStr)); //true
      

• 提取

  • qq提取(exec)

    • var qqStr = 'dujinliang : 1162378922, xuluo : 2040002375';
      var qqReg = /\d+/g;
      do{
          var content = qqReg.exec(qqStr);
          if(content){
              console.log(content[0]);  //1162378922  //2040002375
          }
      }while(content)
      

  • qq提取(match)

    • var qqStr = 'dujinliang : 1162378922, xuluo : 2040002375';
      var qqReg = /\d+/g;
      var qqArr = qqStr.match(qqReg);
      console.log(qqArr); //{'116237822','2040002375'};
      

  • 分组提取

    • 正则表达式中的()作为分组来使用,获取分组匹配到的结果用Regex.$1$2$3…来获取

    • 示例

      • var dateStr = '2020-05-01';
        var dateReg = /^(\d{4})-(\d{1,2})-(\d{1,2})$/;
        if(dateReg.test(dateStr)){
            console.log(RegExp.$1); //2020
            console.log(RegExp.$2); //05
            console.log(RegExp.$3); //01
        }
        

• 替换

  • 替换所有空白字符串

    • var str = '             du      jin liang   is       waiting       ';
      console.log(str); //             du      jin liang   is       waiting       
      str = str.replace(/\s/g,'*');
      console.log(str); //*************du******jin*liang***is********waiting******
      

  • 替换所有开头的空格

    • var str = '             du      jin liang   is       waiting       ';
      console.log(str); //             du      jin liang   is       waiting       
      str = str.replace(/^\s*/g,'*');
      console.log(str); //*du      jin liang   is       waiting       
      

  • 替换所有结尾的空格

    • var str = '             du      jin liang   is       waiting       ';
      console.log(str); //             du      jin liang   is       waiting       
      str = str.replace(/\s*$/g,'*');
      console.log(str); //             du      jin liang   is       waiting*
      

• 分割

  • var dateStr = '2020-05-01';
    console.log(dateStr.split('-')); //{"2020", "05", "01"}
    

• 贪婪和非贪婪模式

  • 概念

    • 贪婪：尽可能多的匹配
    • 非贪婪：尽可能少的匹配

  • 语法

    • 将?紧跟在任何量词*、 + 、 ？或{}的后面，将会使量词变为非贪婪的（匹配尽量少的字符），和缺省使用的贪婪模式（匹配尽可能多的字符）正好相反

  • 案例

    • 贪婪

      • var str = 'aaaabbbbbbaaaa';
        var res = str.match(/a.*b/);
        console.log(res[0); //aaaabbbbbb
        

    • 非贪婪

      • var str = 'aaaabbbbbbaaaa';
        var res = str.match(/a.*?b/);
        console.log(res[0]); //aaaab
        

特效篇

Web APIs

Javascript的组成

BOM - 浏览器对象模型

• 一套操作浏览器功能的API
• 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

• 一套操作页面元素的API
• DOM可以把HTML看作是文档树，通过DOM提供的API可以对树上的节点进行操作

DOM

基本概念

• 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可拓展标记语言的标准编辑接口
• 它是一种与平台和语言无关的应用程序接口，它可以动态地访问程序和脚本，更新其内容、结构和文档的风格

DOM又称为文档树模型

• 图示

  • 

• 概念

  • 文档
    • 一个网页可以称为文档
  • 节点
    • 网页中的所有内容都是节点（标签、属性、文本、注释等）
  • 元素
    • 网页中的标签
  • 属性
    • 标签的属性

• DOM常用操作

  • 获取文档元素
  • 对文档元素进行增删改查操作
  • 事件操作

window和document

• window

  • 所有的浏览器都支持window对象，它支持浏览器窗口
  • 所有的js全局对象、函数以及变量都能自动成为window对象的成员
  • 全局变量是window对象的属性，全局函数是window对象的方法

• document

  • document也是window对象的属性之一

  • document对象是documentHTML的一个实例，也是window对象的一个属性，因此可以将document对象作为一个全局对象来访问

  • 常用属性

    • console.log(document);
      console.log(document.childNodes);
      console.log(document.head);
      console.log(document.body);
      document.title = "测试";
      console.log(document.title);
      

事件

• 基本概念

  • 事件
    • 触发-响应机制
    • 用户和浏览器之间的交互行为，比如：点击按钮；鼠标进入/离开、双击…
  • 时间三要素
    • 事件源
      • 触发（被）事件的元素
    • 事件名称
      • click 点击事件
    • 事件处理程序
      • 事件触发后要执行的代码（函数形式）

• 使用方式

  • 我们可以在事件对应的属性中实现一些js代码，这样当事件被触发时，这些代码将会执行

    • 比如：按钮点击

      • 方式一

        • 结构和行为耦合，不方便维护，不推荐使用

        • <button id="btn" onmousemove="alert('你干嘛摸我？');">按钮</button>
          

      • 方式二

        • 为按钮的对应事件绑定处理函数的形式来响应事件

        • <button id="btn">按钮</button>
          <script>
          var btn = document.getElementById("btn");
          btn.onclick = function(ev){
          	alert("你再点击一下试试！");
          }
          </script>
          

文档加载过程

• 存在问题

  • 浏览器在加载一个页面时，是按照自上向下的顺序加载的
  • 读取到一行就运行一行，如果将script标签写到head内部，在代码执行时，页面还没有加载，页面中的DOM对象也没有加载
  • 会导致在js中无法获取到页面中的DOM对象

• 解决方案

  • onload事件
  • 把script标签放在boady尾部
  • 建议：两者综合

• 补充讲解

  • onload

    • window.onload = function() {
          //当页面加载完成执行
          //当页面完全加载所有内容 （包括图像、脚本文件、CSS文件等）执行
      }
      

  • onunload

    • window.onunload = function() {
          //当用户推出页面时执行
      }
      

文档页面元素获取

• 根据id获取元素

  • 注意

    • 获取到的数据类型 HTMLDivElement，对象都是有类型的
    • 由于id名具有唯一性，部分浏览器支持直接使用id访问元素，但不是标准方式，不推荐使用

  • <button id="btn">按钮</button>
    <script>
    var btn1 = document.getElementById("btn");
    console.log(btn1); //<button id="btn">按钮</button>
    </script>
    

• 根据标签名获取元素

  • <button class="btn">按钮</button>
    <script>
    var btn1 = document.getElementByTagName("button");
    var btn2 = document.getElementByTagName("button")[0];
    console.log(btn1); //HTMLCollection [button#btn.btn, btn: button#btn.btn] //集合(数组) //<button class="btn">按钮</button>
    console.log(btn2);
    </script>
    

• 根据name获取元素

  • <button name="btn">按钮</button>
    <script>
    var btn1 = document.getElementByName("btn");
    var btn2 = document.getElementByName("btn")[0];
    console.log(btn1); //HTMLCollection [button#btn.btn, btn: button#btn.btn] //集合(数组) //<button name="btn">按钮</button>
    console.log(btn2);
    </script>
    

• 根据类名获取元素

  • <button class="btn">按钮</button>
    <script>
    var btn1 = document.getElementByClassName("btn");
    var btn2 = document.getElementByClassName("btn")[0];
    console.log(btn1); //HTMLCollection [button#btn.btn, btn: button#btn.btn] //集合(数组) //<button class="btn">按钮</button>
    console.log(btn2);
    </script>
    

• 根据选择器获取元素

  • <button id="btn" class="btn">按钮</button>
    <script>
    var btn1 = document.querySelector("button");
    var btn2 = document.querySelector(".btn");
    var btn3 = document.querySelector("#btn");
    var btn4 = document.querySelectorAll("#btn");
    var btn5 = document.querySelectotAll("#btn")[0];
    console.log(btn1); //<button id="btn" class="btn">按钮</button>
    console.log(btn2); //<button id="btn" class="btn">按钮</button>
    console.log(btn3); //<button id="btn" class="btn">按钮</button>
    console.log(btn4); //NodeList [button#btn.btn]
    console.log(btn5); //<button id="btn" class="btn">按钮</button>
    </script>
    

节点之间关系

• 获取父节点

  • parentNode

  • 案例

    •     <div id="box">
              <button class="btn">按钮</button>
              <span id="span">
                  <a href="#">百度一下</a>
              </span>
              <p class="bd">我是段落</p>
              <div>哈哈哈</div>
          </div>
      <script>
          //获取父节点
          window.onload = function(ev) {
              var a = document.getElementsByTagName('a')[0];
              console.log(a.parentNode); //<span id="span">...</span>
          }
      </script>
      

• 上一个兄弟节点

  • <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#">百度一下</a>
        </span>
        <p class="bd">我是段落</p>
        <div>哈哈哈</div>
    </div>
    <script>
        //获取兄弟节点
        window.onload = function(ev) {
            var a = document.getElementById("span");
            //上一个
            var preEle = a.previousElementSibling || a.previousSibling;
            console.log(preEle);
        }
    </script>
    

• 下一个兄弟节点

  • <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#">百度一下</a>
        </span>
        <p class="bd">我是段落</p>
        <div>哈哈哈</div>
    </div>
    <script>
        //获取兄弟节点
        window.onload = function(ev) {
            var a = document.getElementById("span");
            //下一个
            var nextEle = a.nextElementSibling || a.nextSibling;
            console.log(nextEle);
        }
    </script>
    

• 获取标签中第一个子节点

  • <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#">百度一下</a>
        </span>
        <p class="bd">我是段落</p>
        <div>哈哈哈</div>
    </div>
    <script>
        var box = document.getElementById("box");
        console.log(box.firstElementChild || box.firstChild); //<button class="btn">按钮</button>
    </script>
    

• 获取标签中最后一个子节点

  • <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#">百度一下</a>
        </span>
        <p class="bd">我是段落</p>
        <div>哈哈哈</div>
    </div>
    <script>
        var box = document.getElementById("box");
        console.log(box.lastElementChild || box.lastChild); //<div>哈哈哈</div>
    </script>
    

• 获取所有元素节点

  • nodeType

    • 每个节点都有一个nodeType属性，用于表明结点的类型，节点类型由Node类型中定义12个常量表示
    • 

  • <div id="box">
        <button class="btn">按钮</button>
        <span id="span">
            <a href="#">百度一下</a>
        </span>
        <p class="bd">我是段落</p>
        <div>哈哈哈</div>
    </div>
    <script>
        var box = document.getElementById("box");
        console.log(box.childNodes); //NodeList(9)
        console.log(box.children); //HTMLCollection(4)
    </script>
    

  • 从所有节点中筛选元素节点

    • <div id="box">
          <button class="btn">按钮</button>
      	<!--  -->
          <span id="span">
              <a href="#">百度一下</a>
      	</span>
      	<!--  -->
          <p class="bd">我是段落</p>
      	<div>哈哈哈</div>
      </div>
      <script>
          window.onload = function(ev) {
              //获取标签
              var box = document.getElementById("box");
              //获取标签内部的所有节点
              var allNodeLists = box.childNodes;
              //过滤元素节点
              var newListArr = [];
              allNodeLists.forEach(function(value, key, parent){
                  if(value.nodeType === 1){
                      newListArr.push(value);
                  }
              });
              console.log(newListArr);
          }
      </script>
      

• 获取任意兄弟节点

  • <div id="box">
        <button class="btn">按钮</button>
    	<!--  -->
        <span id="span">
            <a href="#">百度一下</a>
    	</span>
    	<!--  -->
        <p class="bd">我是段落</p>
    	<div>哈哈哈</div>
    </div>
    <script>
        var btn = document.getElementsByClassName("btn")[0];
        console.log(btn.parentNode.children[1]);
    </script>
    

节点操作

• CRUD增删改查

  • 创建节点

    • <div class="box">
          <p id="word">我是段落</p>
      	<button id="btn">按钮</button>
      </div>
      
      <script>
          window.onload = function(ev) {
              //CRUD操作
              var box = document.getElementsByClassName("box")[0];
      
              //1.创建节点
              var img = document.createElement("img");
              img.src = "../src/timg-1.jpg";
              //追加
              // box.appendChild(img);
      
              //插入
              var btn = document.getElementsByTagName("button")[0];
              box.insertBefore(img, btn);
          }
      </script>
      

  • 删除节点

    • <div class="box">
          <p id="word">我是段落</p>
      	<button id="btn">按钮</button>
      </div>
      
      <script>
          window.onload = function(ev) {
              //CRUD操作
              var box = document.getElementsByClassName("box")[0];
              
              var btn = document.getElementsByTagName("button")[0];
              //btn.remove();
              box.removeChild(btn);
          }
      </script>
      

  • 克隆节点

    • <div class="box">
          <p id="word">我是段落</p>
      	<button id="btn">按钮</button>
      </div>
      
      // var newBox = box.cloneNode();  //浅克隆
      // console.log(newBox);
      
      var newBox = box.cloneNode(true); //深克隆
      console.log(newBox);
      
      document.body.appendChild(newBox);
      

  • 实例

    • <div class="box">
          <p class="word">我是段落</p>
      	<button class="btn">按钮</button>
      	<img>
      </div>
      <script>
          window.onload = function(ev) {
      		//实例
              //获取节点
              var img = document.getElementsByTagName("img")[0];
              console.log(img);
              //获取标签属性
              // console.log(img.getAttribute("src"));
              // console.log(img.getAttribute("alt"));
              // console.log(img.alt);
              // console.log(img.src);
      
              //设置属性
              img.setAttribute("src", "../src/timg-1.jpg");
              img.setAttribute("alt", "刀剑神域");
              img.setAttribute("dujinliang", "杜金亮");
      
              //删除属性
              img.removeAttribute("dujinliang");
          }
      </script>
      

• 节点属性（节点、属性）

  • 获取： getAttribute(名称)
  • 设置: getAttribute(名称，值)
  • 删除： removeAttribute(名称)

Date

• 概念
  • Date对象基于1970年1月1日（世界标准时间）起的毫秒数
• 基本属性
  • getTime()
    • 返回毫秒数和valueOf（）结果一样
  • getMilliseconds()
  • getSeconds()
    • 返回0-59
  • getMinutes()
    • 返回0-59
  • getHours()
    • 返回0-23
  • getDay()
    • 返回星期几 0周日 6周末
  • getDate()
    • 返回当前月的第几天
  • getMonth()
    • 返回月份，从0开始
  • getFullYear()
    • 返回四位的年份 如2020

定时器

• 需求

  • JS的程序的执行速度是非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用
  • 某一段程序需要在延迟多少时间后执行，可以使用定时器调用

• 使用

  • 循环执行

    • setInterval
      

  • 定时执行

    • setTimeOut
      

三大家族

• offSet家族

  • 概念

    • offSet 自己的，用于获取元素尺寸
    • 

  • offsetWidth和offsetHeight

    • 获取对象自身的高度和宽度，包括内容、边框、和内边距，即：offsetWidth = width + padding + border

  • offsetLeft和offsetTop

    • 距离一个有定位的盒子左边和上边的距离
    • 注意
      • 父级盒子必须要有定位，如果没有，则最终以body为准！
      • offsetLeft和offsetTop从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离

  • offsetParent

    • 返回当前对象的父级（带有定位盒子），可能是父亲，也能是爷爷

  • offsetXXX和style.XXX的区别

    • style.left 只能获取行内的， 而offsetLeft则可以获取到所有的
    • offsetLeft可以返回没有定位盒子距离左侧的位置。而style.left不可以，其只能返回有定位盒子的位置的left
    • offsetLeft返回的是数字，而styleleft返回的是字符串,除了数字外还带有单位:px
    • offsetLeft是只读的,而style.left是可读写的
    • 如果没有给当前元素指定过top样式,则style.top返回的是空字符串

• JS的事件对象

  • 概念

    • 在之前已经接触过很多事件，比如：onclick、ondbclick、onfocus、onmousedown、onmousemove…

    • 	<button id="btn"></button>
          <script>
              var btn = document.getElementById('btn');
        
              btn.addEventListener('click', function (ev) {  //事件对象 event，当前事件的对象
        
              })
          </script>
      

  • 注意

    • 只要触发DOM上的某个事件时，会产生一个事件对象event，这个对象包含着所有与事件有关的信息
    • event常见属性
      • 

• 严格模式和怪异模式

  • 概念
    • 早期的浏览器Netscape 4和css进行解析时，并未遵守W3C标准，这时的解析方式就被我们称之为quirks mode（怪异模式）
    • 但随着W3C的标准越来越重要，众多的浏览器开始依照，W3C标准解析CSS，仿照W3C标准解析CSS的模式，我们叫做srict mode（严格模式）
  • 使用
    • document.compartMode
    • 值为BackCompat，则是怪异模式
    • 值为CSS1Compat，则是严格模式

• scroll家族

  • 概念
    • 网页正文全文宽
      • document.body.scrollWidth
    • 网页正文全文高
      • document.body.scrollHeight
    • 网页被卷去的高
      • document.body.scrollTop
    • 网页被卷去的左
      • document.body.scrollLeft
    • 注意
      • 在实际开发中使用较多的就是scrollTop
  • 适配
    • ie9和最新浏览器
      • window.pageXOffset; (scrollLeft)
      • window.pageYOffset; (scrollTop)
    • Firefox浏览器和其他浏览器
      • document.documentElement.scrollTop
    • Chrome浏览器和没有声明DTD
      • document.body.scrollTop
    • 兼容写法
      • var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
      • var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
  • scrollTo（x，y）
    • 把内容滚动到指定位置
    • 格式：scrollTo（xpos，ypos）
      • xpos必需；
        • 需要在窗口文档显示区左上角的文档的x坐标
      • ypos必需；
        • 需要在窗口文档显示区左上角的文档的y坐标

• JSON

  • 概念
    • JSON（JavaScript Object Notation）是一种轻量级的数据交换格式
    • 它基于ECMAScript的一个子集，相比于XML，json易于人阅读和编写，同时也易于机器解析和生成，目前数据传递基本上使用json
  • 组成
    • JSON有两种大的结构： 对象 和 数组
    • 两种结构相互组合从而形成各种复杂的结构
  • 测试接口