JavaScript

1 数据类型

数据类型

数据类型指的就是字面量的类型

在 JS 中一共有六种数据类型

• String 字符串

• Number 数值

• Boolean 布尔值

• Null 空值

• Undefined 未定义

• Object 对象

其中 String Number Boolean Null Underfined 属于基本数据类型

而 Object 属于引用类型

String字符串

• 在JS中字符串需要使用引号引起来
• 使用双引号或单引号都可以，但是不要混着用
• 引号不能嵌套，双引号不能放双引号，单引号不能放单引号

在字符串中我们可以使用 \ 作为转义字符，

当表示一些特殊符号时，可以使用 \ 进行转义

\" 表示 "\' 表示 '\n 表示换行\t 制表符\\ 表示\s

Number数值

在JS中所有的数值都是 Number 类型
包括整数和浮点数（小数）

JS中可以表示的数字的最大值

Number.MAX_VALUE

1.7976931348623157e+308

Number.MIN_VALUE 大于0的最小值

5e-324

如果使用 Number 表示的数字超过了最大值，则会返回一个

Infinity 表示正无穷

-Infinity 表示负无穷

（这个 Infinity 是个字面量）

使用 typeof 检查 Infinity 也会返回 number

NaN 是一个特殊的数字，表示Not a Number

使用 typeof 检查NaN，也会返回number

可以使用一个运算符 typeof
来检查一个变量的类型
语法：typeof 变量
检查字符串时，会返回string
检查数值时，会返回number

Infinity 是一个字面量，不要加 双引号

在JS中整数的运算基本可以保证准确

如果使用JS进行浮点运算，可能得到一个不精确的结果，所以千万不要使用JS进行对精确度要求比较高的运算

Boolean布尔值

Boolean 布尔值

布尔值只有两个，主要用来做逻辑判断

true，表示真

false，表示假

Null空值

Null（空值）类型的值只有一个，就是 null

null 这个值专门用来表示一个为空的对象

使用 typeof 检查一个 null 值时，会返回 object

Undefined未定义

Undefined（未定义）类型的值只有一个，就undefined

当声明一个变量，但是并不给变量赋值时，它的值就是undefined;

使用typeof检查一个undefined时，也会返回undefined;

2 字符串

字符串的方法

length属性，

一说属性，不用加()

在底层字符串是以字符数组的形式保存的

[“H”,“e”,“l”]

在操作字符串的时候，把它想象成数组

可以用来获取字符串的长度

console.log(str.length);

charAt()

可以返回字符串中指定位置的字符

字符串的大部分方法，都不会影响原数组

str = "中Hello Atguigu";var result = str.charAt(6);

charCodeAt()

返回指定位置字符的字符编码(Unicode编码)

result = str.charCodeAt(0);

String.fromCharCode()

这个是通过构造函数来调的
可以根据字符编码去获取字符

result = String.fromCharCode(0x2692);

concat()

可以用来连接两个或多个字符串

作用和+一样

不影响原字符串，都是返回新的字符串

result = str.concat("你好","再见");

indexOf()

该方法可以检索一个字符串中是否含有指定内容

如果字符串中含有该内容，则会返回其第一次出现的索引

如果没有找到指定的内容，则返回-1

可以指定一个第二个参数，指定开始查找的位置

str = "hello hatguigu";result = str.indexOf("h",1);

3 对象

基本数据类型都是单一的值"hello" 123 true，值和值之间没有任何的联系

在JS中来表示一个人的信息(name gender age)

var name = “孙悟空”;
var gender = “男”;
var age = 18;

如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体

对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性

对象的分类：

内建对象

由ES标准中定义的对象，在任何的ES的实现中都可以使用

比如，Math String Number Boolean Function Object…

宿主对象

由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象

比如BOM DOM

​

自定义对象

由开发人员自己创建的对象

创建对象

使用new关键字调用的函数，是构造函数constructor

构造函数是专门用来创建对象的函数

使用 typeof 检查一个对象时，会返回object

var obj = new Object();

// console.log(obj);

在对象中保存的值称为属性

向对象添加属性

语法： 对象.属性名 = 属性值;

向obj中添加一个name属性

obj.name = “孙悟空”;

//向obj中添加一个gender属性

obj.gender = “男”;

//向obj中添加一个age属性

obj.age = 18;

读取对象中的属性

语法： 对象.属性名

如果读取对象中没有的属性，不会报错而是会返回undefined

console.log(obj.gender);

console.log(obj.hello);

修改对象的属性值

语法： 对象.属性名 = 新值

obj.name = “tom”;

删除对象的属性
语法： delete 对象.属性名

delete obj.name;

创建对象的方法

使用工厂方法，创建对象

枚举对象中的属性

枚举对象中的属性

使用for…in 语句

语法

for (var 变量 in 对象) {}

for…in语句 对象中有几个属性，循环体就会执行几次

每次执行时，会将对象中的一个属性的名字赋给变量

var obj = {    name: "孙悟空",    age: 18,    gender: "男",    address: "花果山"};for (var n in obj) {    console.log("属性名：" + n);    //[]中可以放变量    console.log("属性值：" + obj[n]);}

原型对象

原型prototype

我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype

这个属性对应着一个对象，这个对象就是我们所谓的原型对象

如果函数以普通函数调用,prototype没有任何作用

当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的值

指向该构造函数的原型对象，我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域，所有同一类的实例都可以访问到这个原型对象，

我们可以将对象中共有的内容，统一设置到原型对象中

当我们访问对象的一个属相或方法时，它会先在对象自身中寻找，如果有则直接使用，

如果没有则会去原型对象中寻找，如果找到则直接使用

以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，这样不用分别为每一个对象添加，也

不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

4 数组

数组(Array)

数组也是一个对象

他和我们普通对象功能类似，也是用来存储一些值的

不同的是普通对象是使用字符串作为属性名的，
而数组是使用数字来作为索引操作元素

索引
从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

创建数组对象

//创建数组对象var arr = new Array();

向数组中添加元素

// 向数组中添加元素// 语法：数组[索引] = 值arr[0] = 10;arr[1] = 33;arr[2] = 22;arr[3] = 44;

读取数组中的元素

语法：数组[索引]
如果读取不存在的索引，他不会报错而是返回undefined

console.log(arr[3]);

获取数组的长度

可以使用length属性来获取数组的长度（元素的个数）
语法：数组.length

console.log(arr.length);

修改length

如果修改的length大于原长度，则多出部分会空出来

如果修改的length小于原长度，则多出的元素会被删除

arr.length = 10;arr.length = 2

向数组的最后一个位置添加元素

语法：数组[数组.length] = 值;

arr[arr.length] = 70;arr[arr.length] = 80;arr[arr.length] = 90;

创建数组的方式

声明方式（构造函数方式）

//创建一个数组var arr = new Array();

字面量方式

//使用字面量来创建数组//语法:[]var arr = [];

//使用字面量创建数组时，可以在创建时就指定数组中的元素var arr = [1,2,3,4,5,10];

数组的方法

push()

该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度

可以将要添加的元素作为方法的参数传递

这样这些元素将会自动添加到数组的末尾

该方法会将数组新的长度作为返回值返回

var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");

重点

是方法，就与返回值，我们来看一下返回值

pop()

该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回

result = arr.pop();

unshift()

向数组开头添加一个或多个元素，并返回新的数组长度

向前边插入元素以后，其他的元素索引会依次调整

arr.unshift("牛魔王","二郎神");

shift()

可以删除数组的第一个元素，并将删除的元素作为返回值返回

result = arr.shift();

slice()

C:\Users\Administrator\Desktop\JS代码\11\13-数组的方法.html

可以用来从数组提取指定元素

该方法不会改变原数组，而是将截取到的元素封装到一个新数组中返回

参数：
1.截取开始的位置的索引，包含开始索引

2.截取结束的位置的索引，不包含结束索引

第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，如果传递一个负值，则从后往前计算

-1，倒数第一个
-2，倒数第二个

var result = arr.slice(1,4);result = arr.slice(3);result = arr.slice(1,-2);

splice()

可以用于删除数组中的指定元素，会将指定元素从原数组中删除
并将被删除的元素作为返回值返回

参数
第一个：表示开始位置的索引

第二个：表示删除的数量

第三个及以后…

可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿");

数组的遍历

数组的应用

数组去重

https://www.bilibili.com/video/BV1YW411T7GX?p=77

5 函数

函数 function

函数也是一个对象

函数中可以封装一些功能

函数中可以保存一些代码在需要的时候调用

创建一个函数对象

可以将要封装的代码以字符串的形式传递给构造函数

var fun = new Function(“console.log(‘Hello 这是我的第一个函数’);”);

封装到函数中的代码不会立即执行

函数中的代码会在函数调用的时候执行

调用函数语法：函数对象()

当调用函数时，函数中封装的代码会按照顺序执行

fun();

fun.hello = “你好”;

console.log(fun.hello);

使用函数声明来创建一个函数

语法：

function 函数名 ([形参1, 形参2, 形参3…]) {

语句…

函数的参数

函数的实参可以是任意的数据类型

在调用函数时，可以在()中指定实参（实际参数）

实参将会赋值给函数中对应的形参

调用函数时，解析器（浏览器）不会检查实参的类型，

所以要注意，是否有可能会接收到非法的参数，

如果有可能，则需要对参数进行类型的检查

调用函数时，解析器也不会检查实参的数量

多余实参不会被赋值

如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined

函数的返回值

在函数中return后的语句都不会执行

如果return语句后不跟任何值就相当于返回一个undefined

如果函数中不写return，则也会返回undefined

return后可以跟任意类型的值

return;//相当于return undefined;

调用函数

变量result的值就是函数的执行结果

函数返回什么result的值就是什么

alert()的返回值

是函数，就有返回值，看看alert函数的返回值是什么

通过测试可以知道，alert里面没有返回值

实参

实参可以是任意的数据类型，也可以是一个对象

当我们参数过多时，可以将参数封装到一个对象中，然后通过对象传递

实参可以是一个对象，也可以是一个函数

(函数也是一个对象，对象可以做的事情，函数都可以做)

开发中经常用，将一个匿名函数作为实参，传递给函数

函数是一个对象

函数是一个具有功能的对象

break、continue、return

使用break可以退出当前的循环

break;

continue用于跳过当次循环
continue;

使用return可以结束整个函数
return

返回值可以是任意的数据类型(任意数据类型包括对象)

• 可以是一个对象，

• 可以是一个函数（对象包括函数）

立即执行函数

函数定义完，立即被调用，这种函数叫做 立即执行函数

立即执行函数往往只会执行一次

调用函数

调用函数： 函数对象();

函数的创建方式

函数声明

//函数声明，会被提前创建function fun(){    console.log("我是一个fun函数");}

函数表达式

//函数表达式，不会被提前创建var fun2 = function() {    console.log("我是fun2函数");};

函数的声明提前

C:\Users\Administrator\Desktop\JS代码\10\08-变量的声明提前.html

函数的声明提前

使用函数声明形式创建的函数 function 函数 (){}

它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数

使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用

函数的作用域

C:\Users\Administrator\Desktop\JS代码\10\09-函数作用域.html

函数作用域

调用函数时，创建函数作用域，

函数执行完毕以后，函数作用域销毁

每调用一次函数就会创建一个新的函数作用域，它们之间是相互独立的

在函数作用域中可以访问到全局作用域的变量

在全局作用域中无法访问到函数作用域的变量

当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用

如果没有则向上一级作用域中寻找，直到找到全局作用域

如果全局作用域中依然没有找到，则会报错

函数的方法

call()

apply()

call()和apply()

这两个方法都是函数对象的方法，需要通过函数对象来调用

当对函数调用call()和apply()都会调用函数执行

当调用call和apply()时，

可以将一个对象指定为第一个参数

此时这个对象将会成为函数执行时的this

call()方法可以将实参在对象之后依次传递

apply()方法需要将实参封装到一个数组中统一传递

this的情况：

1.以函数形式调用时，this永远都是window

2.以方法的形式调用时，this是调用方法的对象

3.以构造函数的形式调用时，this是新创建的那个对象

4.使用call和apply调用时，this是指定的那个对象

这样可以用来修改函数执行时的上下文对象this

构造函数

创建一个构造函数，专门用来创建Person对象的

构造函数就是一个普通的函数，创建方式和普通函数没有区别

不同的是构造函数习惯上首字母大写

构造函数和普通函数的区别就是调用方式的不同

普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数的执行流程

1.立刻创建一个新的对象

2.将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象

3.逐行执行函数中的代码

4.将新建的对象作为返回值返回

https://www.bilibili.com/video/BV1YW411T7GX?p=64

函数的参数

调用函数时，浏览器每次都会传递进两个隐含的参数，

1.函数的上下文对象 this

2.封装实参的对象 arguments

arguments 是一个类数组对象，它可以通过索引来操作数据，也可以获取长度

在调用函数时，我们所传递的实参都会在arguments中保存

arguments.length可以用来获取实参的长度

我们即使不定义形参，也可以通过arguments来使用实参

只不过比较麻烦

arguments[0]，表示第一个实参

arguments[1]，表示第二个实参…

回调函数

6 变量

C:\Users\Administrator\Desktop\JS代码\10\08-变量的声明提前.html

变量的声明提前

使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值）

但是如果声明变量时，不使用var关键字，则变量不会被声明提前

6 运算符

6 运算操作

算数运算符

运算符也叫操作符

通过运算符可以对一个或多个值进行运算，并获取运算结果

比如：typeof就是运算符，可以来获得一个值的类型

它会将该值的类型以字符串的形式返回

number string boolean undefined object

算术运算符

当对非Number类型的值进行运算时，会将这些值准换为Number，然后再运算

加法

一、值加法

可以对两个值进行加法运算，并将结果返回

二、字符串加法

如果对两个字符串进行加法运算，则会做拼串，会将两个字符串拼接为一个字符串，并返回

三、值和字符串加法

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

减法

可以对两个值进行减法运算，并将结果返回

乘法

可以对两个值进行乘法运算

除法

可以对两个值进行除法运算

取余

%取模运算（取余数）

逻辑运算

!非

可以用来对一个值进行非运算

所谓非运算就是对一个布尔值进行取反操作

true变false，false变true

如果对一个值进行两次取反，它不会变化

如果对非布尔值进行运算，则会将其转换为布尔值，然后再取反

所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值

可以为一个任意数据类型去两次反，来将其转换为布尔值

原理和Boolean()函数一样

(隐式类型转换)

&&与

&&可以对符号两侧的值进行与运算并返回结果

运算规则

两个值中只要有一个值为false，就返回false

只有两个值都为true时，才会返回true

JS中的“与”属于短路的与，

如果第一个值为false，则不会看第二个值

||或

可以对符号两侧的值进行或运算并返回结果

两个值中只要有一个true，就返回true

如果两个值都为false，才返回false

JS中的"或"属于短路的或

如果第一个值为true，则不会检查第二个值

var result = true && true;result = true && false;result = false && true;result = false && false;// console.log("result = " + result);// true && alert("看我出不出来");// false && alert("看我出不出来");

result = false || false;result = true || false;result = false || true;result = true || true;// console.log("result = " + result);// false || alert("123");true || alert("123");

var a = false;//对a进行非运算a = !a;// console.log("a = " + a);var b = 10;b = !b;// console.log("b = " + b);// console.log(typeof b);

赋值运算符

关系运算符

通过关系运算符可以比较两个值之间的大小关系

如果关系成立，它会返回true,

如果关系不成立，则返回false

大于号

判断符号左侧的值是否大于右侧的

如果关系成立，返回true

如果关系不成立，则返回false

var result = 5 > 10;//falseresult = 5 > 4;//trueresult = 5 >= 5;//trueresult = 5 >= 4;//true// console.log("result = " + result);

非数值的情况

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

// console.log(1 > true);//false	// console.log(1 >= true);//true//console.log(1 > "0");//true

如果符号两侧的值都是字符串时，不会将其转换为数字进行比较

而会分别比较字符串中字符的 Unicode 编码

//console.log(10 > null);//true//任何值和NaN做任何比较都是false//console.log(10 <= "hellow");//false//console.log(true > false);//true//console.log("1" < "5");//true//console.log("11" < "5");//true

//比较两个字符串时，比较的是字符串的字符编码// console.log("a" < "b");//比较字符编码时，是一位一位进行比较//如果两位一样，则比较下一位，所以借用它来对英文进行排序//console.log("abc" < "bcd");//true//console.log("戒" > "我");//true

//如果比较的两个字符串型的数字，可能会得到不可预测的结果//注意：在比较两个字符串型的数字时，一定一定一定要转型（电商购物项目可能用到，比较数量，数量是字符串）console.log("11" < +"5");

相等运算符

相等运算符用来比较两个值是否相等

如果相等，会返回 true，否则返回 false

==

使用 == 来做相等运算
当使用==来比较两个值时，

如果值的类型不同，则会自动进行类型转换，将其转换为相同的类型（具体转换为什么类型，不确定；大部分转换为数字类型）

然后再比较

console.log(1 == 1);//truevar a = 10;console.log(a == 4);//false

//console.log("1" == 1);//true//console.log(true == "hello");//false//console.log(true == "1");//true//console.log(null == 0);//false

!=

不相等

不相等用来判断两个值是否不相等，

如果不相等返回true，否则返回false

使用 != 来做不相等运算

不相等也会对变量进行自动的类型转换，如果转换后相等它也会返回false

//console.log(10 != 5);//true//console.log(10 != 10);//false//console.log("abcd" != "abcd");//false//console.log("1" != 1);//false

===

全等

用来判断两个值是否全等，它和相等类似，

不同的是，它不会做自动的类型转换

如果两个值的类型不同，直接返回false

!==

不全等

用来判断两个值是否不全等，和不等类似，

不同的是，它不会做自动的类型转换

如果两个值的类型不同，直接返回true

console.log(null == 0);//false

undefined 衍生自 null

所以这两个值做相等判断时，会返回true

console.log(undefined == null);//true

NaN不和任何值相等，包括他本身

//console.log(NaN == "1");//false//console.log(NaN == undefined);//false//console.log(NaN == NaN);//false

var b = NaN;//判断b的值是否是NaN//console.log(b == NaN);

可以通过isNaN()函数来判断一个值是否是NaN

如果该值是NaN则返回true，否则返回false

//console.log(isNaN(b));

条件运算符

运算符的优先级

编码问题

在网页中使用Unicode编码，&#编码; 这里的编码需要的是10进制

7 定时和延时调用

定时调用

JS的程序的执行速度是非常非常快的

如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用

setInterval()

定时调用

可以将一个函数，每个一段时间执行一次

参数：

1.回调函数，该函数每隔一段时间被调用一次

2.每次调用间隔的时间，单位是毫秒

返回值：

返回一个Number类型的数据

这个数字用来作为定时器的唯一标识

var num = 1;var timer = setInterval(function(){    count.innerHTML = num++;    if(num == 11){        //关闭定时器        clearInterval(timer);    }},500);// console.log(timer);

开启一个定时器

var num = 1;setInterval(function(){    console.log(num++);},3000);

clearInterval()

可以用来关闭一个定时器
方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器

clearInterval(timer);

延时调用

延时调用，
延时调用一个函数，不马上执行，而是隔一段时间以后，再执行，而且只会执行一次

延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次

延时调用和定时调用实际上是可以相互代替的，在开发中可以根据自己需要去选择

setTimeout()

var timer = setTimeout(function(){    console.log(num++);},3000);

clearTimeout()

//使用clearTimeout()来关闭一个延时调用clearTimeout(timer);

7 类型转换

强制类型转换-String

强制类型转换

指将一个数据类型强制转换为其他的数据类型

类型转换主要指，将其他的数据类型，转换为 String Number Boolean

将其他的数据类型转换为String

toString()方法

调用被转换数据类型的 toString() 方法

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

但是注意：nul l和 undefined 这两个值没有 toString() 方法，如果调用他们的方法，会报错

调用a的toString()方法

调用xxx.yyy()方法，就是xxx.yyy();

String()函数

调用 String() 函数，并将被转换的数据作为参数传递给函数

使用 String() 函数做强制类型转换时，

对于 Number 和 Boolean 实际上就是调用 toString() 方法

但是对于 null 和 undefined，就不会调用 toString() 方法

它会将 null 直接转换为 “null”

它会将 undefined 直接转换为 “undefined”

强制类型转换-Number

将其他的数据类型转化为Number

Number() 函数

使用Number()函数

**1. **字符串–>数字

• 如果是纯数字的字符串，则直接将其转换为数字
• 如果字符串中有非数字的内容，则转换为NaN
• 如果字符串是一个空串或者是一个全是空格的字符串，则转换为0

**2. **布尔–>数字

true 转成 1

false 转成 0

**3. **null --> 数字 0

**4. **undefined–>数字 NaN

parseInt()或parseFloat()

• 这种方式专门用来对付字符串
• parseInt()把一个字符串转换为一个整数
• parseFloat()把一个字符串转换为一个浮点数

转换为Boolean

将其他的数据类型转换为Boolean

使用Boolean()函数

数字–>布尔

除了0和NaN，其余的都是true

字符串–>布尔

除了空串，其余的都是 true

null和undefined 都会转换为false

对象也会转换为 true

方式二（隐式类型转换）

为任意的数据类型做两次非运算，即可将其转换为布尔值

例子：

var a = “hello”;

a = !!a;//true;

其他进制的数字

JS 中，

表示16进制的数字，以0x开头

表示8进制的数字，以0开头

表示2进制的数字，以0b开头

但是不是所有的浏览器都支持

//十六进制a = 0x10;a = 0xff;a = 0xCafe;//八进制数字a = 070;//二进制数字a = 0b10;//像 "070" 这种字符串，有些浏览器会当成八进制解析，有些会当成十进制解析a = "070";// 可以下parseInt()中传递一个第二个参数，来指定数字的进制a = parseInt(a, 10);

7 BOM

BOM

浏览器对象模型

BOM可以使我们通过JS来操作浏览器

在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象

Window

代表的是整个浏览器的窗口，同时window也是网页中的全局对象

Navigator

代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面

Navigator 代表当前浏览器的地址栏信息

由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了

userAgent

一般我们只会使用userAgent来判断浏览器的信息

userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容

不同的浏览器会有不同的userAgent

chrome的userAgentMozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36在IE11中，已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了

History

代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录

由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页

length

属性，可以获取到当前访问的链接数量

alert(history.length);

back()

可以用来回退到上一个页面，作用和浏览器的回退按钮一样

history.back();

forward()

可以跳转下一个页面，作用和浏览器的前进按钮一样

history.forward();

go()

可以用来跳转到指定的页面

它需要一个整数作为参数

1.表示向前跳转一个页面 相当于forward()

2.表示向前跳转两个页面

-1，表示向后跳转一个页面

-2，表示向后跳转两个页面

Screen

代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关信息

这些BOM对象在浏览器中都是作为window对象的属性保存的
可以通过window对象来使用，也可以直接使用

Location

该对象中封装了浏览器的地址栏的信息

如果直接打印location,则可以获取到地址栏的信息（当前页面的完整路径）

alert(location);

如果直接将location属性修改为一个完整的路径，或相对路径

则我们页面会自动跳转到该路径，并且会生成响应的历史记录

//location = "http://www.baidu.com";//location = "01-BOM.html";

assign()

• 用来跳转到其他的页面，作用和直接修改location一样

location.assign("http://www.baidu.com");

reload()

• 用于重新加载当前页面，作用和刷新按钮一样
• 如果方法中传递一个true，作为参数，则会强制清空缓存刷新当前页面

location.reload();

replace()

• 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
  不会生成历史记录，不能使用回退按钮回退

8 文档对象模型DOM

DOM介绍

DOM:

表示页面上每个元素的一组JavaScript对象

页面中每个标记都对应一个JavaScript DOM对象

JS代码可以与这些对象通信以检查元素的状态

例如，查看是否选中了一个框

通过他可以改变状态

例如，在div中插入一些新文本

通过它可以改变风格

例如，是段落变红

DOM元素对象

使用objectName.attributeName访问/修改DOM对象的属性

大多数DOM对象属性与相应的html属性具有相同的名称

• img标签的src属性
• a标签的href属性

通过ID存取DOM对象

// 通过ID获得DOM对象的语法模板var name = document.getElementById("所需元素的ID");

DOM 操作 CSS

https://www.bilibili.com/video/BV1YW411T7GX?p=107

9 DOM（b站）

节点

节点：Node-构成HTML文档最基本的单元

常用节点分为4类

换句话说，是 4 种对象

文档节点	整个HTML文档
元素节点	HTML文档中的HTML标签
属性节点	元素的属性
文本节点	HTML标签中的文本内容

<p id="pId">This is a paragraph</p>

<p></p>，是 元素节点

id="pId"，是 属性节点

This is a paragraph，是 文本节点

元素，就是标签；

标签，就是元素

	nodeName	nodeType	nodeValue
文档节点	#document	9	null
元素节点	标签名	1	null
属性节点	属性名	2	属性值
文本节点	#text	3	文本内容

DOM，就是用来操作网页的

浏览器已经为我们提供 文档节点 对象，

这个对象就是 window 的属性（意味着，它是全局变量）

这个对象是 window 的属性，可以在页面中直接使用，

文档节点代表的是整个网页（它是最大的了）

document，就是 文档节点，它代表的就是 整个网页

document,就是代表 整个网页，通过它，可以获取到网页中的 任意一个 对象

//console.log(document);

DOM 中的 对象，都是和网页中的 东西，有一一对应的关系

<button id="btn">我是一个按钮</button>

通过 document 找 button

无非 通过 document 的 方法 或 属性

//1.获取button对象//获取到 id 为 btn 的元素var btn = document.getElementById("btn");//2.修改按钮的文字//要么调方法，要么改属性//这里使用的是 改属性//innerHTML 是 对象的属性//下面代码，是在 修改属性btn.innerHTML = "I'm Button";

10 JSON

JavaScript Object Notation JS对象表示法

JSON

JS中的对象只有JS自己认识，其他语言都不认识

JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别

并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互

JSON

JavaScript Object Notation JS对象表示法

JSON和JS对象的格式一样，只不过JSON字符串中的属性名，必须加双引号

其他的和JS语法一致

JSON分类：

1.对象{}

2.数组[]

JSON中允许的值：

• 字符串

• 数值

• 布尔值

• null

• 对象

• 数组

将JSON字符串转换为JS中的对象

在JS中，为我们提供了一个工具类，就叫JSON

这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

json --> js对象

JSON.parse()

可以将JSON字符串转换为js对象

它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

js对象 --> json

JSON.stringify()

可以将一个JS对象转换为JSON字符串

需要一个js对象作为参数，会返回一个JSON字符串

JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错

JSON的方法

eval()

这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回

如果使用eval()执行的字符串中含有{},它会将{}当成代码块

如果不希望将其当成代码块解析，则需要在字符串前后各加一个()

eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，

但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患

12 DOM元素对象

DOM元素对象-文本交互

获取文本和HTML内容的各种DOM属性

属性名	描述	浏览器支持情况
innerHTML	结点内的文本 和/或 HTML标签	所有浏览器
innerText	节点内的文本（没有HTML标签）	仅支持IE浏览器
textContent	结点内的文本（没有HTML标签）	除IE以外的所有浏览器
value	表单控件中的文本值	所有浏览器

滥用innerHTML

// 不良风格var paragraph = document.getElementById("welcome");paragraph.innerHTML = "<p>text and <a href=\"page.html\">link></p>"

innerHTML可以将任意HTML内容注入页面

然而，这样容易出现缺陷和错误，是一种不良的风格样式

禁止使用innerHTML注入HTML标签啊，只能注入纯文本内容

（后面，我们会看到一个更好的注入带HTML标签内容的方法）

用DOM调整样式

element.style.property					// 获取值element.style.property = "value";		// 设置值

<p id="slogan">Eat at Joe's. You can't beat our prices!</p>

var paragraph = document.getElementById("slogan");paragraph.style.color = "red";

DOM样式属性名

CSS属性名	DOM属性名	示例
background-color	backgroundColor	“#ff00dd”
border	border	“1em solid red”
border-top-width	borderTopWidth	“3px”
color	color	“red”
float	cssFloat	“left”
font-weight	fontWeight	“bold”
font-size	fontSize	“12pt”
z-index	zIndex	“456”

用JS代码设置字体加粗和样式

JS代码设置字体

JS代码放大字体大小

DOM树

DOM结点

有三种类型的结点

• 元素结点(HTML tag)
  • 可有子节点 和/或 属性
• 文本结点（块元素中的文本）
  • 始终作为元素结点的子节点出现
  • 不能有子节点或属性
• 属性结点（属性/值 对）
  • 不能有子节点 或 属性
  • 绘制DOM树时，通常不显示

注意

关于DOM树需要注意一下几点

1. 纯文本如 “这是一个段落…” 被表示为文本结点。我们不认为文本是一个元素，但它仍然是树的一部分。
2. 链接之后的文本，只包含一个周期，也会得到它自己的文本结点。
3. 链接组成一个元素结点，内部包含一个子文本结点，该自文本结点表示 “链接” 的词，也就是链接的内部文本内容。

13 JS作用域

自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

实例

myFunction();// 此处的代码能够使用 carName 变量function myFunction() {    carName = "porsche";}

严格模式

所有现代浏览器都支持以“严格模式”运行 JavaScript。

您将在本教程稍后的章节学习更多如何使用严格模式的知识。

在“严格模式”中不会自动创建全局变量。

HTML 中的全局变量

通过 JavaScript，全局作用域形成了完整的 JavaScript 环境。

在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。

实例

var carName = "porsche";// 此处的代码能够使用 window.carName

警告

除非有意为之，否则请勿创建全局变量。

您的全局变量（或函数）能够覆盖 window 变量（或函数）。

任何函数，包括 window 对象，能够覆盖您的全局变量和函数。

JavaScript 变量的有效期

JavaScript 变量的有效期始于其被创建时。

局部变量会在函数完成时被删除。

全局变量会在您关闭页面是被删除。

函数参数

函数参数也是函数内的局部变量。

14 全局DOM对象

全局DOM对象

对象名称	含义
document	当前的web页面
history	用户以前访问过的页面列表
location	当前web页面的URL
navigator	用户正在使用的web浏览器
screen	浏览器和页面占用的屏幕区域
window	浏览器窗口

window对象的方法

方法名称	描述
alert prompt confirm	弹出框
setInterval, clearIntervarl, setTimeout, clearTimeout	计时器 设置相关的时间间隔 清除相关的时间间隔
open(URL, name, options), close()	弹出新的浏览器窗口
print()	发送web页面到打印机
blur(), focus()	将窗口置成活动窗口或非活动窗口 把窗口带到前台 把窗口带到后台
moveBy(dx, dy), moveTo(x, y)	移动浏览器窗口到屏幕的指定位置
resizeBy(dw, dh) resizeTo(width, height)	改变浏览器窗口
scrollBy(dx, dy) scrollTo(x, y)	将页面上下滚动到特定点

document对象的属性

属性名称	类型	描述
body	DOM元素	页面实体的DOM对象
cookies	字符串	提供给该页面的所有cookies的字符串表示形式
referrer	字符串	在此之前用户正在查看的文档的URL
title	字符串	标题栏中显示的网页标题
URL	字符串	web页面的完整URL

navigator对象的属性

属性名称	类型	描述
appName	字符串	浏览器名称
appVersion	字符串	浏览器版本号
cookieEnabled	布尔型	如果浏览器支持cookies则为真
language	字符串	用户的语言，如 “en-us”
platform	字符串	用户使用的操作系统，如 “win7”
userAgent	字符串	表示用户浏览器、操作系统和版本的长 “用户代理” 字符串

history对象的方法和属性

方法/属性名称	描述
back() forward()	将浏览器重定向到其上一页或下一页
go(index)	将浏览器重定向到历史记录中的特定页
length	历史记录中的URL数（属性）

带()，是方法；不带()，是属性

screen对象的属性

属性名称	类型	描述
avaiHeight availWidth	整型	显示屏的宽度/高度，不包括任务栏
colorDepth	整型	用户监视器上可用的颜色位深度
height,width	整型	显示屏的宽度/高度

location对象的属性

名称	类型	描述	示例
hash	string	anchor(part of URL after #)	“#link05”
host	string	主机名和端口号	“www.xjtu.edu.cn:8080”
hostname	string	主机/域的名称	“www.xjtu.edu.cn”
href	string	完整的URL
pathname	string	目录/文件名	“/foo/bar/index.html”
port	string	端口号	“8080”
protocol	string	协议，后面跟着一个冒号	“http:”
search	string	查询字符串(URL中？后的部分)	“?a=b&c=d”

全局DOM对象的使用

function getInfo() {    var span = document.getElementById("output");    span.innerHTML = "Browser:" + navigator.appName + ";System:" + navigator.platform;    // 获取浏览器信息、操作系统信息}function goBack() {    history.back();}

<script src="global_DOM.js" type="text/javascript"></script><body>    <div>        <button onclick="getInfo();">Browser Info</button>        <button onclick="goBack();">Go Back</button>        <span id="output"></span>    </div></body>

window.onload和不显眼的JavaScript

不显眼的JavaScript

• 描述了一种在不将任何JavaScript放入HTML页面主体的情况下附加时间处理程序的方法

带有不显眼JS的事件处理程序

// 通过DOM附加事件处理程序的语法模板element.event = functionName;

<!--以前会在这样处理--><button id="OK" οnclick="booyah()";>Okay</button>

<!--使用新的不显眼的样式时可以这么做--><button id="Ok">Okay</button>

// 将onclick处理程序附加到OK按钮var okayButton = document.getElementById("ok");okayButton.onclick = booyah;

window对象的事件

事件名称	描述
onerror	加载文档或图像时出错
onload	浏览器加载页面
onresize	浏览器窗口已调整大小
onunload	浏览器退出页面

window.onload处理程序

// window.onload处理程序的语法模板window.onload = functionName;...function functionName() {    code to attach event handlers;}

例子

<button id="compute">Compute!</button>

window.onload = pageLoad;function pageLoad() {    var computeButton = document.getElementById("compute");    computeButton.onclick = compute;}function compute() {    }

常见错误

// 带有事件处理程序的括号window.onload = pageLoad();				// 错误window.onload = pageLoad;				// 正确...okayButton.onclick = okayClick();		// 错误okayButton.onclick = okayClick;			// 正确

// 事件名称出现大写错误window.onLoad = pageLoad;				// 错误window.onload = pageLoad;				// 正确

匿名函数

function(parameters) {    statements;}

Javascript允许声明匿名函数

快速创建函数而不给它命名

可以存储为变量，附加我事件处理程序等

window.onload = function() {    statements;}

匿名函数示例1

...<button id="compute">Compute!</button>...

window.onload = function() {    var computeButton = document.getElementById("compute");    computeButton.onclick = compute;}function compute() {    ...}

匿名函数示例2

window.onload = function() {    var ok = document.getElementById("ok");    ok.onclick = okayClick;};function okayClick() {    alert("booyah");}

以下内容也是合法的（尽管很难阅读，风格也不好）:

window.onload = function() {    document.getElementById("ok").onclik = function() {        alert("booyah");    };};

全局变量的危险性

var count = 0;function incr(n) {    count += n;}function reset() {    count = 0;}incr(4);incr(2);console.log(count);// 3个全局变量：// count, incr 和 reset

全局变量的缺点：

其他代码和其他JS文件可以查看和修改它们

简单要求：

尽可能避免使用全局变量

函数中的封闭代码

function everything() {    var count = 0;    function incr(n) {        count += n;    }    function reset() {        count = 0;    }        incr(4);    incr(2);    console.log(count);}everything();// 调用函数以运行代码// 1个全局变量// everything

上面的例子将所有代码移动到一个函数中；

在其内部声明的变量和函数是局部的，而不是全局的

模块模式

(function() {    statements;})();

• 在声明并立即调用的匿名函数中包装文件的所有代码
• 将引入0个全局变量
• 由以上代码定义的变量和函数不能在外部进行处理

模块模式示例

(function() {    var count = 0;    function incr(n) {        count += n;    }    function reset() {        count = 0;    }        incr(4);    incr(2);    console.log(count);})();// 0个全局变量

关键字this

this:

引用当前对象的关键字。在事件处理程序中，引用处理程序附加到的元素。

所有的JavaScript代码实际上都在对象内部运行

默认情况下，diamante在全局窗口对象中运行（因此 this === window）

声明的所欲全局变量和函数都将吃呢改为窗口的一部分

this关键字引用当前对象

小费计算器

<h1>Tip Calculator</h1><div>    $<input id="subtotal" type="text" size="5" /><br/>    <button id="tenpercent">        10%    </button>    <button id="fifteenpercent">        15%    </button>    <button id="eighteenpercent">        18%    </button>    <span id="total"></span></div>

// 小费计算器初始JavaScript代码window.onload = function() {    document.getElementById("tenpercent").onclick = computeTip10;}function computeTip10() {    var subtotal = parseFloat(document.getElementById("subtotal").value);    var tipAmout = subtotal * 10 / 100.0;    document.getElementById("total").innerHTML = "Tip:$" + tipAmount;}

改进的小费计算器处理程序

将相同的提示计算行为附加到每个按钮的正确方法是利用this关键字

window.onloal = function() {    document.getElementById("tenpercent").onclick = computeTip;    document.getElementById("fifteenpercent").onclick = computeTip;    document.getElementById("eighteenpercent").onclick = computeTip;}

function computeTip() {    var subtotal = parseFloat(document.getElementById("subtotal").value);    var tipPercent = parseInt(this.innerHTML);    var tipAmount = subtotal * tipPercent / 100.0;    document.getElementById("total").innerHTML = "Tip:$" + tipAmount;}

16 条件

if

switch

条件分支语句也叫switch语句

	执行流程：	switch...case...语句	在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行全等比较(记住是全等比较)	如果结果为true,则从当前case处开始执行代码	当前case后的所有代码都会执行，我们可以在case后边跟着一个break关键字		switch语句和if语句的功能实际上有重复的，使用switch可以实现if的功能		同样使用if也可以实现switch的功能

17 循环

while

do…while

for

格式

for(var i = 0; i < 10; i++) {    alert(i);}

for循环中的三个部分都可以省略，也可以写在外部

var i = 0;for (;i<10;) {    alert(i++);}

//死循环for(;;) {    alert("hello");}

forEach

一般我们都是使用for循环去遍历数组

JS中还为我们提供了一个方法，用来遍历数组

forEach()

这个方法只支持IE8以上的浏览器

IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8,则不要使用forEach,还是使用for循环来遍历

forEach()方法需要一个函数作为参数

像这种函数，由我们创建但是不由我们调用的，我们称为回调函数

数组中有几个元素，函数就会执行几次，

每次执行时，浏览器会将遍历到的元素

以实参的形式传递进来，我们可以来定义形参，来读取这些内容

浏览器会在回调函数中传递三个参数

第1个参数，就是当期正在遍历的元素

第2个参数，就是当前正在遍历的元素的索引

第3个参数，就是正在遍历的数组

//创建一个数组var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];arr.forEach(function(value, index, obj){    // console.log("a = " + a);    // console.log("b = " + b);    // console.log("c = " + c);	});

20 JS简介

参考链接

https://www.bilibili.com/video/BV1YW411T7GX?from=search&seid=5642669716022173633

https://developer.aliyun.com/article/772920?spm=5176.12825654.x8bw9wlh5.11.e9392c4aVPZOLc

起源

JavaScript诞生于1995年，它的出现主要用于网页中的前端验证

前端验证，就是指检查用户输入的内容是否符合一定的规则

比如：用户名的长度，密码的长度，邮箱的格式等

时间表

1995年，网景公司开发了 JavaScript

1996年，微软发布了和 JavaScript兼容的 JScript

1997年，ECMAScript 第1版

1998年，ECMAScript 第2版

1998年，DOM Levle1 的指定

1998年，新型语言 DHTML 登场

1999年，ECMAScript 第3版

2000年，DOM Level2 的指定

2002年，ISO/IEC 16262-2002 的确立

2004年，DOM Level3 的制定

2005年，新型语言 AJAX 登场

2009年，ECMAScript 第5版

2009年，新型语言 HTML5 登场

2015年，ECMAScript 2015（ES2015）

2016年，ECMAScript 2016（ES2016），第7版，多个新的概念和语言特性

2017年，ECMAScript 2017（ES2017），第8版，多个新的概念和语言特性

2018年，ECMAScript 2018（ES2018），第9版，包含了异步循环、生成器，新的正则表达式特性和 rest/spread语法

2019年，ECMAScript 2019（ES2019）

2020年，ECMAScript 2020（ES2020）

有时间的话，整理一下各个语言技术发展的时间点，了解一下历史和重大版本、事件

实现

浏览器	JavaScript实现方式
FireFox
Internet Explorer	JScript/Chakra
Safari	JavaScriptCore
Chrome	v8
Carakan	Carakan

学习内容

• ECMAScript，JS 标准
• DOM，如何通过 JS 操作网页
• BOM，如何通过 JS 操作浏览器

特点

• 解释型语言
• 类似于 C 和 Java 的语法结构
• 动态语言
• 基于原型的面向对象

JS代码，是按照从上到下的顺序执行的

 

22 事件

事件，就是用户和浏览器之间的交互行为

比如：点击按钮、鼠标移动、关闭窗口

//1.获取按钮对象var btn = document.getElementById("btn");

像这种为单击事件绑定的函数，我们称为 单击响应函数

function(){}; 是个 响应函数，用来响应事件的

这个函数，当事件被触发时，执行

//2.1绑定一个单击事件//当事件被触发时，函数才执行//事件：单击按钮//这个也是个 回调函数，不是马上执行btn.onclick = function(){    alert("你还点");};

//2.2绑定一个双击事件btn.ondblclick = function(){    alert("你还点");};

//2.3绑定一个鼠标移动触发事件btn.onmousemove = function(){    alert("你还点");};

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

这样当事件被触发时，其对应的函数将会被调用

绑定事件的方式有2种，除了上面的一种

还可以

在标签中，通过属性来绑定

<button id="btn" onmousemove="alert('你还点');">我是一个按钮</button>

键盘事件

C:\Users\Administrator\Desktop\JS代码\16\09-键盘事件.html

onkeydown

对于onkeydown来说，如果一直按着某个按键不松手，则事件会一直触发

当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的都会非常快

这种设计是为了防止误操作的发生

onkeyup

键盘事件一般都会绑定给一些可以获取到焦点的对象或者document

可以通过keyCode来获取按键的编码

通过它可以判断哪个键被按下

document.onkeydown = function(event) {    event = event || window.event;    console.log(event.keyCode);};

除了keyCode, 事件对象中还提供了几个属性

altKey

ctrlKey

shiftKey

这三个用来判断alt, ctrl, shift是否被按下

如果按下则返回true,否则返回false

document.onkeydown = function(event) {    event = event || window.event;    //判断y和ctrl是否同时被按下    if (event.keyCode === 89 && event.ctrlKey) {        console.log("ctrl和y被按下了");    }};

onmousemove

23 正则表达式

正则表达式

admin@atguigu.com

admin@.com adminatguigu.com

邮件的规则：
1.前边可以使xxxx乱七八做

2.跟着一个@

3.后边可以是xxxx乱七八糟

4…com获取其他的乱七八糟

正则表达式用于定义一些字符串的规则：
计算机可以根据正则表达式，来检查一个字符串是否符合规则
获取将字符串中符合规则的内容提取出来

创建正则表达式的方法

普通法

创建正则表达式的对象

语法：

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

//对象，除了函数是function,其他都是object

使用typeof检查正则对象，会返回object

var reg = new RegExp(“a”);

这个正则表达式可以用来检查一个字符串中是否含有a

在构造函数中可以传递一个匹配模式作为第二个参数.

可以是

i 忽略大小写

g 全局匹配模式

正则表达式的方法：
test()

使用这个方法可以用来检查一个字符串是否符合正则表达式的规则

如果符合则返回true，否则返回false

使用字面量来创建正则表达式

语法：var 变量 = /正则表达式/匹配模式

使用字面量的方法创建更加简单

使用构造函数创建更加灵活

创建一个正则表达式检查一个字符是否含有aaa

var reg = /aaa/;console.log(reg.test("aaabc"));

https://www.bilibili.com/video/BV1YW411T7GX?p=88

邮件的正则

[]里的内容也是或的关系

[ab] == a|b;

[a-z] 任意小写字母

[A-Z] 任意大写字母

[A-z] 任意字母

[0-9] 任意数字

24 this

解析器在调用函数每次都会向函数内部传递进一个隐含的参数

这个隐含的参数就是this，

this指向的是一个对象

这个对象我们称为函数执行的上下文对象

根据函数的调用方式的不同，this会指向不同的对象

1.以函数的形式调用时，this永远都是window

2.以方法的形式调用时，this就是调用方法的那个对象

function fun(a, b) {    // console.log("a = "+a+", b = "+b);    console.log(this.name);	}// fun();//创建一个对象var obj = {    name: "孙悟空",    sayName: fun};var obj2 = {    name: "沙和尚",    sayName: fun}// console.log(obj.sayName == fun);var name = "全局的name属性";// obj.sayName();//以函数形式调用，this是window// fun();//以方法的形式调用，this是调用方法的对象// obj.sayName();obj2.sayName();

25 其他

垃圾回收

垃圾回收（GC)

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾

这些垃圾积攒过多以后，会导致程序运行的速度过慢

我们需要有一个垃圾回收的机制，来处理程序运行过程中产生的垃圾

当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，

此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢

所以这种垃圾必须进行清理

在JS中拥有自动的垃圾回收机制，会自动将这些垃圾从内存中销毁

我们不需要也不能进行垃圾回收的操作

我们需要做的只是将不再使用的对象设置为null即可

27 Date 和 Math

Date

Date对象

在JS中使用Date对象来表示一个时间

//创建一个Date对象//如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间var d = new Date();

//创建一个指定的时间对象//需要在构造函数中传递一个表示时间的字符串作为参数//日期的格式 月份/日/年 时:分:秒var d2 = new Date("12/08/2011 11:10:30");

getDate()
获取当前日期对象是几日

var date = d2.getDate();

getDay()

获取当前日期对象是周几

会返回一个0-6的值
0表示周日
1表示周一
…

var day = d2.getDay();

getMonth()

d2 = new Date(“12/08/2011 11:10:30”);

获取当前时间对象的月份

会返回一个0-11的值

0表示1月

1表示2月

11表示12月

var month = d2.getMonth();

getFullYear()

获取当前日期对象的年份

var year = d2.getFullYear();

getTime()

获取当前日期对象的时间戳

时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒

到当前日期所花费的毫秒数（1秒 = 1000毫秒）

计算机底层在保存时间时使用的，都是时间戳

var time = d2.getTime();

利用时间戳来测试代码的执行的性能

获取当前的时间戳

var start = Date.now();for(var i = 0; i < 100; i++){    console.log(i);}var end = Date.now();console.log("执行了,"+(end - start)+"毫秒");

Math

Math

Math和其他的对象不同，它不是一个构造函数

它属于一个工具类不用创建对象，它里封装了数学运算相关的属性和方法

Math.abs()

可以用来计算一个数的绝对值

console.log(Math.abs(-1));

Math.ceil()

可以对一个数进行向上取整，小数点只有有值就自动进1

Math.floor()

可以对一个数进行向下取整，小数部分会被舍掉

Math.round()

可以对一个数进行四舍五入取整

console.log(Math.ceil(1.001));console.log(Math.floor(1.99));console.log(Math.round(1.4));

Math.random()

可以用来生成一个0-1之间的随机数

生成一个0-10的随机数

生成一个0-x之间的随机数

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

生成一个1-10

生成一个x-y之间的随机数

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

for(var i = 0; i < 100; i++){    // console.log(Math.round(Math.random()*10));    // console.log(Math.round(Math.random()*20));    // console.log(Math.round(Math.random()*9)+1);    // console.log(Math.round(Math.random()*8)+2);    //生成一个1-6之间的随机数    // console.log(Math.round(Math.random()*5)+1);}

Math.max()

可以获取多个数中的最大值

var max = Math.max(10,45,30,100);var min = Math.min(10,45,30,100);// console.log(min);

Math.min()

Math.pow(x,y);

返回x的y次幂

console.log(Math.pow(12,3));

Math.sqrt()

用于对一个数进行开方运算

console.log(Math.sqrt(2))

28 文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，

如果将 script 标签写到页面的上边

在代码执行时，页面还没有加载，DOM 对象也没有加载，会导致无法获取到 DOM 对象

onload 事件会在整个页面加载完成之后才触发

为 window 绑定一个 onload 事件

该事件对应的响应函数将会在页面加载完成之后执行，

这样可以确保我们的代码执行时，所有的 DOM 对象已经加载完毕了

window.onload = function() {    //获取id为btn的按钮    var btn = document.getElementById("btn");    //为按钮绑定一个单击响应函数    btn.onclick = function() {        alert("hello");    };};

<body>    <button id="btn">点我一下</button></body>

29 JS程序逻辑

关系运算符

>、>=、<、<=、==、===、!=、!==

表达式	结果
5 < 10.0	true
7 == “7”	true
7 === “7”	false
7 != “7.0”	false
7 !== “7.0”	true
42 < “hello”	false
42 >= “hello”	false
10 > “3 french hens”	false

建议

尽量使用 === 和 !== 运算符，而不用 == 和 !=

原因

表达式	结果
“” == “0”	false
0 == “”	true
null == undefined	true
“\t” == 0	ture
若使用 === 则结果均为 false

布尔值

真值	假值
314，811，-52，2.14	0，0.000，NaN
“Hello!”,“Hasta Luego”	“”,’’
“0”,“0.0”,“null”,“undefined”	null,undefined

// 测试null/undefined类型变量的正确方法if (myVariable) {    statements;}

逻辑运算符

&&, ||, !

// &&运算符var a = 15 && 30;				// a is 30var b = "Tea" && "Coffee";		// b is "Coffee"var c = null && "Coffee";		// c is nullvar d = "Coffee" && "";			// d is ""

// ||运算符var s = "Espresso";var n = null;var a = s || "Coffee";			// a is "Espresso"

使用 || 运算符提供一个缺少值

30 JS介绍

JS和Java的区别

JS属于解释性语言，不是编译型语言

• 更宽松的语法和规则
  • 较少和松散的数据类型
  • 变量不需要声明
  • 错误经常是不提示的（少数例外）

关键结构势函数，而不是类

优秀的函数经常使用在许多地方

JavaScipt和php的区别

• 相似性
  • 都是解释型语言，不是编译型语言
  • 两者在语法、规则和类型上都属于松散型的
  • 两者都是区分大小写的
  • 两者都有内置的正则表达式用于强大的文本处理
• 差异性
  • JS更多的是变形对象：noun.verb()，很少面向过程：verb(noun)
  • JS专注于UI及与文档的交互；php专注于HTML的输出和文件/表单
  • JS代码运行在客户端的浏览器上；php代码运行在Web服务器上

服务器端编程（php）的好处：

• 安全性：可以访问服务器的私有数据；客户端看不到源代码
• 兼容性：不受浏览器兼容性问题的影响
• 强大：可以写文件，打开与服务器的连接，连接到数据库…

JS程序没有 main 函数；它们响应用户操作，称为事件

响应事件的步骤

为了响应JavaScript事件，使用以下步骤：

1. 决定要响应的元素或控件
2. 用我们要运行的代码编写一个javascript函数
3. 将该函数附加到控件的事件

noscript元素

<noscript>    <p class="error">        警告：此网站需要javascript。请使用启用了javascript的Web浏览器访问此网站。    </p></noscript>

31 数组与函数

变量作用范围和全局变量

var a = 2;				// 全局变量// 在这里，a=2, b = undefined, c = undefinedfunction scopeTest() {    a = 2 * 2;    b = 3;				// 通过赋值隐式声明 （全局）变量    var c = 8;			// 局部变量}scopeTest();// 在这里，a = 4, b= 3, c = undefined

数组

// 构建数组的语法模板var name = [];							// 空数组var name = [value,value,...,value];		// 数组初始化name[index] = value;					// 存储元素

// 数组的使用var ducks = ["Huey", "Dewey", "Louie"];var stooges = [];				// stooges.length is 0var stooges[0] = "Larry";		// stooges.length is 1var stooges[1] = "Moe";			// stooges.length is 2var stooges[4] = "Curly";		// stooges.length is 5var stooges[4] = "Shemp";		// stooges.length is 5for (var i = 0; i < stooges.length; i++) {    alert(stooges[i]);}

有关数组的方法

	方法	描述
1	concat(array1, …, arrayN)	将两个或多个数组合并为一个数组
2	indexOf(value)	返回参数值在数组中第一次出现的索引号
3	join(), join(separator)	将数组的所有元素组成一个字符串，缺省用逗号分隔
4	lastIndexOf(value)	返回参数值在数组中最后一次出现的索引号
5	pop()	从数组中删除最后一个元素
6	push(value1,…,valueN)	在数组尾部加一个或多个元素
7	reverse()	反转数组元素的顺序
8	shift()	把数组的第一个元素从其中删除，并返回第一个元素的值
9	slice(startIndex) slice(startIndex,endIndex)	从数组中返回一个起点到终点的子数组，返回不含endIndex
10	splice(index,count,value1,…valueN)	从数组中删除从index开始的count个元素，并用新元素来替代
11	sort()	对数组元素进行排序
12	toString()	把数组元素转换为字符串，用逗号分隔
13	unshift(value1,…,valueN)	向数组的开头添加一个或更多元素，并返回新的长度

函数参数和返回值

// 带参函数语法模板function name(parameter1,pareameter2,..., parameterN) {    statements;}

// 带返回值函数的语法模板function name(parameter1, paremeter2,.., parameterN) {    statements;    return value;}

// 带返回值的函数function rightTriangleArea(base,height) {    return 0.5 * base * height;}// 带返回值的函数调用var tArea = rightTriangleArea(5,3);// tArea是用来接收返回值的变量

输入对话框-prompt

函数	prompt(“message”) prompt(“message”, “default value”)
描述	在弹出框中显示用户提示信息
返回值	用户输入的字符串信息，或者用户选择取消时返回空值

// 带返回值的函数调用function prom() {    var input = documentgetElementById("year");    var year = prompt("请输入您的出生年份。");    input.value = year;}

confirm

函数	confirm(“message”)
描述	确定用户的决定
返回值	用户点击 ”确定“，则值为真；点击 ”取消“，值为假

// 带返回值的函数调用function conf() {    var input = document.getElementById("year");    var year =  prompt("Please input your birth year");    if (confirm("Are you sure?")) {        input.value = year;    }}

32 语法

变量用var关键字声明（区分大小写）

类型未指定，但JS有类型（“松散类型”）

数据类型

类型	描述
Number	整型或实型
Boolean	逻辑值	true, false
String	字符串
Array	数组，即有索引元素列表
Object	包含数据和行为的实体
function	函数，即要执行的语句组
null	空值	null
undefined	缺值； 未定义的值	undefined

数值类型

许多操作自动转换类型：“2” * 3 is 6

注释a

// 单行注释/* 多行注释 */

4种注释的语法：

HTML:

CSS/JS/PHP: /* comment */

JAVA/JSPHP: // comment

PHP: # comment

DOM队形

属性	类型	描述
className	string	元素的class属性
id	string	元素的ID属性
innerHTML	string	元素中的HTML标记和内容
style	object	表示元素样式属性的对象
tagName	string	元素的HTML标签，大写字母表示

// 使用 alert 测试脚本是否被载入alert("Is the browser even loading my script?");

字符串

转义字符

字符串连接和加法

函数：parseInt和parseFloat

序号	表达式	结果
1	parseInt(“42”)	42
2	parseInt(“12pt font”)	12
3	parseInt(" 4erver young!")	4
4	parseInt("")	NaN
5	parseInt(“Sacha Baron Cohen”)	NaN
6	parseInt(“2.56”)	2
7	parseFloat(“2.56”)	2.56
8	parseFloat(“3.14159ppp09348”)	3.14159
9	parseFloat(“0000000000.0000”)	0

String属性和方法

// 对象属性和方法的语法模板object.propertyobject.method(parameters)

// 一个简单示例var name = "L.Crosf";var len = name.length;   //len=8;// length是name的属性

String类型

var s = "Connie Client";var fName = s.substring(0,s.indexOf(" ")); // "Connie"var len = s.length;                        // 13var s2 = 'Melvin Merchant';				   // can use ""or''// subsring是一个方法，截取字符串// 截到出现第一个索引号开始，indexOf，就是取它的索引号// length是属性（不是方法）

转义字符： \' \" \& \n \t \\

var count = 10;var s1 = "" + count;				//"10" 字符串var s2 = count + "bananas,ah ah!";  //"10 bananas,ah ah!"var n1 = parseInt("42 is the answer"); //42var n2 = parseFloat("booyah");		  // NaN

要访问字符串的字符，请使用[index] 或 charAt;

var firstLetter = s[0];var firstLetter = s.charAt(0);var lastLetter = s.charAt(s.length-1);// 取索引号方法// 1.通过数组// 2.通过方法 charAt

String方法

	方法名	功能描述
1	charAt( index )	返回指定位置的字符，index从0开始
2	charCodeAt( index )	放回指定位置的字符的ASCII编码
3	String.fromCharCode(value)	返回指定ASCII码对应的字符串
4	indexof( searchStr ) indexOf(searchStr, fromIndex)	返回某个指定的字符串值在字符串中首次出现的位置
5	split(delimeter) split(delimeter,Howmany)	用于把一个字符串分割成字符串数组
6	substring(start) substring(start,stop)	提取字符串中结余两个指定下标的字符
7	toLowerCase()	用于把字符串转换为小写
8	toUpperCase()	用于把字符串转换为大写
9	trim()	返回取掉字符串两端空格后的字符串

Math对象

// 数学属性和数学方法的语法模板Math.propertyMath.method(parameters)

数学常量

常量	描述
Math.E	自然对数的底数，即2.718281828459045
Math.LN2	2的自然对数，约为0.693
Math.PI	圆周率，3.1415926

Math函数

	函数	描述
1	Math.abs(x)	返回x的绝对值
2	Math.ceil(x)	返回x的向上取整值
3	Math.cos(x)	返回x的余弦值
4	Math.floor(x)	返回x的向下取整值
5	Math.log(x)	返回x的自然对数值
6	Math.max(x,y)	返回x和y中的大值
7	Math.in(x,y)	返回x和y中的小值
8	Math.pow(x,y)	返回X y 值
9	Math.random()	返回0-1之间的一个伪随机数
10	Math.round(x)	返回对x进行四舍五入后的值
11	Math.sin(x)	返回x的正弦值
12	Math.sqrt(x)	返回x的平方根值
13	Math.tan(x)	返回x的正切值

33 JS代码风格

参考链接：https://www.bilibili.com/video/BV1Ns411N7HU?p=20

• JavaScript Standard Style：https://standardjs.com/
• Airbnb JavaScript Style：https://github.com/sivan/Javascript-style-guide/blob/master/es5/README.md

代码无分号问题

参考链接：https://www.bilibili.com/video/BV1Ns411N7HU?p=20

21 JS

简介

JS-helloworld

编写位置

标签属性中

button

a 的 href 中

style标签中

外部js文件中

基本语法

console.log("hello"); // 该语句用来在控制台输出一个日志

• JS中严格区分大小写

• JS中每一条语句一分号 ; 结尾

  • 如果不写分号，浏览器自动添加，但是会消耗一些系统资源，
  • 而且有些时候，浏览器会加错分号，所以在开发中分号必须写

• JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

字面量和变量

字面量，都是一些不可改变的值

比如：1 2 3 4 5

字面量，都是可以直接使用，但是我们一般不会直接使用字面量

变量 变量可以用来保存字面量，而且变量的值是可以任意改变的

变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量

而很少直接使用字面量

x = 1234585986987

声明变量
在js中使用var关键字来声明一个变量
var a;

标识符

标识符
在JS中所有的可以由我们自主命名的都可以称为标识符
例如：变量名 函数名 属性名 都属于标识符

命名标识符 需要遵守如下的规则

1. 标识符中可以含有字符、数字、_、$
2. 标识符不能以数字开头
3. 标识符不能是 ES 中的关键字或保留字
4. 标识符一般都采用驼峰命名法

• 首字母小写，每个单词的开头字母大写，其余字母小写
  helloWorld xxxYyyZzz

JS底层保存标识符时实际上是采用的Unicode编码，
所以理论上讲，所有的utf-8中函数有的内容都可以作为标识符

下面的错误

var if = 123;console.log(if);

一元运算符

自增和自减

自增练习

逻辑运算符

非布尔值的与或

赋值运算符

关系运算符

Unicode编码表

相等运算符

条件运算符

运算符的优先级

代码块

if语句 一

if语句 二

练习

if练习一

if练习二

条件分支语句

switch语句

while循环

while的练习

for循环

for循环

质数练习

补充质数练习

嵌套的for循环

练习

for循环练习

break和continue

质数练习的改进

对象的简介

对象的基本操作

属性名和属性值

基本数据类型和

对象字面量

函数的简介

函数的参数

函数的返回值

实参可以是任何值

返回值的类型

立即执行函数

方法

全局作用域

函数作用域

debug

this

this补充

使用工厂方法

构造函数

构造函数修改

原型对象

原型对象

toString（）

垃圾回收

数组简介

数组字面量

数组的四个方法

数组的遍历

数组练习

forEach

slice和splice

数组去重练习

数组的剩余方法

call和apply

arguments

Date对象

Math

包装类

字符串的方法

正则表达式的简介

正则语法

字符串和正则相

正则表达式语法

正则表达式语法

邮件的正则

DOM简介

事件的简介

文档的加载

dom查询

图片切换的练习

DOM查询

DOM查询

全选练习（一）

全选练习（二）

全选练习（三）

dom查询的剩

dom增删改

添加删除记录

添加删除技术

添加删除记录

a的索引问题

操作內联样式

获取元素的样式

getStyle()方法

其他样式相关

事件对象

div跟随鼠标移动

事件的冒泡

事件的委派

事件的绑定

完成bind函数

拖拽（一）

拖拽（二）

拖拽（三）

滚轮的事件

键盘事件

键盘移动div

Navigator

History

Location

定时器简介

切换图片练习

修改 div 移动练习

延时调用

定时器的应用

定时器的应用

定时器的应用

完成轮播图界面

完成点击按钮

完成轮播图

类的操作

二级菜单-完成

二级菜单-过渡

JSON

第4章 jQuery

介绍

jQuery，顾名思义，也就是 JavaScript 和查询（Query），它就是辅助 JavaScript 开发的 js 类库。

jQuery思想

write less,do more(写得更少,做得更多)，所以它实现了很多浏览器的兼容问题。

jQuery流行

jQuery 现在已经成为最流行的 JavaScript 库，在世界前 10000 个访问最多的网站中，有超过 55%在使用 jQuery。

jQuery优点

jQuery 是免费、开源的，

jQuery 的语法设计可以使开发更加便捷，

例如操作文档对象、选择 DOM 元素、 制作动画效果、事件处理、使用 Ajax 以及其他功能

核心函数

$ 是 jQuery 的核心函数，能完成 jQuery 的很多功能。$()就是调用$这个函数

1、传入参数为 [ 函数 ] 时： 表示页面加载完成之后。相当于 window.onload = function(){}

2、传入参数为 [ HTML 字符串 ] 时： 会对我们创建这个 html 标签对象

3、传入参数为 [ 选择器字符串 ] 时： $(“#id 属性值”); id 选择器，根据 id 查询标签对象 $(“标签名”); 标签名选择器，根据指定的标签名查询标签对象 $(“.class 属性值”); 类型选择器，可以根据 class 属性查询标签对象

4、传入参数为 [ DOM 对象 ] 时： 会把这个 dom 对象转换为 jQuery 对象

、jQuery 对象和 dom 对象区分

DOM对象

1、通过 getElementById() 查询出来的标签对象是 DOM对象

2、通过 getElementsByName()查询出来的标签对象是 DOM 对象

3、通过 getElementsByTagName()查询出来的标签对象是 DOM 对象

4、通过 createElement() 方法创建的对象，是 DOM 对象

DOM 对象 Alert 出来的效果是：[object HTML 标签名 Element]

jQuery 对象

1、通过 JQuery 提供的 API 创建的对象，是 JQuery 对象

2、通过 JQuery 包装的 Dom 对象，也是 JQuery 对象

3、通过 JQuery 提供的 API 查询到的对象，是 JQuery 对象

jQuery 对象 Alert 出来的效果是：[object Object]

jQuery对象的本质

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列功能函数

jQuery对象和DOM对象使用区别

jQuery 对象不能使用 DOM 对象的属性和方法 DOM 对象也不能使用 jQuery 对象的属性和方法

DOM对象和jQuery对象互转

1、dom 对象转化为 jQuery 对象（*重点）
1、先有 DOM 对象
2、$( DOM 对象 ) 就可以转换成为 jQuery 对象
2、jQuery 对象转为 dom 对象（*重点）
1、先有 jQuery 对象
2、jQuery 对象[下标]取出相应的 DOM 对象

选择器

基本选择器

#ID 选择器：根据 id 查找标签对象.class 选择器：根据 class 查找标签对象element 选择器：根据标签名查找标签对象* 选择器：表示任意的，所有的元素selector1，selector2 组合选择器：合并选择器 1，选择器 2 的结果并返回

层级选择器

ancestor descendant 后代选择器 ：在给定的祖先元素下匹配所有的后代元素parent > child 子元素选择器：在给定的父元素下匹配所有的子元素prev + next 相邻元素选择器：匹配所有紧接在 prev 元素后的 next 元素prev ~ sibings 之后的兄弟元素选择器：匹配 prev 元素之后的所有 siblings 元素

过滤选择器

基本过滤器

:first	获取第一个元素
:last	获取最后个元素
:not(selector)	去除所有与给定选择器匹配的元素
:even	匹配所有索引值为偶数的元素，从 0 开始计数
:odd	匹配所有索引值为奇数的元素，从 0 开始计数
:eq(index)	匹配一个给定索引值的元素
:gt(index)	匹配所有大于给定索引值的元素
:lt(index)	匹配所有小于给定索引值的元素
:header	匹配如 h1, h2, h3 之类的标题元素
:animated	匹配所有正在执行动画效果的元素

内容过滤器

:contains(text)	匹配包含给定文本的元素
:empty	匹配所有不包含子元素或者文本的空元素
:parent	匹配含有子元素或者文本的元素
:has(selector)	匹配含有选择器所匹配的元素的元素

属性过滤器

[attribute]	匹配包含给定属性的元素。
[attribute=value]	匹配给定的属性是某个特定值的元素
[attribute!=value]	匹配所有不含有指定的属性，或者属性不等于特定值的元素。
[attribute^=value]	匹配给定的属性是以某些值开始的元素
[attribute$=value]	匹配给定的属性是以某些值结尾的元素
[attribute*=value]	匹配给定的属性是以包含某些值的元素
[attrSel1][attrSel2][attrSelN]	复合属性选择器，需要同时满足多个条件时使用。

表单过滤器

:input	匹配所有 input, textarea, select 和 button 元素
:text	匹配所有 文本输入框
:password	匹配所有的密码输入框
:radio	匹配所有的单选框
:checkbox	匹配所有的复选框
:submit	匹配所有提交按钮
:image	匹配所有 img 标签
:reset	匹配所有重置按钮
:button	匹配所有 input type=button 按钮
:file	匹配所有 input type=file 文件上传
:hidden	匹配所有不可见元素 display:none 或 input type=hidden

表单对象属性过滤器

:enabled	匹配所有可用元素
:disabled	匹配所有不可用元素
:checked	匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
:selected	匹配所有选中的 option

jQuery元素筛选

eq()	获取给定索引的元素 功能跟 :eq() 一样
first()	获取第一个元素 功能跟 :first 一样
last()	获取最后一个元素 功能跟 :last 一样
filter(exp)	留下匹配的元素
is(exp)	判断是否匹配给定的选择器，只要有一个匹配就返回，true
has(exp)	返回包含有匹配选择器的元素的元素 功能跟 :has 一样
not(exp)	删除匹配选择器的元素 功能跟 :not 一样
children(exp)	返回匹配给定选择器的子元素 功能跟 parent>child 一样
find(exp)	返回匹配给定选择器的后代元素 功能跟 ancestor descendant 一样
next()	返回当前元素的下一个兄弟元素 功能跟 prev + next 功能一样
nextAll()	返回当前元素后面所有的兄弟元素 功能跟 prev ~ siblings 功能一样
nextUntil()	返回当前元素到指定匹配的元素为止的后面元素
parent()	返回父元素
prev(exp)	返回当前元素的上一个兄弟元素
prevAll()	返回当前元素前面所有的兄弟元素
prevUnit(exp)	返回当前元素到指定匹配的元素为止的前面元素
siblings(exp)	返回所有兄弟元素
add()	把 add 匹配的选择器的元素添加到当前 jquery 对象中