JavaScript

JS代码需要编写到Script标签中

<script type="text/javascript">

</script>

警告框

<script type="text/javascript">
    alert("警告框")；
</script>

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

/*作用是向body中输出一个内容*/
document.write("要输出的内容");

向控制台输出一个内容

console.log("向控制台内容");

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

当点击按钮时，js代码才会执行

<button onclick="alert('点击时提示框上的字');">点我干嘛</button>

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

<a href="javascript:alert('提示框上的提示语');">按钮</a>

/*此时实现点击超链接没有反应*/
<a href="javascript:;">按钮</a>

虽然写在标签的属性中，但他们属于结构和行为耦合，不方便维护，不推荐使用。

将js代码编写到外部的js文件中，通过script标签引入

script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略；如果需要则可以再创建一个新的script标签用于编写内部代码。

执行顺序为从上到下一行一行的执行。

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

JS语法的注释

/* */ 多行注释

// 单行注释

JS中严格区分大小写。
JS中每一条语句以分号；结尾。
- 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源，而且有些时候，浏览器会加错分号，所以在开发中分号必须写。
JS中会忽略多个空格和换行，所以我们可以利用空格 &nbsp 和换行对代码进行格式化

字面量和变量

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

变量：可以用来保存字面量，而且变量的值可以任意改变，变量更方便使用。

声明变量

JS中使用 var 关键字来声明一个变量

var a;

标识符

在JS中所有的可以有我们自主命名的都可以成为是标识符

例如：变量名，函数名，属性名都属于标识符

命名一个标识符时需要遵守如下的规则：

1.标识符中可以含有字母，数字，_ ，$

2.标识符不能以数字开头

3.标识符不能是ES中的关键字或保留字

4.标识符一般都采用驼峰命名法

- 首字母小写，每个单词的开头字母大写，其余字母小写；eg：helloWorld

数据类型

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

在JS中一共有六种数据类型
- String 字符串
- Number 数值
- Boolean 布尔值
- Null 空值
- Undefined 未定义
- Object 对象

其中前5种是基本数据类型，而Object属于引用数据类型。

字符串

要使用引号引起来

双引号和单引号到可以，但不要混着用
引号不能嵌套，双引号不能放双引号，单引号不能放单引号

var str="hello";

转义字符

在字符串中使用 \ 作为转义字符。在符号前加。

\n 表示换行

\t 制表符

\ \ 表示\

alert("str");  //输出str字符串
alert(str);		//输出变量str

Number

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

typeof 检查变量类型

会返回类型

typeof a;

JS中可以表示的数字的最大值为 Number.MAX_VALUE

如果使用Number表示的数字超过了最大值，则会返回一个Infinity，表示正无穷，-Infinity表示负无穷，使用typeof检查Infinity也会返回Number
NaN 是一个特殊的数字，表示Not A Number；
Number.MIN_value 大于0的最小值，正值。

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

Boolean 布尔值

true - 表示真

false - 表示假

//注意，不加引号
var bool=true;

Null(空值)类型的值只有一个，就是null，努力了这个值专门用来表示一个为空的对象，使用typeof检查一个null值时，会返回object。
Undefined（未定义）类型的值只有一个，就undefind，当声明一个变量，但是并不给变量赋值时，他的值就是undefined，使用typeof检查一个undefined时也会返回一个undefined

强制类型转换

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

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

方法一：

调用被转换数据类型的toString（）方法
该方法不会影响到原变量，他会将转换的结果返回

注意：null和undefined这两个值没有toString（）方法

var a = 123;
//调用a的toString（）方法
//调用xxx的yyy方法，就是xxx.yyy()
a = a.toString();

方式二：

调用String（）函数，并将被转换的数据作为参数传递给函数 //调用什么函数就直接写 String（）
使用String（）函数做强制类型转换时，对于Number和Boolean实际上就是调用打的toString（）方法，但是对于null和undefined，就不会调用toString（）。它会将null和undefined转换成“null”和“undefined”。

a = String(a);

方式三：（隐式）

任意的数据类型 + 一个""（空串），即可转化为String类型。

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

转换方式一：

使用Number（）函数:

- 字符串 -- > 数字

1 如果是纯数字的字符串，则直接转换

2 如果字符串中有非数字的内容，则转换为NaN

3 如果字符串是一个空串或者全为空格，转换为0

- 布尔值 -- > 数字

true --> 1 false --> 0

- Null --> 0

- undefined --> 0

转换方式二：

parseInt（）把一个字符串转换为一个整数

parseInt（）可以将一个字符串中的有效的整数内容取出来，从左到右直到检测到非数字。
parseFloat（）把字符转换成浮点数

var a = "123"; //"abc"  转不了
a = Number(a);

其他进制的数字

在js中，16进制需要以0x开头

a = 0x10; //16

8进制，以0开头

a = 070; //56

2进制，以0b开头，但不是所有浏览器都支持。

//像”070“这种字符串，有些浏览器会当成8进制解析，有些会当成10进制解析
a = "070";
//解决方法
a = parseInt(a,10); //第二个参数表示进制

转换为Boolean

使用Boolean（）函数

数字 --> 布尔：除了NaN和0，其余都是true

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

null --> false

undefined --> false

对象也会转换为true
方式二：（隐式类型转换）

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

运算符

算术运算符：

加法：

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

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

-两个字符串进行加法运算，则会拼串（将两个字符串转换成一个字符串）

-任何值和字符串加法运算，将值转换为字符串，再做拼串

//我们可以利用这一特点，将任意数据类型转换为String；我们只需要为任意的数据类型 + 一个""（空串），即可转化为String类型。这是一种隐式类型转换，也是调用String（）函数。

var c = "123";
c = c + "";

减法：除了加法其余都是转化成Number类型再进行运算

单目运算符

转换为数值类型的最简便写法

var a = "123";
a = +a;

非布尔值的与或运算

与运算：

如果两个值都为true，则返回后边的，

如果两个值中有false，则返回靠前的false

或运算

如果第一个值为true，则直接返回第一个值

如果第一个值为false，则直接返回第二个值

关系运算（比较）

非数值类型要转换成数值类型进行比较

如果字符串进行比较，就比较ASCII码，从左到右比较，若两值相同，在比较下一个。字符型的数字之间实现比较可以

console.log("1235456"< +"5");	//字符型的数字之间实现比较可以在前面加个+号实现数字之间的比较

Unicode编码

Unicode编码以 \u 开头

一般浏览器识别Unicode以 &#开头，并且编码是十进制

<h1>&#9760;</h1>

代码块

JS中可以用{}进行分组，要么都执行，要么都不执行，称之为代码块。

对象

创建一个对象

var obj = new Object();

向对象添加属性

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

obj.name = "孙悟空";

读取对象中的属性

语法：对象.属性名

console.log(obj.name);

修改对象的属性值

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

删除对象属性

语法：delete 对象.属性名

如果要使用特殊的属性名，不能采用.的方式来操作，需要使用另外一种方式：

语法：对象["属性名"] = 属性值

Obj["123"] = 789;
//存的时候这么存，读取的时候也要这么取
console.log(obj["123"]);

使用[]这种形式去操作属性，更加的灵活，在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性

var n = "123";
console.log(obj[n]);

属性值

JS中的属性值可以是任意的数据类型；也可以是一个对象。

in运算符

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

语法："属性名" in 对象

console.log("test2" in obj);	//检查obj中是否有test2。

基本数据类型保存的是值，引用数据类型保存的是地址。

对象字面量

使用对象字面量来创建一个对象

var obj = {};

可以利用字面量创建对象的多个属性

语法：{属性名：属性值，属性名：属性值...};

对象字面量的属性名可以加引号也可以不加，建议不加，如果使用一些特殊的名字，则必须加引号

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

创建对象的方法（函数）

语法：对象名.方法名 = function（）{}

函数 function

函数也是一个对象
函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）

创建一个函数：

var fun = new Function();

可以将要封装的代码以字符串的形式传递给构造函数;分装到函数里的代码不会立即执行，函数中的代码会在函数调用的时候执行

var fun = new Function("console.log('hello')");

函数调用

语法：函数对象（）

fun();	//调用函数时，函数中的代码会按照顺序执行

创建函数

- 使用函数声明

语法：function 函数名（形参1，形参2...形参N）{语句。。。}

function fun2(){
}

- 使用函数表达式

语法： var 函数名 = function(形参1，形参2....形参N){语句。。。}

var fun3 = function(){
	return b;	//可以利用return设置返回值，不需要返回值不用写
}

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

注意：函数（）是调用函数 - 是将函数返回值传给函数

函数是函数对象 - 是将函数传给函数

fun(fun1());	//使用fun1的返回值
fun(fun);		//使用fun()函数

立即执行函数

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

语法：匿名函数用括号括起来，后面加上括号

(function(){
	//立即执行函数
})();

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

语法：for(var 变量 in 对象){}

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

for(var n in obj){
	console.log(n);	//n是属性名
	console.log(obj[n]);	//不能用.的方式
}

作用域

全局作用域
- 直接编写在script标签中的JS代码，都在全局作用域中；全局作用域在页面打开时创建，页面关闭时销毁
- 在全局作用域中有一个全局对象window，代表的是浏览器窗口，由浏览器创建；我们可以直接使用
- 在全局作用域中，我们创建的变量都会作为window对象的属性保存
函数作用域
- 在函数中，不使用var声明的变量都会成为全局变量

变量的声明提前

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

函数的声明提前

this

解析器在调用函数每次都会向函数内部传递一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们成为函数执行的上下文对象

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

	1. 以函数的形式调用时，this永远都是window
	2. 以方法的形式调用时，this就是调用方法的对象

function fun(){
	console.log(this.name);
}
var obj = {
	name:"1",
	sayName:fun
};
var obj2 = {
	name:"2",
	sayName:fun
};
obj.sayName();

使用工程的方法创建对象

通过该方法可以大批量的创建对象

function cratePerson(name,age,gender){
	//创建一个新的对象
	var obj = new Object();
	
	//向对象中添加属性
	obj.name = name;
	obj.age = age;
	obj.gender = gender；
	obj.sayName = function(){
		alert(this.name);
	};
	//将新的对象返回
	return obj;
}
var obj2 = createPerson();

构造函数

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

构造函数就是一个普通的函数，创建方式和普通函数没有区别，不同的是构造函数习惯上首字母大写。

构造函数和普通函数的区别就是调用方式的不同；普通函数是直接调用，而构造函数需要使用new关键字来调用

构造函数执行流程：

		1. 立刻创建一个新的对象
		2.  将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
		3.  逐行执行函数中的代码
		4. 将新的对象作为返回值返回

使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类

我们将通过一个构造函数创建的对象，称为是该类的实例

function Person(name){
	this.name = name;
	this.sayName = function(){
		alert(this.name);
	};
}
var per = new Person();

instanceof

使用instanceof可以检查一个对象是否是一个类的实例

将函数中的方法定义到全局中，可以避免多次调用同一个函数（不推荐使用）

function Person(name){
	this.name = name;
	this.sayName = fun;
}
function fun(){
	alert("this.name");
};
var per = new Person();

原型 prototype

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

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

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

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

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

向原型中添加方法

可避免多次调用方法和浪费全局空间

Person.prototype.sayName = function(){
	
};

以后创建函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中

注意：

使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true

console.log("name" in mc);

可以使用hasOwnProperty()来检查对象自身中是否含有该属性

console.log(mc.hasOwnProperty("name"));

console.log(mc._proto_._proto_);	//原型的原型

Object对象的原型没有原型，如果在Object中依然没有找到，则返回undefined

toString（）

当我们直接在页面中打印一个对象时，实际上是输出对象的toString（）方法的返回值

console.log(per);

添加toString（）方法

per.toString = function(){
	return "Person[name="+this.name"]";
};

修改Person原型的toString

per.prototype.toString = function(){
	return "Person[name="+this.name"]";
};

#####

垃圾回收（GC）

var obj = new Object();

数组

创建数组对象

var arr = new Array();

向数组中添加元素

语法：数组[索引] = 值

arr[arr.length]=数值;		//可以不计下标不停添加

使用字面量创建数组

语法：var 数组名 = [ ] ;

var arr = [];

创建时就可以指定数组中的元素

var arr = [1,2,3];

使用构造函数添加数组可以直接添加元素

var arr = new Array(1，2，3);

创建数组只传一个数值

//创建一个长度为10的数组
arr = new Array(10);	
arr = [10];

数组中的元素可以是任意的数据类型，也可以是对象和函数

push（）

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

pop（）

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

unshift（）

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

shift

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

forEach（）

JS提供这个方法，用来遍历数组；这个方法只支持IE8及以上浏览器

forEach（）方法需要一个函数作为参数

像这种函数，由我们创建，但是不由我们调用的，我们成为回调函数
数组中有几个元素，函数就会执行几次；每次执行时，浏览器会将遍历到的元素以实参的形式传递进来
浏览器会在回调函数中传递三个参数:（形参的名字无所谓，重要的是顺序）
- 第一个参数，是当前正在遍历的元素
- 第二个参数，就是当前正在遍历的元素的索引
- 第三个参数，就是正在遍历的数组

arr.forEach(function(value，index,obj){
	console.log(value);		
});

slice（）

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

参数：

1. 截取开始的位置的索引
2. 截取结束的位置的索引	，第二个参数可以省略不写，此时会截取从开始索引往后的所有元素

索引可以传递一个负值，如果传递一个负值，则从后往前计算倒数第几个

arr.slice(0,2)；

splice（）

- 删除数组中的指定元素
- 会影响原数组，会将指定原素从原数组删除，并将被删除的元素作为返回值返回

参数：
- 第一个，开始位置的索引 - 第二个，表示删除的数量 - 第三个及以后的元素，可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边

concat（）

可以连接两个或多个数组，并将新的数组返回

该方法不会对原数组产生影响
不光可以传数组，也可以穿单个的元素

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

join()

该方法可以将一个数组转换为一个字符串

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

result = arr.join("!");

reverse()

反转数组

该对方直接修改原数组

sort（）

对数组中的元素进行排序

会直接修改原数组，默认会按照Unicode编码进行排序（数字排序不准）
可以自己指定排序的规则；在sort（）中添加一个回调函数，来指定排序规则，
- 回调函数中需要定义两个形参
- 浏览器将会分别使用数组中的元素作为实参去调用回调函数
- 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
- 浏览器会根据回调函数的返回值来决定元素的顺序，如果返回一个大于0的值，则元素会交换位置；如果返回小于0的值，则元素位置不变；如果返回0，则认为两个元素相等，也不交换位置

arr.sort(function(a,b){
	return a-b ;
});

call() 和 appley()

- 这两个方法都是函数对象的，需要通过函数对象来调用
- 当对函数调用call（）和apply（）都会调用函数执行
- 在调用call（）和apply（）可以将一个对象指定为第一个参数；此时这个对象将会成为函数执行时的this；（可以用来指定this）
- call（）方法可以将实参在对象之后依次传递
- apply（）方法需要将实参封装到一个数组中统一传递

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

this的情况：
- 以函数形式调用时，this永远都是window
- 以方法的形式调用时，this时调用方法的对象
- 以构造函数的形式调用时，this是新创建的那个对象
- 使用call和apply调用时，this是指定的那个对象

arguments

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

函数的上下文对象this
封装实参的对象 arguments

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

Date对象

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

创建一个Date对象

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

var d = new Date();

创建一个指定的时间对象

需要在构造函数中传递一个表示时间的字符串作为参数

格式：月份/日/年时:分:秒

var d2 = new Date("12/03/2016 11:10:30");
console.log(d2);

getDate()

获取当前日期对象是几日

d.getDate();

getDay()

获取当前日期对象是周几

返回0-6的值 0表示周日

getMonth()

0-11的值

0表示1月，依次递推

getFullYear

getTime()

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

时间戳：指的是从格林威治标准时间的1970年1月1日 00:00:00 的毫秒数

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

Date.now()

获取当前的时间戳

console.log(time);

Math

Math和其他对象不同，它不是一个构造函数，它属于一个工具类不用创建对象，它里面封装了数学运算相关的属性

Math.abs()

计算一个数的绝对值

Math.celi()

对一个数进行上舍入（向上取整）

Math.floor()

向下取整（只对数值）

Math.round()

四舍五入取整

Math.random()

生成0-1的随机数

想要生成 X -Y之间的随机数

Math.round(Math.random()*(Y-X))+X

Math.max()

获取多个值中的最小值

pow（）幂

sqrt（）开方

包装类

//创建一个Number类型的对象
var num = new Number(3);	//类型是Object

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

字符串

创建一个字符串

var str = "hello Atguigu";

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

charAt（）

可以返回字符串中指定位置的字符;根据索引获取指定的字符

var result str.charAt(0);

charCodeAt（）

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

String.formCharCode()

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

concat()

可以用来连接两个或多个字符串；作用和+号一样；不会对原字符串产生影响

indexof()

检索一个字符串中是否含有指定内容；

找到返回第一次出现的索引，没有找到返回-1

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

result = str.indexOf("h",6);

lastIndexOf()

从后向前检索

slice(x,y)

从字符串截取指定的内容；不会影响原字符串，将截取的字符串返回

第二个参数可以设置成负数，负数代表从倒数第几个截取

substring()

可以截取一个字符串，和slice（）类似

不同的是：这个方法不能接收负值，接收了赋值默认使用0；如果第二个参数小于第一个，则自动交换

split()

可以将一个字符串拆分成一个数组

result = str.split(",")

toUpperCase()

将字符串转换为大写并返回；不会改变原字符串

toLowerCase()

正则表达式

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

计算机可以根据正则表达式，来检查一个字符串是否符合规则，

获取将字符串中符合规则的内容提取出来

创建正则表达式对象

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

匹配模式：

	- i	忽略大小写
	- g   全局匹配模式

//这个正则表达式可以检查一个字符串中是否含有a，严格区分大小写
var reg  = new RegExp("a","i");

test()

使用该方法可以用来检查一个字符串是否符合正则表达式的规则，符合返回true，否则返回false

var result = reg.test(str);
console.log(result);

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

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

var reg = /a/i;

用字面量的方式创建更加简单，使用构造函数创建更加灵活

创建一个正则表达式，检查一个字符串中是否有a或b

使用 | 表示或的意思

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

reg = /a|b/;
console.log(reg.test("bcd"));

创建一个正则表达式检查一个字符串中是否有字母

[0-9] 任意数字

[a-z] 任意小写字母

[A-Z] 任意大写字母

[A-z] 任意字母

reg = /[A-z]/ ;

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

reg = /a[bde]c/;

[^ ] 除了

//除了数字
reg = /[^0-9];

字符串和正则相关的方法

split()

可以将一个字符串拆分成一个数组

即使不指定全局匹配，也会全拆了。

根据任意字母将字符串拆分

可以传递一个正则表达式作为参数，这样方法会根据正则表达式去拆分字符串

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

search()

可以搜索字符串中是否含有指定内容

搜索到返回第一次出现的索引，没有搜索到返回-1

它可以接收一个正则表达式作为参数，然后会根据正则表达式去检索字符串

var result = str.search(/a[bed]c/);

match()

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

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

replace（）

可以将字符换中的指定内容替换成新的内容
参数：
1. 被替换的内容，接收一个正则表达式作为参数（就可以全部替换）
2. 新的内容
默认只替换第一个

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

量词

- 通过量词可以设置一个内容出现的次数
- 量词只对它前边的一个内容起作用
- {n}  正好出现n次
- {(ab){n}}  对多个起作用，要用（）括起来
- {ab{3}c}   ac之间有连续的3个b
- {a{n,m}}  a出现n到m次
- {a{n，}}  n次以上

var reg = /a{3}/;

同时使用^ 和 $

reg = /^a$/ 只能是a

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

创建一个正则表达式，来检查一个字符串是否是一个合法的手机号

规则：

1. 以1开头
2. 第二位 3-9
3. 三位以后任意数字9个

^1 [3-9] [0-9]{9}$

var phoneReg = /^1[3-9][0-9]{9}$/;

\ 转义字符

检查一个字符串是否含有 .

. 表示任意字符

\ . 来表示 .

\w - 任意字母，数字，_ [A-z0-9_]

// 检查一个字符串中是否有child
reg = /\bchild\b/;

接收用户的输入 prompt（）

var str = prompt("请输入你的用户名：");
console.log(str);

去除掉字符串中的空格

使用""来替换空格

str = str.replace(/\s/g,"");

去除开头的空格

str = str.replace(/^\s/g,"");	//这样只会匹配到开头的一个空格
str = str.replace(/^\s*/,"");

去除开头和结尾的空格

str = str.replace(/^\s*|\s*$/g,"");

邮件的正则

任意字母数字下划线 . 任意字母数字下划线 @ 任意字母数字 . 任意字母（2-5位） . 任意字母（2-5位）

\w{3,} (\ . \w+)* @ [A-z0-9]+ (\ .[A-z]{2,5}){1,2}

var emaiReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;

DOM

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

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

当时间被触发时，其对应的函数会被调用。

//获取按钮对象
var btn = document.getElementById("btn");
//可以为按钮对应事件绑定处理函数的形式来响应事件，当时间被触发时，其对应的函数会被调用。

//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称为单击响应函数
btn.onclick = function(){		//响应函数
	alert("你还点~~");
};

文档的加载

浏览器在加载一个页面时，是按照自上向下的顺序加载的，读取到一行就运行一行，如果将script标签写在页面的上边，在代码执行时，页面还没有加载

要将js代码编写在页面下部

onload 事件

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

为window绑定一个onload事件

window.onload = function(){
		btn.onclick = function(){		
		alert("你还点~~");
	};
};

innerHTML

通过这个属性可以获取到元素内部的html代码

//Elements,多个元素返回数组，要用数组接，不然出错
var img = document.getElementsByTagName("img")[0];

children

children属性可以获取当前元素的所有子元素（不包括空白，不会获得文本）

firstElementChild （IE8及以下不支持）

获取当前元素的第一个子元素

innerText

- 该属性可以获取到元素内部的文本内容
- 它和innerHTML类似，不同的是它会自动将html去除

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 定义一个函数，专门用来为指定元素绑定单击响应函数
			 * 	参数：
			 * 		idStr 要绑定单击响应函数的对象的id属性值
			 * 		fun 事件的回调函数，当单击元素时，该函数将会被触发
			 */
			function myClick(idStr , fun){
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
		
			window.onload = function(){
				
				//为id为btn01的按钮绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//查找#bj节点
					var bj = document.getElementById("bj");
					//打印bj
					//innerHTML 通过这个属性可以获取到元素内部的html代码
					alert(bj.innerHTML);
				};
				
				
				//为id为btn02的按钮绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//查找所有li节点
					//getElementsByTagName()可以根据标签名来获取一组元素节点对象
					//这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
					//即使查询到的元素只有一个，也会封装到数组中返回
					var lis = document.getElementsByTagName("li");
					
					//打印lis
					//alert(lis.length);
					
					//变量lis
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
				};
				
				
				//为id为btn03的按钮绑定一个单击响应函数
				var btn03 = document.getElementById("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);
					}
				};
				
				//为id为btn04的按钮绑定一个单击响应函数
				var btn04 = document.getElementById("btn04");
				btn04.onclick = function(){
					
					//获取id为city的元素
					var city = document.getElementById("city");
					
					//查找#city下所有li节点
					var lis = city.getElementsByTagName("li");
					
					for(var i=0 ; i<lis.length ; i++){
						alert(lis[i].innerHTML);
					}
					
				};
				
				//为id为btn05的按钮绑定一个单击响应函数
				var btn05 = document.getElementById("btn05");
				btn05.onclick = function(){
					//获取id为city的节点
					var city = document.getElementById("city");
					//返回#city的所有子节点
					/*
					 * childNodes属性会获取包括文本节点在呢的所有节点
					 * 根据DOM标签标签间空白也会当成文本节点
					 * 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，
					 * 	所以该属性在IE8中会返回4个子元素而其他浏览器是9个
					 */
					var cns = city.childNodes;
					
					//alert(cns.length);
					
					/*for(var i=0 ; i<cns.length ; i++){
						alert(cns[i]);
					}*/
					
					/*
					 * children属性可以获取当前元素的所有子元素
					 */
					var cns2 = city.children;
					alert(cns2.length);
				};
				
				//为id为btn06的按钮绑定一个单击响应函数
				var btn06 = document.getElementById("btn06");
				btn06.onclick = function(){
					//获取id为phone的元素
					var phone = document.getElementById("phone");
					//返回#phone的第一个子节点
					//phone.childNodes[0];
					//firstChild可以获取到当前元素的第一个子节点（包括空白文本节点）
					var fir = phone.firstChild;
					
					//firstElementChild获取当前元素的第一个子元素
					/*
					 * firstElementChild不支持IE8及以下的浏览器，
					 * 	如果需要兼容他们尽量不要使用
					 */
					//fir = phone.firstElementChild;
					
					alert(fir);
				};
				
				//为id为btn07的按钮绑定一个单击响应函数
				myClick("btn07",function(){
					
					//获取id为bj的节点
					var bj = document.getElementById("bj");
					
					//返回#bj的父节点
					var pn = bj.parentNode;
					
					alert(pn.innerHTML);
					
					/*
					 * innerText
					 * 	- 该属性可以获取到元素内部的文本内容
					 * 	- 它和innerHTML类似，不同的是它会自动将html去除
					 */
					//alert(pn.innerText);
					
					
				});
				
				
				//为id为btn08的按钮绑定一个单击响应函数
				myClick("btn08",function(){
					
					//获取id为android的元素
					var and = document.getElementById("android");
					
					//返回#android的前一个兄弟节点（也可能获取到空白的文本）
					var ps = and.previousSibling;
					
					//previousElementSibling获取前一个兄弟元素，IE8及以下不支持
					//var pe = and.previousElementSibling;
					
					alert(ps);
					
				});
				
				//读取#username的value属性值
				myClick("btn09",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					//读取um的value属性值
					//文本框的value属性值，就是文本框中填写的内容
					alert(um.value);
				});
				
				
				//设置#username的value属性值
				myClick("btn10",function(){
					//获取id为username的元素
					var um = document.getElementById("username");
					
					um.value = "今天天气真不错~~~";
				});
				
				
				//返回#bj的文本值
				myClick("btn11",function(){
					
					//获取id为bj的元素
					var bj = document.getElementById("bj");
					
					//alert(bj.innerHTML);
					//alert(bj.innerText);
					
					//获取bj中的文本节点
					/*var fc = bj.firstChild;
					alert(fc.nodeValue);*/
					
					alert(bj.firstChild.nodeValue);
					
					
				});
				
			};
			
		
		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>

				<br>
				<br>

				<p>
					你喜欢哪款单机游戏?
				</p>

				<ul id="game">
					<li id="rl">红警</li>
					<li>实况</li>
					<li>极品飞车</li>
					<li>魔兽</li>
				</ul>

				<br />
				<br />

				<p>
					你手机的操作系统是?
				</p>

				<ul id="phone"><li>IOS</li> <li id="android">Android</li><li>Windows Phone</li></ul>
			</div>

			<div class="inner">
				gender:
				<input class="hello" type="radio" name="gender" value="male"/>
				Male
				<input class="hello" type="radio" name="gender" value="female"/>
				Female
				<br>
				<br>
				name:
				<input type="text" name="name" id="username" value="abcde"/>
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">查找#bj节点</button></div>
			<div><button id="btn02">查找所有li节点</button></div>
			<div><button id="btn03">查找name=gender的所有节点</button></div>
			<div><button id="btn04">查找#city下所有li节点</button></div>
			<div><button id="btn05">返回#city的所有子节点</button></div>
			<div><button id="btn06">返回#phone的第一个子节点</button></div>
			<div><button id="btn07">返回#bj的父节点</button></div>
			<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
			<div><button id="btn09">返回#username的value属性值</button></div>
			<div><button id="btn10">设置#username的value属性值</button></div>
			<div><button id="btn11">返回#bj的文本值</button></div>
		</div>
	</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>全选练习</title>
<script type="text/javascript">

	window.onload = function(){
		
		
		//获取四个多选框items
		var items = document.getElementsByName("items");
		//获取全选/全不选的多选框
		var checkedAllBox = document.getElementById("checkedAllBox");
		
		/*
		 * 全选按钮
		 * 	- 点击按钮以后，四个多选框全都被选中
		 */
		
		//1.#checkedAllBtn
		//为id为checkedAllBtn的按钮绑定一个单击响应函数
		var checkedAllBtn = document.getElementById("checkedAllBtn");
		checkedAllBtn.onclick = function(){
		
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				
				//通过多选框的checked属性可以来获取或设置多选框的选中状态
				//alert(items[i].checked);
				
				//设置四个多选框变成选中状态
				items[i].checked = true;
			}
			
			//将全选/全不选设置为选中
			checkedAllBox.checked = true;				
		};
		
		/*
		 * 全不选按钮
		 * 	- 点击按钮以后，四个多选框都变成没选中的状态
		 */
		//2.#checkedNoBtn
		//为id为checkedNoBtn的按钮绑定一个单击响应函数
		var checkedNoBtn = document.getElementById("checkedNoBtn");
		checkedNoBtn.onclick = function(){
			
			for(var i=0; i<items.length ; i++){
				//将四个多选框设置为没选中的状态
				items[i].checked = false;
			}
			
			//将全选/全不选设置为不选中
			checkedAllBox.checked = false;
			
		};
		
		/*
		 * 反选按钮
		 * 	- 点击按钮以后，选中的变成没选中，没选中的变成选中
		 */
		//3.#checkedRevBtn
		var checkedRevBtn = document.getElementById("checkedRevBtn");
		checkedRevBtn.onclick = function(){
			
			//将checkedAllBox设置为选中状态
			checkedAllBox.checked = true;
			
			for(var i=0; i<items.length ; i++){
				
				//判断多选框状态
				/*if(items[i].checked){
					//证明多选框已选中，则设置为没选中状态
					items[i].checked = false;
				}else{
					//证明多选框没选中，则设置为选中状态
					items[i].checked = true;
				}*/
				
				items[i].checked = !items[i].checked;
				
				//判断四个多选框是否全选
				//只要有一个没选中则就不是全选
				if(!items[i].checked){
					//一旦进入判断，则证明不是全选状态
					//将checkedAllBox设置为没选中状态
					checkedAllBox.checked = false;
				}
			}			
			//在反选时也需要判断四个多选框是否全都选中			
		};
		
		/*
		 * 提交按钮：
		 * 	- 点击按钮以后，将所有选中的多选框的value属性值弹出
		 */
		//4.#sendBtn
		//为sendBtn绑定单击响应函数
		var sendBtn = document.getElementById("sendBtn");
		sendBtn.onclick = function(){
			//遍历items
			for(var i=0 ; i<items.length ; i++){
				//判断多选框是否选中
				if(items[i].checked){
					alert(items[i].value);
				}
			}
		};
		
		
		//5.#checkedAllBox
		/*
		 * 全选/全不选 多选框
		 * 	- 当它选中时，其余的也选中，当它取消时其余的也取消
		 * 
		 * 在事件的响应函数中，响应函数是给谁绑定的this就是谁
		 */
		//为checkedAllBox绑定单击响应函数
		checkedAllBox.onclick = function(){
			
			//alert(this === checkedAllBox);
			
			//设置多选框的选中状态
			for(var i=0; i <items.length ; i++){
				items[i].checked = this.checked;
			}
			
		};
		
		//6.items
		/*
		 * 如果四个多选框全都选中，则checkedAllBox也应该选中
		 * 如果四个多选框没都选中，则checkedAllBox也不应该选中
		 */
		
		//为四个多选框分别绑定点击响应函数
		for(var i=0 ; i<items.length ; i++){
			items[i].onclick = function(){
				
				//将checkedAllBox设置为选中状态
				checkedAllBox.checked = true;
				
				for(var j=0 ; j<items.length ; j++){
					//判断四个多选框是否全选
					//只要有一个没选中则就不是全选
					if(!items[j].checked){
						//一旦进入判断，则证明不是全选状态
						//将checkedAllBox设置为没选中状态
						checkedAllBox.checked = false;
						//一旦进入判断，则已经得出结果，不用再继续执行循环
						break;
					}				
				}
			};
		}	
	};	
</script>
</head>
<body>
	<form method="post" action="">
		你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选 
		
		<br />
		<input type="checkbox" name="items" value="足球" />足球
		<input type="checkbox" name="items" value="篮球" />篮球
		<input type="checkbox" name="items" value="羽毛球" />羽毛球
		<input type="checkbox" name="items" value="乒乓球" />乒乓球
		<br />
		<input type="button" id="checkedAllBtn" value="全　选" />
		<input type="button" id="checkedNoBtn" value="全不选" />
		<input type="button" id="checkedRevBtn" value="反　选" />
		<input type="button" id="sendBtn" value="提　交" />
	</form>
</body>
</html>

document.body

在document中有一个属性body，他保存的是body的引用；可以直接获取

var body = document.body;

document.documentElement

保存的是html根标签

document.all

代表页面的所有元素

document.getElementsByClassName()

IE8及以下不支持

document.querySelector() (支持IE8及以上)

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

- 但该方法只可查询一个，若结果有多个，只返回第一个；

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

document.querySelectorAll()

可返回多个；即使符合条件的是一个也会返回数组；

var box1 = document.querySelectorAll("box1");
console.log(box1.length);

DOM 增删改

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script type="text/javascript">
		
			window.onload = function() {
				
				//创建一个"广州"节点,添加到#city下
				myClick("btn01",function(){
					//创建广州节点 <li>广州</li>
					//创建li元素节点
					/*
					 * 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);
					
					
				});
				
				//将"广州"节点插入到#bj前面
				myClick("btn02",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 li = document.createElement("li");
					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);
					
					
				});
				
				//删除#bj节点
				myClick("btn04",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);
				});
				
				
				//读取#city内的HTML代码
				myClick("btn05",function(){
					//获取city
					var city = document.getElementById("city");
					
					alert(city.innerHTML);
				});
				
				//设置#bj内的HTML代码
				myClick("btn06" , function(){
					//获取bj
					var bj = document.getElementById("bj");
					bj.innerHTML = "昌平";
				});
				
				myClick("btn07",function(){
					
					//向city中添加广州
					var city = document.getElementById("city");
					
					/*
					 * 使用innerHTML也可以完成DOM的增删改的相关操作
					 * 一般我们会两种方式结合使用
					 */
					//city.innerHTML += "<li>广州</li>";
					
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
					
				});
				
				
			};
			
			function myClick(idStr, fun) {
				var btn = document.getElementById(idStr);
				btn.onclick = fun;
			}
			
		
		</script>
		
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>

document.createElement()

				 * 	可以用于创建一个元素节点对象，
				 * 	它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，
				 * 	并将创建好的对象作为返回值返回
				var li = document.createElement("li");

document.createTextNode()

				 * 	可以用来创建一个文本节点对象
				 *  需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
				var gzText = document.createTextNode("广州");

appendChild()

向一个父节点中添加一个新的子节点
- 用法：父节点.appendChild(子节点); li.appendChild(gzText);

insertBefore()

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

replaceChild()

可以使用指定的子节点替换已有的子节点
- 语法：父节点.replaceChild(新节点,旧节点); city.replaceChild(li , bj);

removeChild()

可以删除一个子节点
- 语法：父节点.removeChild(子节点);
  - 子节点.parentNode.removeChild(子节点); city.removeChild(bj);

使用innerHTML也可以完成DOM的增删改的相关操作

				 * 一般我们会两种方式结合使用
				//city.innerHTML += "<li>广州</li>";	不推荐使用

```
					//创建一个li
					var li = document.createElement("li");
					//向li中设置文本
					li.innerHTML = "广州";
					//将li添加到city中
					city.appendChild(li);
```

增删改练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//创建四个td
					var nameTd = document.createElement("td");
					var emailTd = document.createElement("td");
					var salaryTd = document.createElement("td");
					var aTd = document.createElement("td");

					//创建一个a元素
					var a = document.createElement("a");

					//创建文本节点
					var nameText = document.createTextNode(name);
					var emailText = document.createTextNode(email);
					var salaryText = document.createTextNode(salary);
					var delText = document.createTextNode("Delete");

					//将文本条件到td中
					nameTd.appendChild(nameText);
					emailTd.appendChild(emailText);
					salaryTd.appendChild(salaryText);

					//向a中添加文本
					a.appendChild(delText);
					//将a添加到td中
					aTd.appendChild(a);

					//将td添加到tr中
					tr.appendChild(nameTd);
					tr.appendChild(emailTd);
					tr.appendChild(salaryTd);
					tr.appendChild(aTd);

					//向a中添加href属性
					a.href = "javascript:;";

					//为新添加的a再绑定一次单击响应函数
					a.onclick = delA;

					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);

				};

			};
		</script>
	</head>

	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>

		</div>

	</body>

</html>

点击超链接以后，超链接会跳转页面，这个是超链接的默认行为

			 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
			return false;

或者将超链接的 href:"javascript:;"

confirm()

带有确认和取消两个选项

简化增删改练习

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>添加删除记录练习</title>
		<link rel="stylesheet" type="text/css" href="ex_2_style/css.css" />
		<script type="text/javascript">
		
			/*
			 * 删除tr的响应函数
			 */
			function delA() {

				//点击超链接以后需要删除超链接所在的那行
				//这里我们点击那个超链接this就是谁
				//获取当前tr
				var tr = this.parentNode.parentNode;

				//获取要删除的员工的名字
				//var name = tr.getElementsByTagName("td")[0].innerHTML;
				var name = tr.children[0].innerHTML;

				//删除之前弹出一个提示框
				/*
				 * confirm()用于弹出一个带有确认和取消按钮的提示框
				 * 	需要一个字符串作为参数，该字符串将会作为提示文字显示出来
				 * 如果用户点击确认则会返回true，如果点击取消则返回false
				 */
				var flag = confirm("确认删除" + name + "吗?");

				//如果用户点击确认
				if(flag) {
					//删除tr
					tr.parentNode.removeChild(tr);
				}

				/*
				 * 点击超链接以后，超链接会跳转页面，这个是超链接的默认行为，
				 * 	但是此时我们不希望出现默认行为，可以通过在响应函数的最后return false来取消默认行为
				 */
				return false;
			};

			window.onload = function() {

				/*
				 * 点击超链接以后，删除一个员工的信息
				 */

				//获取所有额超链接
				var allA = document.getElementsByTagName("a");

				//为每个超链接都绑定一个单击响应函数
				for(var i = 0; i < allA.length; i++) {
					allA[i].onclick = delA;
				}

				/*
				 * 添加员工的功能
				 * 	- 点击按钮以后，将员工的信息添加到表格中
				 */

				//为提交按钮绑定一个单击响应函数
				var addEmpButton = document.getElementById("addEmpButton");
				addEmpButton.onclick = function() {

					//获取用户添加的员工信息
					//获取员工的名字
					var name = document.getElementById("empName").value;
					//获取员工的email和salary
					var email = document.getElementById("email").value;
					var salary = document.getElementById("salary").value;

					//alert(name+","+email+","+salary);
					/*
					 *  <tr>
							<td>Tom</td>
							<td>tom@tom.com</td>
							<td>5000</td>
							<td><a href="javascript:;">Delete</a></td>
						</tr>
						需要将获取到的信息保存到tr中
					 */

					//创建一个tr
					var tr = document.createElement("tr");

					//设置tr中的内容
					tr.innerHTML = "<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>";
									
					//获取刚刚添加的a元素，并为其绑定单击响应函数				
					var a = tr.getElementsByTagName("a")[0];
					a.onclick = delA;
					
					//获取table
					var employeeTable = document.getElementById("employeeTable");
					//获取employeeTable中的tbody
					var tbody = employeeTable.getElementsByTagName("tbody")[0];
					//将tr添加到tbodye中
					tbody.appendChild(tr);
					/*tbody.innerHTML += "<tr>"+
					
					"<td>"+name+"</td>"+
									"<td>"+email+"</td>"+
									"<td>"+salary+"</td>"+
									"<td><a href='javascript:;'>Delete</a></td>"
					
					+"</tr>";*/

				};

			};
		</script>
	</head>

	<body>

		<table id="employeeTable">
			<tr>
				<th>Name</th>
				<th>Email</th>
				<th>Salary</th>
				<th>&nbsp;</th>
			</tr>
			<tr>
				<td>Tom</td>
				<td>tom@tom.com</td>
				<td>5000</td>
				<td>
					<a href="javascript:;">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Jerry</td>
				<td>jerry@sohu.com</td>
				<td>8000</td>
				<td>
					<a href="deleteEmp?id=002">Delete</a>
				</td>
			</tr>
			<tr>
				<td>Bob</td>
				<td>bob@tom.com</td>
				<td>10000</td>
				<td>
					<a href="deleteEmp?id=003">Delete</a>
				</td>
			</tr>
		</table>

		<div id="formDiv">

			<h4>添加新员工</h4>

			<table>
				<tr>
					<td class="word">name: </td>
					<td class="inp">
						<input type="text" name="empName" id="empName" />
					</td>
				</tr>
				<tr>
					<td class="word">email: </td>
					<td class="inp">
						<input type="text" name="email" id="email" />
					</td>
				</tr>
				<tr>
					<td class="word">salary: </td>
					<td class="inp">
						<input type="text" name="salary" id="salary" />
					</td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<button id="addEmpButton">
						Submit
					</button>
					</td>
				</tr>
			</table>
		</div>
	</body>
</html>

使用DOM操作CSS

通过JS修改元素的样式：

语法：元素.style.样式名 = 样式值

通过style属性设置和读的都是内联样式，无法读取样式表中的样式

注意：如果CSS的样式名中含有 - 号，这种名称在JS中是不合法的；比如：background-color，

需要将这种样式名修改为驼峰命名法：去掉 - 号，然后将 - 号后的字母大写：backgroundColor

box1.style.width = "300px";

我们通过style属性设置的样式都是内联样式，而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示；

但是如果在样式中写了！important，则此时样式会有最高的优先级，即使JS也无法覆盖。

获取元素的样式：

获取元素的当前显示的样式（只有IE浏览器支持，不推荐使用）

语法：元素.currentStyle.样式名

获取的是当前的样式，如果当前样式未生效，则获取默认值

alert(box1.currentStyle.width);

在其他浏览器中使用：（IE8 及以下不支持）

getComputedStyle() 这个方法来获取元素当前的样式

这个方法是window的方法，可以直接使用；
需要两个参数：
- 第一个：要获取样式的元素。
- 第二个：可以传递一个伪元素，一般都传null。

该方法会返回一个对象，对象中封装了当前元素对应的样式

如果获取的样式没有设置，则会获取到真实的值，而不是默认值。比如：没有设置width，他不会获取到auto，而是一个长度。

var obj = getComputedStyle(box1,null);
alert(getComputedStyle(box1,null).width);

终极方法：定义一个函数，来获取指定样式

参数：

obj 要获取样式的元素

name 要获取的样式名

function getStyle(obj,name){
		//灵活获取参数name 用[name]
	
	//方式一：
	if(window.getComputedStyle){
		//正常浏览器的方式，具有getComputedStyle（）方法
		return getComputedStyle(obj,null)[name];
	}else{
		//IE8的方式，没有getComputedStyle（）方法
		return obj.currentStyle[name];
	}
	
	//方式二：
	return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
	
	
}

注意：通过currentStyle和getComputedStyle（）读取的样式都是只读的，不能修改，如果要修改，必须通过style属性

注意：带px的要用parseInt（）取整数，再计算

其他样式相关属性

clientWidth 和 clientHeight

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

offsetWidth 和 offsetHeight

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

offsetParent

定位父元素
会获取到离当前元素最近的开启了定位的祖先元素；如果所有的祖先元素都没有开启定位，则返回body

offsetLeft

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

offsetTop

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

scrollWidth 和 scrollHeight

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

scrollLeft 和 scrollTop

可以获取水平和垂直滚动条滚动的距离

当满足 srollHeight - scrollTop == clientHeight 时说明垂直滚动条滚动到底了

同理： scrollWith - scrollLeft == clientWidth

如果为表单项添加 disabled = "disabled" 则表单项将变成不可用的状态

onscroll

该事件会在元素的滚动条滚动时触发

//阅读协议检测滚动条是否滚动到底
<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 当垂直滚动条滚动到底时使表单项可用
				 * onscroll
				 * 	- 该事件会在元素的滚动条滚动时触发
				 */
				
				//获取id为info的p元素
				var info = document.getElementById("info");
				//获取两个表单项
				var inputs = document.getElementsByTagName("input");
				//为info绑定一个滚动条滚动的事件
				info.onscroll = function(){
					
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，使表单项可用
						/*
						 * disabled属性可以设置一个元素是否禁用，
						 * 	如果设置为true，则元素禁用
						 * 	如果设置为false，则元素可用
						 */
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					}
					
				};
				
			};
			
			
		</script>

onmousemove

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

事件对象

- 当时间的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数
- 在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘哪个案件被按下，鼠标滚轮滚动得方向
- 给函数设置一个形参event，当想获取事件相关信息时，都可找event

在IE8中，响应函数被处罚时，浏览器不会传递事件对象，在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的 window.clientX (火狐不兼容)

处理兼容性问题：

//方法一，加上：
		if(!event){
			event = window.event;
		}
		
//方法二：
event = event || window.event;

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">

	#areaDiv {
		border: 1px solid black;
		width: 300px;
		height: 50px;
		margin-bottom: 10px;
	}
	
	#showMsg {
		border: 1px solid black;
		width: 300px;
		height: 20px;
	}

</style>
<script type="text/javascript">

	window.onload = function(){
		/*
		 * 当鼠标在areaDiv中移动时，在showMsg中来显示鼠标的坐标
		 */
		//获取两个div
		var areaDiv = document.getElementById("areaDiv");
		var showMsg = document.getElementById("showMsg");
		
		/*
		 * onmousemove
		 * 	- 该事件将会在鼠标在元素中移动时被触发
		 * 
		 * 事件对象
		 * 	- 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数,
		 * 		在事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标  键盘哪个按键被按下  鼠标滚轮滚动的方向。。。
		 */
		areaDiv.onmousemove = function(event){
			
			/*
			 * 在IE8中，响应函数被处罚时，浏览器不会传递事件对象，
			 * 	在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
			 */
			/*if(!event){
				event = window.event;
			}*/
			
			//解决事件对象的兼容性问题
			event = event || window.event;
			
			/*
			 * clientX可以获取鼠标指针的水平坐标
			 * cilentY可以获取鼠标指针的垂直坐标
			 */
			var x = event.clientX;
			var y = event.clientY;
			
			//alert("x = "+x + " , y = "+y);
			
			//在showMsg中显示鼠标的坐标
			showMsg.innerHTML = "x = "+x + " , y = "+y;
			
		};
		
	};

</script>
</head>
<body>

	<div id="areaDiv"></div>
	<div id="showMsg"></div>

</body>
</html>

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

//设置div随鼠标移动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				/*
				 * 开启box1的绝对定位
				 */
				position: absolute;
			}
			
		</style>
		
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 使div可以跟随鼠标移动
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				//绑定鼠标移动事件
				document.onmousemove = function(event){
					
					//解决兼容问题
					event = event || window.event;
					
					//获取滚动条滚动的距离
					/*
					 * chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
					 * 火狐等浏览器认为浏览器的滚动条是html的，
					 */
					var st = document.body.scrollTop || document.documentElement.scrollTop;
					var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
					//var st = document.documentElement.scrollTop;
					
					
					//获取到鼠标的坐标
					/*
					 * clientX和clientY
					 * 	用于获取鼠标在当前的可见窗口的坐标
					 * div的偏移量，是相对于整个页面的
					 * 
					 * pageX和pageY可以获取鼠标相对于当前页面的坐标
					 * 	但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用
					 */
					var left = event.clientX;
					var　top = event.clientY;
					
					//设置div的偏移量
					box1.style.left = left + sl + "px";
					box1.style.top = top + st + "px";
					
				};
				
				
			};
			
			
		</script>
	</head>
	<body style="height: 1000px;width: 2000px;">
		<div id="box1"></div>
	</body>
</html>

事件的委派

- 将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会冒泡给祖先元素，从而通过祖先元素的响应函数来处理事件。

- 事件委派是利用了冒泡，通过委派可以减少事件绑定次数，提高程序的性能。

target

event中的target表示的触发事件的对象

如果触发事件的对象是我们期望的元素，则执行否则不执行

if(event.target.classNme == "link"){
	alert("我是ul的单击响应函数");
}

事件的绑定

使用对象.事件 = 函数的形式绑定响应函数，他只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定了多个，则后边的会覆盖前边的。

addEventListener（）（IE8及以下不支持）

通过这个方法也可以为元素绑定响应函数

参数：

1. 事件的字符串，不要on

2. 回调函数，当事件触发时该函数会被调用

3. 是否在捕获阶段出发事件，需要一个布尔值，一般都传false

使用addEventListener（）可以同时为一个元素的相同事件同时绑定多个响应函数，这样当事件被触发时，响应函数将会按照函数的绑定顺序执行

btn01.addEventLister("click",function(){
	alert(1);
},false);
btn01.addEventLister("click",function(){
	alert(2);
},false);
btn01.addEventLister("click",function(){
	alert(3);
},false);

attachEvent（）（IE8支持）

在IE8可以用attachEvent（）来绑定事件

参数：

1. 事件的字符串，要on

2. 回调函数

这个方法也可以为一个事件绑定多个处理函数，不同的是他是后绑定先执行，执行顺序和addEventListener（）相反

btn01.attachEvent("onclick",function(){
	alert(1);
});

定义一个函数，用来为指定元素绑定响应函数 (兼容所有浏览器)

addEventListener() 中的this，是绑定事件的对象

attachEvent（）中this，是window

参数：

obj 要绑定事件的对象

eventStr 事件的字符串(不要on)

callback 回调函数

function bind (obj,eventStr,callback){
	
	if(obj.addEventListener){
		//大部分浏览器兼容的方式
		obj.addEventListener(eventStr,callback,false);
	}else{
		//IE8及以下
		
		//this是谁，由调用方式决定
		//callback.call(obj)  可以改表this的值

		
		obj.attachEvent("on"+eventStr,function(){
			//可以使浏览器（window）调用匿名函数，在匿名函数中，我们自行调用回调函数，就可以指定this
			//在匿名函数中调用回调函数
			callback.call(obj);
		});
	}
}

bind(btn01,"click",function(){
	alert(1);
});

事件的传播

拖拽

拖拽box1元素

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				
				left: 200px;
				top: 200px;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				/*
				 * 拖拽box1元素
				 *  - 拖拽的流程
				 * 		1.当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				 * 		2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
				 * 		3.当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
				 */
				
				//获取box1
				var box1 = document.getElementById("box1");
				var box2 = document.getElementById("box2");
				var img1 = document.getElementById("img1");
				
				//开启box1的拖拽
				drag(box1);
				//开启box2的
				drag(box2);
				
				drag(img1);
			
			};
			
			/*
			 * 提取一个专门用来设置拖拽的函数
			 * 参数：开启拖拽的元素
			 */
			function drag(obj){
				//当鼠标在被拖拽元素上按下时，开始拖拽  onmousedown
				obj.onmousedown = function(event){
					
					//设置box1捕获所有鼠标按下的事件
					/*
					 * setCapture()
					 * 	- 只有IE支持，但是在火狐中调用时不会报错，
					 * 		而如果使用chrome调用，会报错
					 */
					/*if(box1.setCapture){
						box1.setCapture();
					}*/
					obj.setCapture && obj.setCapture();
					
					
					event = event || window.event;
					//div的偏移量 鼠标.clentX - 元素.offsetLeft
					//div的偏移量 鼠标.clentY - 元素.offsetTop
					var ol = event.clientX - obj.offsetLeft;
					var ot = event.clientY - obj.offsetTop;
					
					
					//为document绑定一个onmousemove事件
					document.onmousemove = function(event){
						event = event || window.event;
						//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
						//获取鼠标的坐标
						var left = event.clientX - ol;
						var top = event.clientY - ot;
						
						//修改box1的位置
						obj.style.left = left+"px";
						obj.style.top = top+"px";
						
					};
					
					//为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						//当鼠标松开时，被拖拽元素固定在当前位置	onmouseup
						//取消document的onmousemove事件
						document.onmousemove = null;
						//取消document的onmouseup事件
						document.onmouseup = null;
						//当鼠标松开时，取消对事件的捕获
						obj.releaseCapture && obj.releaseCapture();
					};
					
					/*
					 * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
					 * 	此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
					 * 	如果不希望发生这个行为，则可以通过return false来取消默认行为
					 * 
					 * 但是这招对IE8不起作用
					 */
					return false;					
				};
			}			
		</script>
	</head>
	<body>
		
		我是一段文字
		
		<div id="box1"></div>
		
		<div id="box2"></div>
		
		<img src="img/an.jpg" id="img1" style="position: absolute;"/>
	</body>
</html>

滚轮的事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
		</style>
		<script type="text/javascript">
			
			window.onload = function(){
				
				
				//获取id为box1的div
				var box1 = document.getElementById("box1");
				
				//为box1绑定一个鼠标滚轮滚动的事件
				/*
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，
				 * 	但是火狐不支持该属性
				 * 
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件
				 * 	注意该事件需要通过addEventListener()函数来绑定
				 */
				
				
				box1.onmousewheel = function(event){
					
					event = event || window.event;
					
					
					//event.wheelDelta 可以获取鼠标滚轮滚动的方向
					//向上滚 120   向下滚 -120
					//wheelDelta这个值我们不看大小，只看正负
					
					//alert(event.wheelDelta);
					
					//wheelDelta这个属性火狐中不支持
					//在火狐中使用event.detail来获取滚动的方向
					//向上滚 -3  向下滚 3
					//alert(event.detail);
					
					
					/*
					 * 当鼠标滚轮向下滚动时，box1变长
					 * 	当滚轮向上滚动时，box1变短
					 */
					//判断鼠标滚轮滚动的方向
					if(event.wheelDelta > 0 || event.detail < 0){
						//向上滚，box1变短
						box1.style.height = box1.clientHeight - 10 + "px";
						
					}else{
						//向下滚，box1变长
						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.call(obj);
					});
				}
			}
			
		</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">
		<title></title>
		<script type="text/javascript">	
			window.onload = function(){
				
				/*
				 * 键盘事件：
				 * 	onkeydown
				 * 		- 按键被按下
				 * 		- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
				 * 		- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快
				 * 			这种设计是为了防止误操作的发生。
				 * 	onkeyup
				 * 		- 按键被松开
				 * 
				 *  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
				 */
				
				document.onkeydown = function(event){
					event = event || window.event;
					
					/*
					 * 可以通过keyCode来获取按键的编码
					 * 	通过它可以判断哪个按键被按下
					 * 除了keyCode，事件对象中还提供了几个属性
					 * 	altKey
					 * 	ctrlKey
					 * 	shiftKey
					 * 		- 这个三个用来判断alt ctrl 和 shift是否被按下
					 * 			如果按下则返回true，否则返回false
					 */
					
					//console.log(event.keyCode);
					
					//判断一个y是否被按下
					//判断y和ctrl是否同时被按下
					if(event.keyCode === 89 && event.ctrlKey){
						console.log("ctrl和y都被按下了");
					}						
				};
				
				/*document.onkeyup = function(){
					console.log("按键松开了");
				};*/
				
				//获取input
				var input = document.getElementsByTagName("input")[0];
				
				input.onkeydown = function(event){
					
					event = event || window.event;
					
					//console.log(event.keyCode);
					//数字 48 - 57
					//使文本框中不能输入数字
					if(event.keyCode >= 48 && event.keyCode <= 57){
						//在文本框中输入内容，属于onkeydown的默认行为
						//如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
						return false;
					}		
				};
			};
			
		</script>
	</head>
	<body>
		<input type="text" />
	</body>
</html>

BOM

浏览器对象模型
BOM可以是我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象：
- window - 代表整个浏览器的窗口，同时window也是网页中的全局对象
- navigator - 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器。由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了。 - 一般我们只会使用userAgent来判断浏览器的信息 - userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent
- location
  - 代表当前浏览器的地址栏的信息，通过location可以获取地址栏信息，或者操作浏览器跳转页面
- history
  - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私的原因，该对象不能获取具体的历史记录，只能操作浏览器向前向后翻页，而且操作只在当此访问有效
- screen
  - 代表用户的屏幕信息，通过该对象可以获取到用户的显示器的相关信息

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

navigator

<script type="text/javascript">
			/*
			 * Navigator
			 * 	- 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
			 * 	- 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
			 * 	- 一般我们只会使用userAgent来判断浏览器的信息，
			 * 		userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，
			 * 		不同的浏览器会有不同的userAgent
			 * 
			 * 火狐的userAgent
			 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0
			 * 
			 * Chrome的userAgent
			 *  Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36
			 * 
			 * IE8
			 * 	Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE9
			 * 	Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE10
			 * 	Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
			 * 
			 * IE11
			 * 	Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
			 * 	- 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了
			 */
			
			//alert(navigator.appName);
			
			var ua = navigator.userAgent;
			
			console.log(ua);
			
			if(/firefox/i.test(ua)){
				alert("你是火狐！！！");
			}else if(/chrome/i.test(ua)){
				alert("你是Chrome");
			}else if(/msie/i.test(ua)){
				alert("你是IE浏览器~~~");
			}else if("ActiveXObject" in window){
				alert("你是IE11，枪毙了你~~~");
			}
			
			/*
			 * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息
			 * 比如：ActiveXObject
			 */
			/*if("ActiveXObject" in window){
				alert("你是IE，我已经抓住你了~~~");
			}else{
				alert("你不是IE~~~");
			}*/
			
			/*alert("ActiveXObject" in window);*/		
		</script>

histery

length

属性：可以获取到当前访问的连接数量

back()

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

forward()

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

history.back();
history.forword();

go()

可以用来跳转到指定的页面，需要一个整数作为参数

1 ：表示向前跳转一个页面

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

-n ：向后跳转n个页面

history.go(-1);

location

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

- 如果直接将location属性修改为一个完整的路径，或相对路径，则我们页面会自动跳转到该路径，并且生成响应的历史记录

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

assign()

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

location.assign("地址");

reload（）

用于重新加载当前页面，作用和刷新按钮一样

- 如果在方法中传递true做参数，则会强制清空缓存刷新页面

replace（）

可以使用一个新的页面替换当前页面，调用完毕也会跳转页面

不会生成历史记录，不能使用回退按钮回退

定时器简介

setInterval

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

clearInterval（）

- 可以用来关闭一个定时器
- 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
- 如果参数不是一个有效的标识，则什么也不做，不会报错

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

定时器练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
			window.onload = function(){
				
				/*
				 * 使图片可以自动切换
				 */
				
				//获取img标签
				var img1 = document.getElementById("img1");
				
				//创建一个数组来保存图片的路径
				var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"];
				
				//创建一个变量，用来保存当前图片的索引
				var index = 0;
				
				//定义一个变量，用来保存定时器的标识
				var timer;
				
				//为btn01绑定一个单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					
					/*
					 * 目前，我们每点击一次按钮，就会开启一个定时器，
					 * 	点击多次就会开启多个定时器，这就导致图片的切换速度过快，
					 * 	并且我们只能关闭最后一次开启的定时器
					 */
					
					//在开启定时器之前，需要将当前元素上的其他定时器关闭
					clearInterval(timer);
					
					/*
					 * 开启一个定时器，来自动切换图片
					 */
					timer = setInterval(function(){
						//使索引自增
						index++;
						//判断索引是否超过最大索引
						/*if(index >= imgArr.length){
							//则将index设置为0
							index = 0;
						}*/
						index %= imgArr.length;
						//修改img1的src属性
						img1.src = imgArr[index];
						
					},1000);
				};
				
				//为btn02绑定一个单击响应函数
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//点击按钮以后，停止图片的自动切换，关闭定时器
					/*
					 * clearInterval()可以接收任意参数，
					 * 	如果参数是一个有效的定时器的标识，则停止对应的定时器
					 * 	如果参数不是一个有效的标识，则什么也不做
					 */
					clearInterval(timer);
					
				};					
			};	
		</script>
	</head>
	<body>
		<img id="img1" src="img/1.jpg"/>
		<br /><br />
		<button id="btn01">开始</button>
		<button id="btn02">停止</button>
	</body>
</html>

修改div移动练习

解决：每次第一步移动时都会卡一下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
		
		</style>
		
		<script type="text/javascript">
			
			//使div可以根据不同的方向键向不同的方向移动
			/*
			 * 按左键，div向左移
			 * 按右键，div向右移
			 * 。。。
			 */
			window.onload = function(){					
				//定义一个变量，来表示移动的速度
				var speed = 10;
				
				//创建一个变量表示方向
				//通过修改dir来影响移动的方向
				var dir = 0;
				
				//开启一个定时器，来控制div的移动
				setInterval(function(){
					/*
					 * 37 左
					 * 38 上
					 * 39 右
					 * 40 下
					 */
					switch(dir){
						case 37:
							//alert("向左"); left值减小
							box1.style.left = box1.offsetLeft - speed + "px";
							break;
						case 39:
							//alert("向右");
							box1.style.left = box1.offsetLeft + speed + "px";
							break;
						case 38:
							//alert("向上");
							box1.style.top = box1.offsetTop - speed + "px";
							break;
						case 40:
							//alert("向下");
							box1.style.top = box1.offsetTop + speed + "px";
							break;
					}
				},30);
			
				//为document绑定一个按键按下的事件
				document.onkeydown = function(event){
					event = event || window.event;
					
					//当用户按了ctrl以后，速度加快
					if(event.ctrlKey){
						speed = 500;
					}else{
						speed = 10;
					}
					
					//使dir等于按键的值
					dir = event.keyCode;
				};
				
				//当按键松开时，div不再移动
				document.onkeyup = function(){
					//设置方向为0
					dir = 0;
				};			
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
	</body>
</html>

延时调用

setTimeout（）

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

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

clearTimeout()

关闭一个延时调用

延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，可根据需求选择

定时器的应用

//尝试创建一个可以执行简单动画的函数
/*
 * 参数：
 * 	obj:要执行动画的对象
 * 	attr:要执行动画的样式，比如：left top width height
 * 	target:执行动画的目标位置
 * 	speed:移动的速度(正数向右移动，负数向左移动)
 *  callback:回调函数，这个函数将会在动画执行完毕以后执行
 */
function move(obj, attr, target, speed, callback) {
	//关闭上一个定时器
	clearInterval(obj.timer);

	//获取元素目前的位置
	var current = parseInt(getStyle(obj, attr));

	//判断速度的正负值
	//如果从0 向 800移动，则speed为正
	//如果从800向0移动，则speed为负
	if(current > target) {
		//此时速度应为负值
		speed = -speed;
	}

	//开启一个定时器，用来执行动画效果
	//向执行动画的对象中添加一个timer属性，用来保存它自己的定时器的标识
	obj.timer = setInterval(function() {

		//获取box1的原来的left值
		var oldValue = parseInt(getStyle(obj, attr));

		//在旧值的基础上增加
		var newValue = oldValue + speed;

		//判断newValue是否大于800
		//从800 向 0移动
		//向左移动时，需要判断newValue是否小于target
		//向右移动时，需要判断newValue是否大于target
		if((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
			newValue = target;
		}

		//将新值设置给box1
		obj.style[attr] = newValue + "px";

		//当元素移动到0px时，使其停止执行动画
		if(newValue == target) {
			//达到目标，关闭定时器
			clearInterval(obj.timer);
			//动画执行完毕，调用回调函数
			callback && callback();
		}

	}, 30);
}

/*
 * 定义一个函数，用来获取指定元素的当前的样式
 * 参数：
 * 		obj 要获取样式的元素
 * 		name 要获取的样式名
 */
function getStyle(obj, name) {

	if(window.getComputedStyle) {
		//正常浏览器的方式，具有getComputedStyle()方法
		return getComputedStyle(obj, null)[name];
	} else {
		//IE8的方式，没有getComputedStyle()方法
		return obj.currentStyle[name];
	}

}

轮播图界面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			/*
			 * 设置outer的样式
			 */
			#outer{
				/*设置宽和高*/
				width: 520px;
				height: 333px;
				/*居中*/
				margin: 50px auto;
				/*设置背景颜色*/
				background-color: greenyellow;
				/*设置padding*/
				padding: 10px 0;
				/*开启相对定位*/
				position: relative;
				/*裁剪溢出的内容*/
				overflow: hidden;
			}
			
			/*设置imgList*/
			#imgList{
				/*去除项目符号*/
				list-style: none;
				/*设置ul的宽度*/
				/*width: 2600px;*/
				/*开启绝对定位*/
				position: absolute;
				/*设置偏移量*/
				/*
				 * 每向左移动520px，就会显示到下一张图片
				 */
				left: 0px;
			}
			
			/*设置图片中的li*/
			#imgList li{
				/*设置浮动*/
				float: left;
				/*设置左右外边距*/
				margin: 0 10px;
			}
			
			/*设置导航按钮*/
			#navDiv{
				/*开启绝对定位*/
				position: absolute;
				/*设置位置*/
				bottom: 15px;
				/*设置left值
				 	outer宽度  520
				 	navDiv宽度 25*5 = 125
				 		520 - 125 = 395/2 = 197.5
				 * */
				/*left: 197px;*/
			}
			
			#navDiv a{
				/*设置超链接浮动*/
				float: left;
				/*设置超链接的宽和高*/
				width: 15px;
				height: 15px;
				/*设置背景颜色*/
				background-color: red;
				/*设置左右外边距*/
				margin: 0 5px;
				/*设置透明*/
				opacity: 0.5;
				/*兼容IE8透明*/
				filter: alpha(opacity=50);
			}
			
			/*设置鼠标移入的效果*/
			#navDiv a:hover{
				background-color: black;
			}
		</style>
		
		<!--引用工具-->
		<script type="text/javascript" src="tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				//获取imgList
				var imgList = document.getElementById("imgList");
				//获取页面中所有的img标签
				var imgArr = document.getElementsByTagName("img");
				//设置imgList的宽度
				imgList.style.width = 520*imgArr.length+"px";
				
				
				/*设置导航按钮居中*/
				//获取navDiv
				var navDiv = document.getElementById("navDiv");
				//获取outer
				var outer = document.getElementById("outer");
				//设置navDiv的left值
				navDiv.style.left = (outer.offsetWidth - navDiv.offsetWidth)/2 + "px";
				
				//默认显示图片的索引
				var index = 0;
				//获取所有的a
				var allA = document.getElementsByTagName("a");
				//设置默认选中的效果
				allA[index].style.backgroundColor = "black";
				
				/*
				 	点击超链接切换到指定的图片
				 		点击第一个超链接，显示第一个图片
				 		点击第二个超链接，显示第二个图片
				 * */
				
				//为所有的超链接都绑定单击响应函数
				for(var i=0; i<allA.length ; i++){
					
					//为每一个超链接都添加一个num属性
					allA[i].num = i;
					
					//为超链接绑定单击响应函数
					allA[i].onclick = function(){
						
						//关闭自动切换的定时器
						clearInterval(timer);
						//获取点击超链接的索引,并将其设置为index
						index = this.num;
						
						//切换图片
						/*
						 * 第一张  0 0
						 * 第二张  1 -520
						 * 第三张  2 -1040
						 */
						//imgList.style.left = -520*index + "px";
						//设置选中的a
						setA();
						
						//使用move函数来切换图片
						move(imgList , "left" , -520*index , 20 , function(){
							//动画执行完毕，开启自动切换
							autoChange();
						});
						
					};
				}
				
				
				//开启自动切换图片
				autoChange();
				
				
				//创建一个方法用来设置选中的a
				function setA(){
					
					//判断当前索引是否是最后一张图片
					if(index >= imgArr.length - 1){
						//则将index设置为0
						index = 0;
						
						//此时显示的最后一张图片，而最后一张图片和第一张是一摸一样
						//通过CSS将最后一张切换成第一张
						imgList.style.left = 0;
					}
					
					//遍历所有a，并将它们的背景颜色设置为红色
					for(var i=0 ; i<allA.length ; i++){
						allA[i].style.backgroundColor = "";
					}
					
					//将选中的a设置为黑色
					allA[index].style.backgroundColor = "black";
				};
				
				//定义一个自动切换的定时器的标识
				var timer;
				//创建一个函数，用来开启自动切换图片
				function autoChange(){
					
					//开启一个定时器，用来定时去切换图片
					timer = setInterval(function(){
						
						//使索引自增
						index++;
						
						//判断index的值
						index %= imgArr.length;
						
						//执行动画，切换图片
						move(imgList , "left" , -520*index , 20 , function(){
							//修改导航按钮
							setA();
						});
						
					},3000);
					
				}
				
				
			};
			
		</script>
	</head>
	<body>
		<!-- 创建一个外部的div，来作为大的容器 -->
		<div id="outer">
			<!-- 创建一个ul，用于放置图片 -->
			<ul id="imgList">
				<li><img src="img/1.jpg"/></li>
				<li><img src="img/2.jpg"/></li>
				<li><img src="img/3.jpg"/></li>
				<li><img src="img/4.jpg"/></li>
				<li><img src="img/5.jpg"/></li>
				<li><img src="img/1.jpg"/></li>
			</ul>
			<!--创建导航按钮-->
			<div id="navDiv">
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
				<a href="javascript:;"></a>
			</div>
		</div>
	</body>
</html>

类的操作

我们可以通过修改元素的class属性来间接的修改样式

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

box.className = "b2";
box.className += " b2"; 	//中间要有空格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
			.b1{
				width: 100px;
				height: 100px;
				background-color: red;
			}
			
			.b2{
				height: 300px;
				background-color: yellow;
			}
			
		</style>
		
		<script type="text/javascript">
			
			window.onload = function(){
				//获取box
				var box = document.getElementById("box");
				//获取btn01
				var btn01 = document.getElementById("btn01");
				
				//为btn01绑定单击响应函数
				btn01.onclick = function(){
					//修改box的样式
					/*
					 * 通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面
					 * 	这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
					 */
					/*box.style.width = "200px";
					box.style.height = "200px";
					box.style.backgroundColor = "yellow";*/
					
					/*
					 * 我希望一行代码，可以同时修改多个样式
					 */
					
					//修改box的class属性
					/*
					 * 我们可以通过修改元素的class属性来间接的修改样式
					 * 这样一来，我们只需要修改一次，即可同时修改多个样式，
					 * 	浏览器只需要重新渲染页面一次，性能比较好，
					 * 	并且这种方式，可以使表现和行为进一步的分离
					 */
					//box.className += " b2";
					//addClass(box,"b2");
					
					//alert(hasClass(box,"hello"));
					
					//removeClass(box,"b2");
					
					toggleClass(box,"b2");
				};
				
			};
			
			//定义一个函数，用来向一个元素中添加指定的class属性值
			/*
			 * 参数:
			 * 	obj 要添加class属性的元素
			 *  cn 要添加的class值
			 * 	
			 */
			function addClass(obj , cn){
				
				//检查obj中是否含有cn
				if(!hasClass(obj , cn)){
					obj.className += " "+cn;
				}
				
			}
			
			/*
			 * 判断一个元素中是否含有指定的class属性值
			 * 	如果有该class，则返回true，没有则返回false
			 * 	
			 */
			function hasClass(obj , cn){
				
				//判断obj中有没有cn class
				//创建一个正则表达式
				//var reg = /\bb2\b/;
				var reg = new RegExp("\\b"+cn+"\\b");
				
				return reg.test(obj.className);
				
			}
			
			/*
			 * 删除一个元素中的指定的class属性
			 */
			function removeClass(obj , cn){
				//创建一个正则表达式
				var reg = new RegExp("\\b"+cn+"\\b");
				
				//删除class
				obj.className = obj.className.replace(reg , "");
				
			}
			
			/*
			 * toggleClass可以用来切换一个类
			 * 	如果元素中具有该类，则删除
			 * 	如果元素中没有该类，则添加
			 */
			function toggleClass(obj , cn){
				
				//判断obj中是否含有cn
				if(hasClass(obj , cn)){
					//有，则删除
					removeClass(obj , cn);
				}else{
					//没有，则添加
					addClass(obj , cn);
				}
				
			}
			
		</script>
	</head>
	<body>
		
		<button id="btn01">点击按钮以后修改box的样式</button>
		
		<br /><br />
		
		<div id="box" class="b1 b2"></div>
	</body>
</html>

二级菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>二级菜单</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			
			a,img {
				border: 0;
				text-decoration: none;
			}
			
			body {
				font: 12px/180% Arial, Helvetica, sans-serif, "新宋体";
			}
		</style>

		<link rel="stylesheet" type="text/css" href="css/sdmenu.css" />
		
		<script type="text/javascript" src="js/tools.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				
				/*
				 * 我们的每一个菜单都是一个div
				 * 	当div具有collapsed这个类时，div就是折叠的状态
				 * 	当div没有这个类是，div就是展开的状态
				 */
				
				/*
				 * 点击菜单，切换菜单的显示状态
				 */
				//获取所有的class为menuSpan的元素
				var menuSpan = document.querySelectorAll(".menuSpan");
				
				//定义一个变量，来保存当前打开的菜单
				var openDiv = menuSpan[0].parentNode;
				
				//为span绑定单击响应函数
				for(var i=0 ; i<menuSpan.length ; i++){
					menuSpan[i].onclick = function(){
						
						//this代表我当前点击的span
						//获取当前span的父元素
						var parentDiv = this.parentNode;
						
						//切换菜单的显示状态
						toggleMenu(parentDiv);
						
						
						//判断openDiv和parentDiv是否相同
						if(openDiv != parentDiv  && !hasClass(openDiv , "collapsed")){
							//打开菜单以后，应该关闭之前打开的菜单
							//为了可以统一处理动画过渡效果，我们希望在这将addClass改为toggleClass
							//addClass(openDiv , "collapsed");
							//此处toggleClass()不需要有移除的功能
							//toggleClass(openDiv , "collapsed");
							//切换菜单的显示状态
							toggleMenu(openDiv);
						}
						
						//修改openDiv为当前打开的菜单
						openDiv = parentDiv;
						
					};
				}
				
				/*
				 * 用来切换菜单折叠和显示状态
				 */
				function toggleMenu(obj){
					//在切换类之前，获取元素的高度
					var begin = obj.offsetHeight;
					
					//切换parentDiv的显示
					toggleClass(obj , "collapsed");
					
					//在切换类之后获取一个高度
					var end = obj.offsetHeight;
					
					//console.log("begin = "+begin +" , end = "+end);
					//动画效果就是将高度从begin向end过渡
					//将元素的高度重置为begin
					obj.style.height = begin + "px";
					
					//执行动画，从bengin向end过渡
					move(obj,"height",end,10,function(){
						//动画执行完毕，内联样式已经没有存在的意义了，删除之
						obj.style.height = "";
					});
						
				}
				
				
			};
			
			
		</script>
		
	</head>

	<body>

		<div id="my_menu" class="sdmenu">
			<div>
				<span class="menuSpan">在线工具</span>
				<a href="#">图像优化</a>
				<a href="#">收藏夹图标生成器</a>
				<a href="#">邮件</a>
				<a href="#">htaccess密码</a>
				<a href="#">梯度图像</a>
				<a href="#">按钮生成器</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">支持我们</span>
				<a href="#">推荐我们</a>
				<a href="#">链接我们</a>
				<a href="#">网络资源</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">合作伙伴</span>
				<a href="#">JavaScript工具包</a>
				<a href="#">CSS驱动</a>
				<a href="#">CodingForums</a>
				<a href="#">CSS例子</a>
			</div>
			<div class="collapsed">
				<span class="menuSpan">测试电流</span>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
				<a href="#">Current or not</a>
			</div>
		</div>
	</body>
</html>

JSON

JS中的对象只有JS自己认时，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON：JavaScript Object Notation JS对象表示法
- JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号 - 其他和JS语法一致
JSON分类:
- 对象{}
- 数组[]
JSON中允许的值：
- 字符串
- 数值
- 布尔值
- null
- 对象
- 数组

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

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

JSON.parse()

- 可以将JSON字符串转换为js对象
- 他需要一个JSON字符串作为参数，会将该字符串转换为JS对象

var json = '{"name":"孙悟空","age":"18"}'
var o = JSON.parse(json);
console.log(o);

JSON.stringify()

- 可以将一个js对象转换为JSON字符串
- 需要一个介绍对象作为参数，会返回一个JSON字符串

注意：JSON这个对象在IE7及以下不支持

eval（）（不推荐使用）

- 这个函数可以用来执行一段字符串形式得JS代码，并将执行结果返回
- 如果使用eval（）执行得字符串中含有{ }，它会将{ }当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个（）

var str2 = 'alert(hello)';
eval(str2);
eval("("+str+")");

eval () 这个函数得功能很强大，可以直接执行一个字符串中得js代码，但在开发中尽量不要使用，首先它性能比较差，然后它还具有安全隐患

兼容IE7及以下 JSON 最终方案

引入外部的js文件

自己写JSON对象

posted @ 2022-01-04 15:11 Sr淑女阅读(106) 评论(0) 收藏举报

刷新页面返回顶部

Sr淑女

JavaScript

JavaScript

警告框

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

向控制台输出一个内容

将js代码编写到外部的js文件中，通过script标签引入

JS语法的注释

字面量和变量

声明变量

标识符

数据类型

字符串

转义字符

Number

typeof 检查变量类型

Boolean 布尔值

强制类型转换

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

方法一：

方式二：

方式三：（隐式）

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

转换方式一：

转换方式二：

其他进制的数字

转换为Boolean

运算符

加法：

减法：除了加法其余都是转化成Number类型再进行运算

单目运算符

非布尔值的与或运算

与运算：

或运算

关系运算（比较）

Unicode编码

代码块

对象

创建一个对象

向对象添加属性

读取对象中的属性

修改对象的属性值

删除对象属性

如果要使用特殊的属性名，不能采用.的方式来操作，需要使用另外一种方式：

属性值

in运算符

对象字面量

可以利用字面量创建对象的多个属性

创建对象的方法（函数）

函数 function

函数调用

创建函数

- 使用函数声明

- 使用函数表达式

立即执行函数

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

作用域

变量的声明提前

函数的声明提前

this

使用工程的方法创建对象

构造函数

instanceof

将函数中的方法定义到全局中，可以避免多次调用同一个函数（不推荐使用）

原型 prototype

向原型中添加方法

注意：

toString（）

修改Person原型的toString

垃圾回收（GC）

数组

创建数组对象

向数组中添加元素

使用字面量创建数组

创建数组只传一个数值

数组中的元素可以是任意的数据类型，也可以是对象和函数

push（）

pop（）

unshift（）

shift

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

sqrt（）开方