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，反之返回falsealert(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原型中添加属性aMyClass.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检查对象中是否含有某个属性值时，对象中没有，原型中有，也会返回trueconsole.log("name" in mc);// 可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性// 使用该方法只有当对象自身中含有该属性时，才会返回trueconsole.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"); //这个正则表达式用来检测一个字符串中是否含有avar 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>// 创建一个正则表达式，检查一个字符串中是否含有单词childvar reg = /\bchild\b/;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(){//创建一个livar 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-105if(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是一个字符串，这个字符串包含有用来描述浏览器信息的内容，不同的浏览器有不同的userAgent3.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中是否含有cnif(!hasClass(obj,cn)){obj.className += " "+cn;}}// 判断一个元素中是否含有指定的class属性值,如果有class,则返回true,没有返回falsefunction 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");// 删除classobj.className = obj.className.replace(reg,"");}// 定义一个切换类toggleClass,元素中具有该类则删除,没有该类则添加function toggleClass(obj,cn){// 判断obj中是否含有cnif(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.null5.对象6.数组将JSON字符串转化为JS中的对象，在JS中，有一个工具类叫做JSON这个对象可以将JSON转换为JS对象，也可以将一个JS对象转换为JSONjson--> js对象JSON.parse();可以将JSON字符串转为JS对象，需要一个JSON字符串作为参数，会将该字符串转为JS对象并返回。JS对象-->JSONJSON。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基础知识总结（基础篇）相关推荐

1. datagrid出现相同两组数据_stata 数据操作基础知识:以一篇论文数据操作为例

   stata 数据操作基础知识:以一篇论文数据操作为例 上节回顾及问题 统计学学习大图景 数据描述 分位数回归 存在的问题: 1.学了就要多使用,哪怕生搬硬套也要多用 2.时间序列的方法,大家可以操作, ...

2. 计算机数据库管理基本知识,2015年计算机四级考试《数据库技术》基础知识：概念篇...

   2015年计算机四级考试<数据库技术>基础知识:概念篇 信息与数据 1. 信息.物质.能量是组成客观世界并促进社会发展的三大基本要素; 2. 信息(Information)--是客观世界事 ...

3. 反相畴的基础知识和一篇论文

   校历第十三周计划(11.18-11.24):反相畴的基础知识和一篇论文 上周由于需要尽快和学长交流,因此提前先看了两篇关于反相畴的论文.由于基础知识的匮乏,这周打算补充一些基础知识,主要来源于薄膜生长 ...

4. 计算机等级考试上网怎么做,计算机基础知识上网设置篇

   计算机基础知识上网设置篇 分类:计算机等级 | 更新时间:2016-07-08| 来源:转载 现在让我们看看如何进行上网的设置. 首先,让我们查看一下在你的Windows95或是Windows98里是 ...

5. 计算机wrod初级考试题及答案,计算机基础知识+Word基础知识+Excel基础知识试题答案解析.doc...

   文档介绍: 计算机基础知识+ Word基础知识+ Excel基础知识 第一部分 一.单项选择题 1.世界上第一台电子数字计算机取名为(    ). A.UNIVAC    B.EDSAC    C.E ...

6. 使用微型计算机的基础知识,计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识.DOC...

   计算机应用基础考试大纲基本要求1具有使用微型计算机的基础知识 计算机应用基础考试大纲 基本要求 ???????????????????????????????????????????????????? ...

7. 公共基础知识计算机,公共基础知识计算机基础知识试题

   计算机基础知识是公共基础知识考试的组成成分之一,以下是由学习啦小编整理关于共基础知识计算机基础知识试题的内容,希望大家喜欢! 公共基础知识计算机基础知识试题 1.CPU的主要功能是进行( ). A.算 ...

8. 计算机硬件价钱分配,电脑基础知识计算机硬件基础课件.ppt

   电脑基础知识计算机硬件基础课件 操作系统的概念 指直接控制和管理计算机的硬件和软件资源以便于有效的使用这些资源的程序. 操作系统分类 :单用户操作系统.批处理操作系统.实时操作系统.分时操作系统.网络 ...

9. 15版计算机应用基础知识整理,[电脑基础知识]计算机应用基础.ppt

   [电脑基础知识]计算机应用基础 计算机应用基础 统考 主要内容 考试大纲分析 考题类型与所占比例 考试环境 各章节考点讲解 计算机基础知识 Windows操作 Word.Excel.Powerpoin ...

10. 世界上第一代电子计算机取名为,计算机应用基础知识计算机应用基础试题及答案...

    <计算机应用基础知识计算机应用基础试题及答案>由会员分享,可在线阅读,更多相关<计算机应用基础知识计算机应用基础试题及答案(13页珍藏版)>请在人人文库网上搜索. 1.计算机应 ...

最新文章

1. Go 分布式学习利器（12）-- Go语言的扩展和复用
2. PHP MemCached win安装
3. HDU 1269 移动城堡 联通分量 Tarjan
4. MySQL高级最左前缀法则
5. php 显示对像编码,PHP面向对象之旅：类型提示
6. python爬取网页上的特定链接_python 用bs4解析网页后，如何循环打开爬取出来的网址链接？...
7. Java二叉搜索树转循环链表,关于java:二叉搜索树转换为单向链表interview1712
8. a*算法的优缺点_垃圾回收的常见算法
9. Linux下运行java DES AES加解密
10. BZOJ 1911: [Apio2010]特别行动队
11. BGP选路规则和负载分担
12. 理解 Delphi 的类(十一) - 深入类中的方法[12] - 消息方法
13. 软件测试工程师企业级培训视频教程
14. Cannot uninstall .. It is a distutils installed project and thus we cannot accurately determine 解决方案
15. SpringBoot+Mybatis实现三级分类联动
16. 1072. 开学寄语
17. (附源码)计算机毕业设计SSM装修信息分享管理系统
18. 产品读书《创业36条军规》
19. 下载文件时，文件名乱码。
20. 地下城怎么用计算机打桩,dnf打桩伤害计算器

热门文章

1. 小米8.0系统怎么样无Root激活Xposed框架的流程
2. DataDirectory
3. 机器视觉图像采集卡的功能
4. 手写经典卷积神经网络-LeNet
5. php怎么通过url传参,php使用url传参和简单结构设计
6. Go 言 Go 语，一文看懂 Go 语言文件操作
7. HTML中在table的td属性中嵌套table，为什么table居中？
8. 创业失败的十八个原因——The 18 Mistakes that Kill Startups
9. java乘方编程_30 个java编程技巧
10. 火牛单片机rtc时钟配置_RTC硬件时钟设置修改