JavaScript笔记

一、基础知识

1、输出语句

alert();

控制浏览器弹出一个只有确定的警告框

prompt();

控制浏览器弹出一个可以输入的警告框，会有返回值

confirm();

控制浏览器弹出一个有确定和删除的警告框

document.write();

让计算机在页面中输出一个内容

console. log()；

向控制台输出一个内容

2、编写位置

1. 可以将js代码编写到标签的onclick属性中

 <button onlick = "alret( 'hello' );>点我一下</button>

2. 可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码

<a href= "javascript:alert('HELLO');">点击这里</a>

4. 可以将js代码编写到script标签

<script type= "text/javascript" >
	alert("我是script标签中的代码!! ");
</script>

5. 可以将js代码编写到外部js文件中，然后通过script标签引入

<script type="text/javascript" src="js/script.js"></script>

3、基本语法

1. 注释
   //单行注释
   /* */多行注释
2. 书写规范
   JS中严格区分大小写
   JS中每一条语句以分号(;)结尾
   JS中会忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化

4、字面量与变量

1. 字面量
   都是一些不可改变的值
   字面量都是可以直接使用，但是我们一般都不会直接使用字面量

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

3. 声明变量
   在js中使用var关键字来声明一个变量
   例：

    var a ;var b ;var xyz;
 
命名一个标识符时需要遵守如下的规则:
	1.标识符中可以含有字母、数字、_、$
	2.标识符不能以数字开头
	3.标识符不能是ES中的关键字或保留字
	4.标识符一般都采用驼峰命名法

5、数据类型

1. 字符串 String
   -在JS中字符串需要使用引号引起来
   -使用双引号或单引号都可以
   -引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var str = "hello";

-单引号里可以放双引号，反之亦可

str ='我说:"今天天气真不错!"';

2. 数值类型 Number
   -在JS中所有的数值都是Number类型,包括整数和浮点数
   -在JS中可以表示的数字的最大值" Number .MAX_VALUE"
   -如果使用Number表示的数字超过了最大值，则会返回一个"Infinity"表示正无穷
   -NaN 是一个特殊的数字，表示Not A Number

3. 布尔值 Boolean
   -true为真
   -false为假

4. Null与Undefined
   Null空值
   -Null类型的值只有一个，就是null
   -null这个值专门用来表示一个为空的对象
   Undefined未定义
   -Undefined类型的值只有一个，就undefined
   -当声明一个变量，但是并不给变量赋值时，它的值就是undefined

5. 检查一个变量的类型 typeof
   例

console.log(typeof a);
---------------------------------
显示结果：[web浏览器]"number"

-使用typeof检查Infinity也会返回Number
-使用typeof检查一个NaN也会返回number
-使用typeof检查一个布尔值时，会返回booleanl
-使用使用typeof检查一个null值时，会返回object
-使用typeof检查一个undefined时也会返回undefined

6、强制转换类型

1. 将其他的数据类型转换为String
   -方法一
   调用被转换数据类型的toString() 方法
   该方法不会影响到原变量
   但null和undefined这两个值没有toString()方法

var a = 123;
var b = a.toString();
-----------------------------
typeof此时a的类型还是Number类型
typeof此时b的类型是String类型

-方法二
调用String()函数，并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时，对于Number和Boolean实际上就是调用的toString()方法，但是对于null和undefined，就不会调用toString()方法，它会将null直接转换为"null"，将undefined直接转换为“undefined"

a=string(a);

2. 将其他的数据类型转换为Number
   -方式一:
   使用Number()函数
   1)字符串–>数字
   如果是纯数字的字符串，则直接将其转换为数字
   如果字符串中有非数字的内容，则转换为NaN
   如果字符串是一个空串或者是一个全是空格的字符串，则转换为0
   2)布尔–>数字
   true转成1
   false转成0
   3)Null–>数字 0
   4)undefined -->数字NaN
   -方式二:
   这种方式专门用来对付字符串
   parseInt()把一个字符串转换为一个整数
   parseFloat()把一个字符串转换为一个浮点数
   如果对非String使用parseInt()或parseFloat()它会先将其转换为String，然后在操作
3. 其他进制的数学
   如果需要表示16进制的数字，则需要以0x开头
   a=0x123
   如果需要表示8进制的数字，则需要以0开头
   a=0123
4. 将其他的数据类型转换为Boolean
   -使用Boolean()函数
   1）数字—>布尔
   除了0和NaN，其余的都是true
   2）字符串—>布尔
   除了空串，其余的都是trure
   3）null和undefined都会转换为false
   4）对象也会转换为true
   

7、运算符

1. 通过运算符可以对一个或多个值进行运算,并获取运算结果
   比如: typeof就是运算符，可以来获得一个值的类型，它会将该值的类型以字符串的形式返回
2. 当对非Number类型的值进行运算时，会将这些值转换为Number然后在运算

result = true + false;	result =2 +null;	result = 2 + NaN;
---------------------------------------------------------------
结果:“1"					结果:“2"				结果:“NaN”

3. 任何值和NaN做运算都得NaN

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

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

6. 除了加法，其余运算，都会转化为Number类型进行运算

7. 可以对一个其他的数据类型用“+”,来将其换为number类型

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

var a = 10;
a = ! ! a ;
console.log( "b = "+b);
console.log(typeof b);
-------------
"b = false"
"boolean"

9. 对于非布尔值进行与或运算时，会向将其转换为布尔值，然后再运算
   -NaN是false
10. 运算符的优先级
    

二、对象

1、对象

1. 只要不是5种基本类型，就是对象
2. 对象的分类
   1.内建对象
   -由ES标准中定义的对象，在任何的ES的实现中都可以使用
   -比如:Math String Number Boolean Function object…
   2.宿主对象
   -由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
   -比如 BOM DOMl
   3.自定义对象
   -由开发人员自己创建的对象

2、 创建对象

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

var obj = new Object( );

3、 对象属性

在对象中保存的值称为属性
向对象添加属性
-语法:对象.属性名=属性值;

var obj = new obj();
obj.name ="程序猿";

-如果要使用特殊的属性名，不能采用.的方式来操作需要使用另一种方式:
语法:
对象[“属性名”]=属性值

var obj = new obj();
obj["123"]= 789;

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

var obj = new obj();
 delete obj.name;

4、in 运算符

通过该运算符可以检查一个对象中是否含有指定的属性
如果有则返回true，没有则返回false
语法:“属性名” in 对象

console.log("name" in obj);

5、对象字面量

var obj2 = {
name:"猪八戒",
age : 28,
gender:"男",
test : {name : "沙和尚"}};

三、函数 Function

1、创建一个函数对象

 var fun = new Function();

表达式函数：不进行提升，必须先声明在使用

var foo()=function(x,y){
	return x-y;
};

function foo(x.y){ 
	return x+y;
}

var num=foo（1.2）;
console.log(num)
--------------------------------------
答案：-1

2、函数知识点

1. 封装到函数中的代码不会立即执行
2. 可以将要封装的代码以字符串的形式传递给构造函数（基本不用）

var fun = new Function( "console.log( 'Hello这是我的第一个函数');");

3. JS语言定义函数时编译器会忽略形参的数据类型

3、立即执行函数（匿名函数）

(function(){
alert("我是一个匿名函数~~~" );
})();

用（）圈起来当成整体；在最后加上（）便立即执行

4、方法

var obj = new object();
obj.sayName = function(){

}

5、枚举对象中的属性

使用for … in 语句
语法:
for( var 变量 in 对象 ){
}
对象中有几个属性，循环体就会执行几次

for(var n in obj){
console.log("属性名:"+n);
console.log("属性值:"+obj[n]);
}

6、this

1. 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,这个隐含的参数就是this, this指向的是一个对象，
   1.以函数的形式调用时，this永远都是window
   2.以方法的形式调用时，this就是调用方法的那个对象

2. js中的this
   this 既不指向函数自身，也不指函数的词法作用域。如果仅通过this的英文解释，太容易产生误导了。它实际是在函数被调用时才发生的绑定，也就是说this具体指向什么，取决于你是怎么调用的函数。即谁调用的函数，this就指向谁。
   this默认指向window，如果是直接调用函数的话。

3. java中的this
   当局部（或者形参）变量和成员变量重名的时候，在方法中使用this表示成员变量以示区分。

7、构造函数

1. 构造函数就是一个普通的函数，创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
2. 普通函数是直接调用，而构造函数需要使用new关键字来调用
3. 构造函数的执行流程
   1.立刻创建一个新的对象
   2.将新建的对象设置为函数中this ,在构造函数中可以使用this来引用新建的对象
   3.逐行执行函数中的代码
   4.将新建的对象作为返回值返回

instanceof

使用instanceof可以检查一个对象是否是一个类的实例
如果是，则返回true，否则返回false

console.log(per instanceof Person) ;

6. 所有的对象都是Object的后代，所以任何对象和Object做instanceof检查时都会返回true

8、闭包函数

“闭包”指的是有权访问另一函数作用域内变量(局部变量)的函数。主要的两点用途如下:
■可以在函数外部读取函数内部的变量;
■可以让变量的值始终保持在内存中;

注意:由于闭包会使得函数中的变量直被保存在内存中 ，内存消耗很大，所以闭包的滥用可能会降低程序的处理速度,造成内存消耗等问题。

function f(){
	var i=10;
	var callback=function(){
		console.log(i++);
	};
	return callback;
}
var count =f();
count ();
count ();
count ();

9、箭头函数

箭头函数
（参数1，参数2，…）=>{表达式}

console.log(((a.b)=>a*b)(6.2));

自执行函数\自调用函数
；（匿名函数）（实参）

四、原型对象 prototype

1. 如果函数作为普通函数调用prototype没有任何作用

2. 当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以 通过__proto__ 来访问该属性(两个_)

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

4. 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，如果没有则会去原型对象中寻找，如果找到则直接使用

5. 检查属性
   -使用in检查对象中是否含有某个属性时，如果对象中沿有但是原型中有，也会返回true
   -可以使用对象的 hasOwnProperty()来检查对象自身中是否含有该属性，使用该方法只有当对象自身中含有属性时，才会返回true

6. 原型对象也是对象，所以它也有原型

五、垃圾回收

1. 在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作
2. 我们需要做的只是要将不再使用的对象设置null即可

var obj = new object () ;
obj=null; 

六、数组 Array

1、创建数组

var arr =new Array() ;

2、数组中的元素可以是任意的数据类型

arr = [ "hello",1,true,null,undefined];

1、数组也可以是对象

arr[ arr. length] = obj;
arr = [{name : "孙悟空"},{name : "沙和尚"},{name : "猪八戒"}];

2、数组也可以是函数

arr = [function( ){alert(1)} ,function( ){alert(2)}];

3、数组中也可以放数组

arr = [[1,2,3],[3,4,5],[5,6,7]];

3、数组的方法

1、length

对于连续的数组，使用length可以获取到数组的长度（元素的个数）
对于非连续的数组（不是连续赋值的数组），使用length会获取到数组的最大的索引+1
向数组的最后一个位置添加元素
-语法:数组[数组.length]=值;

2、push()

-该方法可以向数组的末尾添加一个或多个元素，并返回数组的新的长度
-可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾

var arr=[];
var result = arr.push("123","456","789");

3、pop()

-该方法可以删除数组的最后一个元素

var arr=["123","456","789"];
var result = arr.pop();

4、unshift()

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

var arr=["123","456","789"];
arr. unshift("234","345");

4、shift()

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

var arr=["123","456","789"];
arr . shift();

5、forEach（）

一般我们都是使用for循环去遍历数组，
JS中还为我们提供了一个方法，用来遍历数组
forEach()方法需要一个函数作为参数

arr.forEach(function(value , index , obj)){

};

浏览器会在回调函数中传递三个参数;
	第一个参数，就是当前正在遍历的元素
	第二个参数，就是当前正在遍历的元素的索引
	第三个参数，就是正在遍历的数组

6、slice（）

-可以用来从数组提取指定元素
-该方法不会改变元素数组，而是将截取到的元素封装到一个新数组中返回

arrayObject.slice (start, end)
参数;
	start：截取开始的位置的索引,包含开始索引
	end：截取结束的位置的索引,不包含结束索引

7、splice（）

-使用splice()会影响到原数组，会将指定元素从原数组中册除并将被册除的元素作为返回值返回

arrayObject.splice(index,howmany,item1,.....,itemX)
参数:
	第一个索引，表示开始位置的
	第二个索引，表示删除的数量
	第三个及以后，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

8、concat（）

-可以连接两个或多个数组，并将新的数组返回
-该方法不会对原数组产生影响

var result = arr.concat( arr2);
var result = arr.concat(arr2 ,arr3);

9、 join（）

-该方法可以将数组转换为一个字符串
-该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
-在join()中可以指定一个字符串作为参数，这个字符串将会成为数组中元素的连接符

10、 reverse( )

-该方法用来反转数组（前边的去后边，后边的去前边)
-该方法会直接修改原数组

11、 sort()

-可以用来对数组中的元素进行排序
-也会影响原数组，默认会按照Unicode编码进行排序所以对数字进排序时，可能会得到错误的结果。
我们可以自己来指定排序的规则,在sort()添加一个回调函数，来指定排序规则，回调函数中需要定义两个形参
-浏览器会根据回调函数的返回值来决定元素的顺序
如果返回一个大于0的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个0，则认为两个元素相等，也不交换位置

arr .sort( function(a,b){
	//前边的大
	if(a > b){
		return 1;
	}else if(a < b){
		return -1;
	}else{
		return 0;
	}
});

Tip:精简版：直接 return a-b；

12、 for in

遍历元素

for (let i in str){
	console.log(str[i]);
}

13、 for of

遍历元素

for (let i of str){
	console.log(i);
}

七、 call与apply

1、call()和apply()

-这两个方法都是函数对象的方法，需要通过函数对象来调用
-当对函数调用cal1()和apply()都会调用函数执行
-在调用call()和apply()可以将一个对象指定为第一个参数此时，这个对象将会成为函数执行时的this

function fun () {
	alert(this);
var obj={}
fun.call(obj);
fun. apply(obj)；

2、传参数

call()万法可以将实参在对象之后依次传递
apply()方法需要将实参封装到一个数组中统一传递

fun. call(obj,2,3);
fun. apply(obj,[2,3]);

3、this的情况:

1.以函数形式调用时，this永远都是window
2.以方法的形式调用时， this是调用方法的对象
3.以构造函数的形式调用时，this是新创建的那个对象
4.使用call和apply调用时，this是指定的那个对象|

八、 arguments

1. 在调用函数时，浏览器每次都会传递进两个隐含的参数:
   1.函数的上下文对象this
   2.封装实参的对象arguments
   -arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
   -在调用函数时，我们所传递的实参都会在arguments中保存
   -arguments .length可以用来获取实参的长度

function getMax(){
	var max = arguments[0]
	for (let i=0;i<arguments.length;i++){
		if(arguments[i]>max)max=arguments[i];
	}
	return max
}
console.log(getMax(1,0,3,2,2.5,10,7,8,999))

九、 Date对象

1、创建一个Date对象

var d =new Date();

在JS中使用Date对象来表示一个时间
需要在构造函数中传递一个表示时间的字符串作为参数
日期的格式 月份 / 日 / 年 时 : 分 : 秒

var d2 =new Date( "12/03/1611:10:30");

2、Date方法

1、getDate()

-获取当前日期对象是几日

2、 getDay ()

获取当前日期对象时周几
会返回一个0-6的值
0表示周日
1表示周一
…

3、 getMonth( )

-获取当前时间对象的月份
-会返回一个0-11的值
0表示1月
1表示2月
11表示12月

4、getTime( )

-获取当前日期对象的时间戳
-时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒,到当前日期所花费的毫秒数（1秒= 1000毫秒)

十、Math

1、Math

-Math和其他的对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里边封装了数学运算相关的属性和方法
-比如Math.PI表示的圆周率

2、Math方法

1、abs()

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

2、Math.ceil()

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

3、Math.floor()

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

4、 Math.round( )

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

5、 Math.random( )

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

Math .round (Math.random( )*×)

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

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

6、Math. pow(x,y)

返回x的y次幂

十一、 包装类

1. 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象
   String()
   -可以将基本数据类型字符串转换为String对象
   Number()
   -可以将基本数据类型的数字转换为Number对象
   Boolean( )
   -可以将基本数据类型的布尔值转换为Boolean对象

var num = new Number (3);

3. 方法和属性之能添加给对象，不能添加给基本数据类型当我们对一些基本数据类型的值去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法|

4. 但是注意:我们在实际应用中不会使用基本数据类型的对象，如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果

十二、String的方法

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

2、String的方法

1、charAt()

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

2、 charCodeAt()

–获取指定位置字符的字符编码（Unicode编码)

3、 String.formCharCode( )

-可以根据字符编码去获取字符

4、 concat()

-可以用来连接两个或多个字符串
-作用和 + 一样

5、 indexof()

-该方法可以检索一个字符串中是否含有指定内容
-如果字符串中含有该内容，则会返回其第一次出现的索引
如果没有找到指定的内容，则返回-1
-可以指定一个第二个参数，指定开始查找的位置

6、 lastIndexOf();

-该方法的用法和indexOf()一样，
不同的是indexOf是从前往后找,而lastIndexOf是从后往前找

7、 slice()

-可以从字符串中截取指定的内容
-不会影响原字符串，而是将截取到内容返回
-参数;
第一个，开始位置的索引（包括开始位置)
第二个，结束位置的索引（不包括结束位置)

8、substring()

-可以用来截取一个字符串，可以slice()类似
-参数:
第一个:开始截取位置的索引（包括开始位置)
第二个:结束位置的索引（不包括结束位置)
-不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0
-而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换

9、split()

-可以将一个字符串拆分为一个数组
-这个方法即使不指定全局匹配，也会全都插分
-参数。
需要一个字符串作为参数，将会根据该字符串去拆分数组

10、toUpperCase()

-将一个字符串转换为大写并返回

11、 toLowerCase()

-将一个字符串转换为小写并返回

十三、正则表达式

1、正则表达式用于定义一些字符串的规则

计算机可以根据正则表达式，来检查一个字符串是否符合规则
或者将字符串中符合规则的内容提取出来

2、 创建正则表达式的对象

语法:

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

3、匹配模式

可以是
i忽略大小写
g全局匹配模式
…

4、正则表达式的方法:

test()
-使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
如果符合则返回true，否则返回false

var reg = new RegExp( "a");
var str = "a";
var result =reg.test( str);

5、正则语法

创建一个正则表达式，检查一个字符串中是否有a或b
（使用“│”表示或者的意思）

reg = /a|b|c/;

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

reg = /[ab]/;

[ab] == a|b
"[a-z]"表示任意小写字母
“【^】”表示除了

6、 字符单和正则相关的方法

（1）根据任意字母来将字符串拆分

var result = str.split(/[A-z]/);

（2） search()
-可以搜索字符串中是否含有指定内容
-如果搜索到指定内容，则会返回第一次出现的索引，如果没有搜索到返回-1
-它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串

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

-serach()只会查找第一个，即使设置全局匹配也没用
(3)match()
-可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
-默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索,我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容

str = "1a2b3c4d5e6f7";
result = str.match(/[A-z]/g);

-match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
(4)replace()
-可以将字符串中指定内容替换为新的内容

stringObject.replace(regexp/substr,replacement)

参数:
	1.被替换的内容,可以接受一个正则表达式作为参数
	2.新的内容
		-默认只会替换第一个

7、量词

-通过量词可以设置一个内容出现的次数
-量词只对它前边的一个内容起作用

{n}正好出现n次
{m,n}出现m-n次|
{m,  }出现m次以上
" + "至少一个，相当于{1, }
" * " 0个或多个，相当于{0, }
" ? " 0个或1个，相当于{0,1}

var reg = /a{3}/ ;
// ababab
reg = / (ab){3}/;
console.log(reg.test(ababab" ));

-" ^ "表示以xxx开头
-" $ "表示以xxx结尾

reg = /^a/ ; //匹配开头的a
reg = /a$/; //匹配结尾的a

-如果在正则表达式中同时使用^$则要求字符串必须完全符合正则表达式

reg = /^a$/;
console.log( reg.test("aaa")); //false
console.log( reg.test("a")); //true

8、 元字符

.表示任意字符
在正则表达式中使用\作为转义字符
\.来表示 .
\\ 表示 \ 
\w 任意字母、数字、 _   ；同   [A-z0-9_]
\W 除了字母、数字、 _  ；同   [ ^ A-z0-9_]
\d " 任意的数字 ； [0-9]
\D “ 除了数字  ；  [ ^ 0-9]
\s "空格
\S "除了空格
\b "单词边界
\B "除了单词边界

十四、DOM

JS中通过DOM来对HTML文档进行操作。只要理解了DOM就可以随心所欲的操作WEB页面。

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

1、节点

常用节点分为四类
-文档节点 ：整个HTML文档
-元素节点：HTML文档中的HTML标签
-属性节点∶元素的属性
-文本节点:HTML标签中的文本内容

我们可以在事件对应的属性中设置一些js代码，这样当事件被触发时，这些代码将会执行；这种写法我们称为结构和行为耦合，不方便维护，不推荐使用

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

2、onload事件

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

3、获取节点对象

1、getElementByld()

-通过document对象调用
-通过id属性获取一个元素（标签）节点对象

2、getElementsByTagName()

-通过document对象调用
-通过标签名获取一组元素节点对象

3、getElementsByName()

-通过document对象调用
-通过name属性获取一组元素节点对象

4、innerHTML

-用于获取元素内部的HTML代码的
-对于自结束标签，这个属性没有意义

4、如果需要读取元素节点属性

-直接使用
元素 .属性名
-例子:
元素.id元素.name元素.value
-注意:
class属性不能采用这种方式
读取class属性时需要使用元素.className

5、获取元素节点的子节点

通过具体的元素节点调用
1. getElementsByTagName()
-方法，返回当前节点的指定标签名后代节点
2. childNodes
–属性，表示当前节点的所有子节点
3. firstChild
–属性，表示当前节点的第一个子节点
4. lastChild
-属性，表示当前节点的最后一个子节点

6、获取父节点和兄弟节点

通过具体的节点调用
1. parentNode
-属性，表示当前节点的父节点
2. previousSibling
-属性，表示当前节点的前一个兄弟节点
3. nextSibling
-属性，表示当前节点的后一个兄弟节点

7、细节

1. 在document中有一个属性body，它保存的是body的引用

var body = document.body;

1. document.documentElement保存的是html根标签

var html = document.documentElement;

2. document.all代表页面中所有的元素

var all = document.all;

2. 根据元素的class属性值查询一组元素节点对象

var box1 = document.getElementsByclassName( "");

8、DOM的方法

1、document.queryselector()

-需要一个选择器的字符串作为参数，可以根据一个CSS选择器来查询一个元素节点对象

var div = document.querySelector( ".box1 div" );

-使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个

2、document.createElement( )

可以用于创建一个元素节点对象，
它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回

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

3、document .createTextNode()

可以用来创建一个文本节点对象
需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回

var a = document.createTextNode("a");

4、appendchild()

-向一个父节点中添加一个新的子节点
-用法: 父节点.appendChild(子节点)

5、insertBefore()

-可以在指定的子节点前插入新的子节点
-语法:
父节点.insertBefore(新节点,旧节点);

6、replacechild()

-可以使用指定的子节点替换已有的子节点
-语法:
父节点.replaceChild(新节点,旧节点）;

7、removeChild()

-可以删除一个子节点
-语法:
父节点.removeChild(子节点);
Tips：
子节点.parentNode.removeChild(子节点);//无需获取父节点

9、通过JS修改元素的样式:

语法：
元素.style.样式名=样式值
Tips：
注意:
如果CSS的样式名中含有-，
这种名称在JS中是不合法的比如background-color需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的字母大写

10、获取元素的当前显示的样式

1、 currentStyle

-语法:元素.currentStyle.样式名
-它可以用来读取当前元素正在显示的样式

box1.currentStyle.width

currentStyle只有iE8浏览器支持，其他的浏览器都不支持
在其他浏览器中可以使用
getComputedstyle()这个方法来获取元素当前的样式（正常浏览器都可以，ie9以上的可以）

getComputedstyle()
-这个方法是window的方法，可以直接使用

参数
	第一个:要获取样式的元素
	第二个:可以传递一个伪元素，一般都传null
-----------------------------------------
var obj = getComputedstyle(box1,null);

2、getstyle（）

getstyle（）该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过 对象.样式名 来读取样式
如果获取的样式没有设置，则会获取到真实的值，而不是默认值
比如:没有设置width，它不会获取到auto，而是一个具体的长度
定义一个函数，用来获取指定元素的当前的样式

getstyle(obj , name)
参数:
	obj要获取样式的元素
	name要获取的样式名

function getstyle(obj , name){
	if(window.getComputedStyle){
		//正常浏览器的方式，具有getComputedStyle()方法
	return getComputedstyle(obj , nul1 )[name];
	}else{
		//工E8的方式，没有getComputedstyle()方法
		return 	obj.currentStyle[name];
	}
}

3、clientwidth ；clientHeight

-这两个属性可以获取元素的可见宽度和高度
-这些属性都是不带px的，返回都是一个数字，可以直接进行计算
-会获取元素宽度和高度，包括内容区和内边距

4、offsetParent

-可以用来获取当前元素的定位父元素
-会获取到离当前元素最近的开启了定位的祖先元素

5、offsetLeft

-当前元素相对于其定位父元素的水平偏移量

6、offsetTop

-当前元素相对于其定位父元素的垂直偏移量

十五、事件对象

1. onmousemove

-该事件将会在鼠标在元素中移动时被触发

2. client

clientX可以获取鼠标指针的水平坐标；
cilentY可以获取鼠标指针的垂直坐标
用于获取鼠标在当前的可见窗口的坐标div的偏移量，是相对于整个页面的

3、page

pageX和pageY可以获取鼠标相对于当前页面的坐标

4、 事件的冒泡（Bubble)

-所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
-在开发中大部分情况冒泡都是有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡，可以将事件对象的cancelBubble设置为true，即可取消冒泡

event.cancelBubble = true;

5、事件的委派

–指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素从而通过祖先元素的响应函数来处理事件。
-事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

6、事件的绑定

-使用: 对象.事件 = 函数的形式绑定响应函数
-它只能同时为 个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边会覆盖掉前边的
-也可以通过addEventListener( )为元素绑定响应函数

element.addEventListener(event, function, useCapture)

参数;
	1.事件的字符串，不要on
	2.回调函数，当事件触发时该函数会被调用
	3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false

7、attachEvent()

-在IE8中可以使用attachEvent()来绑定事件

attachEvent()
参数:
	1.事件的字符串，要on
	2.回调函数
--------------------------------------------
btne1.attachEvent( "onclick" ,function( ){
	alert(1);
});

8、事件的传播

-关于事件的传播网景公司和微软公司有不同的理解
-微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。
-网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件,
然后在向内传播给后代元素
- W3C综合了两个公司的方案，将事件传播分成了三个阶段
1.捕获阶段
-在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2.目标阶段
-事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3.冒泡阶段
-事件从目柯元素向他的祖先元素传递，依次触发祖先元素上的事件
-如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
-般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是falsel

十六、事件触发

1、拖拽

拖拽的流程
1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup

2、滚轮事件

1. onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，但是火狐不支持该属性
2. 在火狐中需要使用DOMMousescroll来绑定滚动事件
   -注意该事件需要通过addEventListener()函数来绑定

bind( box1, "DOMMouseScroll",function( ){

});

4. 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，这是浏览器的默认行为，如果不希望发生，则可以取消默认行为

3、键盘事件

1、键盘事件:

2、onkeydown

-按键被按下
-对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
-当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生。

3、onkeyup

-按键被松开

1. 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
2. 可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下

4、判断alt ctrl 和shift是否被按下

altKey
ctrlKey
shiftKey
这个三个用来判断alt ctrl 和shift是否被按下
如果按下则返回true，否则返回false

十七、BOM

BOM
-浏览器对象模型
-BOM可以使我们通过JS来操作浏览器
-在BOM中为我们提供了一组对象，用来完成对浏览器的操作
-BOM对象
Window
-代表的是整个浏览器的窗口，同时window也是网页中的全局对象
Navigator
-代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location
-代表当前浏览器的地址栏信息
History
-代表浏览器的历史记录
-由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页
-而且该操作只在当次访问时有效
screen
-代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
2. 这些BOM对象在浏览器中都是作为window对象的属性保存的，可以通过window对象来使用，也可以直接使用

十八、Navigator

1. 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
2. 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
3. —般我们只会使用userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
4. 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息

十九、History

1. 对象可以用来操作浏览器向前或向后翻页

1、length

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

2、back()

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

3、 forward( )

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

4、go()

-可以用来跳转到指定的页面
-它需要一个整数作为参数
1∶表示向前跳转一个页面相当于forward()
2∶表示向前跳转两个页面
-1∶表示向后跳转一个页面
-2:表示向后跳转两个页面

二十、Location

1. 该对象中封装了浏览器的地址栏的信息.
2. 如果直接打印location，则可以获取到地址栏的信息.(当前页面的完整路径)
3. 如果直接将location属性修改为一个完整的路径，或相对路径则我们页面会自动跳转到该路径，并且会生成相应的历史记录

1、assign( )

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

2、 reload()

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

location.reload(true);

二十一、定时器

1. setInterval()

-定时调用
-可以将一个函数，每隔一段时间执行一次
-参数;
1：回调函数，该函数会每隔一段时间被调用一次
2：每次调用间隔的时间，单位是毫秒
-返回值:
返回一个Number类型的数据
这个数字用来作为定时器的唯—标识

2. lclearInterval()

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

3. clearInterval()

可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器如果参数不是一个有效的标识，则什么也不做

4. 延时调用

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

二十二、类

1. 我们可以通过修改元素的class属性来间接的修改样式
   -这样—来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离

2. 定义一个函数，用来向一个元素中添加指定的class属性值
   参数:
   obj要添加class属性的元素
   cn要添加的class值
   
   4.判断一个元素中是否含有指定的class属性值
   -如果有该class，则返回true，没有则返回false
   

3. 删除一个元素中的指定的class属性
   

4. toggleclass可以用来切换一个类
   -如果元素中具有该类，则删除
   -如果元素中没有该类，则添加
   

二十三、JSON

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

2. JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互

3. JSON
   -JavaScript object Notation JS对象表示法
   -JSON和JS对象的格式—样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致
   JSON分类:
   1.对象 { }
   2.数组 [ ]
   JSON中允许的值:
   1.字符串
   2.数值
   3.布尔值
   4.null
   5.对象
   6.数组

4. 将JSON字符串转换为JS中的对象
   -在JS中，为我们提供了一个工具类，就叫JSON
   -这个对象可以帮助我们将一个JSON转换为JS对象，也可以将一个JS对象转换为JSON

5. JSON. parse()
   -可以将以JSON字符串转换为js对象
   -它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回

6. JSON.stringify()
   -可以将一个JS对象转换为JSON字符串
   -需要一个js对象作为参数，会返回一个JSON字符串

7. eval()
   -这个函数可以用来执行一段字符串形式的了S代码，并将执行结果返回
   -如果使用eval()执行的字符串中含有{0,它会将{(}当成是代码块。如果不希望将其当成代码块解析，则需要在字符串前后各加一个()