1 js中数据类型 一共有6种。分别是 6种原始类型 （ undefined,Null Number,String,Boolean ）和对象 （Object） 除了Object 其他的类型的值本身都是无法被改变的。
Object 其实又可以细分为 function, Arrary,Date,RegExp
2 typyof 返回类型 null 是object类型
3 转换成String类型：a = a.toString();null和undefined不可以转换(这俩值没有toSring方法)。该方法不会影响原变量
方法二:调用String函数a = String(a);null和undefined会转换为字符串

转换成Number类型
方法一：调用Number函数a = Number(a);
方法二：字符串转换为整数/浮点数：parseInt(); // 把字符串(中的有效整数)转换为整数
parseFloat(); // 把字符串(中的浮点数)转换为浮点数
如果对非String使用这个方法，它会先将其转换成String，然后再操作

转换成Boolean类型
方法一：调用Boolean函数a = Boolean(a);
数字 —> Boolean 除了0和NaN表示false，负数整数都是true
字符串 —>Boolean 除了空串(连空格都没有，只有引号)，其余的都是true
null和undefined都会转换为false，对象会转换为true

对象的分类：
1.内建对象：
　　由ES标准中定义的对象，在任何的ES的实现中都可以实现
　　比如：Math　String　Number　Boolean　Function　Object
2.宿主对象
　　由JS的运行环境提供的对象，目前来讲主要至浏览器提供的对象
　　比如：BOM　DOM
3.自定义对象
　　由开发人员自己创建的对象 var obj = new Object();

JS枚举对象中的属性

通过使用for…in 语句,可以获取对象中的所有属性,再通过 "对象[]"可获取属性对应的属性值
var obj = {
name:“孙悟空”,
age:28,
gender:“男”,
address:“花果山”
}
for(o in obj){
console.log(“属性:”+o,“属性值:”+obj[o]);
}
//属性:name 属性值:孙悟空
//属性:age 属性值:28
//属性:gender 属性值:男
//属性:address 属性值:花果山
通过in 运算符,可以判断一个对象中是否存在某个属性,存在则返回true,不存在则返回false
var obj = {
name:“孙悟空”,
age:28,
gender:“男”,
address:“花果山”
}
console.log(“address” in obj);
//true
console.log(“mobile” in obj);
//false

全局作用域

1.全局作用域：全局作用域中有一个全局对象window ,它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用，
2.在全局作用域中：创建的变量都会作为window对象的属性保存，创建的函数都会作为window对象在方法保存
3.全局作用域中的变量都是全局变量 ，在页面的任意的部分都可以访问到
var a = 10;
var b = 20;
function fu() {
console.log(“我是fu函数”+a)
console.log(b) //全局定义的变量在任何部分访问到
}
window.fu(); //把函数fu()当做windoW的方法调用了

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

函数的声明提前，使用函数声明形式创建的函数，function 函数( ){ }，它会在所有的代码执行前被创建，所以在函数声明前来调用。

使用函数表达式创建的函数，var 变量 = function( ){ }，不会被声明提前，不能在声明前调用。
声明式函数：
function fun(){
console.log(“我能在任意地位置被调用”);
}
表达式函数：
var fun2 = function(){
console.log(“我只能在函数执行后被调用，虽然被提前声明了，但是没有赋值，在我前面调用我无法执行我”);
}

关于this

根据函数的调用方式的不同,this会指向不同的对象
以函数的形式调用时,this永远都是window
以方法的形式调用时,this就是调用方法的那个对象
以构造函数的形式调用时,this就是新创建的那个对象

通过不同方式创建对象,了解为什么要使用构造函数创建对象?

使用对象字面量方式创建一个对象
优点:直观,清晰
缺点:不可复用,都是Object类型的对象
var obj = {
name:“孙悟空”,
age:28,
gender:“男”,
sayName:function(){
console.log(this.name);
}
}
console.log(obj);

使用工厂方式创建一个对象

有点:可复用,更简洁

缺点:对象类型都是Object,无法区分多种不同类型的对象

//创建一个人的对象
function createPerson(name,age,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function({
console.log(this.name)
})
return obj;
}
var obj2 = createPerson(“猪八戒”,28,“男”);
console.log(obj2);

//创建一个狗的对象
function createDog(name,age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHi = function(){
console.log(“汪汪”);
}
return obj;
}
var obj3 = createDog(“旺财”,3);
console.log(obj3);

使用构造函数创建一个对象
//创建一个构造函数:构造函数就是一个普通的函数,创建方式和普通函数没有区别,不同的是构造函数习惯上首字母大写
//构造函数和普通函数的区别就是调用方式不同,普通函数是直接调用,构造函数需要使用new关键字来调用
function Person(){

}
var p = Person();//直接调用
console.log§;
//undefined
var p1 = new Person();//使用new关键字调用
console.log(p1);
//Person {}

构造函数的执行流程

1 立刻创建一个新的对象(对比工厂方式创建对象,构造函数内部做了此操作)
2 将新建对象设置为函数中的this,在构造函数中可以使用this来引用新建的对象
3 逐行执行函数中的代码
4 将新建的对象作为返回值返回
function Person(){
this.name = “孙悟空”;
console.log(this.name);
}
var per = new Person();
console.log(per);
//孙悟空
//Person {name:“孙悟空”}

function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
}

var per = new Person(“孙悟空”,28,“男”);
console.log(per);

使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类,
我们将通过一个构造函数创建的对象,称为该类的实例

有什么方法可以判断一个对象是否是某个类的实例

String: ‘string’
Number：‘number’
boolean：‘boolean’
undefined：‘undefined’
null：‘object’（判断不了是不是null，你可以用===来判断）
另外三个引用类型：function返回‘function’哦！！其他两个返回Object。
typeof 可以判断undefined 数值 字符串 布尔值 function ,不能判断null object array
使用instanceof 可以检查一个对象是否是一个类的实例
语法: 对象 instanceof 构造函数
如果是,则返回true,如果不是则返回false
所有的对象都是Object的后代,所以任何的对象和Object 做instanceof 检查时都会返回true
function Person(){
}
var per = new Person();
function Dog(){
}
var dog = new Dog();
console.log(per instanceof Person);
//true
console.log(dog instanceof Person);
//false
console.log(dog instanceof Dog);
//true
console.log(per instanceof Object);
//true
console.log(dog instanceof Object);
//true
构造函数优化—原型
优化前构造函数: 每创建一个新的对象都会在内存中重新生成一个新的sayName方法,没必要,太过于繁杂额外占用内容空间

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = function(){
        console.log("我是:"+this.name);
    }
} 
var per = new Person("孙悟空",28,"男");
var per2 = new Person("猪八戒",38,"男");
console.log(per.sayName());
//我是孙悟空
console.log(per2.sayName());
//我是猪八戒
console.log(per.sayName == per2.sayName);
//false 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

优化后构造函数: 全局作用域中定义函数,只会加载一次,sayName指向同一个内存地址,节省内存空间,但是污染了全局作用域的命名空间,且很不安全

function Person(name,age,gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
    this.sayName = fun;
}

function fun(){
   console.log("我是:"+this.name); 
}

var per = new Person("孙悟空",28,"男");
var per2 = new Person("猪八戒",38,"男");
console.log(per.sayName());
//我是孙悟空
console.log(per2.sayName());
//我是猪八戒
console.log(per.sayName == per2.sayName);
//true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

原型prototype: 我们创建的每个函数,解析器都会向函数中添加一个属性prototype,
原型对象: 这个属性(prototype)对应着一个对象,这个对象就是我们所谓的原型对象,
如果函数作为普通函数调用prototype没有任何作用,
当函数以构造函数调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,我们可以通过 proto 来访问该属性,
原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象,我们可以将对象中共有的内容,统一设置到原型对象中,
当我们访问对象的一个属性时,它会先在对象自身中寻找,自身中如果有,则直接使用,
如果没有则去原型对象中寻找,如果原型对象中有则使用,如果没有则在原型的原型中寻找
function Person(){

}
console.log(Person.prototype);
//{constructor:f}

var per = new Person();
console.log(per.proto ==Person.prototype);
//true

引入原型对象之后,公共的属性或者方法都可以加到原型对象上,对全局没有影响,而且同一类的对象都可以访问到,只加载一次
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}

Person.prototype.sayName = function(){
console.log(“我叫:”+this.name);
}

var per = new Person(“孙悟空”,28,“男”);
console.log(per.sayName());
//我叫:孙悟空
var per2 = new Person(“猪八戒”,38,“男”);
console.log(per2.sayName());
//我叫:猪八戒
console.log(per.sayName == per2.sayName);
//true

Person.prototype.target = “西天取经”;

console.log(per.target);
//西天取经
console.log(per2.target);
//西天取经

运用 in 运算符判断一个属性是否属于一个对象补充

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

如果想看自己本身的对象里是否有这个属性,需要通过hasOwnProperty() 方法来判断,使用该方法,只有自身含有属性时才会返回true,否则返回false
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}

Person.prototype.target = “西天取经”;

Person.prototype.sayName = function(){
console.log(“我叫:”+this.name);
}

var per = new Person(“孙悟空”,28,“男”);

console.log(“name” in per);
//true
console.log(“target” in per);
//true
console.log(per.hasOwnProperty(“name”));
//true
console.log(per.hasOwnProperty(“target”));
//false
关于hasOwnProperty() 方法,是谁的方法
hasOwnProperty 方法,我们在自己写的对象里并没有添加,但是依然可以使用,所以可以判断,其定然是在其原型对象内,通过__proto__属性,可以获取原型对象,继续使用hasOwnProPerty,依旧返回false,则继续向上一层查找,原型也是对象,所以原型对象也有它的原型对象,在原型对象的原型对象Object对象上,我们看到返回了true,所以可以判断hasOwnProperty 是属于Object对象的方法.
function Person(name,age,gender){
this.name = name;
this.age = age;
this.gender = gender;
}

Person.prototype.target = “西天取经”;

Person.prototype.sayName = function(){
console.log(“我叫:”+this.name);
}

var per = new Person(“孙悟空”,28,“男”);
console.log(per.hasOwnProperty(“hasOwnProperty”));
//false hasOwnProperty可以判断出hasOwnProperty 不是当前对象的属性
console.log(per.proto.hasOwnProperty(“hasOwnProperty”));
//false 可以看出hasOwnProperty 也不是其原型对象的属性
console.log(per.proto.proto.hasOwnProperty(“hasOwnProperty”));
//true 可以看出hasOwnProperty 是其原型对象的原型对象的属性

数组

//创建一个数组数组中只有一个元素10
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10);
var arr = [“孙悟空”,“猪八戒”,“沙和尚”];
push()

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

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

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

            var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精");
1
2
3
4
5
6
7

输出： “孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精,玉兔精”

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

           console.log("result = "+result);
1
2
3

输出： “result = 7”

pop()

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

       result = arr.pop();

        console.log(arr); 
1
2
3
4
5

输出： “孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精”

        console.log("result = "+result);
1

输出： “result = 玉兔精”

unshift()

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

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

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

        console.log(arr);
1
2
3
4
5
6
7

输出： “牛魔王,二郎神,孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精,玉兔精”

shift()
- 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
result = arr.shift();
console.log(arr);
输出：“二郎神,孙悟空,猪八戒,沙和尚,唐僧,蜘蛛精,白骨精,玉兔精”
console.log("result = "+result);
输出：“result = 牛魔王”

	
		"UTF-8">
		
		
	
	
	



var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];
slice()

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

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

             *  - 参数：

             *      1.截取开始的位置的索引,包含开始索引

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

             *          - 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素

             *      - 索引可以传递一个负值，如果传递一个负值，则从后往前计算

             *          -1 倒数第一个

             *          -2 倒数第二个

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

输出： "猪八戒,沙和尚,唐僧" 
splice()

               - 可以用于删除数组中的指定元素

               - 使用splice()会影响到原数组，会将指定元素从原数组中删除

                   并将被删除的元素作为返回值返回

               - 参数：

                   第一个，表示开始位置的索引

                   第二个，表示删除的数量

                   第三个及以后。。可不传

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

                 arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"];

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

               console.log(arr);

输出："孙悟空,猪八戒,沙和尚,牛魔王,铁扇公主,红孩儿,唐僧，白骨精"

               console.log(result);

输出："唐僧" 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112

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

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

           - 数组中有几个元素函数就会执行几次，每次执行时，浏览器会将遍历到的元素

               以实参的形式传递进来，我们可以来定义形参（value , index , obj），来读取这些内容

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

               第一个参数value，就是当前正在遍历的元素

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

               第三个参数 obj，就是正在遍历的数组 
               
1
2
3
4
5
6
7
8
9
10
11
12
13
14

	
		"UTF-8">
		
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

函数的方法

call()和apply()

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

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

           - 在调用call()和apply()可以将一个对象指定为第一个参数

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

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

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

           - this的情况：

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

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

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

               4.使用call和apply调用时，this是指定的那个对象 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

 
	
		
		
		
	
 
	
	
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

arguments

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

           1.函数的上下文对象 this

           2.封装实参的对象 arguments

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

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

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

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

                   只不过比较麻烦

                   arguments[0] 表示第一个实参

                   arguments[1] 表示第二个实参 。。。

               - 它里边有一个属性叫做callee，

                   这个属性对应一个函数对象，就是当前正在指向的函数的对象 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

	
		"UTF-8">
		
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

正则表达式

	
		"UTF-8">
		
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

	
		"UTF-8">
		
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

字符串和正则相关的方法

	
		"UTF-8">
		
		
	
	
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

量词

通过量词可以设置一个内容出现的次数。量词只对其前面的一个内容起作用。

{n} 正好出现n次
var reg = /(ab){3}/; //ababab
{m,n} 前面的内容出现m次到n次
var reg = /ab{3}c/;
console.log(reg.test(“abc”)); //true
console.log(reg.test(“abbc”)); //true
console.log(reg.test(“abbbc”)); //true
n+ 表示至少匹配一个，相当于{1，},
n* 表示零或多个，相当于有没有都行
n？表示0个或1个，相当于{0,1}
^a 表示匹配开头的a
a$ 表示匹配结尾的a，表示结尾了，不能有别的内容
如果在正则表达式中同时使用${和}^{，}则要求字符串必须完全符合正则表达式。varreg={/}^a$/; //a开头后立马结尾
console.log(reg.test(“aaa”)); //false
console.log(reg.test(“a”)); //true
手机号规则：
var phoneStr = “13671229599”
var reg = /^1[3-9][0-9]{9}$/; //a开头后立马结尾
console.log(reg.test(“aaa”)); //false
console.log(reg.test(“a”)); //true
.表示匹配任意字符，若要表示单纯的.，就要用到转义字符。“.”来表示.。字符串中也需要转义字符""。
注意：使用构造函数时创建正则表达式时，由于它的参数是一个字符串，而\是字符串中转义字符，如果要使用\，则要使用两个\来代替。
\w 匹配任意字母、数字、_ 。相当于[A-z0-9_]
\W 匹配除了字母、数字、相当于[^A-z0-9]
\d 匹配任意的数字。相当于[0-9]
\D 匹配除了数字。相当于[^0-9]
\s 匹配空格。
\S 匹配除了空格。
\b 匹配单词边界。
\B 匹配除了单词边界。
例子1：创建一个正则表达式检查一个字符串中是否含有单词child。
var reg = /\bchild\b/;//需要单词边界
console.log(reg.test(“he;lo children”));

var str = " he llo ";
//去除开头的空格
//str = str.replace(/^\s*/, “”);
//去除结尾的空格
//str = str.replace(/\s*KaTeX parse error: Undefined control sequence: \s at position 42: … str.replace(/^\̲s̲*/|/\s*/g, “”);

浏览器在加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行。如果将script标签写到页面上面，在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载，会导致无法获得DOM对象。
load事件会在整个页面加载完成后才出发。
为window绑定一个onload事件，该事件对应的响应函数将会在页面加载完成之后执行。这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了。

window.onload = function(){
//获取id为btn的按钮
var btn = document.getElementById(“btn”);
//为按钮绑定一个单击响应函数
btn.onclick = function(){
alert(“hello”);
    };
}; 
1
2
3
4
5
6
7
8

1.getElementByid()返回一个HTML元素对象： object HMTLElement
2.getElementsByTagName()返回一个类数组对象，所有查询到的元素都会封装到对象中：object HTMLCollection
3.getElementByName():返回所在属性name=xx元素对象。
4.innerHTML用于获取元素内部的HTML代码，对于自结束标签，这个属性没有意义。要用元素内属性。注意！！:class属性不能采取这种方式，读取class属性需要用.className

通过 具体的元素 节点调用
getElementsByTagName() 返回当前节点的指定标签名后代节点
childNodes 表示当前节点的所有子节点 获取包括文本节点在呢的所有节点 children属性可以获取当前元素的所有子元素
lastChild 表示当前节点的最后一个子节点
firstChild 表示当前节点的第一个子节点
获取父节点和兄弟节点
parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点 也可能获取到空白的文本
nextSibling 表示当前节点的后一个兄弟节点 也可能获取到空白的文本

	"-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

	
		"Content-Type" content="text/html; charset=UTF-8">
		
		"stylesheet" type="text/css" href="style/css.css" />
		
	
	
		
"total">
			
"inner">
				

					你喜欢哪个城市?
				

				
"city">
					
"bj">北京
					
上海
					
东京
					
首尔
				

				

				


				

					你喜欢哪款单机游戏?
				

				
"game">
					
"rl">红警
					
实况
					
极品飞车
					
魔兽
				

				

				


				

					你手机的操作系统是?
				

				
"phone">
IOS
 
"android">Android
Windows Phone
			

			
"inner">
				gender:
				"hello" type="radio" name="gender" value="male"/>
				Male
				"hello" type="radio" name="gender" value="female"/>
				Female
				

				

				name:
				"text" name="name" id="username" value="abcde"/>
			
		
		
"btnList">
			
"btn01">查找#bj节点
			
"btn02">查找所有li节点
			
"btn03">查找name=gender的所有节点
			
"btn04">查找#city下所有li节点
			
"btn05">返回#city的所有子节点
			
"btn06">返回#phone的第一个子节点
			
"btn07">返回#bj的父节点
			
"btn08">返回#android的前一个兄弟节点
			
"btn09">返回#username的value属性值
			
"btn10">设置#username的value属性值
			
"btn11">返回#bj的文本值
		
	


				

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom查询的剩余方法</title>
    <script type="text/javascript">
        window.onload = function () {
            //获取body元素,数组中的第一个
            var body = document.getElementsByTagName("body")[0];
            /**
             * 在document中有一个属性body,它保存的是body的引用
             */
            var  body1 = document.body;
            console.log(body1===body);//true
            console.log(body.nodeType);//1
            /**
             * document.documentElement保存的是html根标签
             */
            var html =  document.documentElement;
           console.log(html);//html
            /**
             *document.all获取页面中所有元素,要被淘汰了
             * document.getElementBuTagName("*")也是获取页面所有元素
             */
                var all = document.all;
                var all1 = document.getElementsByTagName("*");
                console.log(all1.length===all.length);//true
            /**
             * 根据元素class属性查询一组元素节点
             * getElementByClassName可以根据class属性值获取一组元素节点对象,返回类对象
             * 不支持ie8及以下浏览器
             */
            var box1 = document.getElementsByClassName("box1");
            console.log(box1);
            /**
             * document.querySelector()
             *  -需要一个选择器字符串作为参数，可以根据一个css选择器来查询一个元素节点对象
             *  ie8及以上可以使用，
             *  虽然在ie8中没有getElementByClassName方法，但是可以使用querySelector方法代替
             *  类选择器放在querySelector（）中,相当于getElementByClassName方法
             *  但是querySelector只能查询第一个类名为指定值的元素，返回的不是数组
             */
            var div = document.querySelector(".box1");//类选择器
            console.log(div.innerHTML);//"  就这"包含前边两个空格
            /**
             * querySelectAll()用法和querySelector()一样，
             * 不同的是，它返回的一个数组，所有class为指定值的元素
             */
            var dev1 = document.querySelectorAll(".box1");
            console.log(dev1[1].innerHTML);//"还有谁"
        }
    </script>
</head>
<body>
<div class="box1">
    就这
</div>

<div class="box1" >还有谁</div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

dom增删

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>dom增删改</title>
    <link rel="stylesheet" type="text/css" href="style/css2.css"/>
    <script type="text/javascript">

        window.onload = function () {
            /*公共绑定函数*/
            function myClick(idStr, fun) {
                let btn = document.getElementById(idStr);
                btn.onclick = fun;

            }

            //创建一个"广州"节点,添加到#city下
            myClick("btn01", function () {
                //创建广州节点
广州

                //第一步创建li元素节点
                /**
                 * document.createElement()
                 * 可以用于创建一个元素节点对象
                 * 它需要一个标签名作为对象，将会根据标签名创建元素节点对象
                 * 并将创建好的对象作为返回值返回
                 */
                let li = document.createElement("li");
                //第二部创建"广州"文本节点
                /**
                 * document.creatTextNode()
                 * 可以用来创建一个文本节点
                 * 需要一个文本内容作为参数，将会根据该内容创建文本节点，并将新的节点返回
                 */
                let gzText = document.createTextNode("广州");
                //第三步，将文本节点放入li节点内，认父
                /**
                 * appendChild()
                 *   -向父元素中添加一个新的子节点
                 *   -用法：父节点.appendChild(子元素);
                 */
                li.appendChild(gzText);
                //第四步，还要把li添加到id为city的ul标签下
                let city = document.getElementById("city");
                city.appendChild(li);

            });

            //将"广州"节点插入到#bj前面
            myClick("btn02", function () {
                let li = document.createElement("li");
                let gzText = document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj节点
                let bj = document.getElementById("bj");
                /**
                 * insertBefore()
                 *  -可以在指定子节点前插入新的子节点
                 *  -语法：
                 *          父节点.insertBefore(新插入节点，在其之前插入的节点)
                 */
                    //获取#city
                let city = document.getElementById("city");
                city.insertBefore(li, bj);
            });

            //使用"广州"节点替换#bj节点
            myClick("btn03", function () {
                let li = document.createElement("li");
                let gzText = document.createTextNode("广州");
                li.appendChild(gzText);
                //获取id为bj节点
                let bj = document.getElementById("bj");
                /**
                 * replaceChild()
                 *  -可以用新节点替换指定子节点
                 *  -语法：
                 *          父节点.replaceChild(新插入节点，在其之前插入的节点)
                 */
                    //获取#city
                let city = document.getElementById("city");
                city.replaceChild(li, bj);

            });

            //删除#bj节点
            myClick("btn04", function () {
                //获取#bj
                let bj = document.getElementById("bj");
                //获取city
                let city = document.getElementById("city");
                /**
                 * removeChild()
                 *   -删除一个子节点
                 *   -语法：
                 *         父节点.removeChild(子节点)
                 *         子节点.parentNode.removeChild(子节点)
                 *         第二种更常用，不用知道其父节点。
                 */
                //city.removeChild(bj);
                //如果不知道
                bj.parentNode.removeChild(bj);
            });

            //读取#city内的HTML代码
            myClick("btn05", function () {
                //获取city
                let city = document.getElementById("city");
                alert(city.innerHTML);

            });

            //设置#bj内的HTML代码
            myClick("btn06", function () {
                let bj = document.getElementById("bj");
                bj.innerHTML = "武汉"
            });

            //向city中添加广州
            myClick("btn07",function () {
                //获取#city
                let city = document.getElementById("city");
                /**
                 * 使用innerHTML也可以完成DOM增删改的相关操作
                 * 这种方式会影响整个ul标签而btn01中的方法只影响最后一个添加的标签
                 * 一般两种方式结合使用
                 */
                //city.innerHTML = city.innerHTML +"
广州
";
                //创建一个li
                let li = document.createElement("li");
                //向li中添加文本
                li.innerHTML= "广州";
                //将li添加到city中
                city.appendChild(li);
            });

        };





    </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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/cdtest.css"/>
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function(){
            /* 
                1.点击超链接，删除一个员工的信息 
            */
            //获取页面中所有的超链接元素
            var As = document.getElementsByTagName("a");
            //为每一个超链接绑定单击响应函数
            for (var i = 0; i < As.length; i++) {
                As[i].onclick = function(){//赋值的是对象，而不是返回值，所以delA后面没有括号
                    /* 
                       点击超链接，删除对应的那行用户的数据
                    */

                    //通过遍历得到的a元素获取当前的tr
                    var tr = this.parentNode.parentNode;//这里我们点击的是哪个超链接，this就是谁
                    //通过tr元素获取要删除的用户的名字
                    var name = tr.getElementsByTagName("td")[0].innerHTML;

                    //删除之前弹出提示框,如果用alert的话不管如何，对应的元素都会被删除掉
                    // alert("是否要删除？");

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

                    // tr.parentNode.removeChild(tr);//删除tr

                    //判断confirm的返回值，如果用户点击了确定，则执行删除操作，否则不执行删除操作
                    if(flag){
                        //删除tr对应用户的信息
                        tr.parentNode.removeChild(tr);
                    } 
                    /* 
                        点击超链接或跳转页面，这个是超链接的默认行为，我们的操作不需要超链接出现默认行为
                        可以在超链接响应函数的最后return false来取消超链接跳转页面的默认行为
                        或者在a标签中加入href="javascript:;"
                    */
                    return false;//用来取消在点击超链接的时候自动跳转
                }
            } 
            /* 
                2.输入员工信息，点击提交按钮将员工的信息添加到表格中
            注意：以下的代码中没有将input写到表单里，如果写到了表单里，需要取消提交表单的默认行为
                - 为提交按钮绑定单击函数
            */ 
            //获取添加按钮
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function(){
                // alert("成功绑定");
                //获取用户填写的员工信息
                var name = document.getElementById("empName").value;//文本框的内容就是value属性
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                // alert(name+","+email+","+salary);

                //将获取到的用户信息保存到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 deleteText = document.createTextNode("Delete");
                //将文本节点添加到td中
                nameTd.appendChild(nameText);
                emailTd.appendChild(emailText);
                salaryTd.appendChild(salaryText);
                //向a中添加文本节点
                a.appendChild(deleteText);
                //将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]; 
                //employeeTable.appendChild(tr);//用这种方式的话我们添加的内容会在tbody(浏览器自动创建的，在缓存里)外面
                tbody.appendChild(tr);//tbody是浏览器创建的
            };
        };
    </script>
</head>
<body>
    <table id="employeeTable" cellspacing="0">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>Tom@tom.com</td>
            <td>3000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jim</td>
            <td>Jim@Jim.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>smith</td>
            <td>Smith@smith.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table> 
    <div id="formDiv">
        <h2>添加新员工</h2> 
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" id="empName" name="empName"/>
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" id="email" name="email"/>
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" id="salary" name="salary"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">submit</button>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166

DOM操作内联样式

通过JS修改元素的样式
语法：元素.style.样式名 = 样式值

注意，如果CSS的样式名中含有-
这种名称在JS中是不合法的，如background-color
需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的首字母大写

我们通过style属性设置的样式都是内联样式(在html结构标签中写的)
而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
但是如果在样式中写了!important,则此时样式会有最高的优先级
即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效，所以尽量不要为样式添加!important

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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width:200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					//修改box1的大小
					/*
					 * 通过JS修改元素的样式
					 * 		语法：元素.style.样式名 = 样式值
					 * 
					 * 	注意，如果CSS的样式名中含有-
					 * 		这种名称在JS中是不合法的，如background-color
					 * 		需要将这种样式名修改为驼峰命名法，去掉-，然后将-后的首字母大写
					 * 
					 * 我们通过style属性设置的样式都是内联样式(在html结构标签中写的)
					 * 		而内联样式有较高的优先级，所以通过JS修改的样式往往会立即显示
					 * 		但是如果在样式中写了!important,则此时样式会有最高的优先级
					 * 		即使通过JS也不能覆盖该样式，此时将会导致JS修改样式失效
					 * 		所以尽量不要为样式添加!important
					 * 
					 */
					box1.style.width = "300px";
					box1.style.height = "300px";
					box1.style.backgroundColor = "yellow";
				}
				
				//点击按钮2，读取元素的样式
				var btn02 = document.getElementById("btn02");
				btn02.onclick = function(){
					//读取box1的样式
					/*
					 * 语法：元素.style.样式名
					 * 
					 * 通过style属性设置和读取的都是内联样式
					 * 		无法读取样式表中的样式
					 */
					alert(box1.style.backgroundColor);
				}
			};
			
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button>
		<button id="btn02">点我一下2</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

读取元素样式
通过currentStyle和getComputedStyle()读取到的样式都是只读的
不能修改，如果要修改必须通过Style属性

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

获取元素的当前显示的样式
语法： getComputedStyle(元素,null).样式名;
这个方法是window的方法，可以直接使用
需要两个参数：
第一个：要获取样式的元素
第二个：可以传递一个伪元素，一般都传null
它可以用来读取当前元素正在显示的样式
该方法会返回一个对象，对象中封装了当前元素对应的样式
可以通过对象.样式名来读取样式
比如：没有设置width，它不会获取到auto，而是一个长度
但是该方法不支持IE8及以下

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
			
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * 通过currentStyle和getComputedStyle()读取到的样式都是只读的
					 * 不能修改，如果要修改必须通过Style属性
					 */
					
					/*
					 * 获取元素的当前显示的样式
					 * 		语法： 元素.currentStyle.样式名;
					 * 		它可以用来读取当前元素正在显示的样式
					 * 		如果当前元素没有设置样式，则获取它的默认值
					 * 		currentStyle只支持IE浏览器，其他的浏览器不支持
					 */ 
					 //alert(box1.currentStyle.width);
					
					/*
					 * 获取元素的当前显示的样式
					 * 		语法： getComputedStyle(元素,null).样式名;
					 * 		这个方法是window的方法，可以直接使用
					 * 		需要两个参数：
					 * 			第一个：要获取样式的元素
					 * 			第二个：可以传递一个伪元素，一般都传null
					 * 		它可以用来读取当前元素正在显示的样式
					 * 		该方法会返回一个对象，对象中封装了当前元素对应的样式
					 * 		可以通过对象.样式名来读取样式
					 * 		如果获取的样式没有设置，则会获取到真实的值，而不是默认值
					 * 		比如：没有设置width，它不会获取到auto，而是一个长度
					 * 		但是该方法不支持IE8及以下
					 */     
					var obj = getComputedStyle(box1,null);
					alert(obj.width);
				};
			};	
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button><br /><br />
		<div id="box2" style="position:relative;">
			<div id="box1"></div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

读取元素样式（不限浏览器类型）

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
			
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 点击按钮1，修改box1的大小
				 */
				//获取box1
				var box1 = document.getElementById("box1");
				//为按钮绑定单击响应函数
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){

					var w = getStyle(box1,"width");
				};
			};
			/*
			 * 定义一个函数，用来获取指定元素的当前的样式
			 * 参数
			 * 		obj： 要获取的样式的元素
			 * 		name：要获取的样式名
			 */
			function getStyle(obj,name){
				//方法一
				if(window.getComputedStyle){
					//正常浏览器方式
					return getComputedStyle(obj,null)[name];
				}else{
					//IE8方式
					return obj.currentStyle[name];
				}
				
				//方法二
//				if(obj.currentStyle){
//					//IE8方式
//					return obj.currentStyle[name];
//				}else{
//					//正常浏览器方式
//					return getComputedStyle(obj,null)[name];
//				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">点我一下1</button><br /><br />
		<div id="box1"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * clientWidth
					 * clientHeight
					 * - 这两个属性可以获取元素的可见宽度和高度，包括内容区和内边距
					 * - 这些属性都是不带px的，返回都是一个数字，可以直接进行计算
					 * - 这些属性都是只读的，不能修改
					 */
					alert(box1.clientWidth);
					alert(box1.clientHeight);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

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

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetWidth
					 * offsetHeight
					 * - 获取元素的整个宽度和高度，包括内容区、内边距、边框
					 */
					alert(box1.offsetWidth);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

c、offsetParent
可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位（position不是static）的祖先元素
如果所有的祖先元素都没有开启定位，则返回body

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetParent
					 * - 可以用来获取当前元素的定位父元素
					 * - 会获取到离当前元素最近的开启了定位（position不是static）的祖先元素
					 * - 如果所有的祖先元素都没有开启定位，则返回body
					 */
					var op = box1.offsetParent;
					alert(op);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

d、offsetLeft，offsetTop
offsetLeft:当前元素相对于其定位父元素的水平偏移量；
offsetTop:当前元素相对于其定位父元素的垂直偏移量

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 200px;
				height: 200px;
				background-color: red;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * offsetLeft:当前元素相对于其定位父元素的水平偏移量
					 * offsetTop:当前元素相对于其定位父元素的垂直偏移量
					 */
					alert(box1.offsetLeft);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box1"></div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

e 、scrollWidth、scrollHeight
可以获取元素整个滚动区域德宽度和高度,即滚动区域内原子元素的高度和宽度

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box2{
				width:200px;
				height:200px;
				background-color: #bfa;
				overflow: auto;
			}
			#box3{
				width:150px;
				height:600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box2 = document.getElementById("box2");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * scrollWidth
					 * scrollHeight
					 * 可以获取元素整个滚动区域德宽度和高度,即滚动区域内原子元素的高度和宽度
					 */
					alert(box2.scrollHeight);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box2">
			<div id="box3"></div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

f、scrollLeft、scrollTop
可以获取水平滚动条和垂直滚动条移动的距离

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
			#box2{
				width:200px;
				height:200px;
				background-color: #bfa;
				overflow: auto;
			}
			#box3{
				width:150px;
				height:600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box2 = document.getElementById("box2");
				var btn01 = document.getElementById("btn01");
				btn01.onclick = function(){
					/*
					 * scrollLeft：
					 * scrollTop
					 * 可以获取水平滚动条和垂直滚动条移动的距离
					 */
					alert(box2.scrollTop);
				};
			};
			
		</script>
	</head>
	<body>
		<button id="btn01">点我一下</button><br /><br />
		<div id="box2">
			<div id="box3"></div>
		</div>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

g、滚动条是否滚动到底验证
当满足scrollHeight - scrollTop == clientHeight
说明垂直滚动条滚动到底了
当满足scrollWidth - scrollLeft == clientWidth
说明水平滚动条滚动到底了

协议不阅读完，不能点下面的注册按钮

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
		 	#info{
		 		width: 250px;
		 		height:300px;
		 		overflow: auto;
		 	}	
		</style>
		<script type="text/javascript">
			window.onload = function(){
				/*
				 * 当垂直滚动条滚动到底时，表单可用
				 * onscroll
				 * - 该事件会在元素的滚动条滚动时触发
				 */ 
				//获取id为info的p元素
				var info = document.getElementById("info");
				//根据标签名获取表单项
				var inputs = document.getElementsByTagName("input");
				info.onscroll = function(){
					//检查垂直滚动条是否滚动到底
					if(info.scrollHeight - info.scrollTop == info.clientHeight){
						//滚动条滚动到底，表单项可用   false元素可用
						inputs[0].disabled = false;
						inputs[1].disabled = false;
					} 
				} 
			}; 
		</script>
	</head>
	<body>
		<h3>欢迎亲爱的用户注册</h3>
		<p id="info">
			协议正文，</br><!--[if IE]>
				
			<![endif]-->条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
			条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n，条款n
		</p>
<!--		如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态-->
		<input type="checkbox" disabled="disabled"/>我已仔细阅读协议内容
		<input type="submit" value="注册" disabled="disabled"/>
	</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

1、实时显示鼠标坐标
onmousemove:该事件将会在鼠标在元素中移动时触发
事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个键被按下 鼠标滚轮滚动的方向
clientX：获取鼠标指针的水平坐标
clientY：获取鼠标指针的垂直坐标

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<title></title>
		<style type="text/css">
		 	#areaDiv{
		 		width: 250px;
		 		height:150px;
		 		border:1px solid black;
		 		margin-bottom: 10px;
		 	}
		 	#showMsg{
		 		width: 250px;
		 		height:50px;
		 		border:1px solid black;
		 	}	
		</style>
		<script type="text/javascript">
			window.onload = function(){
				 var areaDiv = document.getElementById("areaDiv");
				 var showMsg = document.getElementById("showMsg");
				 
				 
				 /*
				  * onmousemove:该事件将会在鼠标在元素中移动时触发
				  * 
				  * 事件对象
				  * - 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，
				  * - 事件对象中封装了当前事件相关的一切信息，比如：鼠标的坐标，键盘的哪个键被按下 鼠标滚轮滚动的方向
				  */
				 areaDiv.onmousemove = function(event){
				 	/*
				 	 * clientX：获取鼠标指针的水平坐标
				 	 * clientY：获取鼠标指针的垂直坐标
				 	 */
				 	 event = event || window.event;
				 	/*
				  	* 在IE8中，响应函数被触发时，浏览器不会传递事件对象
				  	* 在IE8及以下的浏览器中，是将事件对象作为window对象的属性保存的
				  	* var x = window.event.clientX;
				  	* var y = window.event.clientY;
				  	*/
				 				 	
				 	var x = event.clientX;
				 	var y = event.clientY;
				 	showMsg.innerHTML = "x="+x+"   y="+y;
				 }
			};	
		</script>
	</head>
	<body>
		<div id="areaDiv" ></div>
		<div id="showMsg" ></div>
	</body>
</html> 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

div随鼠标移动
clientX、clientY获取的是鼠标相对与浏览器显示页面的距离；
如果页面有滚动条的话，获取的clientX、clientY值需要加上滚动条滚动的距离才是真正的坐标值。

获取滚动条滚动的距离
chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
firfox等浏览器认为浏览器的滚动条是html标签的
var st = document.body.scrollTop || document.documentElement.scrollTop ;
var sl = document.body.scrollLeft || document.documentElement.scrollLeft ;

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

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

	
		
		
		
		
	
	
		
"box1" >我是box1
			"s1">我是sppan
		
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

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

	
		
		
		
		
	
	
		"btn01">添加超链接
		
"u1">
			
"javascript:;" class="link">超链接一
			
"javascript:;" class="link">超链接二
			
"javascript:;" class="link">超链接三
		
		
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

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

• 1、事件的字符串，不要on,即把事件名前面的on去掉，如onclick写成click
• 2、回调函数，当事件触发时该函数会被调用
• 3、是否在捕获阶段触发事件，需要一个布尔值，一般都传false
  使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数
  这样当事件被触发时，响应函数将会按照函数的绑定顺序执行
  IE8及以下版本不支持该方法
  attachEvent()
  在IE8中可以使用attachEvent()来绑定事件
  参数：
• 1、事件的字符串，要on,
• 2、回调函数，当事件触发时该函数会被调用
  这个方法也可以同时为一个事件绑定多个处理函数
  不同的是它是后绑定先执行,执行顺序和addEventListener()相反
  addEventListener和 attachEvent两个函数中this指向不同
  addEventListener中的this，是绑定事件的对象
  attachEvent()中的this，是window

	
		
		
		
	
	
		"btn01">点我一下
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

关于事件的传播网景公司和微软公司有不同的理解
微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行（事件的冒泡）
网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素（捕获阶段）
W3C综合了两个公司的方案，将事件传播分成了三个阶段

• a、捕获阶段
  在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
• b、目标阶段
  事件捕获到目标，捕获结束开始在目标元素上触发事件
• c、冒泡阶段
  事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
  如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
• 一情况下，我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
  IE8及以下的浏览器没有捕获阶段

	
		
		
		
		
	
	
		
"box1">
			
"box2">
				
"box3">
				
			
		
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

拖拽
拖拽box1元素
拖拽的流程

• a、当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
• b、当鼠标移动时，被拖拽元素随鼠标移动 onmousemove
• c、当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
  当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容
  此时会导致拖拽功能的异常，这个是浏览器提供的默认行为
  如果不希望发生这个行为，则可以通过return false来取消默认行为
  但是这招对IE8不起作用，
  IE设置取消默认去搜索引擎中搜索内容方法：给指定元素设置捕捉： obj.setCapture();
  取消捕捉方法： obj.releaseCapture()
  当调用一个元素的setCapture()方法以后，这个元素将会把下一次所有的鼠标按下相关的事件捕获到自身上。

	
		
		
		
		
	
	
		
"box1">
		
"box2">
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

鼠标滚轮事件
当鼠标滚轮向下滚动时，box1变长
当滚轮向上滚动时，box1变短

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

判断鼠标滚轮滚动方向
除火狐外浏览器
event.wheelDelta 可以获取鼠标滚轮滚动的方向
向上滚120 向下滚-120
wheelDelta这个值我们不看大小，只看方向
//alert(event.wheelDelta);
火狐浏览器不支持wheelDelta这个属性
在火狐中使用event.detail来获取滚动的方向
向上滚-3 向下滚3
//alert(event.detail);

	
		
		
		
		
	
	"height: 2000px;">
		
"box1">
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

键盘事件
键盘事件

• onkeydown：按键被按下
• onkeyup：按键被松开
  键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document
  可以通过keyCode来获取按键的编码
  可以通过它来判断哪个键被按下
  除了keyCode，事件对象中还提供了几个属性
  altKey、ctrlKey、shiftKey
  在文本框中输入内容，属于onkeydown的默认行为
  如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中
  取消方法：return false;

	
		
		
		
		
	
	
		"text"/>
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

键盘通过方向键移动div

	
		
		
		
		
	
	
		
"box1">
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

BOM介绍
BOM：浏览器对象模型，在BOM中可以通过IS来操作浏览器
BOM中为我们提供了一组对象，用来完成对浏览器的操作
BOM对象：

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

navigator
代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串，这个字符串包含有用来描述浏览器信息的内容
不同的浏览器会有不同的userAgent
谷歌浏览器的userAgent： Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.138 Safari/537.36
火狐浏览器的userAgent： Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0
在IE11中已经将微软和IE相关的标识都去除了，所以基本已经不能通过userAgent来识别一个浏览器是否是IE了
如果通过userAgent不能判断，还可以通过一些浏览器中特有的对象来判断浏览器的信息
比如：ActiveXObject对象，是window对象的一个属性（IE独有）
代码；根据navigator.userAgent判断浏览器类型

	
		
		
		
	
	
	



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

history
history用来操作浏览器向前或向后翻页

	
		
		
		
	
	
		"btn01">点我一下
		
history
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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

assign():用来跳转到其他页面，作用和直接修改location一样
reload():用于重新加载当前页面，作用和刷新按钮一样
如果在reload方法传递一个参数true，则会强制清空缓存刷新页面
replace():可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
不会生成历史记录，不能使用回退按钮

	
		
		
		
	
	
		"btn01">点我一下
		
history
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

定时器简介

setInterval()

• 定时调用，可以将一个函数，每隔一段时间执行一次
• 参数：
• 1、回调函数，该函数会每隔一段时间被调用一次
• 2、每次调用间隔的时间，单位是毫秒
• 返回值：返回一个Number类型的数据
• 这个数字用来作为定时器的唯一标识
  clearInterval()
• 关闭一个定时器
• 参数：一个定时器的标识作为参数，这样将关闭标识对应的定时器
• 如果参数不是一个有效的标识，则什么也不做

	
		
		
		
	
	
		
"count">0
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

图片切换
代码描述：按钮可以控制图片切换的开始和结束，图片可以借助定时器自动切换

	
		
		
		
		
	
	
		"img1" src="img/1.jpg"/>
		


		"btn01">开始
		"btn02">结束
	


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

修改div移动练习
代码介绍：键盘上下左右键控制盒子移动，松开按键盒子停止移动。移动的方向与速度控制分开，方向通过定时器修改，速度通过变量控制。

	
		
		
		
		
	
	
		
"box1">
	



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

延时调用
延时调用：一个函数不马上执行，而是隔一段时间以后再执行
延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次
延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择

定时器调用详细案例
案例：利用定时器定时多次修改div块的属性
注意：ie浏览器没设置宽高时，值默认为auto。

	
		
		
		
		
	
	
		"btn01">点击按钮以后box1向右移动
		"btn02">点击按钮以后box1向左移动
		"btn03">点击按钮以后box2向右移动
		"btn04">测试
		


		
"box1">
		
"box2">
		
"width:0;height: 1000px;border-left: 1px black solid;position: absolute;left: 800px;top: 0;">
	
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

轮播图详细案例
两个文件
test05.html 和tools.js
test05文件代码

	
		
		
		
		
		
		
	
	
		
		
"outer">
			
			
"imgList">
				
"img/1.jpg"/>
				
"img/2.jpg"/>
				
"img/3.jpg"/>
				
"img/4.jpg"/>
				
"img/5.jpg"/>
				
"img/1.jpg"/>
			
			
			
"navDiv">
				"javascript:;">
				"javascript:;">
				"javascript:;">
				"javascript:;">
				"javascript:;">
			
		
		
	

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183

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


//执行简单动画的move函数
/*
 * 参数：
 * 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
		//向左移动时，判断newValue是否小于target
		//向右移动时，判断newValue是否大于target
		if(speed < 0 && newValue < target || speed > 0 && newValue > target){
			newValue = target;
		}
		//将新值赋值给box1
		obj.style[attr] = newValue +　"px";
		//当元素移动到800px时，使其停止执行动画
		if(newValue === target){
			clearInterval(obj.timer);
			//动画执行完毕，执行回调函数
			callback && callback();
		}
	},30)
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

修改对象的样式类
案例：可以对对象的样式类进行修改，包括增加样式类、删除样式类、查找是否含有此样式类以及切换是否有此样式类。

	
		
		
		
		
	
	
		"btn01">点击按钮以后修改box的样式


		
"box" class="b1">
	
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93

案例介绍：一级目录、二级目录，点击一级目录展开折叠二级目录

	
		
		
		
		
		 
		
	
	
		
"my_menu" class="sdmenu">
			

				"menuSpan">在线工具
				"#">图像优化
				"#">收藏夹图表生成器
				"#">邮件
				"#">htaccess密码
				"#">梯度图像
				"#">按钮生成器
			
			
"collapsed">
				"menuSpan">支持我们
				"#">推荐我们
				"#">链接我们
				"#">网络资源
			
			
"collapsed">
				"menuSpan">合作伙伴
				"#">JavaScript工具包
				"#">CSS驱动
				"#">CodingForums
				"#">CSS例子
			
			
"collapsed">
				"menuSpan">测试电流
				"#">Current or not
				"#">Current or not
				"#">Current or not
				"#">Current or not
			
		
	



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

sdmenu文件代码

@charset "utf-8";

/* sdmenu */

div.sdmenu {
	width: 150px;
	margin: 0 auto;
	font-family: Arial, sans-serif;
	font-size: 12px;
	padding-bottom: 10px;
	background: url(bottom.gif) no-repeat right bottom;
	color: #fff;
}

div.sdmenu div {
	background: url(title.gif) repeat-x;
	overflow: hidden;
}

div.sdmenu div:first-child {
	background: url(toptitle.gif) no-repeat;
}

div.sdmenu div.collapsed {
	height: 25px;
}

div.sdmenu div span {
	display: block;
	height: 15px;
	line-height: 15px;
	overflow: hidden;
	padding: 5px 25px;
	font-weight: bold;
	color: white;
	background: url(expanded.gif) no-repeat 10px center;
	cursor: pointer;
	border-bottom: 1px solid #ddd;
}

div.sdmenu div.collapsed span {
	background-image: url(collapsed.gif);
}

div.sdmenu div a {
	padding: 5px 10px;
	background: #eee;
	display: block;
	border-bottom: 1px solid #ddd;
	color: #066;
}

div.sdmenu div a.current {
	background: #ccc;
}

div.sdmenu div a:hover {
	background: #066 url(linkarrow.gif) no-repeat right center;
	color: #fff;
	text-decoration: none;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

tools文件代码

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


//执行简单动画的move函数
/*
 * 参数：
 * 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
		//向左移动时，判断newValue是否小于target
		//向右移动时，判断newValue是否大于target
		if(speed < 0 && newValue < target || speed > 0 && newValue > target){
			newValue = target;
		}
		//将新值赋值给box1
		obj.style[attr] = newValue +　"px";
		//当元素移动到800px时，使其停止执行动画
		if(newValue === target){
			clearInterval(obj.timer);
			//动画执行完毕，执行回调函数
			callback && callback();
		}
	},30)
};



//定义一个函数，用来向一个元素中添加指定的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 = 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);
	}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

JSON
JS中的对象只有JS自己认识，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换成任意语言中的对象，JSON在开发中主要用来数据的交互
JSON（JavaScript Object Notation）：JS对象表示法。JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。
JSON分类：
对象{}
数组[ ]
JSON中允许的值：
字符串
数值number
布尔值
null
对象（普通对象，不包含函数）
数组
在JS中，有一个工具类叫JSON，用于将JSON字符串转换为JS对象，也可以将一个JS对象转换为JSON
json------》js对象
  JSON.parse( )
  可以将JSON字符串转换为js对象
  它需要一个JSON字符串作为参数，会将该字符串转换为JS对象

		 
1
2
3
4
5
6
7
8

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

		 
1
2
3
4
5

eval函数介绍
  eval（）函数可以用来执行一段字符串形式的JS代码，并将执行结果返回；
  如果使用eval（）执行的字符串中含有{}，它会将{}当成是代码块，如果不希望将其当成代码块解析，则需要在字符串前后各加一个（）。
  eval（）这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患。

		 
1
2
3
4
5

JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错
如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理。

https://blog.csdn.net/darabiuz/article/details/119135976