javaScript新手笔记

给新手巩固javaScript知识点用的,完全没学过的看了会看不懂的，里面的内容只是把javaScript知识点总结，并没有很详细的介绍每个知识点的意思。

javaScript简介:

javaScript简称js

js脚本：解释型

js引擎：编译

js由三部分组成：

ECMAScript（核心）

DOM（文档对象模型 Document Object Model）

BOM（浏览器对象模型 Brower Object Model）

命名规则：

由数字、字母、下划线、美元符号的一种或几种组成，且不能以数字开头，严格区分大小写
遵循驼峰命名法则：第一个单词以小写字母开始;第二个单词的首字母大写或每一个单词的首字母都采用大写字母。
匈牙利命名法则：基本原则是:变量名=属性+类型+对象描述

ECMAScript描述了一组特定用途的关键字，不能用作变量名，例如：If else do while for in 等。

注释

javaScript里的注释
单行注释：//
多行注释：
/*
*/

运算符

算术运算符:

加：+
减：-
乘：*
除：/
余：%

赋值运算符:

等于：=
加等：+=
减等：-=
乘等：*=
除等：/=
余等：%=

关系运算符:

大于：>
小于：<
大于等于：>=
小于等于：<=
不严格相等：==
例如：1=="1"//true
不等于：!=
严格相等(等号两边的数据类型必须相同)：===
例如：1==="1"//false ，1===1//true
不等于：!==

逻辑运算符:

逻辑与: &&
逻辑或: ||
逻辑非: ！

数据类型：

数值(Number)、字符串(String)、布尔(Boolean)、undefined、null、对象(Object)

类型转换：

隐式转换、显式转换

Number()：将值转化为数字
parseInt()：将值转换为整数
isNaN():不是一个数字，返回布尔值

程序的三个结构

顺序结构、逻辑分支结构、循环结构

顺序结构：

代码执行的顺序是从上到下依次执行

逻辑分支结构：

if(){}

if(){}else{}

if()else if(){}

switch(){}

三目运算符

表达式1？表达式2：表达式3

如果表达式1成立，返回的是表达式2的结果；如果不成立，返回的是表达式3的结果

例如：

var a=0;
a===1?alert("a等于1"):alert("a不等于1")

循环结构：

while(){}

do{}while();//注意do{}while()结构中，while()后面要加上';'

for(){}

break用于跳出代码块或循环，continue立即终止本轮循环，返回循环结构的头部，开始下一轮循环。

事件

事件基础

JavaScript 事件是由访问 Web 页面的用户引起的一系列操作。

当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，

如鼠标位置、键盘按键等。

事件处理函数

javaScript可以处理的事件类型为：鼠标事件、键盘事件、HTML事件

所有的事件处理函数都会都有两个部分组成，on + 事件名称

事件对象 ie版本：window.event

非ie:形参

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息 。包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。

通过事件绑定的执行函数是可以得到一个隐藏参数的 。说明，浏览器会自动分配一个参数，这个参数其实就是 event 对象。

Event对象

event.button属性

当前事件触发时哪个鼠标按键被点击（0：左键；1：滚轮；2：右键；）

clientX、clientY属性

鼠标在可视区X坐标和Y坐标，即距离左边框和上边框的距离

screenX、screenY属性

鼠标在屏幕区X坐标和Y坐标，即距离左屏幕和上屏幕的距离

offsetX、offsetY属性

鼠标相对于事件源的X坐标和Y坐标

pageX、pageY

鼠标相对于文档的X坐标和Y坐标

target:获取事件源

事件的冒泡

事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

阻止事件冒泡

非ie:event.stopPropagation( );

ie:event.cancelBubble=true;

鼠标事件:

onclick:用户单击鼠标按钮

ondblclick:当用户双击主鼠标按钮时触发

onmousedown:当用户按下鼠标还未弹起时触发

onmouseup：当用户释放鼠标按钮时触发

onmouseover：当鼠标移到某个元素上方时触发

onmouseout：当鼠标移出某个元素上方时触发

onmousemove：当鼠标指针在元素上移动时触发

注意：

使用onmouseover、onmouseout这两个事件会发生进入自身的子元素也会触发移出父元素事件和移入子元素事件的情况

使用onmouseenter、onmouseleave进入自身的子元素不会触发移出父元素事件和移入子元素事件

键盘事件:

onkeydown：当用户按下键盘上任意键触发，如果按住不放，会重复触发

onkeypress：当用户按下键盘上的字符键触发，如果按住不放，会重复触发

onkeyup：当用户释放键盘上的键触发

组合键ctrkey、altkey、shiftkeyaltKey属性，bool类型，表示发生事件的时候alt键是否被按下

ctrlKey属性，bool类型，表示发生事件的时候ctrl键是否被按下

shiftKey属性，bool类型，表示发生事件的时候shift键是否被按下

keyCode/which兼容，获取用户按下键盘的哪个键

HTML事件

onload：当页面或者资源完全加载后在 window 上面触发，或当框架集加载完毕后在框架集上触发。onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发

onchange：当文本框(input 或 textarea)内容改变且失去焦点后触发

onfocus：当页面或者元素获得焦点时在 window 及相关元素上面触发

onblur：当页面或元素失去焦点时在 window 及相关元素上触发

onresize：当窗口或框架的大小变化时在 window 或框架上触发

onscroll：当用户滚动带滚动条的元素时触发

oninput：当用户输入时时触发

onselect：当用户选择文本框(input 或 textarea)中的一个或多个字符触发

作用域：变量存在的范围

全局作用域：变量在整个程序中一直存在，所有地方都可以读取；

函数（局部）作用域：变量只在函数内部存在；

全局变量：函数外部声明的变量；

局部变量：函数内部定义的变量，外部无法读取；(只在函数内定义的变量才是局部变量，在其他区块比如if结构中声明的变量都是全局变量)

函数内部可以读取全局变量，但局部变量只能在函数内部被访问，出不了函数，除非使用return，才能在外部访问函数内部的局部变量；

如果全局变量和局部变量重名，那么函数内部定义的局部变量会在该作用域内覆盖同名全局变量

递归函数：

函数在执行过程中，调用自己本身

递归步骤：

1.先找临界值，即无需计算就能用return返回(获取)的值,因为递归会造成死循环，所以要有个临界值

2.找出本次和上一次的关系,return 函数名(参数)=函数名(参数-1)+参数//例如：f(n)=f(n-1)+n（数学归纳）

3.调用函数

例如：

求1.......100的和

function sum(n){

    if(n==1){

        return 1;

    }

    return sum(n-1)+n;

}

document.write(sum(n));

面向对象编程（oop）：

它将真实世界各种复杂的关系，抽象为一个个对象，然后由对象之间的分工与合作，完成对真实世界的模拟。
面向对象编程的第一步，就是要生成对象。
对象是单个实物的抽象。通常需要一个模板，表示某一类实物的共同特征，然后对象根据这个模板生成。
JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。
构造函数就是一个普通的函数，但是有自己的特征和用法。
为了区别普通函数，构造函数名字的第一个字母通常大写；

特点：

函数体内部使用了this关键字，代表了所要生成的对象实例。生成对象的时候，必须使用new命令。new命令的作用，就是执行构造函数，生成一个实例对象。

数组：

创建方式:

1.字面量方式

例如：var arr=[1,"a","名字"]；

2.构造函数方式（不建议使用）

例如：var arr=new Array();

但是它有很大的缺陷：

1.单个是数值作为参数，则该参数指的是数组长度；

2. 单个非数值（比如字符串、布尔值、对象等）作为参数，则该参数指新数组的成员；

3. 多个参数时，所有参数都是指新数组的成员；

数组操作：

push用于在数组的末端添加一个或多个元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组;
例如：

var arr=[];
arr.push(1,"a");//返回的结果是添加后数组长度变为：2

pop方法用于删除数组的最后一个元素，并返回该元素。注意该方法会改变原数组。(对空数组使用pop方法，不会报错，而是返回undefined。)
例如：

var arr=[1,2,3];
arr.pop();//返回结果是被删除的最后一个元素：3;
var arr1=[];
arr.pop();//返回结果是:undefined;

shift方法用于删除数组的第一个元素，并返回该元素。注意该方法会改变原数组。
例如：

var arr=[1,2,3];
arr.shift();//返回的结果是被删除的第一个元素：1

unshift方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。注意，该方法会改变原数组。
例如：

var arr=[1,2,3];
arr.unshift("a");//返回结果是添加后数组长度变为：4

push和pop结合使用，就构成了“后进先出”的栈结构（stack）。push和shift结合使用，就构成了“先进先出”的队列结构（queue）。
slice和splice
slice:
slice方法用于提取目标数组的一部分，返回一个新数组，原数组不变，也就是复制。

arr.slice(startIndex, endIndex);

它的第一个参数为起始位置（从0开始），第二个参数为终止位置（但该位置的元素本身不包括在内）。如果省略第二个参数，则一直返回到原数组的最后一个成员。
例如：

var a = ['a', 'b', 'c'];
a.slice(0) // ["a", "b", "c"]
a.slice(1) // ["b", "c"]
a.slice(1, 2) // ["b"]
a.slice(2, 6) // ["c"]
a.slice() // ["a", "b", "c"]

上面代码中，最后一个例子slice没有参数，实际上等于返回一个原数组的拷贝。
如果slice方法的参数是负数，则表示倒数计算的位置。
例如：

var a = ['a', 'b', 'c'];
a.slice(-2) // ["b", "c"]
a.slice(-2, -1) // ["b"]

上面代码中，-2表示倒数计算的第二个位置，-1表示倒数计算的第一个位置。
如果第一个参数大于等于数组长度，或者第二个参数小于第一个参数，则返回空数组。
例如：

var a = ['a', 'b', 'c'];
a.slice(4) // []
a.slice(2, 1) // []

splice:
splice方法用于删除原数组的一部分成员，并可以在删除的位置添加新的数组成员，返回值是被删除的元素。注意，该方法会改变原数组。

arr.splice(start, count, addElement1, addElement2, ...);

splice的第一个参数是删除的起始位置（从0开始的数组下标），第二个参数是被删除的元素个数（如果第二个参数是0，表示删除0个，也就是不删除）。如果后面还有更多的参数，则表示这些就是要被插入数组的新元素。
例如：

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2) // ["e", "f"]
a // ["a", "b", "c", "d"]

上面代码从原数组4号位置，删除了两个数组成员。

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(4, 2, 1, 2) // ["e", "f"]
a // ["a", "b", "c", "d", 1, 2]

上面代码除了删除成员，还插入了两个新成员。
起始位置如果是负数，就表示从倒数位置开始删除(如果是倒数，下标是从1开始)。
例如：

var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.splice(-4, 2) // ["c", "d"]

因为是倒数，所以"f"的下标变为1，-4也就变成了"c",上面代码表示，从倒数第四个位置c开始删除两个成员。
如果只是单纯地插入元素，splice方法的第二个参数可以设为0。
例如：

var a = [1, 1, 1];
a.splice(1, 0, 2) // []
a // [1, 2, 1, 1]

如果只提供第一个参数，等同于将原数组在指定位置拆分成两个数组。
例如：

var a = [1, 2, 3, 4];
a.splice(2) // [3, 4]
a // [1, 2]

reverse/sort
reverse方法用于颠倒排列数组元素，返回改变后的数组(还是原数组)。注意，该方法将改变原数组。
例如：

var a = ['a', 'b', 'c'];
a.reverse() // ["c", "b", "a"]
a // ["c", "b", "a"]

sort方法对数组成员进行排序，默认是按照字典顺序排序。排序后，原数组将被改变。
例如：

['d', 'c', 'b', 'a'].sort()// ['a', 'b', 'c', 'd']
[4, 3, 2, 1].sort()// [1, 2, 3, 4]
[11, 101].sort()// [101, 11]
[10111, 1101, 111].sort()// [10111, 1101, 111]

上面代码的最后两个例子，需要特殊注意。sort方法不是按照大小排序，而是按照字典顺序。也就是说，数值会被先转成字符串，再按照字典顺序进行比较，所以101排在11的前面。如果想让sort方法按照自定义方式排序，可以传入一个函数作为参数。(回调函数)
例如：

[10111, 1101, 111].sort(function (a, b){
    return a - b;//升序
 })// [111, 1101, 10111]
 [10111, 1101, 111].sort(function (a, b){
    return b-a;//降序
 })// [10111, 1101, 111]
 

上面代码中，sort的参数函数本身接受两个参数，表示进行比较的两个数组成员。如果该函数的返回值大于0，表示第一个成员排在第二个成员后面；其他情况下，都是第一个元素排在第二个元素前面

join
join方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。
例如：

var a = [1, 2, 3, 4];
a.join(' ') // '1 2 3 4'
a.join(' | ') // "1 | 2 | 3 | 4"
a.join() // "1,2,3,4"

如果数组成员是undefined或null或空位，会被转成空字符串。
例如：

[undefined, null].join('#')// '#'
['a',, 'b'].join('-')// 'a--b'

for-in循环

for（var i in arr）（

//如果arr是数组，那么i是数组里的下标

）

for(var i in obj) （

//如果obj是一个对象，那么i是对象里的属性名

）

JSON表示对象的方法{“属性”:”属性值”，“属性”:”属性值”}如果属性值是数字，就不用双引号；

ES5严格模式

（1） 整个脚本文件

use strict放在脚本文件的第一行，整个脚本都将以严格模式运行。如果这行语句不在第一行就无效，整个脚本会以正常模式运行。(严格地说，只要前面不是产生实际运行结果的语句，use strict可以不在第一行，比如直接跟在一个空的分号后面，或者跟在注释后面。)

<script>

'use strict';

console.log('这是严格模式');

</script>

<script>

console.log('这是正常模式');

</script>

上面代码中，一个网页文件依次有两段 JavaScript 代码。前一个<script>标签是严格模式，后一个不是。

如果use strict写成下面这样，则不起作用，严格模式必须从代码一开始就生效。

<script>

console.log('这是正常模式');

'use strict';
</script>

（2）单个函数

use strict放在函数体的第一行，则整个函数以严格模式运行。

function strict() {

    'use strict';

    return '这是严格模式';

}
function notStrict() {

    return '这是正常模式';

}

有时，需要把不同的脚本合并在一个文件里面。如果一个脚本是严格模式，另一个脚本不是，它们的合并就可能出错。严格模式的脚本在前，则合并后的脚本都是严格模式；如果正常模式的脚本在前，则合并后的脚本都是正常模式。这两种情况下，合并后的结果都是不正确的。这时可以考虑把整个脚本文件放在一个立即执行的匿名函数之中。

(function () {

    'use strict';

    // some code here

})();

严格模式中要注意：

1.变量声明必须使用var

2.函数里不能有重名的参数，否则报错（正常模式下可以重名并用arguments[i]读取）

3.禁止八进制的前缀0表示法

正常模式下，声明的变量的值是整数，它的第一位如果是0，表示这是八进制数，比如0100等于十进制的64。严格模式禁止这种表示法，整数第一位为0，将报错。

4.全局变量显式声明

正常模式中，如果一个变量没有声明就赋值，默认是全局变量。严格模式禁止这种用法，全局变量必须显式声明。

5.禁止 this 关键字指向全局对象

正常模式下，函数内部的this可能会指向全局对象（window），严格模式禁止这种用法，避免无意间创造全局变量。

function f() {

// 正常模式

console.log(this === window);

}f() // true

function f() {

// 严格模式

'use strict';

console.log(this === undefined);

}
f() //true

上面代码中，严格模式的函数体内部this是undefined。这种限制对于构造函数尤其有用。使用构造函数时，有时忘了加new，这时this不再指向全局对象，而是报错。

 function f() {

    'use strict';

    this.a = 1;
 };

f();// 报错，this 未定义

5.严格模式下，使用with语句将报错。

6.创设 eval 作用域

正常模式下，JavaScript 语言有两种变量作用域（scope）：全局作用域和函数作用域。严格模式创设了第三种作用域：eval作用域。

正常模式下，eval语句的作用域，取决于它处于全局作用域，还是函数作用域。严格模式下，eval语句本身就是一个作用域，不再能够在其所运行的作用域创设新的变量了，也就是说，eval所生成的变量只能用于eval内部。

(function () {

    'use strict';

    var x = 2;

    console.log(eval('var x = 5; x')) // 5

    console.log(x) // 2

})()

上面代码中，由于eval语句内部是一个独立作用域，所以内部的变量x不会泄露到外部

7.arguments 不再追踪参数的变化

变量arguments代表函数的参数。

严格模式下，函数内部改变参数与arguments的联系被切断了，两者不再存在联动关系。

function f(a) {

    a = 2;

    return [a, arguments[0]];

}

f(1); // 正常模式为[2, 2]

function f(a) {

    'use strict';

    a = 2;

    return [a, arguments[0]];

}f(1); // 严格模式为[2, 1]

上面代码中，改变函数的参数，不会反应到arguments对象上来

ES5新增数组方法

静态方法是在构造函数上用的

Array.isArray()

Array.isArray方法返回一个布尔值，表示参数是否为数组。它可以弥补typeof运算符的不足。如果是数组则为true，如果非数组则是false。

var arr = [1, 2, 3];typeof arr // "object"
Array.isArray(arr) // true

上面代码中，typeof运算符只能显示数组的类型是Object，而Array.isArray方法可以识别数组。实例方法是在对象上用的

例如：

var arr = [];
arr.push(1);

遍历循环

例如：

1.map方法将数组的所有成员依次传入参数函数，然后把每一次的执行结果组成一个新数组返回。

var numbers = [1, 2, 3];
var res = numbers.map(function (n) {
   return n + 1;
});
console.log(res)// [2, 3, 4]
console.log(numbers)// [1, 2, 3]

上面代码中，numbers数组的所有成员依次执行参数函数，运行结果组成一个新数组返回，原数组没有变化。（相当于数学中的映射，或者是将数组中的每个元素都进行相同的运算，比如将数组中的每个元素都加减乘除某个具体的数值或元素的数值（例如数组中每个元素自身的下标））
map方法接受一个函数作为参数。该函数调用时，map方法向它传入三个参数：当前成员、当前位置和数组本身。

2.forEach方法与map方法很相似，也是对数组的所有成员依次执行参数函数。但是，forEach方法不返回值，只用来操作数据。这就是说，如果数组遍历的目的是为了得到返回值，那么使用map方法，否则使用forEach方法。

forEach的用法与map方法一致，参数是一个函数，该函数同样接受三个参数：当前值、当前位置、整个数组。

注意，forEach方法无法中断执行，总是会将所有成员遍历完。如果希望符合某种条件时，就中断遍历，要使用for循环。

3.filter方法用于过滤数组成员，满足条件的成员组成一个新数组返回。

它的参数是一个函数，所有数组成员依次执行该函数，返回结果为true的成员组成一个新数组返回。该方法不会改变原数组。

filter方法的参数函数可以接受三个参数：当前成员，当前位置和整个数组。
例如：

var res = [1, 2, 3, 4, 5].filter(function (elem, index, arr) {

    return index % 2 === 0;

});
console.log(res)// [1, 3, 5]

上面代码返回偶数位置的成员组成的新数组

4.some()，every()这两个方法返回一个布尔值，表示判断数组成员是否符合某种条件。
它们接受一个函数作为参数，所有数组成员依次执行该函数。该函数接受三个参数：当前成员、当前位置和整个数组，然后返回一个布尔值。
some方法是只要一个成员的返回值是true，则整个some方法的返回值就是true，否则返回false。
例如：

var arr = [1, 2, 3, 4, 5];
arr.some(function (elem, index, arr) {
    return elem >= 3;
});// true

上面代码中，如果数组arr有一个成员大于等于3，some方法就返回true。
every方法是所有成员的返回值都是true，整个every方法才返回true，否则返回false。
例如：

var arr = [1, 2, 3, 4, 5];
arr.every(function (elem, index, arr) {
   return elem >= 3;
});// false

上面代码中，数组arr并非所有成员大于等于3，所以返回false

5.reduce方法依次处理数组的每个成员，最终累计为一个值。reduce是从左到右处理（从第一个成员到最后一个成员）

reduce方法参数是一个函数,该函数接受以下两个参数。
1累积变量，默认为数组的第一个成员
2当前变量，默认为数组的第二个成员
例如：

var res = [1, 2, 3, 4, 5].reduce(function (a, b) {
    console.log(a, b);
    return a + b;
})
// 1 2
// 3 3
// 6 4
// 10 5
//res最后结果：15

上面代码中，reduce方法求出数组所有成员的和。

第一次执行，a是数组的第一个成员1，b是数组的第二个成员2。第二次执行，a为上一轮的返回值3，b为第三个成员3。第三次执行，a为上一轮的返回值6，b为第四个成员4。第四次执行，a为上一轮返回值10，b为第五个成员5。至此所有成员遍历完成，整个方法的返回值就是最后一轮的返回值15。

6.indexOf()，lastIndexOf()

indexOf方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1。
例如：

var a = ['a', 'b', 'c'];
a.indexOf('b') // 1
a.indexOf('y') // -1

indexOf方法还可以接受第二个参数，表示搜索的开始位置。
例如：

['a', 'b', 'c'].indexOf('a', 1) // -1

上面代码从1号位置开始搜索字符a，结果为-1，表示没有搜索到。

lastIndexOf方法返回给定元素在数组中最后一次出现的位置，如果没有出现则返回-1。
例如：

var a = [2, 5, 9, 2];
a.lastIndexOf(2) // 3
a.lastIndexOf(7) // -1

注意，这两个方法不能用来搜索NaN的位置，即它们无法确定数组成员是否包含NaN。
例如：

[NaN].indexOf(NaN) // -1
[NaN].lastIndexOf(NaN) // -1

这是因为这两个方法内部，使用严格相等运算符（===）进行比较，
而NaN是唯一一个不等于自身的值

7.链式使用

上面这些数组方法之中，有不少返回的还是数组，所以可以链式使用。
例如：

var users = [

{name: 'tom', email: '[e-mail]',age:16},

{name: 'peter', email: '[e-mail]',age:18}

];


users

.filter(function (person) {

    return person.age>=18;

})

.forEach(function(e){

    consle.log(e)

});

上面代码中，先产生一个所有年龄大于等于18的数组，然后打印数组中的元素。

String

一、字符串的创建方式
例如：

var s1 = 'abc';

var s2 = new String('abc');

typeof s1 // "string"

typeof s2 // "object"

上面代码中，变量s1是字符串，s2是对象。
所以,String对象也叫包装对象
除了用作构造函数，String对象还可以当作工具方法使用，将任意类型的值转为字符串。
例如：

String(true) // "true"
String(5) // "5"

上面代码将布尔值ture和数值5，分别转换为字符串

二、字符串实例的length属性返回字符串的长度。
例如：

'abc'.length // 3

字符串对象是一个类似数组的对象（很像数组，但不是数组）。
例如：

new String('abc')// String {0: "a", 1: "b", 2: "c", length: 3}
new String('abc')[1] // "b"

上面代码中，字符串abc对应的字符串对象，有数值键（0、1、2）和length属性，所以可以像数组那样取值。

三、charAt方法返回指定位置的字符，参数是从0开始编号的位置。
例如：

var s = new String('abc');

s.charAt(1) // "b"

s.charAt(s.length - 1) // "c"

//这个方法完全可以用数组下标替代。
'abc'.charAt(1) // "b"

'abc'\[1\] // "b

四、
1.slice方法用于从原字符串取出子字符串并返回，不改变原字符串。它的第一个参数是子字符串的开始位置，第二个参数是子字符串的结束位置（不含该位置）。
例如：

'JavaScript'.slice(0, 4) // "Java"如果省略第二个参数，则表示子字符串一直到原字符串结束。

'JavaScript'.slice(4) // "Script"如果参数是负值，表示从结尾开始倒数计算的位置，即该负值加上字符串长度。

'JavaScript'.slice(-6) // "Script"

'JavaScript'.slice(0, -6) // "Java"
  
'JavaScript'.slice(-2, -1) // "p"如果第一个参数大于第二个参数，slice方法返回一个空字符串。

'JavaScript'.slice(2, 1) //""

2.substring方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice方法很相像。它的第一个参数表示子字符串的开始位置，第二个位置表示结束位置（返回结果不含该位置）。
例如：

'JavaScript'.substring(0, 4) // "Java"如果省略第二个参数，则表示子字符串一直到原字符串的结束。

'JavaScript'.substring(4) // "Script"如果第一个参数大于第二个参数，substring方法会自动更换两个参数的位置。 

'JavaScript'.substring(10, 4) // "Script"

// 等同于

'JavaScript'.substring(4, 10) // "Script"

3.substr方法用于从原字符串取出子字符串并返回，不改变原字符串，跟slice和substring方法的作用相同。
substr方法的第一个参数是子字符串的开始位置（从0开始计算），第二个参数是子字符串的长度。
例如：

'JavaScript'.substr(4, 6) // "Script"

如果省略第二个参数，则表示子字符串一直到原字符串的结束。
例如：

'JavaScript'.substr(4) // "Script"

如果第一个参数是负数，表示倒数计算的字符位置。如果第二个参数是负数，将被自动转为0，因此会返回空字符串。
例如：

'JavaScript'.substr(-6) // "Script"
'JavaScript'.substr(4, -1) // ""

上面代码中，第二个例子的参数-1自动转为0，表示子字符串长度为0，所以返回空字符串

4.indexOf方法用于确定一个字符串在另一个字符串中第一次出现的位置，返回结果是匹配开始的位置。如果返回-1，就表示不匹配。
例如：

'hello world'.indexOf('o') // 4

'JavaScript'.indexOf('script') // -1

indexOf方法还可以接受第二个参数，表示从该位置开始向后匹配。
空格也算一个字符串
例如：

'hello world'.indexOf('o', 6) // 7

lastIndexOf方法的用法跟indexOf方法一致，主要的区别是lastIndexOf从尾部开始匹配（最后一次出现的位置），indexOf则是从头部开始匹配（第一次出现的位置）。
例如：

'hello world'.lastIndexOf('o') // 7

另外，lastIndexOf的第二个参数表示从该位置起向前匹配。
例如：

'hello world'.lastIndexOf('o', 6) // 4

5.trim方法用于去除字符串两端的空格，返回一个新字符串，不改变原字符串。
例如：

' hello world '.trim()// "hello world"

该方法去除的不仅是空格，还包括制表符（\t、\v）、换行符（\n）和回车符（\r）。
例如：

'\r\nabc \t'.trim() // 'abc'

6.toLowerCase方法用于将一个字符串全部转为小写，toUpperCase则是全部转为大写。它们都返回一个新字符串，不改变原字符串。
例如：

'Hello World'.toLowerCase()// "hello world"
'Hello World'.toUpperCase()// "HELLO WORLD"

7.replace方法用于替换匹配的子字符串，一般情况下只替换第一个匹配（除非使用带有g修饰符的正则表达式）。
例如：

'aaa'.replace('a', 'b') // "baa" 用第二个参数替换第一个参数，只替换第一个
'aaa'.replace(/a/g, 'b') // "bbb" 正则表达式，替换字符串中出现的全部的第一个参数

8.split方法按照给定规则分割字符串，返回一个由分割出来的子字符串组成的数组。
它与join相反，join是把数组连接起来成字符串。
例如：

'a|b|c'.split('|') // ["a", "b", "c"]

如果分割规则为空字符串，则返回数组的成员是原字符串的每一个字符。
例如：

'a|b|c'.split('') // ["a", "|", "b", "|", "c"]

ASCII码和字符集

字符串常见API(charCodeAt\fromCharCode)
charCodeAt方法返回字符串指定位置的 Unicode 码点（十进制表示），即字符串转成编码，相当于String.fromCharCode()的逆操作，即编码转成字符串。
例如：

'abc'.charCodeAt(1) // 98上面代码中，abc的1号位置的字符是b，它的 Unicode 码点是98。

String.fromCharCode()

String对象提供的静态方法（即定义在对象本身，而不是定义在对象实例的方法），主要是String.fromCharCode()。该方法的参数是一个或多个数值，代表 Unicode 码点，返回值是这些码点组成的字符串。
例如：

String.fromCharCode() // ""
String.fromCharCode(97) // "a"
String.fromCharCode(104, 101, 108, 108, 111)// "hello"。

0-9的编码是48-57；

a-b的编码是97-122；

A-B的编码是65-90；

Math

Math.E;

Math.PI;

Math.abs();

Math.max()//如果参数为空，返回-infinity;

Math.min();//如果参数为空，返回infinity;

Math.floor();

Math.ceil();

Math.pow(a,b);//计算a的b次方

Math.sqrt();//返回参数的平方根，如果参数是一个负数，则返回NaN

Math.round();//将值四舍五入

Math.random();//随机数，设定取值范围的方法

parseInt(Math.random() * (max - min + 1)) + min;Math.sin();//返回参数的正弦（参数为弧度值）

Math.cos();//返回参数的余弦（参数为弧度值）

Math.tan();//返回参数的正切（参数为弧度值）

Date

date日期
例如：

var date=new Date()//Thu Jul 1 2010 19:51:54 GMT+0800 (中国标准时间)

上面的代码中new Date()返回的是字符串，获取到了当前的时间;可以接受多种格式的参数，返回一个该参数对应的时间实例。参数为多个整数， 代表年、月、日、小时、分钟、秒、毫秒，
例如：

var date=new Date(2013, 0, 1, 0, 0, 0, 0)//Tue Jan 01 2013 00:00:00 GMT+0800 (中国标准时间)

参数也可以是一个字符串（最常用）
日期字符串应该符合 RFC 2822 和 ISO 8061 这两个标准，即YYYY-MM-DDTHH:mm:ss.sssZ格式
例如：

new Date('2017-2-15')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('2017/2/15')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('02/15/2017')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('2017-FEB-15')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('FEB, 15, 2017')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('Feberuary, 15, 2017')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('15 Feb 2017')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

new Date('15, Feberuary, 2013')//Wed Feb 15 2017 00:00:00 GMT+0800 (中国标准时间)

上面多种日期字符串的写法，返回的都是同一个时间

日期处理

new Date().getDate()//返回一个月中的某一天(1 ~ 31)

new Date().getDay()//返回一周中的某一天 (0 ~ 6)也就是星期几

new Date().getMonth()//返回月份 (0 ~ 11)，返回的月份加上1是12个月中的某个月

new Date().getFullYear() 以四位数字返回年份

new Date().getHours()返回当前小时（0-23）

new Date().getMinutes()返回当前分钟 (0 ~ 59)

new Date().getSeconds()返回当前秒(0 ~ 59)

new Date().getTime()返回1970年1月1日至今的毫秒数
例如：

var date = new Date()//Thu Jul 23 2017 14:15:44 GMT+0800 (中国标准时间)

date.getDate()//返回结果是23，所以是23号

date.getDay()//返回结果是4，所以是星期四

date.getMonth()//返回结果是6，所以是6+1为7月份

date.getFullYear() //返回结果是2017，所以是2017年

date.getHours()//返回结果是14，所以是14点

date.getMinutes()//返回结果是15，所以是是15分

date.getSeconds()//返回结果是44，所以是44秒

date.getTime()//1595484944805

这些参数如果超出了正常范围，会被自动折算。比如，如果月设为15，就折算为下一年的4月

日期修改

new Date().setDate()设置月中的某一天 (1 ~ 31)

new Date().setMonth() 设置月份 (0 ~ 11)

new Date().setFullYear()设置年份（四位数）变量名.setHours()设置小时（0-23）

new Date().setMinutes()设置分钟 (0 ~ 59)

new Date().setSeconds()设置秒(0 ~ 59)

new Date().setMillisenconds(）设置毫秒(0 ~ 999)

new Date().setTime()设置1970年1月1日至今的毫秒数

日期的运算

类型自动转换时，Date实例如果转为数值，则等于对应的毫秒数；如果转为字符串，则等于对应的日期字符串。所以，两个日期实例对象进行减法运算时，返回的是它们间隔的毫秒数；进行加法运算时，返回的是两个字符串连接而成的新字符串。Date.parse方法用来解析日期字符串，返回该时间距离时间零点（1970年1月1日 00:00:00）的毫秒数。

浏览器的默认行为

JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。

阻止默认行为的方式

w3c的方法是e.preventDefault()，

IE则是使用e.returnValue = false;

return false;

自定义右键菜单事件 oncontextmenu

添加事件监听器：ele.addEventListener(事件名，处理函数，布尔值)

现代浏览器（IE9、10、11 | ff, chorme, safari, opera）

注意：事件名不带on，处理函数为函数指针，布尔值代表冒泡(内到外)或捕获（外到内）

element.addEventListener(“click”,function(){},false);//false 事件冒泡

element.addEventListener(“click”,function(){},true);//true事件捕获

移除事件监听器：removeEventListener(事件名，处理函数)

IE8及以下的事件监听器：attachEvent(事件名，处理函数)，detachEvent(事件名，处理函数)

注意：事件名带on

事件委托

利用事件冒泡的原理，把本应添加给某元素上的事件委托给他的父级（外层）。

使用案例

如果一个ul中有很多li，循环遍历所有的li，给li添加事件效率比较低，我们可以监听ul的点击事件，利用子元素的点击事件都会冒泡到父元素的特点，就可以知道什么时候点击了li。

好处：效率高，可以给未来元素添加事件

拖拽效果实现原理

三个事件：onmousedown、onmousemove、onmouseup

实现思路：

1：给目标元素添加onmousedown事件，拖拽的前提是在目标元素按下鼠标左键。

2：当onmousedown发生以后，此刻给document添加onmousemove事件，意味着此刻鼠标在网页的移动都将改变目标元素的位置。

3：在onmousemove事件中，设定目标元素的left和top，公式：

目标元素的left = 鼠标的clientX – （鼠标和元素的横坐标差，即offsetX）

目标元素的top = 鼠标的clientY– （鼠标和元素的纵坐标差，即offsetY）。

4：当onmousedown发生以后，此刻给document添加onmouseup事件，意味着此刻鼠标在网页的任意位置松开鼠标，都会放弃拖拽的效果。

5：在onmouseup事件中，取消document的onmousemove事件即可。

注意在拖拽效果里，如果给元素使用了定位，那么这个元素的margin值不能为auto,而是设为0，否则会影响到拖拽的位置，也就是位置发生偏移。也可以不使用定位，这样margin值就可以设为auto;

BOM的概念

提供了独立于页面内容而与浏览器进行交互的对象，其核心对象是window

在浏览器中，window对象（注意，w为小写）指当前的浏览器窗口。它也是所有对象的顶层对象。

“顶层对象”指的是最高一层的对象，所有其他对象都是它的下属。JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

var a = 1;
window.a // 1

上面代码中，变量a是一个全局变量，但是实质上它是window对象的属性。声明一个全局变量，就是为window对象的同名属性赋值

浏览器代理检测，可以检测出来用户使用的浏览器类型，也可以检测浏览器所在的操作系统

navigator.userAgent

//判断浏览器类型
var t = navigator.userAgent;

if(t.indexOf('Trident')!= -1){

    console.log('ie内核')

}else if(t.indexOf('Presto')!= -1){

    console.log('欧朋')

}else if(t.indexOf('Chrome')!= -1){

    console.log('chrome ')

}else if(t.indexOf('Safari')!= -1){

    console.log('Safari ')

}else{

    console.log('其他')

}
//判断是移动端还是PC

var ua = navigator.userAgent.toLowerCase();

if (ua.indexOf('mobi') !=-1) {

    // 手机浏览器

    console.log('手机')

    if(ua.indexOf('android') !=-1){

    console.log('移动端 安卓')

    }else if(ua.indexOf('ipod') !=-1

    || ua.indexOf('iphone') !=-1

    || ua.indexOf('ipad') !=-1){

        console.log('移动端 苹果手机')

    }

} else {

    // 非手机浏览器

    console.log('非手机')

}

location对象

location对象包含有关当前 URL 的信息。

location对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

属性：hash、host、hostname、href、pathname、port、protocol、search

location.href：设置或返回完整的 URL。（常用）

location.hash：设置或返回从井号 (#) 开始的 URL（锚）。

location.search：设置或返回从问号 (?) 开始的 URL（查询部分）。（常用）

location.host 设置或返回主机名和当前 URL 的端口号。

location.hostname 设置或返回当前 URL 的主机名。

location.pathname 设置或返回当前 URL 的路径部分。

location.port 设置或返回当前 URL 的端口号。

location.protocol 设置或返回当前 URL 的协议。

方法：assign(url), replace(url) , reload()

location.assign() 加载新的文档。

location.reload() 重新加载当前文档。

location.replace() 用新的文档替换当前文档。

window.onload

load事件发生在文档在浏览器窗口加载完毕时。window.onload属性可以指定这个事件的回调函数。

window.onload = function() {

    console.log('页面加载完毕')

};

window.onscroll

可以监听页面的滚动

window.onscroll = function(){

    console.log('页面滚动')

}

一旦页面滚动就会触发onscroll 函数

window.open();//打开一个新的浏览器窗口。

window.close();//关闭浏览器窗口。

alert(arg1)//显示带有一段消息和一个确认按钮的警告框。

prompt(arg1,arg2)//显示可提示用户输入的对话框。

confirm(arg1) //显示带有一段消息以及确认按钮和取消按钮的对话框。

history对象：

history对象保存着用户上网的历史记录,从窗口被 打开的那一刻算起.

后退一页 history.go(-1) history.back()

前进一页 history.go(1) history.forward()

前进两页 history.go(2)

定时器和延时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。

延时器

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func, delay);

上面代码中，setTimeout函数接受两个参数，第一个参数func是将要推迟执行的函数名，第二个参数delay是推迟执行的毫秒数。

例如：

console.log(1);

//推迟执行

setTimeout(function(){

    console.log(2)

},1000);

console.log(3);

定时器

setInterval函数的用法与setTimeout完全一致，区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行。

例如：

var timer = setInterval(function() {

    console.log(2);

}, 1000)

上面代码中，每隔1000毫秒就输出一个2，会无限运行下去，直到关闭当前窗口。

清除定时器

setTimeout和setInterval函数，都返回一个整数值，表示计数器编号。将该整数传入clearTimeout和clearInterval函数，就可以取消对应的定时器。
例如：

var id1 = setTimeout(f, 1000);

var id2 = setInterval(f, 1000);

clearTimeout(id1);

clearInterval(id2);

上面代码中，回调函数f不会再执行了，因为两个定时器都被取消了。

不论是定时器还是延时器，就算传的时间为0毫秒，也会先执行定时器或延时器下面的代码

同步和异步

同步执行（顺序执行）：同一时间只能执行一个事件，按顺序依次执行

异步执行：同一时间可以同时执行多个事件//延时器或定时器的匿名函数都是异步执行

由异步操作发起的请求获得的结果的快慢是根据网速快慢、服务器快慢、数据大小有关

Doctype作用

<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

document.scrollingElement

document.scrollingElement属性返回文档的滚动元素。也就是说，当文档整体滚动时，到底是哪个元素在滚动。

标准模式下，这个属性返回的文档的根元素document.documentElement（即<html>）。兼容（quirk）模式下，返回的是<body>元素，如果该元素不存在，返回null。

// 页面滚动到浏览器顶部

document.scrollingElement.scrollTop = 0;

或者也可以像下面

document.documentElement.scrollTop = document.body.scrollTop = 0；

获取可视区域距离页面顶部的距离

scrollTop = document.scrollingElement.scrollTop

scrollTop=document.documentElement.scrollTop || document.body.scrollTop

DOM的概念及作用

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。

浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点和最终的树状结构，都有规范的对外接口。

DOM 只是一个接口规范，可以用各种语言实现。所以严格地说，DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方面，JavaScript 也是最常用于 DOM 操作的语言。后面介绍的就是 JavaScript 对 DOM 标准的实现和用法。

节点树

一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍生出一个金字塔结构，倒过来就像一棵树。

浏览器原生提供document节点，代表整个文档。

DOM节点类型(元素和文本)

DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子。

Element：网页的各种HTML标签（比如<body>、等）

Text：标签之间或标签包含的文本

DOM的基本操作(查询、创建、添加，修改，删除)

document.getElementById方法返回匹配指定id属性的元素节点。如果没有发现匹配的节点，则返回null。获取的元素类型为对象，只要是对象就有属性和方法

下面的方法返回的都是伪数组

document.getElementsByClassName方法返回一个类似数组的对象（HTMLCollection实例），包括了所有class名字符合指定条件的元素,低版本的ie浏览器中不能使用（ie6、7、8）

document.getElementsByTagName方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（HTMLCollection实例）

document.querySelector方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回null。

var el1 = document.querySelector('.myclass');

document.querySelectorAll方法与querySelector用法类似，区别是返回一个NodeList（节点）对象，包含所有匹配给定选择器的节点。

elementList = document.querySelectorAll('.myclass');

DOM的基本操作(查询、创建、添加，修改，删除)

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点

Element.innerHTML属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素。

如果将innerHTML属性设为空，等于删除所有它包含的所有节点。

DOM的基本操作(查询、创建、添加，修改，删除)

document.createElement方法用来生成元素节点，并返回该节点。

var newDiv = document.createElement('div');

createElement方法的参数为元素的标签名，即元素节点的tagName属性，对于 HTML 网页大小写不敏感，即参数为div或DIV返回的是同一种节点

appendChild( )，在数组尾部添加

替换

replaceChild(newNode,oldNode)

删除

var el = document.getElementById('mydiv');

el.remove();

Element.style

每个元素节点都有style用来读写该元素的行内样式信息

不过，连词号需要变成骆驼拼写法。

例如：

var divStyle = document.querySelector('div').style;

divStyle.backgroundColor = 'red';

divStyle.border = '1px solid black';

divStyle.width = '100px';

divStyle.height = '100px';

divStyle.fontSize = '10em';

  

divStyle.backgroundColor // red

divStyle.border // 1px solid black

divStyle.height // 100px

divStyle.width // 100px

Element.style返回的只是行内样式，并不是该元素的全部样式。通过样式表设置的样式，或者从父元素继承的样式，无法通过这个属性得到。元素的全部样式要通过window.getComputedStyle()得到。

元素的全部样式要通过window.getComputedStyle()得到。

行内样式（inline style）具有最高的优先级，改变行内样式，通常会立即反映出来。但是，网页元素最终的样式是综合各种规则计算出来的。因此，如果想得到元素实际的样式，只读取行内样式是不够的，需要得到浏览器最终计算出来的样式规则。

window.getComputedStyle方法，只能用来读取样式，不能更改样式，就用来返回浏览器计算后得到的最终规则。它接受一个节点对象作为参数，返回一个 CSSStyle 实例，包含了指定节点的最终样式信息。所谓“最终样式信息”，指的是各种 CSS 规则叠加后的结果。
例如：

var div = document.querySelector('div');

var styleObj = window.getComputedStyle(div);

styleObj.backgroundColor

上面代码中，得到的背景色就是div元素真正的背景色

兼容性问题

低版本ie 使用

box.currentStyle['width']) 获取全部样式

dom

属性节点

Element.className

className属性用来读写当前元素节点的class属性。它的值是一个字符串，每个class之间用空格分割。

// HTML 代码 <div class="one two three" id="myDiv"></div>

var div = document.getElementById('myDiv');

div.className

// "one two three"

属性节点

获取属性和设置属性（自定义属性）

Element.getAttribute方法接受一个字符串作为参数，返回同名属性的值。如果没有该属性，则返回null。

var mydiv = document.getElementById('mydiv');

var id = mydiv.getAttribute('id');

Element.setAttribute方法用于为当前节点设置属性。如果属性已经存在，将更新属性值，否则将添加该属性。该方法没有返回值。

// HTML 代码为

// <button>Hello World</button>

var b = document.querySelector('button');

b.setAttribute('name', 'myButton');

b.setAttribute('disabled', true);

Element.removeAttribute方法移除指定属性。该方法没有返回值。

document.getElementById('div1').removeAttribute('id')

outerHTML

outerHTML 包括整个标签，而不仅限于标签内部的内容

innerText

innerText只获取元素内的文本内容，html标签将被忽略

获取孩子节点 childNodes和children

Element.children属性返回一个类似数组的对象（HTMLCollection实例），包括当前元素节点的所有子元素。如果当前元素没有子元素，则返回的对象包含零个成员，只能获取元素（标签）节点

这个属性与Node.childNodes属性的区别是，它只包括元素类型的子节点，不包括其他类型的子节点。而childNodes属性包含空白节点，能获取元素、文本节点

高级选取

Element.firstElementChild属性返回当前元素的第一个元素子节点，Element.lastElementChild返回最后一个元素子节点。如果没有元素子节点，这两个属性返回null。

兄弟节点

nextElementSibling 下一个节点

previousElementSibling 上一个节点

Element.nextElementSibling属性返回当前元素节点的后一个同级元素节点，如果没有则返回null。

Element.previousElementSibling属性返回当前元素节点的前一个同级元素节点，如果没有则返回null。

（分别对应的还有 firstChild，lastChild，nextSibling ，previousSibling方法 不过这些个方法都能获取到文本节点）

Element.parentNode可以获取父节点

box.insertBefore(newNode, existNode) 插入节点

在box的子节点existNode前面插入一个新节点

document.createTextNode() 创建文本节点

var t = document.createTextNode('你好');

box.appendChild(t) ;

在box尾部添加一个文本节点

只读：只能读取，不能设置（更改）

offset:可视区域

offsetWidth/offsetHeight

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border

Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。

这两个属性都是只读属性

如果元素的 CSS 设为不可见（比如display: none;），则返回0

这两个方法返回的高度和宽度是数字，能进行运算；

Element.offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

如果父元素都没有设定位，返回的是元素body

<div >

<p>

<span>Hello</span>

</p>

</div>

上面代码中，span元素的offsetParent属性就是div元素。

该属性主要用于确定子元素位置偏移的计算基准，

Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

offsetLeft/offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移

正则

正则表达式是一个对象

var a=/x/g;

var b=/x/g;

a==b//false;

因为对象存在堆区的是栈区的地址，在栈区开辟一个相对应的地址区存这个对象内容

所以两个对象就算内容一样也不会不相等，因为地址不一样

元字符-限定符：

*：匹配前面的子表达式零次或多次（意思是该子字符串可出现可不出现）

+：匹配前面的子表达式一次或多次（意思是最少出现一次，但是如果想用‘+’，就不能在表达式里限定子字符串的位数，否则会报错）

？：匹配前面的子表达式零次或一次（意思是可不出现，但如果出现就只能出现一次）

{n}：匹配确定n次。{限定子字符串位数，不能和‘+’同时使用}

{n,}：至少匹配n次。{限定子字符串位数，不能和‘+’同时使用}

{n, m}：最少匹配n次且最多匹配m次{限定子字符串位数，不能和‘+’同时使用}

元字符-字符匹配：

[xyz]意思是只要包含x、y、z中的任意一个字符就能匹配，返回true；

[^xyz]意思是不能包含x、y、z中的任意一个字符,如果包含就会返回false;

[a-z]意思是限定字符的范围，只要包含a-z范围内的任意一个字符就会返回true；

\d相当于[0-9]

\D相当于[^0-9]

\w相当于[A-Za-z0-9_]

\W相当于[^A-Za-z0-9_]

\s 匹配空格（包括换行符、制表符、空格符等）。

\S 匹配非空格的字符。

.：匹配除”\n”(换行)之外的任何单个字符。

元字符---定位符：

定位符可以将一个正则表达式固定在一行的开始或结束。也可以创建只在单词内或只在单词的开始或结尾处出现的正则表达式。

^：匹配输入字符串的开始位置。

$：匹配输入字符串的结束位置。

// test必须出现在开始位置/^test/.test('test123') // true

// test必须出现在结束位置/test$/.test('new test') // true

// 从开始位置到结束位置只能有test/^test$/.test('test') // true

/^test$/.test('test test') // false

元字符---转义符：

\：用于匹配某些特殊字符。

正则表达式中那些有特殊含义的元字符，如果要匹配它们本身，就需要在它们前面要加上反斜杠。比如要匹配+，就要写成\+。

元字符---选择匹配符：

|：可以匹配多个规则。

竖线符号（|）在正则表达式中表示“或关系”（OR），即cat|dog表示匹配cat或dog。

面向对象思想

封装，继承，多态，抽象

面向对象里只能出现两样东西：属性和方法，如果出现事件，需要把事件封装到方法里

继承：单继承；(父亲、孩子)

多继承：单重继承(父亲、父亲、父亲.....孩子)；

多重继承（爷爷、父亲、孙子、重孙子......）；

构造函数就是类，用来创建对象的，但它本质上也是对象；

多态来源于继承，表出现出不同的行为，就像是儿子继承父亲的手艺，但又和父亲制作东西的方法不一样，有自己的理解和经验