javascript

1. js编写位置

可以将js代码写到head内的script标签中
或者新建js文件，并通过script标签引入

后者优点：写到外部文件中可以在不同页面中同时引用，

可以利用浏览器的缓存机制

注：script标签一旦引入外部文件，就不能再编写代码了，即使编写也会被浏览器忽略

如果需要，可以创建一个新的script标签用于编写内部代码

1	<script src="./js/jsprimary.js"></script>

警告框

1	alert("warning");

让计算机在页面中输出一个内容–向body中传入内容，显示在页面上

1	document.write("Hello World!");

向控制台输出一个内容

1	console.log("text");

2. js语法

严格区分大小写，不支持Alert
每条语句以必须以；结尾(如果不写，浏览器会自动添加，但会消耗系统资源，有时会加错；)
js会忽略多个空格和换行，可以利用空格和换行对代码进行格式化

3. 变量
js中使用var关键字来声明一个变量
1
2
3
4
5
6
7
8
//声明变量
var a;
//为变量赋值
a = 123;
a = 456;
//同时声明和赋值
var b = 789;
console.log(a);
4. 标识符
变量名，函数名，属性名都属于标识符
标识符命名规则：
- 标识符可以含有字母，数字，下划线，$
- 不能以数字开头
- 不能是js中的关键字或保留字
- 标识符一般采用驼峰命名法（首字母小写，其余每个单词首字母大写）eg. hello_World

5. 数据类型

一共有6种数据类型

String 字符串 - -String
Number 数值 - -Number
Boolean 布尔值- -Boolean
Null 空值 - -Object
Undefined 未定义 - -undefined
Object 对象
前5种是基本数据类型，Object是引用数据类型

1. 字符串

1	var str = "hello";

使用单引号或双引号引起来

2. 数值

js种所有的数值都是Number类型，包括整数和浮点数

可以使用typeof 检查变量类型

语法：typeof 变量名

<script>
    var a = 123;
    var b = "123";
    console.log(typeof a);
    console.log(typeof b);
</script>

js可以表示的数字的最大值

1
2
3

console.log(Number.MAX_VALUE);
a = Infinity;
a = NaN;

Number.MAX_VALUE值为1.7976931348623157e+308，如果超出范围，则返回Infinity（无穷）

NaN是一个特殊的数字，表示not a number

NaN和Infinity都是Number类型

3. boolean

true
false

1	var bool = false;

4. Null

Null类型的值只有一个，就是null
用来表示一个空的对象
类别是Object

1	var a = null;

5. undefined–未定义

当申明的变量未被赋值时，他的值就是undefined

var b;

强制类型转换

(1)转换为字符串

方式一：

调用变量的toString()方法
注：

该方法不会影响到原变量，而是返回一个转换的结果

null和undefined没有toString()方法，调用时会出错

var a = 123;
var b = a.toString();
//a = a.toString();
console.log(typeof a);
console.log(typeof b);

方式二：

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

var a = 123;
a = String(a);
console.log(typeof a);
a = null;
a = String(a);
a = undefined;
a = String(a);

(2)转换为数值

方式一：

使用Number()函数
注：

若字符串中有非数字内容，则转换为NaN
若字符串为空串或者仅包含一个或多个空格，则转换的结果为0
布尔转数字时 true–>1,false–>0
null转数字时，结果是0

undefined转数字，结果是NaN

1
2
3

var a = "123";
a = Number(a);
console.log(typeof a);

方式二：

将string转为数字

**parseInt()**方法将字符串转为整数，取出字符串中有效的数字

**parseFloat()**方法将字符串转为浮点数

注：

如果对非string类型使用parseInt()或parseFloat()，会先将其转换成string，再操作

a = "123px";
a = parseInt(a);
a = "123.456px";
a = parseFloat(a);

(3) 转换为boolean

调用Boolean()函数
数字转为boolean 除了0和NaN，其余都是true
字符串转boolean时，除了空串其余都是true
null和undefined都是false

var a = 123;//true
a = -123;//true
a = 0;//false
a = Infinity；//true
a = NaN;//false
a = Boolean(a);
console.log(a);

运算符优先级

if语句练习

prompt()可以弹出一个提示框+文本框

用户可以输入内容，js通过变量来接受

<script>
        //用score变量接收输入数据
    var score = prompt("请输入小明的期末成绩：");
    if(score==100){
        alert("BMW");
    } 
    else if(score>=80){
        alert("iphone");
    }
    else if(score>=60){
        alert("reference book");
    }
    else{
        alert("nothing");
    }
    console.log(score);
</script>

6. 对象

以上5种是基本数据类型，基本数据类型都是单一的值，值之间没有联系

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

对象的分类

内建对象

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

例如：Math String Number Boolean Function…
宿主对象

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

例如：BOM DOM（consol，document）
自建对象

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

创建对象

使用new关键字调用构造函数，创建对象
1
var obj = new Object();
使用对象字面量来创建一个对象
1
var obj = {};
可以使用上述语句创建对象后向其中添加属性

也可以使用对象字面量创建对象时，直接指定对象中的属性

语法：{属性名:属性值, 属性名:属性值…}

属性名可以加””也可以不加，但特殊的名字必须加””

1 2	var obj3={name:"ell", age:11}; console.log(obj3);

向对象中添加属性

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

//向obj中添加name,gender,age属性
obj.name="Tom";
obj.gender="male";
obj.age=18;
console.log(obj)

属性名不强制要求遵守标识符的规范，自己要精良遵守标识符的规范

注：

如果要使用特殊的属性名（比如123），不能采用.的方式（会出错），需要采用另一种方式：

语法：对象[“属性名”]=属性值;

1	obj["123"]=789;

使用[]这种方式操作属性更加的灵活，

在[]中可以直接传递一个变量，变量的值是多少，就会读取哪个属性

obj["123"]=789;
n="123"
console.log(obj[n])
//相当于obj["123"]

js对象的属性值可以是任意的数据类型，甚至可以是一个对象

读取属性

语法：对象.属性名;

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

1	console.log(obj.name)

对于使用语法：对象[“属性名”]=属性值;定义的属性，读取属性时

语法：obj[“属性名”]

1	console.log(obj["123"])

修改属性值

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

1	obj.name="Mark";

删除属性

语法：delete 对象.属性名；

1	delete obj.age;

检查对象中是否具有特定属性–in运算符

有返回true，没有返回false

语法：”属性名” in 对象

1 2	//检查obj中是否有test2属性 console.log("test2" in obj);

7. 函数

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

创建一个函数对象

1.使用构造函数

1	var fun = new Function();

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

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

2.使用函数声明来构建函数
语法：
function 函数名([形参1,…形参n]){
函数体语句*n
}

1
2
3

 function fun2(){
    console.log('fun2');
}

使用函数表达式来创建一个函数

语法：

var 函数名 = function([形参1,…形参n]){

函数体语句*n

}

1
2
3

 var fun3 = function(){               
    console.log("fun3");
}

调用函数

语法：函数对象();

1
2
3

 var fun = new Function("console.log('hello');"); 
/*调用函数*/
fun();

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

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

注：

调用函数时解析器不会检查实参的类型也不会检查实参的数量，所以要注意是否会接收到非法的参数

函数的返回值

使用return设置返回值，并通过变量接收调用函数后的返回值

返回值也可以是任意的数据类型，包括对象，函数

语法：return 值

function sum(a,b,c){
    var d = a+b+c;
    return d;
}
var result = sum(1,2,3);
console.log(result);

如果return后不加任何值，或这函数没有return，相当于返回undefined

实参

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

sum–只写函数名，表示函数对象

sum()–表示调用函数，获得他的返回值

立即执行函数

 (function () {       
    alert("我是一个匿名函数！")
})();
(function (a, b) {
    console.log("a=" + a);
    console.log("b=" + b);
})(123, 456);

枚举对象中的属性
使用for…in 语句

var user = {
    name: "Tom",
    age:19,
    gender:"男"
}
for(n in user){
    console.log("属性名:"+n+" 属性值:"+user[n]);
}

作用域–变量的作用范围

js中有两种作用域

全局作用域

直接写在script标签中的代码，都在全局作用域中

全集作用域在页面打开是创建，关闭时销毁

在全局作用域中有一个全局对象window，由浏览器创建，可以直接使用

全局作用域中创建的变量会作为window对象的属性保存
局部作用域（函数作用域）

调用函数时创建，函数执行完销毁

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

当在函数作用域中操作一个变量是，会先在自身的作用域中寻找变量，如果没有，则向上一级作用域中寻找

声明提前

变量的声明提前

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

如果不使用var，则变量不会被提前声明
函数的声明提前

使用函数声明形式创建的函数–function 函数名(){ },会在所有代码执行前被创建

使用表达式创建的函数– var 函数名=function(){},不会被声明提前，所以不能再声明前调用

this

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

this指向的是一个对象–称为函数执行的上下文对象

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

以函数的形式调用，this是window
以方法的形式调用，this是调用方法的那个对象
以构造函数形式调用，this是新创建的对象
使用call()和apply()调用函数时，this是指定的第一个参数

原型prototype

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

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

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

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

function MyClass(){

}
var mc = new MyClass();
console.log(mc.__proto__ );

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

1	MyClass.prototype.name = "原型对象中的名字";

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

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

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

可以使用对象的hasOwnProperty检查自身是否具有某个属性

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

8. 数组

数组的创建

1
2
3

var arr = new Array();
var arr1 = [1,2,3,4];
var arr2 = new Array(10,20,30);

向数组中添加元素

1
2
3

arr[0] = 7;
arr[1] = 4;
arr[2] = 26;

读取数组中的元素

读取不存在的索引时，不会报错而是返回undefined

1	console.log(arr[1]);

获取数组的长度

1	console.log(arr.length);

length可以手动修改

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

向数组最后添加元素

1	arr[arr.length] = 15;

数组中的元素可以是任意的数据类型(包括对象，函数)

1
2
3

arr = ["hello",1,true];  
var obj = {name:"Tom"};
arr[arr.length] = obj;

二维数组

1 2	arr = [[1,2,3],[3,4,5],[5,6,7]]; console.log(arr[0]);

数组的方法

push()

可以向数组的末尾添加一个或多个元素

并返回数组新的长度

1 2	var arr = ["one","two","three","four","five"]; var res = arr.push("aaa","bbb");

pop()

可以删除数组的最后一个元素，并返回该元素的值
1
2
res = arr.pop();
console.log("result = "+res);
unshift()

可以向数组开头添加一个或多个元素

并返回新的数组长度
1
2
arr.unshift("hello","zero");
console.log(arr);
shift()

删除并返回数组的第一个元素，并将被删除的元素返回
1
2
3
res = arr.shift();
console.log(arr);
console.log("result = "+res);
forEach() –用于数组遍历

需要一个函数作为参数

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

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

每次执行时，浏览器会将遍历到的元素以实参的形式传递进来，

我们可以定义形参来读取其中的内容

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

当前正在遍历的元素的值
数组元素的下标
正在遍历的数组对象

1
2
3

arr.forEach(function(value,index,arr){
    console.log("value = "+value);
});

slice()

从数组中提取出指定的元素,不会影响原数组，而是返回一个新的数组

参数：

开始的位置索引,包含开始索引
结束的位置索引，不包含结束索引（可省略）

索引可以传递一个负值，表示从后往前数的位数

1 2	var res = arr.slice(1,5); console.log("截取result = "+res);

splice()

删除数组的指定元素，并向数组添加新的元素

会影响到原数组，将指定元素从原数组中直接删除

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

参数：

开始的位置索引,包含开始索引
删除的数量
第三个及以后的参数，可以在删除开始位置前添加一些新的元素、替换原来元素的位置

1
2
3

res = arr.splice(0,2,"welcome","happy");                
console.log("删除result = "+res);
console.log("删除后arr = "+arr);

concat()

连接两个或多个数组，返回合并的结果

方法不会影响原数组

不仅可以传数组也可以传元素

var arr1 = ["a","b","c"];
var arr2 = ["d","e","f"];
var arr3 = ["hello","happy"];
var res = arr1.concat(arr2,arr3,"next");        
console.log("拼接后："+res);

join()

可以将数组转换成字符串, 不会影响原数组

在join()中可以指定一个字符串作为参数，该字符串作为数组元素间的连接符默认为,
1
2
3
4
res = arr1.join();
console.log("转换后："+res);//a,b,c
res = arr1.join("-");
console.log("转换后："+res);//a-b-c

reverse()

反转数组，会直接修改原数组

1 2	arr1.reverse(); console.log("reverse后："+arr1);

sort()

排序,会直接修改原数组>

按照Unicode编码排序，包括纯数字的数组

可以在sort()添加一个回调函数，来指定排序规则

回调函数中需要定义两个形参

浏览器根据回调函数的返回值决定元素的位置
大于0 交换位置
<=0 不换位置
升序排列返回a-b
降序排列返回b-a

var arr = ["b","d","e","a","c"]                
arr.sort();
console.log("sort后："+arr);
arr = [3,4,11,2,5];
arr.sort();
console.log("sort后："+arr);
//返回结果  sort后：11,2,3,4,5
arr.sort(function(a,b){
    //升序
    return a-b;
    //降序
    //return a-b;
})
console.log("sort后："+arr);

函数对象的方法–call()和apply()

call()和apply()两个方法都是函数对象的方法，需要通过函数对象来调用

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

function fun(){    
    console.log("hello");
}
fun.call();
fun.apply();

调用call()和apply()可以将一个对象指定为第一个参数，这个对象将会成为函数执行时的this

        obj = {                
            name:"obj",
            sayname:function(){
                console.log(this.name);
            }
        }
        obj2 = {
            name:"obj2"
        }
obj.sayname.apply(obj2);

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

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

function fun(a,b){                                        
    console.log("a="+a);
    console.log("b="+b);
}
fun.call(obj,2,3);
fun.apply(obj,[2,3]);

arguments

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

this
封装实参的对象arguments

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

通过arguments.length来获取实参的长度
1
console.log(arguments.length);
在调用函数时，我们所传递实参会在arguments中保存

即使不定义形参，也可以通过arguments来使用实参 arguments[0], arguments[1]

arguments有一个属性–callee，这个属性对应着一个函数对象–就是当前的函数

9. Date对象

创建

1	var d = new Date();//当前时间

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

向构造函数中传递一个表示时间的字符串作为参数时，可以创建指定时间的Date对象

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

1 2	var d2 = new Date("07/30/2022"); var d3 = new Date("07/30/2022 11:10:30");

Date对象的方法

getDate() 获取日期对象是几号

1 2	var date = d.getDate(); console.log(date);

getDay()获取日期是周几

会返回0-6的值，0–周日 1–周一

1 2	var day = d.getDay(); console.log(day);

getMonth() 获取月份

返回0-11的值 0–一月，1–2月

1 2	var month = d.getMonth; console.log(month);

getFullYear() 获取年份

1 2	var year = d.getFullYear(); console.log(year);

getHours() 获取小时
getMinutes() 获取分钟
getSeconds() 获取秒数
getMilliseconds() 获取毫秒数
getTime() 获取日期对象的时间戳

时间戳：从格林威治标准时间到当前对象所指时间花费的毫秒数（1s=1000ms）

计算机底层在保存时间时用的都是时间戳
1
2
var time = d.getTime();
console.log(time);

获取当前时间的戳

1 2	time = Date.now(); console.log(time);

10. Math

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

它属于攻击工具类，不用创建对象，就可以直接使用里面封装的数学运算相关的属性和方法

Math.PI 表示圆周率

Math.abs() 绝对值

Math.ceil() 向上取整

Math.floor() 向下取整

Math.max() 最大值

Math.min() 最小值

Math.pow(x,y) x的y次幂

Math.sqrt() 平方根

Math.round() 四舍五入取整

Math.random() 生成0-1之间的随机数，不包括0和1

0-x随机数 Math.round(Math.random()*x)

x-y随机数 Math.round(Math.random()*(y-x))+x

11. 包装类

js中提供了三个包装类，通过这三个包装类可以将基本数据类型转换为对象

String()
Number()
Boolean()

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

注：在实际应用中，不会使用基本数据类型的对象，因为会在比较时出现一些无法预计的结果

12. 字符串

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

属性：

length：获取字符串的长度

1 2	var str = "hello world!"; console.log(str.length);

方法：

charAt() 返回指定位置的字符

1 2	var res = str[6]; res = str.charAt(6);

concat() 连接两个或多个字符串

作用和+一致

1 2	res = str.concat("你好","How are you"); console.log(res);

indexof() 返回指定字符在字符串的位置

有则返回该字符第一次出现的索引，没有返回-1

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

1 2	res =str.indexOf("o"); res =str.indexOf("o",5);

lastIndexOf()

用法与indexof()一致

indexof()从前往后找，lastIndexOf() 从后往前找
slice() 截取出指定内容

参数：
1. 开始的位置索引,包含开始索引
2. 结束的位置索引，不包含结束索引第二个参数可以省略，会取到结尾索引可以传递一个负值，表示从后往前数的位数
  1
  res = str.slice(1,4);
substring() 截取出字符串，与slice()类似

参数：
1. 开始的位置索引,包含开始索引
2. 结束的位置索引，不包含结束索引（可省略，会取到结尾）
  
  不同的是，这个方法不接受负值作为参数，如果传递一个负值，默认使用0
  
  会自动调整参数的位置，前小后大

substr() 截取字符串

参数：

         1. 开始的位置索引,包含开始索引
         2. 取字符串的长度

split() 分割字符串

返回一个数组

将空串作为参数时，将原数组拆成单字符的数组

可以传递一个正则表达式作为参数
1
2
3
4
str = "abc,bcd,efg,hij";
res = str.split(",");
str = "1a2b3c4d5e6f";
res = str.split(/[a-z]/);

toUpperCase() 转换为大写

1 2	res = str.toUpperCase(); console.log(res);

toLowerCase() 转换为小写

1 2	res = str.toLowerCase(); console.log(res);

search() 搜索字符串是否含有指定内容

搜索到则返回第一次出现的索引，搜索不到返回-1

可以接受一个正则表达式作为参数，搜索满足正则表达式的字符串
1
2
str = "hello abc hello aec afc";
res = str.search(/a[bef]c/);
match() 根据正则表达式将符合条件的内容提取出来

以数组的形式返回，即使只有一个元素

默认情况下，match只会找到一个符合条件的内容，找到后就停止检索

如果需要找到所有满足条件的字符串，可以设置全局匹配模式

一个正则表达式可以设置多个匹配模式，且顺序无所谓
1
2
str = "1a2b3c4d5e6f";
res = str.match(/[a-z]/gi);

replace() 将字符串中的指定内容替换为新的内容

参数：

 1. 被替换的内容，可以是正则表达式

 2. 新的内容

       默认只替换第一个

1 2	str = "1a2b3c4d5e6f"; res = str.replace(/[a-z]/gi,"@");

13. 正则表达式

创建正则表达式对象

语法：

使用构造函数

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

匹配模式可以是

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

1	var reg = new RegExp("a","i");

使用字面量 var 变量 = /正则表达式/匹配模式

1	reg = /a/i;

正则表达式的方法：

test()

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

区分大小写

1 2	var reg = new RegExp("a");//检查字符串是否含有a console.log(reg.test("abdbb"));

14. DOM–文档对象模型

文档：整个html网页文档
对象：将网页中的每一个部分都转换成了一个对象
模型：使用模型来表示对象之间的关系，这样方便获取对象
节点–构成html文档最基本的单元

分类：

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

<body>
    
    <button id="btn">按钮</button>
    <script>
        //获取button对象
        var btn = document.getElementById("btn");
        //修改按钮的文字
        btn.innerHTML = "button";
    </script>
</body>

事件：用户和浏览器之间的交互行为

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

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

但这种写法结构和行为耦合，不方便维护，不推荐使用

1	<button id="btn" onclick="alert('hello');">按钮</button>

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

<body>                    
    <button id="btn">按钮</button>
    <script>
        var btn = document.getElementById("btn");
        btn.onclick = function(){
            alert("hi");
        }
    </script>
</body>

注：如果将script标签写在body的上面，在代码执行时，页面还没有加载，获取到的元素是null，因此无法触发事件

解决方法：为window绑定一个onload事件，onload事件会在整个页面加载完成后才触发

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload = function(){
            var btn = document.getElementById("btn");
            btn.onclick = function(){
                alert("what's wrong?");
            }
        }
    </script>
</head>
<body>
    <button id="btn">按钮</button>
</body>

DOM查询

获取元素节点

获取元素节点(通过document对象调用)
- getElementById() 通过id属性获取一个元素
- getElementsByTagName() 通过标签名获取一组元素
  
  返回的是一个类数组对象
- getElementsByName() 通过name属性获取一组元素
- getElementsByClassName() 根据元素的class属性值获取一组元素
获取元素节点的子节点(通过具体的元素节点调用)
get ElementsByTagName() 返回当前节点二点指定标签名后代节点方法
childNodes 当前节点的所有子节点属性
```
空行会包含进去  
```
children 当前元素的所有子元素属性

空行不会包含进去
firstChild 当前节点的第一个子节点属性
```
（包括空白）
```
firstElementChild 当前元素的第一个子元素属性
```
不包括空白
```
lastChild 当前节点的最后一个子节点属性
获取父节点和兄弟节点(通过具体的元素节点调用)
- parentNode 当前节点的父节点属性
- previousSibling 当前节点的前一个兄弟节点属性
  
  （包括空白）
- previousElementSibling 前一个兄弟元素
  
  （不包括空白）
- nextSibling 当前节点的后一个兄弟节点属性
- previousElementSibling 前一个兄弟元素
  
  在document中有一个body属性，可以直接获取body
  
  在document中有一个documentElement属性–html
  
  document.all代表页面所有元素
  1
  2
  3
  4
  5
  6
  //获取body
  var body = document.body;
  //获取html根标签
  var html = document.documentElement;
  //页面所有元素
  var all = document.all;

document.querySelector()方法

需要一个选择器的字符串作为参数，根据css选择器来获取符合条件的一个元素

<body>
    <div class="box1">
        <div>我是box1中的div</div>
    </div>
    <div></div>
</body>

1
2
3

//获取box1中的div    
var div = document.querySelector(".box1 div");
console.log(div.innerHTML);

document.querySelectorAll()方法

根据css选择器来获取符合条件的一组元素，以数组形式返回

DOM增删改
document.createElement() 创建元素节点

需要一个标签名作为参数，根据该标签名创建元素节点对象，并返回创建好的对象
1
var div = document.createElement("div");
document.createTextNode() 创建一个文本节点对象

需要一个文本内容作为参数，根据该内容创建文本节点，并返回新的节点
1
var text = document.createTextNode("天津");

appendChild() 向父结点中添加新的子节点

用法：父节点.appendChild(子节点)；

//将text添加到div中
div.appendChild(text);
//将创建的div添加到body中
var body = document.body;
body.appendChild(div);

insertBefore() 在指定的子节点前插入新节点

用法：父节点.insertBefore(新节点，旧节点)

var div = document.createElement("div");
var text =  document.createTextNode("天津");
div.appendChild(text);
var bj = document.getElementById("bj");
var list = document.getElementById("city-list");
list.insertBefore(div,bj);

replaceChild() 替换已有子节点

用法：父节点.replaceChild(新节点，旧节点)

var div = document.createElement("div");        
var text =  document.createTextNode("天津");
div.appendChild(text);
var bj = document.getElementById("bj");
var list = document.getElementById("city-list");
list.replaceChild(div,bj);

removeChild() 删除子节点

用法：父节点.removeChild(子节点)

子节点.parentNode.removeChild(子节点)

var bj = document.getElementById("bj");        
var list = document.getElementById("city-list");
list.removeChild(bj);
//或者以下写法
        var bj = document.getElementById("bj");
bj.parentNode.removeChild(bj);

DOM修改元素样式

语法：元素.style.样式名 = 样式值（字符串）

注：如果css样式名含有-，在js中是不合法的，比如background-color

js中需要将这种样式名修改为驼峰命名法–去掉-，将-后的字母大写

1
2
3

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

通过style属性设置的样式都是内联样式（优先级较高）
如果css中写了!important，此时样式会有最高的优先级，及时通过js也无法修改，尽量不要为样式添加!important

读取元素样式

内联样式

语法：元素.style.样式名

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

getComputedStyle()方法

需要两个参数：
- 要获取样式的元素
- 可以传递一个伪元素，一般都传null
  
  会返回一个对象，对象中封装了当前元素的样式
  
  通过对象.样式名来读取样式
  1
  getComputedStyle(box1,null).width
  注：以下属性都是只读的，不能修改
clientWidth和clientHeight

这两个属性可以获取元素的可见宽度和高度

返回值不带px，是一个数字，可以直接进行计算

获取的元素宽度和高度包括内容区和内边距

只读，不能修改
1
alert(box1.clientWidth);
offsetWidth和offsetHeight

获取元素的整个宽度或高度，包括边框（内容区、内边距、边框）
1
alert(box1.offsetWidth);
offsetParent

获取当前元素的定位父元素（离当前元素最近的开启了定位的祖先元素）

如果所有的祖先元素都没有开启定位，则返回body
offsetLeft和offsetTop

当前元素相对于定位父元素的水平偏移量和垂直偏移量
scrollWidth和scrollHeight

获取元素整个滚动区的宽度和高度
scrollLeft和scrollTop

水平滚动条或垂直滚动条滚动的距离

当满足scrollHeight - scrollTop == clientHeight 时，垂直滚动条滚动到底了

当满足scrollWidth - scrollLeft == clientWidth 时，水平滚动条滚动到底了

事件对象
当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数

该事件对象中封装了当前事件相关的一切信息，比如鼠标的坐标，键盘哪个键被按下

clientX和clientY 可以获取鼠标相对于当前可视窗口的水平和竖直坐标

var areaDiv = document.getElementById("areaDiv");    
var showMsg = document.getElementById("showMsg");
areaDiv.onmousemove = function(event){
    var x = event.clientX;
    var y = event.clientY;
}

pageX和PageY 获取鼠标相对于当前页面的坐标

事件的冒泡

事件是向上传导，当后代元素上的事件被触发时，其祖先元素的相应事件也被触发

如果不希望发生事件冒泡，可以通过事件对象来取消冒泡

 var s1 = document.getElementById("s1");   
s1.onclick = function(event){
        //取消冒泡
    event.cancelBubble = true;
alert("span");
}

事件的委派

将事件统一绑定给元素共同的祖先元素，当后代元素上的触发时，会一直冒泡到祖先元素

事件委派利用了冒泡，通过委派可以减少事件绑定的的次数，提高效率

事件的绑定

1）对象.事件 = 函数

1
2
3

btn01.onclick = function(){
    alert("11");
}

使用对象.事件 = 函数的形式绑定响应函数时，

它只能为一个元素的一个事件绑定一个响应函数

如果绑定了多个，后面的会覆盖前面的

2）addEvevtListener()方法

通过addEvevtListener()方法也可以为元素绑定响应函数

参数：

事件的字符串，不加on，例如click
回调函数，当事件被触发时该函数回调用
是否在捕获阶段触发事件，需要一个boolean值，一般都传false

addEvevtListener()可以同时为一个元素的相同事件同时绑定多个响应函数，当事件被触发时，响应函数按照函数的绑定顺序执行
1
2
3
4
5
6
btn01.addEventListener("click",function(){
alert("1");
},false);
btn01.addEventListener("click",function(){
alert("2");
},false);

鼠标的事件

onmousemove 鼠标移动
onmousedown 鼠标按下
onmouseup 鼠标释放
onwheel滚轮滚动

event.wheelDelta 获取滚轮的滚动方向，它的值，只看正负，不看大小

键盘的事件
1. onkeydown 某个键盘按键被按下
2. onkeyup 某个键盘按键被松开
  
  键盘事件一般都会绑定给一些能获取焦点的对象或者document
3. event键盘的事件
  
  keyCode：获取按键的编码
  
  altKey： alt按键是否被按下
  
  ctrlKey： ctrl按键是否被按下
  
  shiftKey： shift按键是否被按下

15. Bom–浏览器对象模型

bom可以使我们通过js来操作浏览器

bom中提供了一组对象，来操作浏览器

BOM对象

Window 代表整个浏览器的窗口，同时Window也是网页中的全局对象方法 alert() confirm() 确认用户行为，确定或取消 promtp() 显示可提示用户输入的对话框
Navigator 代表当前浏览器的信息，通过该对象可以来识别不同的浏览器
Location 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面如果直接打印Location，则可以获取到地址栏的信息如果将location属性修改为一个完整的路径或相对路径，页面会自动跳转到该路径，并会产生相应的历史记录
1
2
location ='https://www.baidu.com';
location ='test01.html';

location对象方法

assign() 用来跳转到其他页面，作用和直接修改location一样
1
location.assign("https://www.baidu.com");

reload() 刷新页面

 可以传递一个参数true，强制清空缓存刷新页面
 
 1
2
location.reload();
location.reload(true);

replace()

使用新的页面代替当前页面，调用完毕也会跳转页面

但不会生成历史记录，不能回退

History

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

由于隐私原因，不能获得具体的历史记录，只能操作浏览器的前进或后退

该操作只在当次操作时有效
- 属性： length–当前访问的链接数量
  1
  console.log(history.length);
- 方法：
  - back() 回退到上一个页面
    1
    history.back();
  - forward() 跳转到下一个页面
    1
    history.forward();
  - go() 向前跳转指定的页面
    
    参数：一个整数（也可以负数，表示回退）
    1
    history.go(2);
Screen

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

这些BOM对象在浏览器中都是作为window对象的保存的

可以通过window对象来使用，也可以直接使用
1
2
console.log(window.navigator);
console.log(navigator);

16. 定时与延时调用

setInterval() 定时调用

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

参数：

回调函数，该函数每隔一段时间执行一次

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

返回值：返回一个Number类型的数据

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

var count = document.getElementById("count");       
      var num = 1;
      setInterval(function(){
          count.innerHTML = num++;
      },1000);

clearInterval()关闭定时器

需要将一个定时器的唯一标识作为参数，来关闭标识对应的定时器

这个参数甚至可以是null或undefined

var count = document.getElementById("count");            
var num = 1;
var timer = setInterval(function(){
    count.innerHTML = num++;
    if(num==11){
        clearInterval(timer);
    }
},1000);

setTimeout() 延时调用

函数在一定的延迟时间后开始执行，而且只会执行一次，定时掉

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

setTimeout() 关闭延时调用

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

17. json

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

json和js对象的格式一样，不过json中的属性名必须加双引号

json分类：

对象{ }
数组[ ]

var obj = '{"name":"孙悟空","age":18,"gender":"男"}';                         
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 = '[{"name":"孙悟空","age":18,"gender":"男"},{"name":"孙悟空","age":18,"gender":"男"}]'

json中允许的值：

字符串
数值
布尔值
null
对象
数组

将json字符串转换为js中的对象

js中提供了一个工具类JSON，可以实现js对象和json的相互转换

var json = '{"name":"孙悟空","age":18,"gender":"男"}';
//json-->js对象
var o = JSON.parse(json);
console.log(o);
//js对象-->json
var obj1 = {name:"Tom",age:28,gender:"男"};
var str = JSON.stringify(obj1);
console.log(typeof str);