序

终于开始学前端的核心内容了！学好JS才能为后面的jQuery( JavaScript库)和JS框架(React,Vue,Angular)打好基础，冲冲冲！

js基本语法

引入js

可以编写到标签的onclick属性中，也可以写在标签的属性中，但是他们属于行为和结构耦合，不方便维护，不推荐
1
2
<button onclick="alert('xxx')"></button>
<a href="javascript:alert('xxx')"></a>
可以写在标签或者外部文件中

1 2	<script type="text/javascript"></script> <script type="text/javascript" src=""></script>

js标签一旦引入外部文件了，就不能再编码了，即使编写了浏览器也会忽略；如果需要则可以再创建一个新的script标签用于编写内部代码，执行顺序按从上至下依次执行。

标识符

在js中所有的可以由我们自主命名的都可以成为标识符
例如：变量名，函数名，属性名等等
命名一个标识符需要遵守如下规则：
1. 标识符可以包含字母，数字，_，$
2. 标识符不能以数字开头
3. 标识符不能是关键字和保留字

数据类型

数据类型

String，Number，Boolean，Null，Undefined，Object(object不属于基本数据类型)

数组

用方括号书写，数组的项目由逗号分隔。

1 2	下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）： var cars = ["Porsche", "Volvo", "BMW"];

typeof 运算符

可使用typeof 来确定 JavaScript 变量的类型,typeof
运算符返回变量或表达式的类型

进制

表示16进制的数字，需要0x开头
表示8进制的数字，需要0开头
表示2进制的数字，需要0b开头

强制转换
1. 将其他数据类型转换为String
  - 方法一：调用被转换数据类型的toString()方法
  - 该方法不影响原变量，他会将转换的结果返回
  - 但是注意null和undefined这两个值没有toString()方法，会报错
  - 方法二：调用String()函数，并将被转换的数据作为参数传递给函数
  - 使用String()函数强制转换时，对于Number和Boolean实际上就是调用toString()方法，但是对于null和undefined就会将他们转换为字符串”null”和”undefined”
2. 将其他数据类型转换为Number
  - 方法一：使用Number()函数
  - 如果字符串中有非数字的内容，则转换为NaN
  - 如果字符串是空或者是全空格，则转换为0
  - 方法二：这种方法专用于字符串
  - parseInt()把一个字符串转换为一个整数
    //将一个字符串中的有效内容的整数内容读取出来转换为Number
  - parseFloat()把一个字符串转换为一个浮点数//将一个字符串中的有效内容的小数内容读取出来转换为Number
  - 可以用一元的+来进行隐式的类型转换
3. 将其他数据类型转换为Boolean
  - 使用Boolean()函数
    - 数字->布尔(除了0和NaN，其余都是true)
    - 字符串->布尔(除了空串，其余都是true)
    - null和undefined都会转换为false
    - 对象也会转换为true

运算符

逻辑运算符
- !
  
  非运算可以对一个布尔值进行取反，true变false false边true
  当对非布尔值使用!时，会先将其转换为布尔值然后再取反
  我们可以利用!来将其他的数据类型转换为布尔值
- &&
  
  &&可以对符号两侧的值进行与运算
  只有两端的值都为true时，才会返回true。只要有一个false就会返回false。
  与是一个短路的与，如果第一个值是false，则不再检查第二个值
  对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
  规则：
1.如果第一个值为false，则返回第一个值
2.如果第一个值为true，则返回第二个值
- ||
  
  ||可以对符号两侧的值进行或运算
  只有两端都是false时，才会返回false。只要有一个true，就会返回true。
  或是一个短路的或，如果第一个值是true，则不再检查第二个值
  对于非布尔值，它会将其转换为布尔值然后做运算，并返回原值
  规则：1. 如果第一个值为true，则返回第一个值2.
  如果第一个值为false，则返回第二个值

break和continue

break关键字可以用来退出switch或循环语句
不能在if语句中使用break和continue
break关键字，会立即终止离他最近的那个循环语句
continue可以跳过当次循环

对象

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

函数

函数也是一个对象，函数主要用来封装一些功能

创建函数

函数声明
function 函数名(形参1,形参2...形参N)
{  
语句...  
}

函数表达式：将要封装的代码以字符串的形式传递给构造函数
var 函数名 = function(形参1,形参2...形参N)
{  
语句...  
};

立即执行函数
- 函数定义完，立即被调用，这种函数叫做立即执行函数
- 立即执行函数往往只会执行一次
  1
  2
  3
  4
  (function(a,b){
  console.log("a = "+a);
  console.log("b = "+b);
  })(123,456);

枚举对象中的属性

1
2
3

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

作用域

全局作用域
- 直接在script标签中编写的代码都运行在全局作用域中
- 全局作用域在页面打开时创建，在页面关闭时销毁
- 在全局作用域中有一个全局对象window，他代表的是一个浏览器的窗口，他由浏览器创建时我们可以直接使用
- 在全局作用域中创建的变量都会作为window对象的属性保存
- 在全局作用域中创建的函数都会作为window对象的方法保存
- 在全局作用域中创建的变量和函数可以在页面的任意位置访问
- 在函数作用域中也可以访问到全局作用域的变量
函数作用域
- 调用函数时创建函数作用域，函数执行完毕后，函数作用域销毁
- 每调用一个函数就会创建一个新的函数作用域，他们之间是相互独立的
- 在函数作用域中可以访问到全局作用域的变量
- 在全局作用域中无法访问到函数作用域的变量
- 当在函数作用域中操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用，如果没有就向上一级的作用域中寻找，直到找到全局作用域，若全局作用域中还没有，则会报错
变量的声明提前
- 在全局作用域中，使用var关键字声明的变量会在所有代码执行前被声明(但是不会被赋值)，但是如果声明变量不使用var关键字，则变量不会被声明提前
- 在函数作用域中，也具有同上特性，使用var关键字声明的变量会在函数所有的代码执行前被声明，如果没有使用var关键字声明变量，则变量会变成全局变量
函数的声明提前
- 使用函数声明形式创建的函数function
  函数名(){},他会在所有代码执行前被创建，所以我们可以在函数声明前调用函数；使用函数表达式(var
  fun = function(){})创建的函数没有该特性
- 在函数作用域中，使用函数声明创建的函数，会在所有的函数中的代码执行之前就被创建好了

this

我们每次调用函数时，解析器都会将一个上下文对象作为隐含的参数传递进函数。
使用this来引用上下文对象，根据函数的调用形式不同，this的值也不同。

this的不同的情况：
1. 以函数的形式调用时，this是window
2. 以方法的形式调用时，this就是调用方法的对象
3. 以构造函数的形式调用时，this就是新创建的对象
4. 在事件的响应函数中，响应函数是给谁绑定的this，那么这个this就是谁
改变this指向
- apply 、 call 、bind 三者都是用来改变函数的this对象的指向的；
- apply 、 call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
- apply 、 call 、bind 三者都可以利用后续参数传参；
- call需要把参数按顺序传递进去func.call(this, arg1, arg2)；而 apply 则是把参数放在数组里func.apply(this, [arg1, arg2])；bind() 方法的第二个以及以后的参数+函数运行时本身的参数按照顺序作为原函数的参数来调用原函数，就是说bind会不断的产生新的函数
- bind是返回对应函数，便于稍后调用；apply、call则是立即调用

构造函数

一个构造函数我们也可以称为一个类
通过一个构造函数创建的对象，我们称该对象时这个构造函数的实例
可以用 instanceof 用来检查一个对象是否是一个类的实例
通过同一个构造函数创建的对象，我们称为一类对象
构造函数就是一个普通的函数，只是他的调用方式不同，如果直接调用，它就是一个普通函数，如果使用new来调用，则它就是一个构造函数
构造函数的执行流程：
1. 创建一个新的对象
2. 将新建的对象设置为函数中的this，在构造函数中用this来引用新建的对象
3. 执行函数中的代码
4. 将新建的对象返回
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  eg:
  
  function Person(name , age , gender){
  this.name = name;
  this.age = age;
  this.gender = gender;
  this.sayName = function(){
  alert(this.name);
  };
  }

原型-prototype

我们所创建的每一个函数，解析器都会像函数中添加一个属性prototype
prototype属性指向的是一个对象，这个对象我们称为原型对象
当函数作为构造函数使用，它所创建的对象中都会有一个隐含的属性执行该原型对象，并且这个隐含的属性可以通过对象.proto来访问
当我们访问对象的一个属性或者是方法是，他会先在对象自身中寻找，如果有就直接使用；如果没有就回去原型对象中寻找，找到则直接使用
原型对象就相当于一个公共的区域，凡是通过同一个构造函数创建的对象他们通常都可以访问到相同的原型对象
举例：
作用：如果将构造函数中的函数定义在全局作用域中，污染了全局作用域的命名空间，而且定义在全局作用域中很不安全，所以我们可以将对象共有的属性和方法放在原型对象中，这样既不用分别为每一个对象添加，也不会影响全局作用域，就可以使每个对啊ing都具有这些属性和方法了
hasOwnProperty()

这个方法可以用来检查对象自身中是否含有某个属性

语法：对象.hasOwnProperty(“属性名”)
原型也是对象，所以他也有原型

当我们使用一个对象或方法时，会先在自身中寻找，自身要是有就直接使用

如果自身没有就去原型对象中寻找，如果有就直接使用

如果原型对象中还没有，就去原型的原型中去寻找，直到找到object对象（object没有以原型），如果还没找到就返回undefined\

toString方法

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

//修改Person原型的toString方法的返回值  
Person.prototype.toString = function(){  
return "Person[name="+this.name+",age="+this.age+",gender="+this.gender+"]";  
};

垃圾回收

就像人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾,这些垃圾积攒过多以后，会导致程序运行的速度过慢，所以我们需要一个垃圾回收的机制，来处理程序运行过程中产生垃圾
当一个对象没有任何的变量或属性对它进行引用，此时我们将永远无法操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量的内存空间，导致程序运行变慢，所以这种垃圾必须进行清理。
在JS中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作，我们需要做的只是要将不再使用的对象设置null即可

数组

数组也是一个对象，是一个用来存储数据的对象和Object类似，但是它的存储效率比普通对象要高，数组中保存的内容我们称为元素

创建数组

1
2
3
4
5
6
方法一：
var arr = new Array();  
arr[0] = 123;  
arr[1] = "hello";
方法二：
var arr = [123,"hello"];

数组的方法

join():数组转换成字符串
push(): 把里面的内容添加到数组末尾，并返回修改后的长度
pop()：移除数组最后一项，返回移除的那个值，减少数组的length
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined
unshift():将参数添加到原数组开头，并返回数组的长度
sort()：将数组里的项从小到大排序
reverse()：反转数组项的顺序
concat():将参数添加到原数组中
slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组
splice()
- 删除：指定 2 个参数：要删除的第一项的位置和要删除的项数
- 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项
- 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身
map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组
every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true

遍历数组

用for循环来遍历数组

方法一：
for(var i=0 ; i<数组.length ; i++){  
    //数组[i]  
}

使用forEach()方法来遍历数组（不兼容IE8）

数组.forEach(function(value , index , obj){  
  
});

value:正在遍历的元素
index:正在遍历元素的索引
obj:被遍历对象

forEach()方法需要一个回调函数作为参数，
数组中有几个元素，回调函数就会被调用几次，
每次调用时，都会将遍历到的信息以实参的形式传递进来，
我们可以定义形参来获取这些信息

常用类和方法

call-和apply

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

arguments

arguments是一个类数组对象，它可以通过索引来操作数据，也可以获取长度
在调用函数是，我们所传递的实参都会在arguments中保存
arguements.length可以用来获取实参长度
还可以用arguements来使用实参，arguements[0]表示第一个实参，arguements[1]表示第二个实参···
它里面有一个属性交callee，这个属性对应一个函数对象，就是当前正在指向的函数对象

Date

日期的对象，在JS中通过Date对象来表示一个时间
如果直接用构造函数创建一个Date对象，则封装为当前代码执行的时间

创建对象

创建一个当前的时间对象
var d = new Date();

创建一个指定的时间对象
var d = new Date("月/日/年 时:分:秒");

方法

name	function
getDate()	当前日期对象是几日（1-31）
getDay()	返回当前日期对象时周几（0-6），0 周日，1 周一 ···
getMonth()	返回当前日期对象的月份（0-11），0 一月， 1 二月 ···
getFullYear()	从 Date 对象以四位数字返回年份
getHours()	返回 Date 对象的小时 (0 ~ 23)
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)
getTime()	返回当前日期对象的时间戳，时间戳，指的是从1970年月1日 0时0分0秒，到现在时间的毫秒数，计算机底层保存时间都是以时间戳的形式保存的
Date.now()	可以获取当前代码执行时的时间戳

Math

Math属于一个工具类，它不需要我们创建对象，它里边封装了属性运算相关的常量和方法,我们可以直接使用它来进行数学运算相关的操作
方法

name | function
-|–
Math.PI |常量，圆周率
Math.abs() | 绝对值运算
Math.cell() | 向上取整
Math.floor() | 向下取整
Math.round() | 四舍五入取整
Math.random() | 生成一个01之间的随机数
Math.round(Math.random()*(y-x)+x) | 生成一个xy之间的随机数
Math.pow(x,y) | 求x的y次幂
Math.sqrt() | 对一个数进行开方
Math.max() | 求多个数中最大值
Math.min() | 求多个数中的最小值

包装类

在JS中为我们提供了三个包装类，通过这三个包装类可以将基本的数据类型的数据转换为对象：
String() Boolean()
Number()通过这三个包装类可以创建基本数据类型的对象
1
2
3
4
5
通过包装类创建基本数据类型的对象：

var num = new Number(2);
var str = new String("hello");
var bool = new Boolean(true);
但是在实际应用中千万不要这么干。当我们去操作一个基本数据类型的属性和方法时，解析器会临时将其转换为对应的包装类，然后再去操作属性和方法，操作完成以后再将这个临时对象进行销毁

字符串

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

方法

name	function
length	获取字符串的长度
charAt()	根据索引获取指定的字符
charCodeAt()	根据索引获取指定的字符编码(Unicode编码)
String.fromCharCode()	根据字符编码获取字符
indexof()	可以检索一个字符串是否含有指定内容，需要一个字符串作为参数，这个字符串就是要检索的内容，如果找到该内容，则会返回其第一次出现的索引，如果没有找到则返回-1，可以指定一个第二个参数，来表示开始查找的位置
lastIndexOf()	功能同indexof，indexOf()是从前向后找，lastIndexOf()是从后向前找
slice(start,end)	可以从一个字符串中截取指定的内容，并将截取到内容返回，不会影响原变量，参数：第一个：截取开始的位置（包括开始），第二个：截取结束的位置（不包括结束）可以省略第二个参数，如果省略则一直截取到最后，可以传负数，如果是负数则从后往前数
substr()	和slice()基本一致，不同的是它第二个参数不是索引，而是截取的数量
substring()	和slice()基本一致，不同的是它不能接受负值作为参数，如果设置一个负值，则会自动修正为0，substring()中如果第二个参数小于第一个，自动调整位置
toLowerCase()	将字符串转换为小写并返回
toUpperCase()	将字符串转换为大写并返回
正则表达式相关方法:
split()	可以将一个字符串拆分成一个数组，方法中可以传一个正则表达式作为参数，这样方法就会根据正则表达式去拆分字符串
search()	可以搜索字符串中是否含有指定内容，如果搜索到指定内容，则会返回第一次出现的索引，如果没有则返回-1，它可以接受正则表达式作为参数，然后根据正则表达式去检索字符串,search只会查找第一个，即使设置全局匹配也没用
match()	可以根据正则表达式，从一个字符串中将符合条件的内容提取出来，默认情况下我们的match只会找到第一个符合要求的内容，找到以后就停止检索，我们可以设置正则表达式为全局匹配模式，这样就会匹配到所有的内容，可以为一个正则表达式设置多个匹配模式，且顺序无所谓，match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
replace()	可以将字符串中指定内容替换为新的内容,参数：1.被替换的内容，可以接受一个正则表达式作为参数2.新的内容；替换为””则为删除,默认只会替换第一个

正则表达式

用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，并将字符串中符合规则的内容提取出来

创建正则表达式

方法一：
var reg = new RegExp(“正则”,”匹配模式”); 

方法二：
var reg = /正则表达式/匹配模式; 
//（匹配模式可以多个一起写：/gi）

匹配模式：
i:忽略大小写（ignore）
g:全局匹配模式（默认为1次）
m:执行多行匹配
设置匹配模式时，可以都不设置，也可以设置1个，也可以全设置，设置时没有顺序要求

test()
- 语法：正则表达式.test(字符串)
- 可以用来检查一个字符串是否符合正则表达式，如果符合返回true，否则返回false

正则语法
- | 或
- [] 或 //[]里的内容也是或的关系
- [^···] 除了 //除了···都为true
- [x-y] x的ascii到y的ascii码之间的值
- [a-z] 小写字母（也可以[e-i])
- [A-Z] 大写字母
- [A-z] 任意字母,但是还包括了其他ASCII在此之中的
- [0-9] 任意数字
量词
- 通过量词可以设置一个内容出现的次数，量词只对它前边的一个内容起作用
- {n} 正好出现n次
- {m,n} 出现m~n次
- {m,} 出现m次以上
- - 至少一个，相当于{1,}
- * 0个或多个，相当于{0,}
- ? 0个或1个，相当于{0,1}
边界表达式
- ^表示开头
- $表示结尾
- 在正则表达式中同时使用^$则要求字符串必须符合正则表达式
  1
  2
  3
  eg:
  reg = /^a/; //以a开头
  reg = /b$/; //以b接位
元符号
- . 表示任意字符
- \ . 表示 .
- \\ 表示 \
- \w 任意字母、数字、_ [A-z0-9_]
- \W 除了字母、数字、_ [ ^A-z0-9_]
- \d 任意的数字 [0-9]
- \D 除了数字 [ ^0-9]
- \s 空格
- \S 除了空格
- \b 单词边界
- \B 除了单词边界

正则表达式应用举例

去掉字符串两端的空格:
var s = "        	he    llo    ";   
s = s.replace(/^\s*|\s*$/g,"");

邮件的正则:
hello.nihao@abc.com.cn
任意字母下划线 . 任意字母下划线  @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)
\w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5}){1,2}

DOM

简介

Document Object
Model文档对象模型,通过DOM可以来任意来修改网页中各个内容

文档
- 文档指的是网页，一个网页就是一个文档
对象
- 对象指将网页中的每一个节点都转换为对象,转换完对象以后，就能以一种纯面向对象的形式来操作网页了
模型
- 模型用来表示节点和节点之间的关系，方便操作页面
节点（Node）
- 节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点
- 虽然都是节点，但是节点的类型却是不同的
- 常用的节点：
  1. 文档节点（Document），代表整个网页
  2. 元素节点（Element），代表网页中的标签
  3. 属性节点（Attribute），代表标签中的属性
  4. 文本节点（Text），代表网页中的文本内容

事件

就是用户和浏览器的交互行为，我们可以在事件对应的属性中设置一些js代码，事件被触发时执行代码

浏览器加载一个页面时，是按照从上至下的顺序加载的，如果把script标签放在页面上面，在代码执行时，页面还没有加载，就无法获取到dom对象，解决方法如下：
1. 解决方式一：可以将js代码编写到body的下边
2. 解决方式二：将js代码编写到window.onload =
  function(){}，window.onload
  对应的回调函数会在整个页面加载完毕以后才执行，所以可以确保代码执行时，DOM对象已经加载完毕了
  1
  2
  3
  4
  5
  6
  7
  <script>
  window.onload = function(){
  var btn = document.getElementById("btn");
  btn.onclick = function(){
  };
  };
  </script>

DOM操作HTML

document对象获取元素节点对象
1. getElementById()
  - 通过元素的id属性获取一个元素节点对象：
2. getElementsByTagName()
  - 通过标签名获取一组元素节点对象
3. getElementsByName()
  - 通过name属性获取一组元素节点对象
document对象的其他的属性和方法
1. document.all
  - 获取页面中的所有元素，相当于document.getElementsByTagName(“*”);
2. document.documentElement
  - 获取页面中html根元素
3. document.body
  - 获取页面中的body元素
4. document.getElementsByClassName()
  - 根据元素的class属性值查询一组元素节点对象//这个方法不支持IE8及以下的浏览器
5. document.querySelector()
  - 根据CSS选择器去页面中查询一个元素，如果匹配到的元素有多个，则它会返回查询到的第一个元素
6. document.querySelectorAll()
  - 用法同5，根据CSS选择器去页面中查询一组元素，会将匹配到所有元素封装到一个数组中返回，即使只匹配到一个
元素的属性：
- 读取元素的属性：
  - 语法：元素.属性名
  - 注意：class属性不能采用这种方式，读取class属性时需要使用
    元素.className
- 修改元素的属性：
  语法：元素.属性名 = 属性值
innerHTML

使用该属性可以获取或设置元素内部的HTML代码
获取元素节点的子节点
- 元素.getElementsByTagName()
  - 通过标签名查询当前元素的指定后代元素
- 子节点包括便签元素中的文本，子元素自包含标签元素
- 元素.childNodes
  - 获取当前元素的所有子节点，会获取到空白的文本子节点
  - childNodes属性会获取包括文本节点在内的所有节点，根据DOM标签标签间空白也会当成文本节点【注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8中会返回4个子元素而其他浏览器是9个】
- 元素.children
  - 获取当前元素的所有子元素
- 元素.firstChild
  - 获取当前元素的第一个子节点，会获取到空白的文本子节点
- 元素.lastChild
  - 获取当前元素的最后一个子节点
- 元素.parentNode
  - 获取当前元素的父元素
- 元素.previousSibling
  - 获取当前元素的前一个兄弟节点
  - previousElementSibling获取前一个兄弟元素，IE8及以下不支持
- 元素.nextSibling
  - 获取当前元素的后一个兄弟节点
- firstElementChild
  - 获取当前元素的第一个子元素
  - firstElementChild不支持IE8及以下的浏览器，如果需要兼容他们尽量不要使用
- innerHTML和innerText
  - 这两个属性并没有在DOM标准定义，但是大部分浏览器都支持这两个属性
    两个属性作用类似，都可以获取到标签内部的内容，
    不同是innerHTML会获取到html标签，而innerText会自动去除标签
    如果使用这两个属性来设置标签内部的内容时，没有任何区别的
- 读取标签内部的文本内容
  - 元素.firstChild.nodeValue

DOM修改

document.createElement()
- 可以用于创建一个元素节点对象，它需要一个标签名作为参数，将会根据该标签名创建元素节点对象，并将创建好的对象作为返回值返回
document.createTextNode()
- 可以根据文本内容创建一个文本节点对象
父节点.appendChild(子节点)
- 向父节点中添加指定的子节点
父节点.insertBefore(新节点,旧节点)
- 将一个新的节点插入到旧节点的前边
父节点.replaceChild(新节点,旧节点)
- 使用一个新的节点去替换旧节点
父节点.removeChild(子节点)
- 删除指定的子节点
- 推荐方式：子节点.parentNode.removeChild(子节点)

DOM操作CSS

读取和修改内联样式

使用style属性来操作元素的内联样式
读取内联样式：

语法：元素.style.样式名

元素.style.width
元素.style.height
注意：如果样式名中带有-，则需要将样式名修改为驼峰命名法将-去掉，然后后的字母改大写
比如：backgroundcolor > backgroundColor
borderwidth > borderWidth

修改内联样式：
- 语法：元素.style.样式名 = 样式值
- 通过style修改和读取的样式都是内联样式，由于内联样式的优先级比较高，所以我们通过JS来修改的样式，往往会立即生效，但是如果样式中设置了!important，则内联样式将不会生效。
读取元素的当前样式
1. 正常浏览器
- 使用getComputedStyle()
- 这个方法是window对象的方法，可以返回一个对象，这个对象中保存着当前元素生效样式
- 参数：
  - 1.要获取样式的元素
  - 2.可以传递一个伪元素，一般传null
  - 例子：
    - 获取元素的宽度
    - getComputedStyle(box , null)[“width”];
    - 通过该方法读取到样式都是只读的不能修改
- 可以通过对象.样式名来读取样式
- 如果获取的样式没有设置，则会获取到真实的值，而不是默认值
1. IE8
- 使用currentStyle
- 语法：
  - 元素.currentStyle.样式名
  - 例子：
    - box.currentStyle[“width”]
    - 通过这个属性读取到的样式是只读的不能修改

实现兼容性

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

其他的样式相关的属性

注意：以下样式都是只读的，不能修改，未指明偏移量都是相对于当前窗口左上角

name	function
clientHeight	元素的可见高度，包括元素的内容区和内边距的高度
clientWidth	元素的可见宽度，包括元素的内容区和内边距的宽度
offsetHeight	整个元素的高度，包括内容区、内边距、边框
offfsetWidth	整个元素的宽度，包括内容区、内边距、边框
offsetParent	当前元素的定位父元素,离他最近的开启了定位的祖先元素，如果所有的元素都没有开启定位，则返回body
offsetLeft	当前元素和定位父元素之间的偏移量(水平偏移量)
offsetTop	当前元素和定位父元素之间的偏移量(垂直偏移量)
scrollHeight	获取元素整个滚动区域的高度
scrollWidth	获取元素整个滚动区域的宽度
scrollTop	获取元素垂直滚动条滚动的距离
scrollLeft	获取元素水平滚动条滚动的距离
scrollHeight -scrollTop = clientHeight	判断滚动条是否滚动到底(垂直滚动条)
scrollWidth -scrollLeft = clientWidth	判断滚动条是否滚动到底(水平滚动条)

事件

事件对象

当响应函数被调用时，浏览器每次都会将一个事件对象作为实参传递进响应函数中，这个事件对象中封装了当前事件的相关信息，比如：鼠标的坐标，键盘的按键，鼠标的按键，滚轮的方向。。
可以在响应函数中定义一个形参，来使用事件对象，但是在IE8以下浏览器中事件对象没有做完实参传递，而是作为window对象的属性保存
1
2
3
4
5
6
7
元素.事件 = function(event){
event = event || window.event;
};

元素.事件 = function(e){
e = e || event;
};
获取到鼠标的坐标
1. clientX和clientY
  - 用于获取鼠标在当前的可见窗口的坐标
  - div的偏移量，是相对于整个页面的
2. pageX和pageY
  - 可以获取鼠标相对于当前页面的坐标但是这个两个属性在IE8中不支持，所以如果需要兼容IE8，则不要使用var
    left = event.clientX;var　top = event.clientY;

事件的冒泡

事件的冒泡指的是事件向上传导，当后代元素上的事件被触发时，将会导致其祖先元素上的同类事件也会触发
事件的冒泡大部分情况下都是有益的，如果需要取消冒泡，则需要使用事件对象来取消
可以将事件对象的cancelBubble设置为true，即可取消冒泡
1
2
3
4
元素.事件 = function(event){
event = event || window.event;
event.cancelBubble = true;
};

事件的委派

指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件。
事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
我们可以尝试将其绑定给元素的共同的祖先元素
target : event中的target表示的触发事件的对象

事件的绑定

addEventListener()
通过这个方法也可以为元素绑定响应函数
参数：
1. 事件的字符串，不要on
2. 回调函数，当事件触发时该函数会被调用
3. 是否在捕获阶段触发事件，需要一个布尔值，一般都传false
使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
这样当事件被触发时，响应函数将会按照函数的绑定顺序执行,这个方法不支持IE8及以下的浏览器
attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数：
1. 事件的字符串，要on
2. 回调函数
这个方法也可以同时为一个事件绑定多个处理函数，不同的是它是后绑定是事件先执行，执行顺序和addEventListener()相反

兼容模式

//定义一个函数，用来为指定元素绑定响应函数  
            /*  
            * addEventListener()中的this，是绑定事件的对象  
            * attachEvent()中的this，是window  
            *  需要统一两个方法this  
            */  
            /*  
            * 参数：  
            * 	obj 要绑定事件的对象  
            * 	eventStr 事件的字符串(不要on)  
            *  callback 回调函数  
            */  
function bind(obj , eventStr , callback){  
    if(obj.addEventListener){  
        //大部分浏览器兼容的方式  
        obj.addEventListener(eventStr , callback , false);  
    }else{  
                    /*  
                    * this是谁由调用方式决定  
                    * callback.call(obj)  
                    */  
        //IE8及以下  
        obj.attachEvent("on"+eventStr , function(){  
            //在匿名函数中调用回调函数  
            callback.call(obj);  
        });  
    }  
}

事件的传播

关于事件的传播网景公司和微软公司有不同的理解：
- 微软公司认为事件应该是由内向外传播，也就是当事件触发时，应该先触发当前元素上的事件，然后再向当前元素的祖先元素上传播，也就说事件应该在冒泡阶段执行
- 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件，然后在向内传播给后代元素
W3C综合了两个公司的方案，将事件传播分成了三个阶段：
1. 捕获阶段
  - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
2. 目标阶段
  - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
3. 冒泡阶段
  - 事件从目标元素向他的祖先元素传递，依次触发祖先元素上的事件
如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
IE8及以下的浏览器中没有捕获阶段

常用的事件

拖拽事件

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

滚轮事件：

<!DOCTYPE html>  
    <html>  
    <head>  
    <meta charset="UTF-8">  
        <title></title>  
<style type="text/css">  
  
    #box1{  
width: 100px;  
height: 100px;  
background-color: red;  
}  
  
    </style>  
<script type="text/javascript">  
  
    window.onload = function(){  
    //获取id为box1的div  
    var box1 = document.getElementById("box1");  
    //为box1绑定一个鼠标滚轮滚动的事件  
    /*  
				 * onmousewheel鼠标滚轮滚动的事件，会在滚轮滚动时触发，  
				 * 	但是火狐不支持该属性  
				 *   
				 * 在火狐中需要使用 DOMMouseScroll 来绑定滚动事件  
				 * 	注意该事件需要通过addEventListener()函数来绑定  
				 */  
  
    box1.onmousewheel = function(event){  
        event = event || window.event;  
        //event.wheelDelta 可以获取鼠标滚轮滚动的方向  
        //向上滚 120   向下滚 -120  
        //wheelDelta这个值我们不看大小，只看正负  
  
        //alert(event.wheelDelta);  
  
        //wheelDelta这个属性火狐中不支持  
        //在火狐中使用event.detail来获取滚动的方向  
        //向上滚 -3  向下滚 3  
        //alert(event.detail);  
        /*  
					 * 当鼠标滚轮向下滚动时，box1变长  
					 * 	当滚轮向上滚动时，box1变短  
					 */  
        //判断鼠标滚轮滚动的方向  
        if(event.wheelDelta > 0 || event.detail < 0){  
            //向上滚，box1变短  
            box1.style.height = box1.clientHeight - 10 + "px";  
  
        }else{  
            //向下滚，box1变长  
            box1.style.height = box1.clientHeight + 10 + "px";  
        }  
  
        /*  
					 * 使用addEventListener()方法绑定响应函数，取消默认行为时不能使用return false  
					 * 需要使用event来取消默认行为event.preventDefault();  
					 * 但是IE8不支持event.preventDefault();这个玩意，如果直接调用会报错  
					 */  
        event.preventDefault && event.preventDefault();  

        /*  
					 * 当滚轮滚动时，如果浏览器有滚动条，滚动条会随之滚动，  
					 * 这是浏览器的默认行为，如果不希望发生，则可以取消默认行为  
					 */  
        return false;  
    };  
    //为火狐绑定滚轮事件  
    bind(box1,"DOMMouseScroll",box1.onmousewheel);  
};  
  
function bind(obj , eventStr , callback){  
    if(obj.addEventListener){  
        //大部分浏览器兼容的方式  
        obj.addEventListener(eventStr , callback , false);  
    }else{  
        /*  
					 * this是谁由调用方式决定  
					 * callback.call(obj)  
					 */  
        //IE8及以下  
        obj.attachEvent("on"+eventStr , function(){  
            //在匿名函数中调用回调函数  
            callback.call(obj);  
        });  
    }  
}  
  
</script>  
</head>  
<body style="height: 2000px;">   
    <div id="box1"></div>  
</body>  
</html>

键盘事件

onkeydown
- 按键被按下
- 对于onkeydown来说如果一直按着某个按键不松手，则事件会一直触发
- 当onkeydown连续触发时，第一次和第二次之间会间隔稍微长一点，其他的会非常的快，这种设计是为了防止误操作的发生
onkeyup
- 按键被松开
- 键盘事件一般都会绑定给一些可以获取到焦点的对象或者是document

keyCode

可以通过keyCode来获取按键的编码通过它可以判断哪个按键被按下

除了keyCode，事件对象中还提供了几个属性

altKey
ctrlKey
shiftKey

这个三个用来判断alt ctrl 和
shift是否被按下，如果按下则返回true，否则返回false

eg:

 //判断一个y是否被按下  
 //判断y和ctrl是否同时被按下  
 if(event.keyCode === 89 && event.ctrlKey){  
     console.log("ctrl和y都被按下了");  
 }

 //使文本框中不能输入数字  
 input.onkeydown = function(event) {  
     event = event || window.event;  
     //数字 48 - 57  
     if(event.keyCode >= 48 && event.keyCode <= 57) {  
         //在文本框中输入内容，属于onkeydown的默认行为  
         //如果在onkeydown中取消了默认行为，则输入的内容，不会出现在文本框中  
         return false;  
     }  
 };

BOM

浏览器对象模型(browser object model)
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象，用来完成对浏览器的操作

BOM对象

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

Navigator

代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了，一般我们只会使用userAgent来判断浏览器的信息，

userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容，不同的浏览器会有不同的userAgent

//通过userAgent判断浏览器类型

alert(navigator.appName);   
var ua = navigator.userAgent;  

if(firefoxi.test(ua)){  
alert("你是火狐！！！");  
}else if(chromei.test(ua)){  
alert("你是Chrome");  
}else if(msiei.test(ua)){  
alert("你是IE浏览器~~~");  
//通过userAgent不能判断浏览器类型时，还可以通过一些浏览器特有的对象来判断浏览器信息，比如：ActiveXObject
}else if("ActiveXObject" in window){  
alert("你是IE11，枪毙了你~~~");  
}

History

对象可以用来操作浏览器向前或向后翻页
length
- 可以获取到当次访问的链接数量
back()
- 可以用来回退到上一个页面，作用和浏览器的回退按钮一样
forward()
- 可以跳转下一个页面，作用和浏览器的前进按钮一样
go()
- 可以用来跳转到指定的页面
- 它需要一个整数作为参数
  - 1:表示向前跳转一个页面相当于forward()
  - 2:表示向前跳转两个页面
  - -1:表示向后跳转一个页面
  - -2:表示向后跳转两个页面

Location

该对象中封装了浏览器的地址栏的信息
如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径）
alert(location);
- 如果直接将location属性修改为一个完整的路径或相对路径，则我们页面会自动跳转到该路径，并且会生成相应的历史记录
  - location = “http:www.baidu.com”;
  - location = “01.BOM.html”;
assign()
- 用来跳转到其他的页面，作用和直接修改location一样
reload()
- 用于重新加载当前页面，作用和刷新按钮一样
- 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
  location.reload(true);
replace()
- 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面
  不会生成历史记录，不能使用回退按钮回退

window

定时调用
setInterval()
- 可以将一个函数，每隔一段时间执行一次
- 参数：
  - 1.回调函数，该函数会每隔一段时间被调用一次
  - 2.每次调用间隔的时间，单位是毫秒
- 返回值：
  - 返回一个Number类型的数据
  - 这个数字用来作为定时器的唯一标识
clearInterval()
- 可以用来关闭一个定时器
- 方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器
- clearInterval()可以接收任意参数，如果参数是一个有效的定时器的标识，则停止对应的定时器,如果参数不是一个有效的标识，则什么也不做
  1
  2
  3
  4
  5
  6
  7
  8
  var num = 1;
  var timer = setInterval(function() {
  count.innerHTML = num++;
  if(num == 11) {
  //关闭定时器
  clearInterval(timer);
  }
  }, 1000);
延时调用
setTimeout
- 参数：
  - 1.回调函数，该函数会在一段时间后被调用一次
  - 2.每次调用的时间，单位是毫秒
- 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次
- 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次，延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择
- 使用clearTimeout()来关闭一个延时调用clearTimeout(timer);

类的操作

直接修改元素的类css

通过style属性来修改元素的样式，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便
我希望一行代码，可以同时修改多个样式，我们可以通过修改元素的class属性来间接的修改样式，这样一来，我们只需要修改一次，即可同时修改多个样式，浏览器只需要重新渲染页面一次，性能比较好，并且这种方式，可以使表现和行为进一步的分离

JSON

JavaScript Object Notation JS对象表示法

JSON-格式

复合类型的值只能是数组或对象，不能是函数、正则表达式对象、日期对象
原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN,
Infinity, -Infinity和undefined）
字符串必须使用双引号表示，不能使用单引号。
对象的键名必须放在双引号里面。
数组或对象最后一个成员的后面，不能加逗号。
JS中的对象只有JS自己认识，其他的语言都不认识
JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互
JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号,其他的和JS语法一致

JSON分类：

对象 {}
数组 []

JSON中允许的值：

字符串
数值
布尔值
null
对象

数组

eg:

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

JSON工具类

JSON -> JS对象
JSON.parse()
- 可以将以JSON字符串转换为js对象
- 它需要一个JSON字符串作为参数，会将该字符串转换为JS对象并返回
  1
  2
  3
  4
  var o = JSON.parse(json);
  var o2 = JSON.parse(arr);
  
  var obj3 = {name:”猪八戒” , age:28 , gender:”男”};
JS对象 -> JSON
JSON.stringify()
- 可以将一个JS对象转换为JSON字符串
- 需要一个js对象作为参数，会返回一个JSON字符串
  1
  var str = JSON.stringify(obj3);
JSON这个对象在IE7及以下的浏览器中不支持，所以在这些浏览器中调用时会报错

其他

eval()
- 这个函数可以用来执行一段字符串形式的JS代码，并将执行结果返回
- 如果使用eval()执行的字符串中含有{},它会将{}当成是代码块
- 如果不希望将其当成代码块解析，则需要在字符串前后各加一个()
- eval()这个函数的功能很强大，可以直接执行一个字符串中的js代码，但是在开发中尽量不要使用，首先它的执行性能比较差，然后它还具有安全隐患
  1
  2
  3
  4
  eg:
  
  var str = '{"name":"孙悟空","age":18,"gender":"男"}';
  var obj = eval("("+str+")");
confirm()
- 用于弹出一个带有确认和取消按钮的提示框，和alert一样，但是他有两个按钮
- 需要一个字符串作为参数，该字符串将会作为提示文字显示出来
- 如果用户点击确认则会返回true，如果点击取消则返回false