JavaScript基础知识点总结（基础篇）

一、JavcScript基础语法应用

1.1三条输出语句

<script>
// 在浏览器中弹出警告框
alert("你能行么？");
// 在浏览器页面中输出一个内容
document.write("我在浏览器页面中显示");
// 向控制台输出一个内容
console.log("我在控制台显示");
</script>

1.2JS中的数据类型

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

1.3JS中的强制类型转换

1.31string强制类型转换分为两种方法:

1.调用toString方法
2.调用String函数

<script>
// string强制类型转换分为两种方法
// 1.调用toString方法
// 2.调用String函数
var a = 159;
a = a.toString();
document.write(a);
document.write(typeof a);
a = "iloveyou";
a = String(a);
document.write(a);
document.write(typeof a);
</script>

1.32将其他String类型转为Number

1.使用Number()函数
2.使用parseInt()函数–转换为整数
parseFloat() —转换为浮点数

<script>
var a = "123";
a = Number(a);
console.log(typeof a);
console.log(a);
var b = "456px";
b = parseInt(b);
console.log(typeof b);
console.log(b);
var c = "125.56";
c = parseFloat(c);
console.log(typeof c);
console.log(c);
</script>

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

数字–>Boolean
除了0和NaN,其余都是true
字符串–>Boolean
除了空串，其余都是true
null和undefined都会转化成false
对象都会转换成true

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

1.4非布尔值的逻辑

&& || 非布尔值的运算情况：
先将其转换为布尔值，然后再运算，并且返回原值
&&运算
如果第一个值为true，则必然返回第二个值
如果第一个值为false，则直接返回第一个值
||运算
如果第一个值为true，则直接返回第一个值
如果第一个值为false，则返回第二个值

<script>
var result = 1 && 2;
console.log(result);
var result = 0 && 2;
console.log(result);
var result = 1 || 2;
console.log(result);
var result = 0 || 2;
console.log(result);
</script>

二、JS中的面向对象

2.1对象的创建和使用

<script>
// 对象的练习
// 创建对象
var obj = new Object();
//给对象添加属性值
//语法:对象.属性名=属性值
obj.name = "李白";
obj.sex = "男";
obj.age = "20";
//读取属性
// 语法：对象.属性名
console.log(obj.name);
console.log(obj.age);
console.log(obj.sex);
//修改属性
//语法：对象.属性名 = 新值
obj.name = "程咬金";
console.log(obj.name);
//删除属性
//语法 : delete 对象.属性名
delete obj.name;
console.log(obj.name);
</script>

对象的字面量：
使用对象字面量来创建一个对象
var obj={}; //与 var obj = new Object();一样
使用对象字面量可以在创建对象的同时直接指定对象中的属性
语法:{属性名:属性值,属性名:属性值…}

<script>
var obj2={
name:"李白",
age:18,
sex:"男"
};
console.log(obj2);
</script>

2.2属性名和属性值

在对象中如果使用特殊的属性名，需要用这种方式：
语法：对象[“属性名”]=属性值
当将对象的属性名赋给一个新的变量时，在读取对象中的这个值时，
需要这样写：对象[新变量];
js对象的属性值可以是任意类型

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

<script>
var obj = new Object();
obj["name"] = "熊大";
var n = "name";
console.log(obj[n]);
console.log("name" in Object);
</script>

2.3函数

创建函数用到两种方式：
1.使用声明函数来创建一个函数
语法:function 函数名(){
代码块
}

2.使用函数表达式创建一个函数
语法: var 函数名 = function(){
代码块
};

<script>
function write(){
console.log("这是我的第一个函数");
}
write();
var read = function(){
console.log("这是我的第二个函数");
};
read();
</script>

2.31函数的参数

定义一个函数,可以在函数的()中指定一个或者多个形参，声明形参就相当于在函数内部声明了对应的变量,但不赋值。
在调用函数时,可以在()中指定实参
调用函数解析器不会检查实参的类型,如果接收到非法的参数,需要对参数进行检查

调用函数时,解析器也不会检查参数的数量,多余的实参不会被赋值, 若实参小于形参数,则没有对应的形参将会是undefined。
函数的实参可以实任意的数据类型。

<script>
function sum(a,b){
console.log(a+b);
}
// 在调用函数时,可以在()中指定实参
sum(1,3);
</script>

在函数中，实参可以是任何值，既包括对象，又包括函数

 <script>
function sayHello(o){
console.log("我是"+o.name+",今年"+o.age+",住在"+o.address);
}
var obj={
name:"李白",
age:18,
address:"古代"
}
sayHello(obj);
function A(a){
console.log("a ="+a );
a(obj);
}
A(sayHello);
// sayHello()
// 调用函数，相当于使用函数的返回值
// sayHello
// 函数对象，相当于直接使用函数对象

</script>

2.32立即执行函数

立即执行函数：
函数定义完，立即被调用，这种函数叫做立即执行函数，这种函数往往执行一次
也可以对该类函数进行传参

<script>
(function(){
alert("我是一个匿名函数");
})();
(function(a,b){
alert("a="+a);
alert("b="+b);
})(159,306);
</script>

2.33JS中的方法

函数也可以称为对象的属性，如果一个函数作为一个对象的属性保存，那么我们称这个函数是这个对象的方法，调用函数就说调用对象的方法。

<script>
// 创建一个的对象
var obj = new Object;
// 向对象中添加属性
obj.name="李白";
obj.age=18;
// 对象中的属性值可以实任何的数据类型，也可以是函数
obj.sayName = function(){
console.log(obj.name);
};
console.log(obj.sayName);
obj.sayName();
</script>

2.34作用域

作用域：作用域指的是一个变量的作用范围
在js中一共有两种作用域：
1.全局作用域：
直接编写在script标签中的js代码，都会在全局作用域，全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它有浏览器创建，我们可以直接使用。

在全局作用域中：
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意部分可以访问

2.函数作用域：
调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁，每调用一次函数就会创建一个新的函数作用域，他们之间是相互独立的，在函数作用域中可以访问到全局作用域的变量，但在全局作用域中无法访问到函数作用域中的变量。

在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用。
如果没有，则向上一级作用域中寻找，直到找到全局作用域
如果全局作用域中依然没有找到，则会报错ReferenceError
在函数中要访问全局变量可以使用window对象

<script>
function fun(){
console.log(a);
var a=35;
// 在函数作用域中，使用var关键字声明的变量
// 会在函数中所有的代码执行之前被声明，但并未被赋值
}
function fun1(){
c=15;
console.log(c);
// 在函数中，不使用var声明的变量都会成为全局变量
}
function fun2(e){
alert(e);
// 定义形参就相当于在函数作用域中声明了变量
}
</script>

2.35变量的声明提前

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

函数声明提前：
使用函数声明形式创建函数function 函数(){}
他会在所有代码执行之前就被创建,我们可以在函数声明前来调用函数
使用函数表达式创建的函数，不会被声明提前，所以不能提前调用

<script>
fun();
function fun(){
console.log("我是fun函数");
}
var fun2 = function(){
console.log("我是fun2函数");
};
fun2();
</script>

2.36this关键字

解析器在调用函数时每次都会向函数内部传递一个隐含的参数，
这个隐含的参数就是this，this指向的是一个对象， 这个对象我们称为函数执行的上下文对象， 根据函数的调用方式的不同，this会指向不同的对象
1.以函数的形式调用时，this永远都是window
2.以方法的形式调用时，this就是调用方法的那个对象

<script>
function fun(){
console.log(this.name);
}
fun();
//创建一个对象
var obj = {
name:"李白",
sayName:fun
};
var name="我是全局作用域的name";
obj.sayName();
</script>

2.37使用工厂创建对象的方法

<script>
//使用工厂创建对象
function createPerson(name,age,sex){
var obj = new Object();
obj.name=name;
obj.age=age;
obj.sex=sex;
obj.sayName = function(){
alert(this.name);
};
return obj;
}
var obj2=createPerson("李白",18,"男");
var obj3=createPerson("诸葛",36,"女");
var obj4=createPerson("文松",34,"不男不女");
console.log(obj2);
console.log(obj3);
console.log(obj4);
obj2.sayName();
obj3.sayName();
</script>

2.38构造函数

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

this的情况：
1.当以函数的形式调用时，this是window
2.当以方法的形式调用时，谁调用方法this就是谁
3.当以构造函数的形式调用时，this就是新创建的那个对象

 <script>
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
this.sayName=function(){
alert(this.name);
};
}
var per1=new Person("李白",38,"男");
var per2=new Person("杜甫",38,"男");
var per3=new Person("西施",36,"女");
console.log(per1);
console.log(per2);
console.log(per3);
per1.sayName();
// 使用instanceof可以检查一个对象是否是一个类的实例
// 语法：对象 instanceof 构造函数
// 如果是，返回true，反之返回false
alert(per1 instanceof Person);
</script>

 <script>
// 将构造函数的内部方法提到全局作用域当中
function Person(name,age,sex){
this.name=name;
this.age=age;
this.sex=sex;
// this.sayName=fun;
}
/* function fun(){
alert("hello ,我是"+this.name);
} */
// 向原型函数添加方法
Person.prototype.sayName=function(){
alert("hello ,我是"+this.name);
};
var per1=new Person("李白",19,"男");
var per2=new Person("杜甫",20,"男");
console.log(per1);
console.log(per2);
per1.sayName();
per2.sayName();
console.log(per1.sayName == per2.sayName);
</script>

2.3原型

原型prototype：
我们所创建的每一个函数，解析器都会向函数中添加一个prototype属性， 这个属性对应一个对象，这个对象就是我们所谓的原型对象。

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

<script>
function MyClass(){
}
// 向MyClass原型中添加属性a
MyClass.prototype.a=123;
// 向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
alert("Hello");
};
// 创建对象
var mc1=new MyClass();
var mc2=new MyClass();
console.log(MyClass.prototype);
console.log(mc2.__proto__ == MyClass.prototype);
// 向mc1中添加a属性
mc1.a = "我是mc1中的a";
console.log(mc1.a);
console.log(mc2.a);
mc1.sayHello();
</script>

原型对象

原型对象也是对象,所以他也有原型,
当我们使用一个对象的属性和方法时,会在自身中寻找,
自身中如果有,则直接使用,
如果没有,则去原型对象中寻找,如果原型对象中有,则使用
如果没有,则回去原型对象的原型中去寻找,直接找到Object对象的原型,
Objetc对象的原型没有原型,在Object中依然没有找到,则返回undefined

<script>
function MyClass(){
}
// 向MyClass的原型中添加一个name属性
MyClass.prototype.name="我是原型中的名字";
var mc = new MyClass();
mc.name;
// 为mc的name赋值
// mc.name="我是mc的name";
console.log(mc.name);
// 使用in检查对象中是否含有某个属性值时，对象中没有，原型中有，也会返回true
console.log("name" in mc);
// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
// 使用该方法只有当对象自身中含有该属性时，才会返回true
console.log(mc.hasOwnProperty("name"));
</script>

三、数组

3.1数组的创建和使用

<script>
// 创建数组
var arr=new Array();
// 对数组赋值
arr[0]=1;
arr[1]=2;
// 查看数组
console.log(arr);
console.log(arr.length);
</script>

<script>
// 使用字面量数组
var arr = [0,1,2,3,4];
console.log(arr);
var arr2 = new Array(1,5,9);
console.log(arr2);
arr3 = [5,6,7];
console.log(arr3);
arr4 = new Array(3);
console.log(arr4.length);
// 数组中可以放任意的数据类型
</script>

3.2数组中的方法

1.push();在数组末尾添加一个或者多个元素，返回数组新长度
2.pop();删除数组最后一个元素，返回被删除的元素
3.unshift();向数组开头添加一个或多个元素，返回数组新长度
4.shift();删除数组第一个元素，返回被删除的元素

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

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

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

8.join();将数组转换为一个字符串，不对原数组产生影响，将转换后的字符串作为结果返回,在join()中可以传入一个字符串作为参数，这个参数将会成为数组中的元素连接符

9.reverse();该方法用来反转数组，直接改变原数组

10.sort();可以用来对数组中的元素进行排序，影响原数组，按照Unicode编码排序
指定排序规则时，
可以在sort()添加一个回调函数，来指定排序规则
回调函数中需要两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数
浏览器会根据回调函数的返回值来决定元素的排序
升序排列：返回a-b
降序排列：返回b-a

3.3forEach

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

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

<script>
var arr = [1,2,3];
arr.forEach(function(value,index,obj){
console.log(value);
});
</script>

四、Date、Math

4.1Date

getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

<script>
/* 在js中，使用Date对象来表示一个时间*/
// 创建一个Date对象
var date = new Date();
console.log(date);
//date表示的是当前代码的执行时间
// 创建一个指定的对象时间
// 需要在构造函数中传递一个表示时间的字符串作为参数
// 顺序依次为:月/日/年 时:分:秒
var date1 = new Date("12/05/2030 14:10:36");
console.log(date1);
// getDate()获取当前日期对象是几日
var d = date.getDate();
console.log(d);
</script>

4.2Math中的方法

Math.sqrt() 对一个数进行开方运算
Math.pow(x,y); 对一个数进行x的y次幂运算
Math.abs(); 对一个数进行绝对值运算
Math.ceil(); 可以对一个属进行向上取整，小数位只要有值就自动进1
Math.floor(); 可以对一个数进行向下取整，小数部分会被舍掉
Math.round(); 可以对一个数进行四舍五入取整
Math.random(); 可以用来生成一个0-1之间的随机数
Math.round(Math.random()*x); 生成一个0-x之间随机数
Math.round(Math.random()*(y-x)+x); 生成一个x-y之间的随机数
max(); 可以获取多个数中的最大值
min(); 可以获取多个数中的最小值

4.3String中的方法

1.charAt(); 可以返回字符串的指定字符，根据索引获取指定字符
2.charCodeAt(); 获取指定位置字符的字符编码（Unicode编码）
3.formCharCode(); 可以根据字符编码去获取字符
4.concat(); 可以用来连接两个或多个字符串
4.indexof(); 该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有指定内容，则会返回其第一次出现的索引
如果没有指定内容，则返回-1
可以指定一个第二个参数，指定开始查找的位置
5.lastIndexOf(); 该方法雨indexof()一样，不同的是indexof是从前往后找，
lastIndexOf是从后往前找，也可以指定开始查找的位置
6.slice(a,b); 可以从字符串中截取指定的内容
a 开始位置的索引（包括开始位置）
b 结束位置的索引（不包括结束位置），如果省去第二个参数，则会截取到后边所有的
也可以传递一个负数作为参数，负数的话将会从后边计算
7.subString(a,b); 用来截取一个字符串，与slice()类似
a 开始位置的索引（包括开始位置）
b 结束位置的索引（不包括结束位置），如果省去第二个参数
该方法不接受负值作为对象，如果传递了一个负值，默认使用0
8.split(); 可以将一个字符串拆分成一个数组，
需要一个字符串作为参数，将会根据该字符串去拆分数组
如果传递一个空串，则会将每个字符都拆分成为数组中的一个元素
9.toUpperCase();将一个字符串转换为大写并返回
10. toLowerCase();将一个字符串转换为小写返回
以上方法都不会对原字符串进行修改，而是返回一个新的

五、正则表达式

5.1正则表达式的创建和使用

正则表达式：它是用来定义一些字符串规则：
计算机可以根据正则表达式，来检查一个字符串是否符合规则，
若符合，将字符串中符合规则的内容提取出来。
创建正则表达式：
语法：var 变量 = new RegExp(“正则表达式”,“匹配模式”);
在构造函数中可以传递一个匹配模式作为第二个参数可以是:
i 忽略大小写
g 全局匹配模式
正则表达式的方法：
test(); 使用该方法可以用来检查一个字符串是否符合正则表达式规则，
符合返回true，不符合返回false

 <script>
var reg = new RegExp("a","i"); //这个正则表达式用来检测一个字符串中是否含有a
var str = "abc";
var result = reg.test(str);
console.log(result);
</script>

使用字面量来创建正则表达式
语法：var 变量 = /正则表达式/匹配模式;
创建一个正则表达式，检查一个字符串中是否有a或者b
使用|表示 或者 的意思
使用 [] 里的内容也是或的关系
[ab] == a|b
[a-z] 任意的小写字母
[A-Z] 任意的大写字母
[A-z] 任意字母
[0-9] 任意数字
[^ ]表示除了

<script>
var reg = /a/i;
var result = reg.test("abcd");
console.log(result);
/* 检查一个字符串中是否含有abc 或者 adc 或者aec */
var reg1 = /a[bde]c/;
var result2 = reg1.test("abc");
console.log(result2);
var reg3 = /[^ab]/;
var result3 = reg3.test("ab");
console.log(result3);
</script>

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

1.split(); 可以见一个字符串拆分成一个数组
方法中可以传递一个正则表达式为参数，这样方法会根据正则表达式去拆分字符串
这个方法即使不指定全局匹配，也会全部拆分
2.search(); 可以搜索字符串中是否含有指定内容
如果搜索到指定内容，则返回第一次出现的索引，如果没有搜索到返回-1
可以接受一个正则表达式作为参数，根据正则表达式去检索字符串
search() 只会查找第一个，即使设置了全局匹配也没有用
3.match(); 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
默认情况match只会找到第一个符合要求的内容，之后就会停止
我们可以设置正则表达式为全局模式，这样就会匹配到所有的内容
可以为一个正则表达式设置多个匹配模式，且顺序无所谓
match()会将匹配到的内容封装到一个数组中返回，
4.replace() 可以将字符串中指定内容替换为新的内容
参数：
第一个参数：指被替换的内容，可以接受一个正则表达式作为参数
第二个参数：新内容
默认只会替换第一个

5.3正则表达式的语法

量词
通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用
{n} 正常出现n次
{m,n} 出现m-n次
{m,} 出现m次以上
+ 至少一个，相当于{1,}
* 0个或多个，相当于{0,}
? 0个或1个 相当于{0,1}
^表示开头
$表示结尾

 <script>
var reg = /a{3}/;
var result = reg.test("aaa");
console.log(result);
var reg2 = /a{1,3}b/;
var result2 = reg2.test("a");
console.log(result2);
var reg3 = /a{4,}/;
var result3 = reg3.test("aaaa");
console.log(result3);
var reg4 = /^a/;
var result4 = reg4.test("abbb");
console.log(result4);
var reg5 = /b$/;
var result5 = reg5.test("b");
console.log(result5);
// 创建一个正则表达式，用来检测一个字符串是否为合法手机号
/*
手机号的规则：
1.以1开头
2.第二位为3-9的任意数字
3.三位以后的数字为0-9任意9个
^1
[3-9] [0-9]{9}$
*/
var phonenum = /^1[3-9][0-9]{9}$/;
console.log(phonenum.test("15961591591"))
</script>

.在正则表达式中表示任意字符，表示转义字符
在正则表达式中，用. 来表示 .
用\ 来表示 
注意：在使用构造函数时，由于它的参数是一个字符串，而是一个转义字符，
如果使用则需要使用\来代替
元字符：
w 表示任意字母、数字、_
[A-z0-9_]
W 表示除了字母、数字、_
[^A-z0-9_]
d 表示任意的数字
[0-9]
D 表示除了数字
[^0-9]
s 表示空格
S 表示除了空格
b 表示单词边界
B 表示除了单词边界

<script>
// 创建一个正则表达式，检查一个字符串中是否含有单词child
var reg = /bchildb/;
var result = reg.test("hello child");
console.log(result);
// 创建一个正则表达式，用来删除一个字符串的前后空格
var str = "
hello
";
str = str.replace(/^s*|s*$/g,"");
console.log(str);
</script>

六、DOM（Document Objeect Model）文档对象模型

6.1DOM

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

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

DOM的常用方法：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。
appendChild() 把新的子节点添加到指定节点。
removeChild() 删除子节点。
replaceChild() 替换子节点。
insertBefore() 在指定的子节点前面插入新的子节点。
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
getAttribute() 返回指定的属性值。
setAttribute() 把指定属性设置或修改为指定的值。

6.2事件

事件就是用户和浏览器之间的交互行为,比如点击按钮,鼠标移动关闭窗口…
可以在事件对应的属性中设置一些js代码,事件被触发时,代码会被执行

<body>
<!-- 不推荐使用该种方式 -->
<!-- <button id="btn" οnclick="alert('点我');">我是一个按钮</button> -->
<button id="btn" onclick="alert('点我');">我是一个按钮</button>
<script>
// 获取按钮对象
var btn = document.getElementById("btn");
/* 可以为按钮的对应事件绑定处理函数的形式来响应事件 */
// 绑定一个单击事件
btn.onclick = function(){
alert("你点我");
};
</script>
</body>

6.3文档的加载

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
// 获取按钮对象
var btn = document.getElementById("btn");
// 为按钮绑定一个单击响应函数
btn.onclick = function(){
alert("你好");
};
};
</script>
</head>
<body>
<button id="btn">我是按钮</button>
</body>
</html>

6.4内联样式的修改和读取

通过js修改元素样式
语法: 元素.style.样式 = “样式值”;

如果css样式名中有 - ,例如background-color,
像这种样式在js中去掉- 使用驼峰命名法 backgroundColor

通过style属性设置的样式都是内联样式,内联样式具有较高的优先级,js修改后会立即显示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
height: 100px;
width: 100px;
background-color: greenyellow;
}
</style>
<script>
window.onload = function(){
// 点击按钮,修改box1的大小和颜色
// 获取按钮对象
var button01 = document.getElementById("button01");
button01.onclick = function(){
box1.style.height = "300px";
box1.style.width = "300px";
box1.style.backgroundColor = "black";
};
// 点击按钮2后,显示元素样式值
var button2 = document.getElementById("button02");
button2.onclick = function(){
// 语法: 元素.style.样式
// 通过style属性设置和读取的样式都是内联样式,无法读取样式表中的样式
alert(box1.style.backgroundColor);
};
};
</script>
</head>
<body>
<div id="box1"></div>
<button id="button01">超级变变变</button>
<button id="button02">读取样式值</button>
</body>
</html>

6.5其他与样式相关的属性

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

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

3.offsetParent 可以用来获取当前元素的定位父元素
获取离当前元素最近的开启了定位的祖先元素
如果所有祖先都没有开启定位，则返回body

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

5.scrollWidth 可以获取元素整个滚动区域的宽度
scrollHeight 可以获取元素整个滚动区域的高度
scrollLeft 可以获取水平滚动条滚动的距离
scrollTop 可以获取垂直滚动条滚动的距离

6.当scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚到底了
当scrollWidth - scrollLeft == clientWidth 说明水平滚动条滚到底了

6.6事件的冒泡（Bubble）

事件的冒泡就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发。
不希望发生事件的冒泡可以通过事件对象来取消冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: greenyellow;
}
#s1{
background-color: hotpink;
}
</style>
<script>
window.onload = function(){
// 为span绑定单击响应函数
var s1 = document.getElementById("s1");
s1.onclick = function(event){
alert("我是span的响应函数");
// 取消事件的冒泡
// 可以将事件对象的cancelBubble设置为true，即可取消冒泡
event = event || window.event;
event.cancelBubble = true;
};
// 为div绑定单击响应函数
var box1 = document.getElementById("box1");
box1.onclick = function(event){
alert("我是div的响应函数");
event = event || window.event;
event.cancelBubble = true;
};
// 为body绑定单击响应函数
document.onclick = function(){
alert("我是body的响应函数");
};
}
</script>
</head>
<body>
<div id="box1">
我是div
<span id="s1">我是span</span>
</div>
</body>
</html>

6.7事件的委派

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
// 获取ul对象
var ul = document.getElementById("ul");
// 为btn添加一个单击响应函数
var btn = document.getElementById("btn");
btn.onclick = function(){
//创建一个li
var li = document.createElement("li");
li.innerHTML = "<a href='javascript:;' class='link'>新建超链接</a>"
// 将li添加到ul中
ul.appendChild(li);
};
// 只绑定一次事件而运用到多个元素上，即使元素是后添加的
ul.onclick = function(event){
event = event || window.event;
// target表示触发事件的对象
if(event.target.className == "link"){
alert("我是ul响应函数");
}
};
};
</script>
</head>
<body>
<button id="btn">添加超链接</button>
<ul id="ul" style="background-color: chartreuse;">
<li><a href="javascript:;" class="link">超链接</a></li>
<li><a href="javascript:;" class="link">超链接</a></li>
<li><a href="javascript:;" class="link">超链接</a></li>
</ul>
</body>
</html>

6.8滚轮事件

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box1{
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
<script>
window.onload = function(){
// 当鼠标滚轮向下滚动时，box1变长，当滚轮向上滚动时，box1变短
var box1 = document.getElementById("box1");
box1.onmousewheel = function(event){
event = event || window.event;
// event.wheelDelta可以获取鼠标滚轮滚动的方向，向上为正，向下为负
// 在火狐中使用event.detail来获取滚动的方向，向上为负，向下为正
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()方法绑定响应函数，取消默认行为时需要使用event来取消
默认行为event.preventDefault();
*/
// 当滚动条滚动时，如果浏览器有滚动条，滚动条会随之滚动，
// 这是浏览器默认行为，加入return false取消即可。
return false;
};
};
</script>
</head>
<body style="height: 2000px;">
<div id="box1"></div>
</body>
</html>

6.9键盘事件

onkeydown 按键被按下，一直按着按键，事件会一直触发
onkeyup 按键被松开
键盘事件一般都会绑定给一些可以获取焦点的对象或者是document

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
document.onkeydown = function(event){
console.log("按下");
event = event || window.event;
/*
可以通过keyCode来获取按键的编码，通过它可以判断哪个按键被按下
altKey、ctrlKey、shiftKey 这三个用来判断alt ctrl shift是否被按下，是返回true，不是返回false
*/
// 判读y和ctrl是否被同时按下
if(event.keyCode === 89 && event.ctrlKey){
console.log("y和ctrl被同时按下");
}
};
document.onkeyup = function(){
console.log("弹起");
};
var input = document.getElementsByTagName("input")[0];
input.onkeydown = function(event){
event = event || window.event;
// 让文本不能输入数字
// 在文本框输入内容，属于onkeydown的默认行为，取消默认行为，输入的内容不会出现在文本框中
// 数字编码48-57
小键盘上的数字编码为96-105
if(event.keyCode>=96 && event.keyCode<=105){
return false;
}
};
};
</script>
</head>
<body>
<input type="text">
</body>
</html>

七、BOM

BOM--浏览器对象模型，BOM可以使我们通过js来操作浏览器
BOM对象：
1.window 代表的是整个浏览器窗口，同时window也是网页中的全局对象
2.Navigator 代表的是当前浏览器的信息，通过该对象可以来识别不同的浏览器
3.Locaton 代表当前浏览器的地址栏信息，通过Locatin可以获取地址栏信息，或者操作浏览器跳转页面
4.History 操作浏览器向前或向后翻页，该操作只在当次访问时有效
5.Screen 代表用户的屏幕信息，通过该对象可以获取到用户显示器的相关信息

7.1Navigator

1.appName 属性返回浏览器的应用程序名称：
2.userAgent来判断浏览器的信息，userAgent是一个字符串，这个字符串包含有
用来描述浏览器信息的内容，不同的浏览器有不同的userAgent
3.appCodeName 属性返回浏览器的应用程序代码名称：

7.2History

1.length属性，可以获取当前访问的链接数量
2.back(); 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
3.forward(); 可以跳转到下一个页面，作用和浏览器的前进按钮一样
4.go(); 可以用来跳转到指定的页面，需要一个整数为参数，n表示前进跳转n个页面，-n表示后退跳转n个页面

7.3Location

1.直接打印location，可以获取到地址栏的信息（当前页面的完整路径）
2.直接将location属性修改为一个完整的路径，或相对路径，页面会自动给跳转到该路径，并且生成相应的记录
3.assign(); 用来跳转到其他的页面，作用和直接修改location一样
4.reload(); 用于重新加载当前页面，作用和刷新按钮一样，在方法中传递一个true，会强制清空缓存刷新页面
5.replace(); 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，不会生成记录，无法使用回退按钮

7.4定时调用（定时器）

setInterval();
定时调用,可以将一个函数每隔一段时间调用一次
参数：
1.回调函数，该函数会每隔一段时间被调用一次
2.每次调用间隔的时间，单位是毫秒

返回值：返回一个Number类型的数据，这个数据用来作为定时器的唯一标识
clearInterval();可以用来关闭一个定时器，需要一个定时器的标识作为参数

7.5延时调用

延时调用setTimeout();
延时调用一个函数时不会立马执行，而是隔一段时间执行，并且只执行一次
使用clearTimeout(); 关闭一个延时调用

八、类的操作

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.b1{
width: 100px;
height: 100px;
background-color: blue;
}
.b2{
width: 200px;
height: 200px;
background-color: chartreuse;
}
</style>
<script>
window.onload = function(){
var btn01 = document.getElementById("btn01");
var box1 = document.getElementById("box1");
btn01.onclick = function(){
// addClass(box1,"b2");
// removeClass(box1,"b1");
toggleClass(box1,"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){
// 创建一个正则表达式
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="box1" class="b1"></div>
</body>
</html>

九、JSON（JavaScript Object Notation）JS对象表示法

JSON（JavaScript Object Notation）JS对象表示法
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，
并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须要加双引号，其他的和JS语法一致
JSON分类：
1.对象
2.数组
JSON中允许的值：
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组
将JSON字符串转化为JS中的对象，在JS中，有一个工具类叫做JSON
这个对象可以将JSON转换为JS对象，也可以将一个JS对象转换为JSON
json--> js对象
JSON.parse();可以将JSON字符串转为JS对象，需要一个JSON字符串作为参数，会将该字符串转为JS对象并返回。
JS对象-->JSON
JSON。stringify(); 可以将一个JS对象转换位JSON字符串，需要一个js对象作为参数，会返回一个JSON字符串

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = '[1,2,3,"hello",true]';
var obj2 = '{"arr":[1,2,3]}';
var arr2 = '[{"name":"李白","age":18,"gender":"男"},{"name":"杜甫","age":18,"gender":"男"}]'
var json = '{"name":"李白","age":18,"gender":"男"}';
var o = JSON.parse(json);
console.log(o.gender);
var o2 = JSON.parse(arr);
console.log(o2[1]);
var obj3 = {name:"网三",age:16,sex:"男"};
var str = JSON.stringify(obj3);
console.log(str);
</script>
</body>
</html>

最后

以上就是愤怒小土豆为你收集整理的JavaScript基础知识总结（基础篇）JavaScript基础知识点总结（基础篇）的全部内容，希望文章能够帮你解决JavaScript基础知识总结（基础篇）JavaScript基础知识点总结（基础篇）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。