JS

JS代码写在哪？

​ 1.可以将js代码编与到标签的onclick属性中，当我们点击按钮时，js代码才会执行，虽然可以写在标签的属性中，但是他们属于结构与行为耦合，不方便维护，不推荐使用

<button onclick="alert('讨厌， 你点我千嘛~');">点我一下</button>

<!--
可以将js代码写在超链接的href属性中，这样当点击超链接时，会执行js代码
-->
<a href="javascript:alert('让你点你就点! ! ');">你也点我-下</a>
<a href="javascript:;">你也点我-下</a>

​ 2.也可以写在script标签中

<!--
可以将js代码编写到script标签
-->
<script type="text/javascript">
	alert("我是script标签中的代码!↑");
</script>

​

​ 3.可以将js代码编写到外部js文件中

<!--
可以将js代码编写到外部js文件中，然后通过script标签引入
写到外部文件中可以在不同的页面中同时引用，也可以利用到浏览器的缓存机制
推荐使用的方式
-- >
<!--
script标签-旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略
如果需要则可以在创建-一个新的script标签用于编写内部代码
-->
<script type="text/javascript" src="js/script.js"></script><!--引入外部文件-->
    
<script type="text/javascript">
	alert( "我是内部的JS代码");
</script>

数据类型

数据类型指的就是字面量的类型，在JS中一共有六种数据类型 String字符串 Number数值 Boolean布尔值 Null空值 Undefined未定义 object对象 其中String Number Boolean Null Undefined属于基 本数据类型，而0bject属于引用数据类型

字符串

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

在字符串中我们可以使用\作为转义字符，当表示一些特殊符号时可以使用 \ 进行转义

\" 表示 ” \‘ 表示 ’ \n 表示 换行 \t 表示 制表符 \\ 表示 \

Number

在JS中所有的数值都是Number类型，包括整数和浮点数(小数) JS中可以表示的数字的最大值 ：Number . MAX_ VALUE

console . log (Number.MAX_ _VALUE);

1.7976931348623157e+308 如果使用Number表示的数字超过了最大值，则会返回一个 -Infinity表示正无穷 -Infinity表示负无穷 使用typeof检查Inf inity也会返回Number Number.MIN_ VALUE大于0的最小值5e-324

NaN是一个特殊的数字，表示Not A Number 使用typeof检查- -个NaN也会返回number

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

​ 如果使用JS进行浮点运算，可能得到一个不精确的结果,所以千万不要使用JS进行对精确度要求比较高的运算,要放到服务器里面算。

bool

布尔值只有两个，主要用来做逻辑判断 true:表示真 false :表示假 使用typeof检查一个布尔值时，会返回boolean

Null

Null (空值)类型的值只有一个，就是null null这个值专门用来表示-一个为空的对象 使用typeof检查一个null值时， 会返回object

Undefined

Undefined (未定义)类型的值只有一个，就undefind 当声明一个变量，但是并不给变量赋值时，它的值就是undefined 使用typeof检查一个undefined时也会返回undefined

类型转换

​ 强制类型转换;：指将-一个数据类型强制转换为其他的数据类型 ​ 一类型转换主要指，将其他的数据类型，转换为 string Number Boolean

将其他数据转换为String

将其他的数据类型转换为String 方式一： 调用被转换数据类型的tostring( )方法 一该方法不会影响到原变量，它会将转换的结果返回 一但是注意: null和undefined这两个值没有tostring，如果调用他们的方法，会报错

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

转换为Number

将其他的数据类型转换为Number 转换方式一-: 使用Number( )函数 一字符串-->数字 1.如果是纯数字的字符串，则直接将其转换为数字 2.如果字符串中有非数字的内容，则转换为NaN 3.如果字符串是一个空串或者是一个全是空格的字符串，则转换为

​ 一布尔-->数字 ​ true转成1 ​ false转成日

​ -null-->数字0

​ 一undefined -->数字 NaN

转换方式二: -这种方式专门用来对付字符串 parseInt() 把一个字符串转换为一个整数 parseInt()可以将-一个字符串中的有效的整数内容去出来，然后转换为Number

​ parseFloat()r把一 个字符串转换为一一个浮点数 parseFloat( )作用和parseInt()类似，不同的是它可以获得有效的小数

如果对非String使用parseInt()或parseFloat()它会先将其转换为String, 然后再操作

转换为Boolean

将其他的数据类型转换为Boolean,使用Boolean( )函数

​ -数字--->布尔 除了0和NaN,其余的都是true

​ -字符串--->布尔 一除了空串，其余的都是true

null和undefined都会转 换为false

​ -对象也会转换为true

其他进制的数字

在js中： 如果需要表示16进制的数字，则需要以 0x 开头 如果需要表示8进制的数字， 则需要以 0 开头 如果要要表示2进制的数字，则需要以 0b 开头，但是不是所有的浏览器都支持

像"070"这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析 可以在parseInt( )中传递一个第二个参数，来指定数字的进制

parseInt(12, 8);//八进制转换

输入提示框（prompt）

prompt()可以弹出一个提示框，该提示框中会带有一个文本框，用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，该字符串将会作为提示框的提示文字用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容。

创建对象

1.可以用 objectname = new object() 来创建一个对象，然后再往里面添加一个一个的属性，对象名.属性名=属性值； 2.也可以通过字面量来创建一个对象 var objectname={ 属性名：属性值，…} ,属性名和属性值之间用冒号分隔，各个属性之间用逗号分隔。

创建一个类

	function Class_name(Class_attribute, Class_attribute){//括号里面的是类的构造时所传的构造参数
			this.Class_attribute = Attribute_value; //通过这中this.属性名 = 属性值(构造函数所传的参数)
			this.Class_attribute = Attribute_value;
			this.Class_attribute = Attribute_value;
			this.method_name = function_name;   //将类的方法写在全局作用域里面
			this.method_name = function function_name() {
				statement;
				将类的方法写在类中
				}
			}
			function function_name(){
				statement;  //类中的方法,这样写不会在声明一个对象的时候再声明一个对象的方法,但是会污染全局作用域的命名空间
			}

原型对象

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

原型对象就相当于一一个公共的区域，所有同一个类的实例都可以访问到这个原型对象， 我们可以将对象中共有的内容，统一设置到原型对象中。 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用， 如果没有则会去原型对象中寻找，如果找到则直接使用 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统添加到构造函数的原型对象中， 这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了

原型对象也是对象，所以它也有原型， 当我们使用一一个对象的属性或方法时，会现在自身中寻找， 自身中如果有，则直接使用， 如果没有则去原型对象中寻找，如果原型对象中有，则使用， 如果没有则去原型的原型中寻找,直到找到bject对象的原型， object对象的原型没有原型，如果在0bject原型中依然没有找到，则返回undefined

数组方法

forEach

forEach()方法需要一一个函数作为参数 像这种函数，由我们创建但是不由我们调用的，我们称为回调函数 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素 以实参的形式传递进来，我们可以来定义形参，来读取这些内容 浏览器会在回调函数中传递三个参数: 第一个参数，就是当前正在遍历的元素 第二个参数，就是当前正在遍历的元素的索引 第三个参数，就是正在遍历的数组

一般我们都是使用for循环去遍历数组， JS中还为我们提供了一一个方法，用来遍历数组 forEach() -这个方法只支持IE8以上的浏览器 IE8及以下的浏览器均不支持该方法，所以如果需要兼容IE8,则不要使用forEach 还是使用for循环来遍历

slice和splice方法

slice() 可以用来从数组提取指定元素 一该方法不会改变元素数组， 而是将截取到的元素封装到- -个新数组中返回 一参数: 1.截取开始的位置的索引,包含开始索引 2.截取结束的位置的索引，不包含结束索引 -第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 索引可以传递一个负值，如果传递一个负值，则从后往前计算 -1倒数第-一个 -2倒数第二个

splice() 一可以用于删除数组中的指定元素 -使用splice()会影响到原数组，会将指定元素从原数组中删除 并将被删除的元素作为返回值返回 一 参数: 第一个，表示开始位置的索引 第二个，表示删除的数量 第三个及以后。。 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

数组的四个基本方法

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

2.pop() 该方法可以删除数组的最后-一个元素 ,并将被删除的元素作为返回值返回

3.unshift( ) 一向数组开头添加一个或多个元素，并返回新的数组长度 一向前边插入元素以后，其他的元素索引会衣次调整

4.shift( ) 可以删除数组的第一一个元素，并将被删除的元素作为返回值返回

concat()

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

/*
*
concat( )可以连接两个或多个数组，并将新的数组返回
*
-该方法不会对原数组产生影响
*/
var result = arr. concat(arr2,arr3,“牛魔王" ,铁扇公主");

join()

/*
*
join()
*
一该方法可以将数组转换为-一个字符串
*
一该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回
*
一在join( )中可以指定-一个字符串作为参数，这个字符串将会成为数组中元素的连接符
*
如果不指定连接符，则默认使用,作为连接符
*/
arr = ["孙悟空"，”猪八戒" ,“沙和尚"];
result = arr.join("@-@");| I

reverse

/*
* reverse()
*一该方法用来反转数组( 前边的去后边，后边的去前边)
*一该方法会直接修改原数组
*/
arr. reverse( );

sort

/*
* sort()
*
一可以用来对数组中的元素进行排序
*
-也会影响原数组，默认会按照Uni code编码进行排序
*/
arr.sort();
//arr . reverse();
/*
*即使对于纯数字的数组，使用sort( )排序时，也会按照Uni code编码来排序，
*所以对数字进排序时， 可能会得到错误的结果。
*
*
我们可以自己来指定排序的规则
*我们可以在sort( )添加一个回调函数，来指定排序规则，
*
回调函数中需要定义两个形参,
浏览器将会分别使用数组中的元素作为实参去调用回调函数
使用哪个元素调用不确定，但是肯定的是在数组中a-定在b前边
一浏览器会根据回调函数的返回值来决定元素的顺序，
如果返回一个大于8的值，则元素会交换位置
如果返回一个小于0的值，则元素位置不变
如果返回一个日，则认为两个元素相等，也不交换位置
一如果需要升序排列，则返回a-b
如果需要降序排列，则返回b-a*/
arr =[5,4,2,1,3,6,8,7];
arr . sort( function(a,b){
 return a-b;
}

函数的方法

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

call( )方法可以将实参在对象之后依次传递 一apply()方法需要将实参封装到-个数组中统一传递 T 一thi s的情况: 1.以函数形式调用时，thi s永远都是window 2.以方法的形式调用时，thi s是调用方法的对象 3.以构造函数的形式调用时，thi s是新创建的那个对象 4.使用cal1和apply调用时，thi s是指定的那个对象

函数的argument对象

在调用函数时，浏览器每次都会传递进两个隐含的参数: 1.函数的上下文对象this 2.封装实参的对象arguments

arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度 -在调用函数时，我们所传递的实参都会在arguments中保存 一arguments.length可以用来获取实参的长度 一我们即使不定义形参，也可以通过arguments来使用实参， 只不过比较麻烦 arguments[0]表示第一一个实参 arguments[1]表示第二个实参。。 。 一它里边有一个属性叫做callee, 这个属性对应一一个函数对象，就是当前正在指向的函数的对象

包装类

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

var num = new Number(3);
var str =
new String("hello");
var bool= new Boolean(true);

正则表达式

正则表达式简单介绍

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

在JS中正则表达式是一个对象，使用之前需要创建一个正则表达式对象

语法: var变量= new RegExp( ”正则表达式”,“匹配模式"); 使用typeof检查正则对象，会返回object

var reg = newRegExp("a");
//这个正则表达式可以来检查-个字符串中是否含有a

在构造函数中可以传递一个匹配模式作为第二个参数， 可以是： i忽略大小写 g全局匹配模式

字面量创建正则表达式

使用字面量来创建正则表达式，语法: var变量= /正则表达式/匹配模式 使用字面量的方式创建更加简单 使用构造函数创建更加灵活

reg = /a/i; //检查一个字符串中是否有a并且不区分大小写

正则表达式中的语法

使用 | 表示或者的意思

reg = /a | b | c/; //检查一个字符串中是否有 a 或 b 或 c

[ ] 里的内容也表示或关系， [ab] == a|b;

reg = /[abcdefg]/ //a或b或c或d...

[a-z] 表示任意小写字母 [A-Z] 表示任意大写字母 [0-9] 表示任意的数字

reg = /[a-z]/; //检查一个字符串是否含有任意小写字母
reg = /[A-z]/; //检查一个字符串中是否含有字母 

/a[bc]e/ 以固定字母开头固定字母结束

reg = /a[bc]e/; //检查一个字符串中是否有以a开头b或c中间c结尾的字符串

[^ ] 除了

reg = /[^ab]/; //检查一个字符串中含有除了ab以外其他的字符

用一个量词来表示内容出现的次数，它只对前面出现的一个内容起作用，{n}正好出现n次

var reg = /a{3}/; //检查一个字符串中含有三个连续的a
var reg = /ab{3}/; //检查一个a三个b出现	
var reg = /(ab){3}/； //检查ababab出现

{m,n}一个字符出现m到n次 {m, }出现m次以上

var reg = /a{1,4}/; //a出现1到四次

+至少一个，相当于{1,} *个或多个，相当于{0,} ? 0个或1个，相当于{0,1}

var reg = /a?c/; //a出现0次或1次

^ 以固定字符开头 $ 以固定字符结尾

reg = /^a|a$/;  //以a开头或者以a结尾

创建-一个正则表达式，用来检查一个字符串是否是一个合法手机号 手机号的规则: 1 3 567890123 (11位) 1.以1开头 2.第二位3-9任意数字 3.三位以后任意数字9个 ^1 [3-9] [0-9]{9}$

.表示任意字符 在正则表达式中使用\作为转义字符 \.来表示. \\表示\ 注意:使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，如果需要则使用\\来代替

\W 一 任意字母、数字 [A-Z0-9 ] \W 一 除了字母、数字 [^A-Z0-9 ] \d 一任意的数字[日-9] \D -除了数字[^0-9] \s 一空格 \S 一除了空格 \b 一单词边界 \B —除了单词边界

去除输入字符串中的空格

str= str.replace(/\s/g,""); //去掉字符串中所有的空格
str = str.replace(/^\s*|\s*$/g,""); //去掉字符串中开头和结尾的空格保留中间的空格

字符串和正则表达式相关的方法

1.split() 一 可以将一个字符串拆分为一个数组 一 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式去拆分字符串 — 这个方法即使不指定全局匹配，也会全都插分

var result = str.split(/[A-z]); //以字母来拆分字符串

2.search( ) -可以搜索字符串中是否含有指定内容 如果搜索到指定内容，则会返回第一-次出现的索引，如果没有搜索到返回- 1 -它可以接受一个正则表达式作为参数，然后会根据正则表达式去检索字符串 —search只会查找第一个，即使设置了全局匹配也没用

/*
*搜索字符串中是否含有abc或aec或afc
*/
result = str. search(/a[bef]c/);

3.match( ) 一可以根据正则表达式，从一个字符串中将符合条件的内容提取出来 一默认情况下我们的match只会找到第一 个符合要求的内容，找到以后就停止检索 我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容 可以为一个正则表达式设置多个匹配模式，且顺序无所谓。 一match( )会将匹配到的内容封装到-一个数组中返回，即使只查询到-一个结果

str = "1a2b3c4d5e6f7A8B9C";
result = str . match(/[a-z]/ig);

4.replace( )可以将字符串中指定内容替换为新的内容 参数: 1.被替换的内容，可以接受- 一个正则表达式作为参数 2.新的内容 —默认只会替换第一个

//result=str.replace(/[a-z]/gi，"@_@");
result = str.replace(/[a-z]/gi,"");

DOM(文档对象模型)

简单介绍

浏览器已经为我们提供文档节点对象这个对象是window属性，可以在页面中直接使用，文档节点代表的是整个网页

console . log( document);  //获取到button对象
var btn = document. getElementById("btn"); //通过id获取HTML中的button元素
//修改按钮的文字
btn. innerHTML = I'm Button"; //修改button中的HTML内容

获取一个id为btn的按钮 ，为其绑定一个响应函数

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

文档的加载

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

​ 解决方法：onload事件会在整个页面加载完成之后才触发，为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行，这样可以确保我们的代码执行明所有的DOM对象已经加载完毕了

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

DOM查询

获取元素节点,通过document对象调用

1. getElementById() 一通过id属性获取一个元素节点对象

//为id为btn01的按钮绑定-个单击响应函数
var btne1 = document . getElementById("btne1");
btne1.onclick = function(){
	//查找#bj节点
	var bj = document . getElementById("bj");
	//打印bj
	//innerHTML通过这个属性可以获取到元素内部的html代码
	alert(bj. innerHTML);
};

2. getElementsByTagName() 一通过标签名获取一组元素节点对象

//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document . getElementById("btne2");
btn82. onclick = function(){
	//查找所有1i节点
	//getElementsByTagName( )可以根据标签名来获取一-组元素节点对象
	//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
	//即使查询到的元素只有-个，也会封装到数组中返回
	var lis = document. getElementsByTagName("li");
	//打印lis
	//alert(lis.length);
	//变量lis
	for(var i=0 ; i<lis.length ; i++){
	alert(lis[i] . innerHTML);
	}
};

3. getElementsByName() 一通过name属性获取一组元素节点对象

//为id为btn03的按钮绑定一个单击响应函数
var btne3 = document . getEl ementById("btn03");

btn03.onclick = function(){
	//查找name=gender的所有节点
	var inputs = document. getElementsByName(" gender");
	//alert(inputs.length); 
	for(var i=0 ; i<inputs.length ; i++){
/*
	* innerHTML用于获取元素内部的HTML代码的
	对于自结束标签，这个属性没有意义
	//alert(inputs[i]. innerHTML);
	*如果需要读取元素节点属性，
	直接使用元素.属性名
	例子:元素.id元素.name元素. value 
	注意: class属性不能采用这种方式，
	读取class属性时需要使用元素. className
*/
	alert(inputs[i].className);
	}
};

获取元素节点的子节点,通过具体的元素节点调用

1. getElementsByTagName() 一方法,返回当前节点的指定标签名后代节点

//为id为btn04的按钮绑定一个单击响应函数
var btne4 = document . getElementById("btn04");
	btn04. onclick = function(){
	//获取id为city的元素
	var city = document . getElementById("city");
	//查找#city下所有li节点
	var lis = city. getElementsByTagName("li");
	for(var i=9 ; i<lis.length ; i++){
	alert(lis[i]. innerHTML);
};

2. childNodes -属性,表示当前节点的所有子节点

//为d为btne5的按钮绑定-个单击响应函数
var btne5 = document . getElementById("btn05");
btne5.onclick = function(){
//获取id为city的节点
var city = document . getElementById("city");
//返回#city的所有子节点
/* childNodes属性会获取包括文本节点在呢的所有节点
* 根据DOM标签标签间空白也会当成文本节点
* 注意:在工E8及以下的浏览器中，不会将空白文本当成子节点，
* 所以该属性在IE8中会返回子元素的节点个数而其他浏览器是节点个数加上空白节点的个数
*/
var cns = city. childNodes;
/*alert(cns .1ength);
	*for(var i=0 ; i<cns.1ength ; i++){
	alert(cns[i]);
	这样输出的不会只是获取节点的子节点，还会有其中的文本节点
}*/

/*
*	children属性可以获取当前元素的所有子元素的节点
*/
var cns2 = city . children;
alert(cns2. length);
};

3. firstChild 一属性,表示当前节点的第一个子节点

4. lastChild -属性,表示当前节点的最后一个子节点

	//为id为btne7的按钮绑定个单击响应函数
	myClick("btn87" , function(){
	//获取id为bj的节点
	var bj = document . getElementById("bj");
	//返回#bj的父节点
	var pn = bj.parentNode;
	//alert(pn. innerHTML);
/*
* innerText
*
， 该属性可以获取到元素内部的文本内容
一它和innerHTML类似，不同的是它会自动将htm1去除
*/
	alert (pn. innerText);
	
});

例子：设置全选

//为id为checkedAl1Btn的按钮绑定一个单击响应函数
var checkedAllBtn = document . getElementById("checkedAllBtn");
checkedAllBtn.onclick = function(){
//获取四个多选框items
var items = document. getElementsByName("items" );
//遍历items
for(var i=8 ; i<items. length ; i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
//alert(items[i]. checked);
//设置四个多选框变成选中状态
items[i].checked = true;
};

例子：为全选全不选框绑定响应函数

//为四个多选框分别绑定点击响应函数
for(var i=0 ; i<items.length ; i++){
items[i].onclick = function(){
	//将checkedAllBox设置为选中状态
	checkedAllBox.checked = true;
for(var j=0 ; j<items.1ength ; j++){
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!items [j]. checked){
	//一旦进入判断，则证明不是全选状态
	//将checkedAllBox设置为没选中状态
	checkedAllBox.checked = false;
	//一旦进入判断，则已经得出结果，不用再继续执行循环
	break;
	}
}

获取body标签

//获取body标签
//var body = document. getElementsByTagName("body")[0];
/*
*	在document中有一个属性body,它保存的是body的引用
*/
var body = document . body;

获取HTML标签

/*
* document . document Element保存的是htm1根标签
*/
var html = document . document Element ;

获取所有标签

/*
* document.all代表页面中所有的元素
*/
var all = document.all;

通过选择器（获取类标签）获取标签

/* document . querySelector()
*
.需要一个选择器的字符串作为參数，可以根据一个CSS选择器来查询一个元素节点对象
*
-虽然IE8中没有getElementsByClassName( )但是可以使用querySelector()代替
*
-使用该方法总会返回唯-的一个元素， 如果满足条件的元素有多个，那么它只会返回第一一个
*/
var div = document . querySelector(".box1 div");
var box1 = document. querySelector(" . box1")
//console. log(div. innerHTML);
//console. log( box1. innerHTML);
/*
* document . querySelectorAll()
-该方法和querySelector( )用法类似，不同的是它会将符合条件的元素封装到一个数组中返回
*
-即使符合条件的元素只有一个，它也会返回数组
*/
box1 = document.querySelectorAll(".box1");
box1 = document.querySelectorAll("#box2");
console.1og(box1);

DOM的增删改查

在页面中增加一个节点

例：在指定元素后面增加一个元素

//创建一个"广州"节点,添加到#city下
myClick("btne1" , function(){
//创建广州节点<li>广州</li>
//创建1i元素节点
/*
* 	document . createElement()
*	可以用于创建一个元素节点对象，
*	它需要一个标签名作为参数， 将会根据该标签名创建元素节点对象，
*	并将创建好的对象 作为返回值返回
*/
var li = document . createElement("li");
//创建广州文本节点
/*
*	document . createTextNode()
*   可以用来创建一个文本节点对象
*	需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
*/
var gzText = document. createTextNode("广州");
//将gzText设置li的子节点
/*
*	appendChild()
*	一向一个父节点中添加一个新的子节点
*	-用法:父节点. appendChild(子节点);
*/
li. appendChild(gzText);
//获取id为city的节点
var city = document . getElementById( "city");
//将广州添加到city下
city . appendChild(li);

例：在指定元素前面增加一个元素

myClick("btne2" , function(){
//创建-一个广州
var li = document . createElement("li");
var gzText = document. createTextNode("广州");
li . appendChild(gzText);
//获取id为bj的节点
var bj = document . getElementById("bj");
//获取city
var city = document. getElementById("city");
/*
* insertBefore()
* 可以在指定的子节点前插入新的子节点
*
* -语法:
* 父节点.insertBefore (新节点,旧节点);
*/
city.insertBefore(li , bj); 
});

例：替换指定的节点

//使用“广州"节点替换#bj节点
myClick("btn03", function(){
//创建一个广州
	var 1i = document. createElement("1i");
	var gzText = document . createTextNode("广州");
	li.appendChild(gzText);
//获取id为bj的节点
	var bj = document.getElementById("bj");
//获取city
var city = document. getElementById("city");
/*
*	replaceChild()
*	可以使用指定的子节点替换已有的子节点
*	一语法:父节点.replaceChild(新节点,节点);
*/
city. replaceChild(li,bj);
});

例：删除指定节点

myClick("btne4" , function(){
//获取id为bj的节点
var bj = document. getElementById("bj");
//获取city
//var city = document. getElementById("city");
/* removeChild()
*	可以删除一个子节点
*	一语法:父节点. removeChild(子节点);
*	子节点.parentNode . removeChild(子节点);
*/
//city. removeChild(bj);
	bj.parentNode.removeChild(bj);
});

使用DOM来操作样式

修改样式

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

**通过style设置的属性都是内联样式，而内联样式有较高的优先级所以通过js设置的样式都会立即显示，如果在样式中写了 !important ,则此时样式具有较高的优先级，即使通过js也无法覆盖该样式，此时将会造成JS修改失效，所以尽量不要为样式添加 ！important **

box1.style.width = "300px";
box1.style.height = "300px";
box1.style. backgroundColor = "yellow" ;

读取内联样式

语法:元素.style .样式名 通过style属性设置和读取的都是内联样式，无法读取样式表中的样式

alert(box1.style.backgroundColor); //读取box1的背景颜色

读取当前显示的样式

获取元素的当前显示的样式，语法:元素.currentStyle .样式名,它可以用来读取当前元素正在显示的样式 如果当前元素没有设置该样式，则获取它的默认值

alert( box1.currentStyle.width);
alert( box1.currentStyle.backgroundcolor);

currentStyle只有工E浏览器支持，其他的浏览器都不支持

其他浏览器中可以使用getComputedStyle()这个方法来获取元素当前的样式，这个方法是window的方法可以直接使用 需要两个参数： 第一个：要获取样式的元素 第二个：可以传递一个伪元素，一般为NULL 该方法会返回一个对象，对象中封装了当前元素对应的样式，可以通过 对象.样式 名来读取样式，如果获取的样式没有设置，则会获取到真实的值，而不是默认值 比如:没有设置width,它不会获取到auto,而是-一个长度

var obj = getComputedstyle(box1,nu1l);
alert(getComputedstyle(box1, nu1l).width);
alert(getComputedsty1e( box1, nu1l).backgroundColor);

该方法不支持IE8及以下的浏览器

注意：通过 元素名.CurrentStyle 和 getComputedStyle(元素名，伪元素)读到的样式都是只读的，不能修改，如果要修改必须通过style属性。

​ 要获取IE8以下浏览器的方法只能用currentStyle方法而其他浏览器只能用getComputedStyle()方法所以要实现通用的方法来获取元素的当前样式可以自己写一个方法

//定义一个函数用来获取指定元素的当前样式
/* 参数：
		obj 要获取样式的元素
		name 要获取的样式名
*/
function getSty1e(obj , name){
	if(window. getComputedstyle){
	//正常浏览器的方式，具有getComputedstyle()方法
	return getComputedsty1e(obj，null)[name];
	}else{
	//IE8的方式，没有getComputedstyle()方法
	return obj.currentSty1e[name];
}

其他样式操作的属性

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

alert(box1.c1ientWidth);
alert(box1.clientHeight);

offsetWidth, offsetHeight 获取元素的整个的宽度和高度，包括内容区、内边距和边框

alert(box1. offsetWidth);

offsetLeft -当前元素相对于其定位父元素的水平偏移量 offsetTop 一当前元素相对于其定位父元素的垂直偏移量

alert(box1. offsetLeft );

scrollWidth scrollHeight -可以获取元素整个滚动区域的宽度和高度

scrollLeft -可以获取水平滚动条滚动的距离 scrollTop -可以获取垂直滚动条滚动的距离

当满足scrollHeight 一scrollTop == clientHeight 说明垂直滚动条滚动到底了 当满足scrollWidth 一scrollLeft == clientWidth 说明水平滚动条滚动到底

事件对象

​ 当事件对象被触发时，浏览器每次会将一个事件对象作为实参传递进响应函数，在事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘的哪个键按下， 鼠标滚轮滚动的方向

/*
* clientX可以获取鼠标指针的水平坐标
* cilentY可以获取鼠标指针的垂直坐标
*/
areaMove.onmouseMove = function(){
    var x = event.clientX;
	var y = event. clientY;
}

​ 但是在IE8及以下的浏览器中，事件被触发时浏览器不会传递事件对象，而是将事件作为window对象保存的，如果要使用需要用window.event来调用,但是在其他的浏览器比如火狐里还是会以实参的形式传递给响应函数所以需要考虑兼容问题 解决方法

areaMove.onmouseMove = function(){
    event = event || window.event;  //让event先等于event如果为ture则使用实参event如果event为false使用window.event
    var x = event.clientX;
	var y = event. clientY;
}

事件冒泡

所谓的冒泡指的是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发，在开发中大多数的冒泡都是有用的，如果不希望发生事件冒泡可以通过事件对象来取消。

var aaa.onclick = function(event){
//在事件响应函数中通过event的一个属性来取消事件冒泡
    event = event || window.event
    event.cancelBubble = true; //当event.cancelBubble 为true 时可取消冒泡
}

事件的绑定

​ 使用对象.事件 = 函数 的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个，则后面的会覆盖掉前面的。 ​ 也可以用addEventListener()方法来为元素绑定响应函数。 ​ 参数： ​ 1.事件的字符串， 不要on ​ 2.回调函数，当事件触发时该函数会被调用 ​ 3.是否在捕获阶段触发事件，需要一个布尔值，一般都传false 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数会按照函数的绑定顺序执行

这个方法不支持IE8及以下的浏览器

在IE8 及以下中可以使用attachEvent() 参数: 1.事件的字符串，要on 2.回调函数 这个方法也可以为一个事件绑定多个处理函数，不同的是 后绑定先执行，顺序和addEventListener相反

解决兼容性

//定义一个函数，用来为指定元素绑定响应函数
/* 	addEventListener( )中的this,是绑定事件的对象
* 	attachEvent( )中的this,是window
*	需要统一-两个方法this
*/
/*
*	参数:
*	obj要绑定事件的对象
*	eventStr事件的字符串(不要on)
*	callback回调函数
*/
	function bind(obj,eventStr,callback){
					if( obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
						/*
						*	this是由调用方式决定的
						*	callback.call(obj)
						*/
						//IE8及以下
						obj.attachEvent( "on"+eventStr,function(
								   ){callback()}); //用这种方法让浏览器调用匿名函数，匿名函数再调用callback方法就可以同意this的值
					}
				}

事件传播

事件的传播 关于事件的传播网景公司和微软公司有不同的理解 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件， 然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行。 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件， 然后在向内传播给后代元素 W3C综合了两个公司的方案，将事件传播分成了三个阶段 1.捕获阶段 -在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件 2.目标阶段 -事件捕获到目标元素，捕获结束开始在目标元素上触发事件 3.冒泡阶段 -事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件

/* 如果希望在捕获阶段就触发事件，可以将addEventListener( )的第三个参数设置为true
*  一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
*/

拖拽

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
			#box1{
				height: 100px;
				width:100px;
				background-color:yellow;
				position: absolute;
			}
			#box2{
				height: 100px;
				width:100px;
				background-color:black;
				position: absolute;
				left: 200px;
				top: 200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				
				//鼠标按下事件绑定
				box1.onmousedown = function(event){
					//设置box1对鼠标按下相关的事件进行捕获
					//当调用一个元素的setCapture( )方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上
					// setCapture只对IE支持,在火狐中调用不会报错,但是在chrome中会报错,所以会有兼容性的问题
					
					//兼容性解决
					box1.setCapture &&box1.setCapture();

					
					event = event || window.event; //兼容性问题
					//获取鼠标相对于要移动块的位置,为鼠标的坐标减去块相对于窗口的移动位置
					var ol = event.clientX - box1.offsetLeft;
					var ot = event.clientY - box1.offsetTop;
					
					document.onmousemove = function(event){
						//鼠标移动时块也移动移动的时候改变块的偏移量
						event = event || window.event;
						box1.style.left = (event.clientX - ol ) + "px";
						box1.style.top = (event.clientY - ot ) + "px";
					}
					document.onmouseup = function(){
						//当鼠标松开时将onmousemove和onmuseup取消掉
						document.onmousemove = null;
						document.onmouseup = null;
						box1.releaseCapture && box1.releaseCapture();
					}
					 /*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 如果不希望发生这个行为， 则可以通过return false来取消默认行为
					 */
					 return false;

				}
			
			}
		</script>
	</head>
	
	<div id = "box1"></div>
	<div id="box2"></div>
		
	</body>
</html>

滚轮事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			#box1{
				width:100px;
				height:100px;
				background-color:black;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				* 当鼠标滚动时box1变长
				*/
			   //获取id为box1的div
			   var box1 = document.getElementById("box1");
			   //为box1绑定鼠标滚轮事件
			   /*
			   *	onmous ewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
			   *	但是火狐不支持该属性
			   *
			   *
			   *	在火狐中需要使用DOMMouseScroll来绑定滚动事件
			   *	注意该事件需要 通过addEventListener( )函数来绑定
			   */

				
			   box1.onmousewheel = function(event){
				//判断鼠标移动的方向
				event = event || window.event;
				//event.wheelDelta 可以获取鼠标滚轮的方向
				//向上滚时120,向下滚是-120,这个值我们不看大小， 只看正负
				//alert(event.wheelDelta);
				//event.wheelDelta这个属性火狐中不支持,火狐中使用event.detail来获取滚动方向
				//向上滚为-3,向下为3
				//alert(event.detail);
				
				if(event.wheelDelta > 0 || event.detail < 0 ){
					box1.style.height = box1.clientHeight - 10 + "px";
				}else{
					box1.style.height = box1.clientHeight + 10 + "px";
				}
				/*
				*使用addEventListener( )方法绑定响应函数，取消默认行为时不能使用return false
				*需要使用event来取消默认行为event.preventDefault();
				*
				*但是IE8不支持event.preventDefault();这个玩意,如果直接调用会报错
				*/
				event. preventDefault && event.preventDefault();
				/*
				*当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，
				*这是浏览器的默认行为，如果不希望发生，则可以取消默认行为
				*/
				return false;

			
			   }
			   
			   bind(box1, "DOMMouseScroll", box1.onmousewheel)
			   
				function bind(obj,eventStr,callback){
					if( obj.addEventListener){
					//大部分浏览器兼容的方式
					obj.addEventListener(eventStr,callback,false);
				}else{
						/*
						*	this是由调用方式决定的
						*	callback.call(obj)
						*/
						//IE8及以下
						obj.attachEvent( "on"+eventStr,function(
								   ){callback()}); //用这种方法让浏览器调用匿名函数，匿名函数再调用callback方法就可以同意this的值
					}
				}
			}
		</script>
	</head>
	<body style="height:2000px">
		<div id = "box1"></div>
	</body>
</html>

键盘事件

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

​ onkeyup ​ -按键被松开 ​ 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
		
		</style>
		<script type="text/javascript">
			window.onload = function(){
			
				document.onkeydown = function(event){
					event = event || window.event;
					/*
					*	可以通过keyCode来获取按键的编码
					* 	通过它可以判定那个键被按下
					* 	除了keyCode还有其他的属性
					* altKey, ctrlKey, shiftKey
					* 	-----这三个来判断alt ,shift ,ctrl是否被按下，如果按下则返回true，否则返回false
					*/
				   
				   //判断y是否被按下
				   if(event.keyCode == 89){
					   alert("y被按下");
				   }
				   //判断y和CTRL是否被同时按下
				   if(event.keyCode == 89 && event.ctrlKey){
					   alert("y和ctrl同时被按下");
				   }
					
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

BOM（浏览器对象模型）

BOM -浏览器对象模型

BOM可以使我们通过JS来操作浏览器 -在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象 Window -代表的是整个浏览器的窗口，同时window也是网页中的全局对象 Navigator -代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 Location -代表当 前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 History 一代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 而且该操作只在当次访问时有效 Screen -代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息

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

navigator

查看浏览器的类型

var ua = navigator .userAgent ;
console.1og(ua);
if(/firefox/i. test(ua)){
alert("你是火狐! ! ! ");
}else if(/chrome/i. test(ua)){
alert( "你是Chrome");
}else if(/msie/i. test(ua)){
alert("你是工E浏览器~~n");
}else if( "Activexobject" in window){
alert("你是IE11，枪毙了你~~~");

history

/* length
* 	-属性，可以获取到当成访问的链接数量
*/
//alert(history .1ength);
/*
* 	back()
*	-可以用来回退到上s一个页面，作用和浏览器的回退按钮-样
*/
//history .back();
/*
*	forward( )
*	-可以跳转下一个页面，作用和浏览器的前进按钮一样
*/
//history. forward();
/*go()
可以用来跳转到指定的页面
-它需要一个整数作为参数
1:表示向前跳转-一个页 面相当于forward( )
2:表示向前跳转两个页面
-1:表示向后跳转-一个页面
-2:表示向后跳转两个页面
*/

location

//如果直接打印1ocation,则可以获取到地址栏的信息(当前页面的完整路径)
//alert(location);
/*
*如果直接将location属性修改为-一个完整的路径， 或相对路径
*则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
//1ocation = "http://www. baidu. com" ; 
//1ocation = "01. BOM. html ";
/*
* assign()
*-用来跳转到其他的页面，作用和直接修改location-样
*/
//location. assign("http: //www. baidu. com");
//如果直接打印1ocation,则可以获取到地址栏的信息(当前页面的完整路径)
//alert(location);
/*
*如果直接将location属性修改为-一个完整的路径， 或相对路径
*
则我们页面会自动跳转到该路径，并且会生成相应的历史记录
*/
//1ocation = "http://www. baidu. com" ; 
//1ocation = "01. BOM. html ";
/*
* assign()
*
-用来跳转到其他的页面，作用和直接修改location-样
*/
//location. assign("http: //www. baidu. com");

/* reload()
* -用于重新加载当前页面，作用和刷新按钮一样
* 一如果在方法中传递一个true,作为参数，则会强制清空缓存刷新页面
*/
//location.reload(true);
/*
* replace()
* - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
* -不会生成历史记录，不能使用回退按钮回退
*/
location. replace("01. BOM. html");

定时调用

JS的程序的执行速度是非常非常快的，如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用

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

clearInterval( )可以用来关闭一个定时器 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器, 如果参数是一个有效的定时器标识，则停止对应的定时，如果为无效的定时器标识，则什么都不做。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style>
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var count = document.getElementById("count");
				
				//设置h1内容的变化变量
				var num = 1;
				//开启定时调用
				var time = setInterval(function(){
					//设置h1中的数值变化
					count.innerHTML = num++;
					//当数值变化到5时关闭定时调用
					if(num == 5){
						clearInterval(time);
					}
				},1000)
				
			}
		</script>
	</head>
	<body>
		<h1 id = "count">1</h1>
	</body>
</html>

延时调用

/*延时调用：
*	延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
*	延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
*	延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
*/
var timer = setTimeout(function(){
console.1og( num++);
}, 3000);//延迟三秒后调用

JSON

• JSON

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

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

/*json --> js对象
JSON. parse()
可以将以JSON字符串转换为js对象
-它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回*/
var o = JSON.parse(objectName);

/*JS对象---> JSON
*JSON. stringify()一可以将一个JS对象转换为JSON字符串
*-需要一个js对象作为参数，会返回一个JSON字符串
*/
var str = JSON. stringify(obj3);
console.1og(str);

JS高级

数据类型

1.undefined 与null的区别? undefined代表定义未赋值,nulll定义并赋值了，只是值为null 2.什么时候给变量赋值为null呢? 初始赋值，表明将要赋值为对象,结束前，让对象成为垃圾对象(被垃圾回收器回收) 3.严格区别变量类型与数据类型? *数据的类型 *基本类型 *对象类型 *变量的类型(变量内存值的类型) *基本类型:保存就是基本类型的数据 *引用类型:保存的是地址值

数据 变量 内存

1.什么是数据? 存储在内存中代表特定信息的'东东’，本质上是0101... *数据的特点:可传递，可运算 *一切皆数据 *内存中所有操作的目标:数据 *算术运算 *逻辑运算 *賦值 *运行函数 2.什么是内存? *内存条通电后产生的可储存数据的空间(临时的) *内存产生和死亡:内存条(电路版)==>通电==>产生内存空间==>存储數据==>处理数据==>断电==>内存空间和数据都消失 -块小内存的2个数据 *内部存储的数据 *地址值 *内存分类 *栈:全局变量/局部变量 *堆:对象 3.什么是变量? *可变化的量，由变量名 和变量值组成 *每个变量都对应的一块小内存， 变量名用来查找对应的内存， 变量值就是内存中保存的数据 4.内存,数据，变量三者之间的关系 *内存用来存储数据的空间 *变量是内存的标识

JS引擎如何管理内存

1.内存生命周期 分配小内存空间，得到它的使用权 存储数据，可以反复进行操作 释放小内存空间 2.释放内存 局部变量:函数执行完自动释放 对象:成为垃圾对象==>垃圾回收器回收

对象

1.什么是对象？ 多个数据的封装体用来保存多个数据的容器一个对象代表现实中的一个事物

2.为什么要用对象？ 统一管理多个数据

函数

1.什么是函数? 实现特定功能的n条语句的封装体，只有函数是可以执行的，其它类型的数据不能执行 2.为什么要用函数? 提高代码复用，便于阅读交流 3.如何定义函数? ; 函数声明，表达式 4.如何调用(执行)函数? test():直接调用 obj.test(): 通过对象调用 new test(): new调用 test. call/apply(obj): 临时test成为obj的方法进行调用，可以让一个函数成为指定任意对象的方法进行调用。

回调函数

1.什么函数才是回调函数 你定义的 你没有调用 但它最终执行了（一定条件下） 2.常见的回调函数 DOM事件回调函数 定时器回调函数 Ajax请求回调函数 生命周期回调函数d

隐藏函数自调用

1.理解 全称：immediate-involved function expression 2.作用： 隐藏实现 不会污染外部（全局）命名空间 用它来编写JS模块

this

1. this是什么? *任何函数本质上都是通过某个对象来调用的，如果没有直接指定就是window *所有函数内部都有一个变量this *它的值是调用函数的当前对象

2. 如何确定this的值?

test(): window p.test(): p new test(): 新创建的对象 p.call(obj): obj

函数高级

函数的prototype

1.函数中的prototype属性 每个函数中都有一个prototyoe属性，它默认指向一个object空对象（即：原型对象） 原型对象中有一个属性constructor,它指向函数对象 2.给原型对象添加属性（一般都是方法） 作用：函数的所有实例对象自动拥有原型中的属性（方法）

显示原型和隐式原型

• 函数的prototype属性:在定义函数时自动添加的。默认值是- -个空0bject对象
• 对象的_proto__ 属性: 创建对象时自动添加的，默认值为构造函数的prototype属性值

程序员能直接操作显式原型，但不能直接操作隐式原型(ES6之前)

原型链

原型链(图解) *访问一个对象的属性时， *先在自身属性中查找，找到返回 * 如果没有，再沿者_ proto_ 这条链向上查找。 找到返回 如果最终没找到，返@undefined *别名:隐式原型铭 *作用:查我对象的属性(方法)

原型链的属性问题

读取对象的属性值时:会自动到原型链中查找 设置对象的属性值时:不会查找原型链，如果当前对象中没有此属性， 直接添加此属性并设置其值 方法- -般定义在原型中，属性一般通过构造函数定义在对象本身上