js 学习基础笔记

JavaScript用法

代码规范

命名规则

• 变量与函数驼峰式命名: carName
• 全局变量和常量用大些：PI

空格、缩进、注释等

1. 运算符前后加空格
2. 缩进四个空格，不建议使用tab

其他常用

1. 对象：字符串用双引号
2. 每行小于80字符
3. 文件名需要小写

JS 使用

脚本要放在 之间，标签可以放在或者中。

Note： 不再需要写 type=text/javascript。

内嵌JS脚本

上述会向 html 文件中添加

标签，内容为 'hello world'。

外部JS文件

使用外部文件，需要

输出

！！js 没有任何打印或输出的函数

js 显示数据方法

window.alert() 弹出警告框

示例：

页面弹窗显示 11。

document.write() 写入到 html 文档

示例：

在 html 文档中添加标签

hello wolrd

;
在 html 文档中输出 Date() 函数返回的内容——日期。

如果在文档加载完成后使用 document.write() ，则整个页面会被覆盖。
示例：

    
hello world
    显示时间
    

页面加载后显示hello world 和 '显示时间' 按钮：

点击按钮后，页面仅显示当前系统时间：

innerHTML 写入到 html 文档

示例：

将 id = demo 的标签中的内容修改为 hello world 。

console.log() 写入到控制台

示例：

在控制台显示结果为 11 。

语法

语句

js语句是发给浏览器的命令。

注释

//单行注释

/*
多行注释
*/

字面量

包括数字、字符串、表达式、 数组、对象、函数字面量。
字面量是一个恒定值。
如：

3
4
3.14
5+6
[1，2，3]
"john"
{firstName: "Tom", age: 12}

变量

声明

用 var 来定义变量。

var x, y, z;
x = 5;
y = "sam";

x 变量数据类型为数值，不用引号包围；
y 变量数据类型为字符串，使用引号包围；
z 变量未赋值，因此数据类型为 undefined。

变量命名规则

• 字母开头
• 可以以 $ 或 _ 开头，但不推荐
• 常见命名方式——驼峰式命名： myPara
• 大小写敏感

数据类型

－基本类型: 数值(number),字符串(string),布尔值(boolean), undefined， null，symbol(ES6)
－对象类型: 对象(object)，数组(array)，函数(function)

js 拥有动态类型
即同一个变量，可以赋值为不同的数据类型。

var x;
x = 5; //x为数值
x = "sam"; //x为字符串

字符串string

用单引号或双引号包围起来的字符：“sam”。

1. 可以通过索引访问字符串的字符： var c = str[5]。

2. 字符串内部引号要和字符串引号相异，或使用转义字符 \ 。

3. 可以将字符串定义为字符串对象：

var str1 = "Bently";
var str2 = new String("William Hammington");
alert(typeof str1);
alert(typeof str2);

str1 的类型为string，str2 的类型为object。

Note：不建议创建string对象，会拖慢速度。

数字number

整数、小数、科学计数法数字，NaN，infinity

var x =1;
var y = 2.68;
var z = 123e5;

Float: 所有数据都是以 64 位浮点型数据(float) 来存储。
所有的编程语言对浮点型数据的精确度都很难确定。

布尔值boolean

true/false

数组array

用中括号括起来。

//新建一个数组
var arr = new Array();
arr[0] = 1;
arr[1] = "sam";
//直接用中括号新建
var arr = [1, "string", {object: 0, name: "sam"}, function myFunc(){ }];

数组包含的数据类型不限。

对象object

对象由花括号分隔表示，括号内部包含 name:value 对，由逗号分隔。

var obj = {
		firstName: "William",
		lastName: "Hammington",
		age: 5,
		eyeColor: "brown",
		getFullName: function ()　{  return this.firstName + ' ' + this.lastName;　}
};

！！对象是变量的容器

对象属性的寻址方式：

/*访问obj的属性的方法*/
//---1
document.getElementById("d1").innerHTML = obj.firstName;
//---2
document.getElementById("d2").innerHTML = obj["lastName"];
/*访问函数属性*/
//---1 作为方法访问
document.getElementById("d3").innerHTML = obj.getFullName();
//---2 作为属性访问
document.getElementById("d4").innerHTML = obj.getFullName;

页面展示结果：

函数function

函数定义

通过 function 关键字定义函数。

1. 函数声明

function functionName(参数){
    //代码段
};

声明后需要调用函数，函数才会执行。

2. 函数表达式
   函数可以通过表达式定义，可存储在变量中，并且可以通过变量调用：

    var f = function (a, b){ return a*b; } ；
    var z = f(3, 4);   //z将调用函数赋值为12

函数没有函数名，则为匿名函数！

3. 通过内置Function()构造函数声明函数

    var myFunc = new Function("a", "b", "return a*b");
    var z = myFunc(3, 4);

效果和之前的一样。

4. 自调用函数

(function () {
    var x = "自己调用自己";
})();

实际上是一个 匿名自我调用的函数 (没有函数名)。

5. 函数是对象

• 函数定义作为对象的属性，称之为对象方法。
• 函数如果用于创建新的对象，称之为对象的构造函数。

6. 箭头函数ES6
   语法：

(参数1, 参数2, …, 参数N) => { 函数声明 }
(参数1, 参数2, …, 参数N) => 表达式(单一)

示例：

var x = function(x, y) {
     return x * y;
}
const x = (x, y) => x * y;

两个函数意义一样。
Note：
+ 箭头函数都没有自己的 this，箭头函数中 this 的值和外层的 this 是一样的
+ 不能提升
+ 使用 const 比使用 var 更安全

函数参数

1. 显式参数parameters
   显式参数在函数定义时列出:

fonction func(para1,para2....){
	.....
}

2. 隐式参数arguments
   隐式参数在函数调用时传递给函数真正的值
   内置的对象 arguments 对象，包含了函数调用的参数数组

var x = findMax(1,4,23,11,24,56,14,45);
function findMax(){
	var i, max = arguments[0];	//max=1
	......
}

Note 1：隐式参数传递值
函数仅获取值，隐式参数的改变只在函数内部可见，不会修改显示参数的初始值。

Note 2：通过对象传参
引用对象的值，在函数内部修改对象的属性就会修改其初始的值，修改对象属性在函数外是可见的。

Note 3：默认参数
调用时未提供隐式参数，则默认为undefined，可以在函数中设置默认值。

function func(x,y){
	......
}

• 加判断;
• 设置y = y||0;
• ES6中可以自带参数：function func(x,y=10){}.

函数调用

区别在于 this 关键字

1. 作为函数调用
   myFunc();
   函数不属于任何对象， this 是默认的全局对象 window————不建议，使用window作为一个变量容易造成程序崩溃。

2. 作为方法调用
   将函数定义为对象的方法，然后通过对象来调用。—— this 的值是对象本身

3. 使用构造函数调用
   在函数调用前使用 new 关键字，就是调用了构造函数！
   构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。
   this 关键字没有任何的值，在函数调用实例化对象(new object)时创建

4. 作为函数方法调用
   函数作为一个对象有属性和方法：call() 和 apply() 为两个预定义的函数方法，可以调用函数。

function myFunc(a,b){
	return a*b;
}
var obj1 = myFunc.call(obj1,10,2);
var myArray = [10,2];
var obj2 = myFunc.aplly(obj2,myArray);

闭包！！！

闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。

计数器困境
想统计一些数值，但计数器在所有函数中可用

1. 用全局变量定义计数器。

var counter = 0;
function add(){
	return counter += 1;
}

！！但是 counter 可以不掉用函数而任意访问。
如果将变量声明在内部则无法正确计数。

2. JS内嵌函数

function add(){
	var counter = 0;
	function plus(){	return counter += 1;	}
	plus();
	return counter;
}

我们希望plus()可以在外部访问，且 counter = 0 只执行一次。

3. 闭包-----函数自我调用！

var add = (function(){
	var counter = 0;
	return function(){ return counter += 1;}
})();
add();

add 变量作为函数调用，自我调用仅执行一次，就初始化 counter 为 0。add赋值为匿名函数，并且可以访问计数器。
计数器受到匿名函数作用域保护，只能通过add修改。
add--> function(){ return counter += 1; }-->修改counter。

null与undefined

1. null表示的是值为空，当对变量赋值为 null 时，其数据类型为对象！
2. undefined 表示的是值和数据类型均为 undefined。没有设置值的变量返回值为undefined。

null与undefined值等类型不等

作用域

局部变量

函数内部声明的变量为局部变量，只对该函数内部可见。作用域为局部（**局部作用域**）。
函数运行完毕后，局部变量就会删除。

Note：函数的参数是局部变量。

全局变量

函数外声明的，整个网页的脚本和函数都可以访问的变量。（**全局作用域**）
页面关闭后，全局变量会删除。

Note： 如果在函数内部没有采用var去声明一个变量，则该变量为全局变量。

function myFunc() {
    carName = "Volvo";
};

这个例子中，carName 为全局变量。
实际上，赋值给未声明的变量，该变量会自动作为 window 的一个属性，即 window.carName。

检测变量类型

typeof

Note：数组和Date的返回类型为object，无法用typeof来判断数组Array和Date类型

constructor

constructor 属性返回可以所有 JavaScript 变量的构造函数，可以判断所以的数据类型。

数据类型转换

数字/布尔值/Date->字符串

1. 强制类型转换：String(num)，将 num 转换为数字字符串。
2. Number方法：num.toString()

->数字

1. 强制类型转换：Number(str)，只有str是符合的数字字符串时才可以转换

Number("123");	//123
Number("");	//0
Number(false);	//0
Number("sss");	//NaN

2. parseFloat()和parseInt();

3. + ：将y转换为数字类型，如果不能转换，则得到值为NaN的数字类型。

x = + y;

自动类型转换

console.log(10+null);	//10
console.log("10"+null);	//10null
console.log("1" + 4 - 5);	//14-5 = 9
console.log("10"-2 + 5);	//8+5 = 13
console.log("10"*2);	//20

变量提升！

Note：无论在哪里声明，函数及变量的声明都将被提升到函数的最顶部。
例如：

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

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

这两段代码是一样的，x的声明会提升到最顶部，因此不会出现变量未声明这种错误。

Note：只有声明会提升，赋值的初始化变量不会提升。

console.log(x);	//undefined
var x = 5;	//这个初始化的变量不会提升

函数提升

函数可以在声明之前调用，使用表达式定义函数时无法提升。

操作符

运算符

算术运算符

符号	+	-	*	/	%	++	--
含义	加法	减法	乘法	除法	取模	自加	自减

Note：

1. 用于数字时，就是普通的数字运算；
2. • 用于字符串时：
   • 加号用于连接字符串:"hello" + " " + "world"，结果为："hello world"；
   • 字符串与数字用加号:"5" + 5 或者 5 + "5"，结果为：55，以字符串形式连接。

赋值运算符

符号	例子	含义
=	a = 5	a赋值为5
+=	a+=5	a = a+5
-=
* =
/=
%=

比较运算符

符号	描述
==	值等
===	值和类型都等
！=	不等于
!==	不绝对等，值和类型有至少一个不等于
>
<
>=
<=

返回值为true or false

逻辑运算符

符号	描述
&&	与
||	或
！	非

条件运算符

var x = a>b ? "yes":"no"; //如果 a>b 则 x 赋值为"yes"，否则赋值为"no"

条件与循环

条件语句

if...else

if(condition 1){
	code....
}
else if(condition 2){
	code...
}
else{
	code...
}

switch

switch(para){
	case 1:
		code...
		break;
	case 2:
		code...
		break;
	...
	default:
		code...
}

para 与 case 后面的数想匹配，然后进行代码执行。
default 规定无匹配时的代码，

循环语句

for 循环

1. for(code;condition;code)，规定了循环次数
2. for/in 可以循环便利对象的属性：

var obj = {a:0,b:1...};
for(x in obj){
	code...
}

while 循环

while(condition){
	code...
}

condition是可结束的，否则会变成无限循环。

do{
	code...
}while(condition);

do/while是在测试条件表达式之前就执行一次，while是必须满足条件之后再执行。

跳出/跳过循环

1. break
   结束这个循环，进入下一段代码。
2. continue
   结束循环中的这一轮，进入下一轮循环。

标记代码

可以用 name： 来标记代码：

list:{
	document.write("hello1");
	document.write("hello2");
	document.write("hello3");
	break list;
	document.write("hello4");
	document.write("hello5");
	document.write("hello6");
}

通过标记引用，可以用break跳出这段代码，不显示4，5，6.

正则表达式Regular Expression

/主体/修饰符

修饰符

符号	描述
i	不区分大小写
g	全局匹配
m	多行匹配

表达式

1. []——限制范围
   |表达式|意义|
   |---|---|
   |[afh]|查找方括号内的任意字符|
   |[^afh]|不在方括号内的任意字符|
   |[0-9]|查找0-9之间的数字|
   |[a-z]|查找小写a-z字符|
   | (x|y|z) | |表示或，查找指定的x,y,z |

2. 元字符——有特殊含义
   |元字符|描述|
   |---|---|
   | . | 查找单个字符，除了换行和行结束符 |
   | \w | 查找单词字符 |
   | \d | 数字 |
   | \s | 空白字符 |
   | \b | 匹配单词边界 |
   | \xxx | 匹配字符，其8进制数表示为xxx |
   | \xdd | 匹配字符，其16进制数表示为dd |
   | \uxxxx | 匹配unicode字符，其16进制数表示为xxxx |

Note：
+ 单词字符包括：a-z、A-Z、0-9，以及下划线, 包含 _ (下划线) 字符。
+ \W,\D,\S,\B 都表示非...
+ 空白字符包括：空格符、制表符:'\t'、回车符:'\r'、换行符:'\n'、垂直换行符:'\v'、换页符:'\f'

3. 量词
   |符号|含义|
   |---|---|
   | a+ | 至少包含一个'a'， /a+/ |
   | a* | 包含0个或多个'a'， /a*/ |
   | a? | 匹配一个或0个'a'， /a?/ |
   | a{x} | 匹配连续包含x个'a'的字符串 |
   | a{x,} | 匹配至少连续包含 x 个 'a' 的字符串 |
   | a{x,y} | 匹配至少 x 个，至多 y 个 'a' 的字符串 |
   | a$ | 匹配以'a'结尾的字符串 |
   | ^a | 匹配以'a'开头的字符串 |
   | ?=a | 匹配其后紧接'a'的字符串 |
   | ?!a | 匹配其后不紧接'a'的字符串 |

4. 特殊

• [\u4E00-\u9FA5]：中文字符
• ?: 表示不捕获括号中的内容，不能使用反向引用，如$1，可以提高执行效率
  Note:$1表示正则表达式中小括号括起来的分组，一个小括号代表一个分组，多重括号时，先外括号，后内括号

var pat3 = /^(\w+) (\d+),(\d+)/i;
var str0 = 'Feb 12,2020';
console.log(str0.match(pat3));	//["Feb 12,2020", "Feb", "12", "2020"]
console.log(RegExp.$1);	//'Feb'
console.log(RegExp.$2);	//'12'
console.log(RegExp.$3);	//'2020'
var pat4 = /^(\w+) (?:\d+),(?:\d+)/i;
console.log(str0.match(pat4));	//["Feb 12,2020", "Feb"]
console.log(RegExp.$1);	//'Feb'
console.log(RegExp.$2);	// 没有输出
console.log(RegExp.$3);	// 没有输出

错误与调试

js 错误处理

1. try——允许我们定义在执行时进行错误测试的代码块。
2. catch——定义当 try 代码块发生错误时，所执行的代码块。
   Note: try catch 成对出现

try{
	code...	//异常抛出
}catch(event){
	code...	//异常捕获与处理
}finally{
	code...	//结束处理
}

3. throw——停止并抛出错误，生成一个错误消息。

4. finally——不论之前的 try 和 catch 中是否产生异常都会执行该代码块。
   错误的抛出使用示例：

测试输入是否是0-100之间的数字

提交测试

调试

调试工具：

1. console.log()
2. 设置断点
3. debugger 关键字，在js代码中写入debugger关键字，和在调试工具中设置断点效果一样

code...
debugger;
code....

表单form

用js进行HTML表单验证。

非空验证

	

		
非空验证
		
		
	

Note：　表单自动验证

required属性表示必需输入，如果输入为空，会阻止表单提交。

数字验证

	

		
数字验证
		
		
	

数据验证

• 典型的数据验证有：
  • 必需字段输入?
  • 输入合法数据?
  • 正确输入规定文本或数字?
• 数据验证方式
  • 服务端数据验证
  • 客户端数据验证

约束验证

约束验证基于：

1. HTML 输入属性

   性	描述
   isable	输入元素不可用
   attern	输入的模式
   equired	输入元素必需
   utocomplete	根据历史记录自动填充
   ovalidate	提交表单时不应该验证 form 或 input 域
   utofocus	在页面加载时，域自动地获得焦点
   ormaction/formenctype/formmethos/formtarget	覆盖 元素中的属性，用于 submit 和 image
   ormnovalidate	元素在表单提交时无需被验证，用于 submit
   ax/min	输入最大最小值
   eight/width	规定image类型的宽高
   ist	规定输入域的 datalist
   ultiple	多选文件，适用于email 和 file
   laceholder	简短的提示预先显示在输入域上
   tep	规定合法的数字间隔，适用于number, range, date, datetime, datetime-local, month, time 和 week类型

2. CSS 伪类选择器

• 语法：
  选择器：伪类名｛｝
  示例：

a:link{	color:#f00; }

选择器	描述
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"required"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

3. DOM 属性和方法——验证API

• 方法：

  • checkValidity()——数据合法true，非法false
  • setCustomValidity()——设置 input 元素的 validationMessage 属性
    设置后，validity.customError 会变成true， checkValidity 总是会返回false。
    Note：取消自定义提示
    • setCustomValidity('')
    • setCustomValidity(null)
    • setCustomValidity(undefined)

• 属性

  • validity——返回 input 输入值是否合法
    |属性 |描述 |
    |--- |--- |
    |customError |如果设置了自定义的 validity 信息。 |
    |patternMismatch|如果元素的值不匹配它的模式属性。 |
    |rangeOverflow |如果元素的值大于设置的最大值。 |
    |rangeUnderflow |如果元素的值小于它的最小值。 |
    |stepMismatch |如果元素的值不是按照规定的 step 属性设置。 |
    |tooLong |如果元素的值超过了 maxLength 属性设置的长度。|
    |typeMismatch |如果元素的值不是预期相匹配的类型。 |
    |valueMissing |如果元素 (required 属性) 没有值。 |
    |valid |如果元素的值是合法的。 |
    示例：

  document.getElementById("demo").validity.rangeOverflow
  

  • validationMessage——浏览器错误提示信息
  • willValidate——指定 input 是否需要验证

保留关键字

1. js保留
2. js对象、属性和方法
3. java保留
4. windows保留
5. html事件句柄
6. const

this关键字

this 不是固定不变的，它会随着执行环境的改变而改变。

对象方法中的this

对象方法中， this 指向调用它所在方法的对象。
示例：

var person ={
	firstName:"Sam",
	lastName:"Hammington",
	getName: function(){	return this.firstName+" " +this.lastName; }
};

this就指向person这个对象。

单独使用this

单独使用 this，则它指向全局(Global)对象。
在浏览器中指代window对象。

函数中的this

1. 默认
   函数的所属者默认绑定到 this 上;在浏览器中指代window对象。

2. 严格模式
   严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

事件中的this

指向了接收事件的 HTML 元素。

显示函数绑定

函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。允许切换函数执行的上下文环境（context），即 this 绑定的对象。

let和const

1. let 声明的变量只在 let 命令所在的代码块内有效。
   |变量区别 |var |let |
   |--- |--- |--- |
   |块级作用域 |no |yes |
   |属于window对象 |yes |no |
   |重置变量 |任意重置 |*(1)(2)(3)(4) |
   |变量提升 |yes |no |

(1) 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量
(2) 在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量
(3) 在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量
(4) let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

块级作用域：

{
	let x;
}

x 只在{}之间有效，只有let有这个特性。

Note：重新定义变量问题，使用var定义，不满足块级作用域，块中和块外会重新覆盖定义变量
在循环体中使用let关键字定义变量，更加方便。

属于window对象？：

var car = "BMW";
let veh = "Volvo";
window.car;	//可访问
// window.vhe不可访问

2. const 声明一个只读的常量，声明时必须进行初始化，一旦声明，常量的值就不能改变。

• 块级作用域！
• 不能和它所在作用域内的其他变量或函数拥有相同的名称！
• 不能变量提升！

const 的本质: const 定义的变量并非常量，并非不可变，它定义了一个常量引用一个值。

• 使用 const 定义的对象或者数组，其实是可变的。
• 但不能对常量对象／数组重新赋值

void关键字

指定要计算一个表达式但是不返回值。

javascript:void(0)

在超链接中使用，链接不会发生任何事件。

单击		//无反应
警告		//有警告框

Note：与'#'的区别

• '#'表示的是'#top'，是返回页面顶端；
• 'javascript:void(0)'是死链接，不会发生任何反应。

JSON (JavaScript Object Notation)

一种轻量级的用于存储和传输数据的数据交换格式，用于服务端向网页传递数据 。

语法规则

1. 键值对数据格式
2. 逗号分隔
3. {}-保存对象
4. []-保存数组
   示例：

{"person":[	//中括号为数组
	{"firstName":"Sam",lastName:"Hammigton"	},	//"":""----键值对，键和值都需要引号
	{"firstName":"William","lastName":"Hammington"}	//{}代表JSON对象
]}

上面这个示例为包含两个对象的名为 "person" 的数组，每个对象有"firstName"和"lastName"。

从JSON字符串转换为js对象

用字符串保存json格式的数据，然后用JSON.parse()转换。

var str = '{"person":[' + 	
	'{"firstName":"Sam",lastName:"Hammigton"	},'+	
	'{"firstName":"William","lastName":"Hammington"} ]}';
var obj = JSON.parse(str);	//转换为js对象

从js对象转换为JSON字符串

JSON.stringify()函数可以转换。

HTML DOM文档对象模型

DOM节点

节点：HTML文档节点，HTML元素节点，HTML属性节点，文本节点，注释节点

document 对象

HTML文档载入后，就成为document对象，是HTML文档的根节点

document对象的属性/方法

查找HTML元素

通过id

var x = document.getElementById('demo').
若没有则返回null。

通过标签名tag

var y = x.getElementByTagName('span').可以通过已获取元素，查找其所以子元素 。

通过类名class

var z = document.getElementByClassName('prev').

改变HTML元素

改变输出流

document.write() 直接向HTML输出流写入内容
HTML页面加载过后使用，会覆盖整个页面。

改变元素内容

1. innerHTML
   document.getElementById('demo').innerHTML = "hello change!";

改变元素属性

document.getElementById('demo'). = newAttribute;
为需要改变的属性名称，如 src 等

改变CSS样式

getElementById('demo').style.property = newProperty
样式例如 font-size 等。

事件

事件是指发生在 html 元素上的事件（浏览器行为或用户行为），可以用 js 触发事件。
例如：

• html 页面加载完成；
• 用户点击事件。

常见事件

1. 鼠标事件

事件	描述
ondbclick	双击
onmousedown	1.鼠标按下
onmouseup	2.鼠标松开
onclick	3.点击事件
onmouseenter	鼠标移入
onmouseleave	鼠标移出
onmouseover	鼠标移过
onmouseout	鼠标移出
oncontextmenu	3.右键打开上下文菜单

Note：

• enter和leave配对使用，enter和over，leave和out的区别在于 onmouseenter/onmouseleave 不支持事件冒泡。
• 单击事件（左/右键）发生顺序为表中1，2，3。

2. 其他事件
   |事件 |描述 |
   |--- |--- |
   |onkeydown |键被按下 |
   |onload |页面加载完成 |
   |onchange |元素改变 |

EventListener事件监听

1. addEventListener()
   可以为任意DOM对象（包括window）添加事件监听，可以更简单的控制事件（冒泡与捕获）。
   element.addEventListener(event, function, useCapture);

   • event 不加 on 前缀
   • useCapture :默认为false, 冒泡传递；true 为 事件捕获。

2. removeEventListener()
   移除事件的监听。

事件冒泡与捕获

• 事件冒泡：从内向外
• 事件捕获：从外向内

事件绑定bind()

定义一个绑定函数，处理各种浏览器下的事件！！

DOM元素操作

创建和添加新元素

创建

• var x = document.createElement(tagName)//创建新元素
• var txt = document.createTextNode("textContent")//创建文本节点

添加到末尾

parent.appendChild(newChild)

插入到中间

parent.insertBefore(newChild, beforeChild)

移除元素

需要找到需移除元素的父元素，从父元素移除子元素。
parent.removeChilde(child)

替换元素

parent.replaceChild(newChild, oldChild)

DOM集合与节点列表

HTML collection对象

类似包含 HTML 元素的一个数组，但不是数组，不能使用数组方法。

获取方法：

1. document.getElementsByTagName(tagName)
2. children 属性

访问对象里的元素：

1. 索引[index]
2. 索引方法：item(index)
3. 名称：[name/id]
4. 名称方法：namedItem(name/id)

length属性

元素数量

HTML NodeList节点列表

类似collection

获取方法

1. childNodes 属性，返回的内容包含了文档、元素、文本节点
2. querySelectorAll(tagName) 方法

getElementsByClassName()——部分旧版浏览器返回nodelist，更新的浏览器返回的是collection

collection与NodeList区别

区别点	Collection	NodeList
集合内容	HTML元素集合	文档节点集合（元素、属性、文本节点）
访问方式	索引、名字、方法	索引

JS对象

对象详解

对象拥有属性和方法。

• 访问属性： obj.propertyName
• 访问方法： obj.methodName()

创建对象

直接创建

var person = new Object();//新建实例
person.firstName='Jhon';//添加属性
...

var person = {
	firstName: 'Jhon',
	...
};

使用函数对象构造器创建

constructor

function Person(firstName, lastName){
	this.firstName = firstName;
	this.lastName = lastName;
}
var obj1 = new Person('Jhon', 'Zhang');//新建实例

prototype原型对象

所有的 JavaScript 对象都从 prototype（原型对象）中继承属性和方法。
在已有构造器的对象中，必须从构造器函数中添加属性，不能直接添加：

Person.eyecolor = 'blue';//不可以！！！

prototype继承

所有的 JS 对象 Date，Array 等都是位于原型链顶端的 Object 的实例。
JavaScript 对象有一个指向一个原型对象的链。在访问属性时，会搜寻对象的属性，及其上层原型对象的属性。

添加属性

Person.protorype.eyecolor = 'blue';

添加方法

Person.prototype.getName = function(){
	return this.firstName + ' ' + this.lastName;
};

Number对象

！！所有js数字都是64位浮点格式
精度：整数精度为15位，小数最多为17位（不精确）

八进制：033
十六进制：0x34
toString方法进制转换

var num = 134;
num.toString(16);//转换为16进制字符串
num.toString(8);//转换为8进制字符串
num.toString(2);//转换为2进制字符串

数字属性

属性	描述
MAX_VALUE	可表示的最大数
MIN_VALUE	...
NEGATIVE_INFINITY	负无穷，溢出时返回
POSITIVE_INFINITY	正无穷，溢出时返回
NaN	非数字
prototype	允许向数字对象添加属性和方法
constructor

ES6新增属性：

1. EPSILON:表示 1 与大于 1 的最接近 1 的 Number 之间的差
2. MIN_SAFE_INTEGER: JavaScript中最小的安全的 integer 型数字 (-(2^53 - 1))
3. MAX_SAFE_INTEGER: JavaScript 中最大的安全整数（2^53 - 1）

数字方法

方法名	描述
num.toExponential(x)	转换为指数计数法,x可选表示小数位数，返回值为String类型
num.toFixed(x)	转换为指定位数的小数，返回值为String类型
num.toPrecision(x)	转换为指定长度格式的数字，返回值为String类型
num.toString(x)	转换为指定进制的数字，返回String类型
num.valueOf()	数字的原始值，Number类型
Number.isFinite(num)	num 是否为无穷大

1. Number.isInteger(num): 是否是整数
2. Number.isSafeInteger(num): 是否是安全整数

String对象

字符串属性

• length 获得字符串长度。
• constructor 返回创建字符串属性的函数。
• prototype 允许向对象添加属性和方字符串

字符串方法

方法	描述
charAt()	返回索引位置的字符
charCodeAt()	返回指定索引位置字符的 Unicode 值
fromCharCode()	将 Unicode 转换为字符串
indexOf()	返回字符串中检索指定字符第一次出现的位置
lastIndexOf()	返回字符串中检索指定字符最后一次出现的位置
match()	找到一个或多个正则表达式的匹配
search()	检索与正则表达式相匹配的值
startsWith()	查看字符串是否以指定的子字符串开头
replace()	替换与正则表达式匹配的子串
split()	把字符串分割为子字符串数组
slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
substr()	从起始索引号提取字符串中指定数目的字符
substring()	提取字符串中两个指定的索引号之间的字符
concat()	连接两个或多个字符串，返回连接后的字符串
repeat()	复制字符串指定次数，并将它们连接在一起返回
localeCompare()	用本地特定的顺序来比较两个字符串
toUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toString()	返回字符串对象值
trim()	移除字符串首尾空白
valueOf()	返回某个字符串对象的原始值

Note :
１.　match()　——　正则表达式后面有 g 时，才会匹配所有，没有 g 则只匹配一次。匹配失败返回null。

/*create string-----1*/
var str1 = "Sam Hammington";
console.log(typeof str1);	//string
			
/*create string-----2, by new String("")*/
var str2 = new String("William Hanmmington");
console.log(typeof str2);	//object
			
/*字符位置-------------charAt(index);*/
console.log(str1.charAt(5));	//a
			
/*字符的unicode码------charCodeAt(index)*/
console.log(str1.charCodeAt(5));	//97
			
/*将unicode码转换为字符------String.fromCharCode(unicode);*/
console.log(String.fromCharCode(98));	//b
console.log(typeof String.fromCharCode(98));	//返回string类型
			
/*检索某字符首次出现的index-------indexOf("");*/
console.log(str1.indexOf("m"));		//2
			
/*检索某字符最后一次出现的index------lastIndexOf("");*/
console.log(str1.lastIndexOf("m"));		//7
			
/*查找一个或多个正则表达式匹配，返回值为匹配的字符串数组------------match(//g)*/
//--Note : 正则表达式后面有 g 时，才会匹配所有
//--没有 g 则只匹配一次。匹配失败返回null。
console.log(str1.match(/am/g));	//["am","am"]
console.log(str1.match(/am/));	//["am"]
			
/*检索匹配值----------------search()，可以用字符串或正则表达式作为参数*/
//检索失败返回-1，否则返回查找到的首个匹配的索引值
console.log(str1.search(/ham/i));	//4
			
/*是否以某字符串开头--------------startWith("")*/
//返回值为布尔值，true or false
console.log(str1.startsWith("Sam"));	//true
			
/*替换匹配的字符串---------replace(//)，可以用字符串或正则表达式作为参数*/
//返回替换后的新字符串，g表示替换所有匹配的字符串，否则仅替换首个，原字符串的值不会改变
console.log(str1.replace(/am/ig,"un"));	//Sun Hunmington
console.log(str1);	//Sam Hammington
			
/*分割字符串----------------split(''),参数为分割符号*/
console.log(str1.split(' '));	//以空格分隔，["Sam","Hammington"]
			
/*提取子串*/
//----------1.slice(start,end)，参数为index，start为必需
console.log(str1.slice(2,9));	//m Hammi
//----------2.substr(start,num)，从start开始提取num个字符
console.log(str1.substr(5,5));	//ammin
//----------3.substring(start,end)
console.log(str1.substring(1,6));	//am Ha
			
/*连接字符串------------------------str0.concat(str1,str2,....)*/
//将str0,str1,str2,....全都连接起来
console.log(str1.concat(" ", str2));	//Sam Hammington William Hammington
			
/*重复字符串并连接-----------repeat(times)*/
console.log(str1.repeat(3));	//Sam HammingtonSam HammingtonSam Hammington
			
/*大小写转换*/
//to大写
console.log(str1.toUpperCase());	//SAM HAMMINGTON
//to小写
console.log(str1.toLowerCase());	//sam hammington
			
/*toString()*/
console.log(str1.toString());	//Sam Hammington
			
/*去除字符串首尾空格*/
var str3 = "   little bently    ";
console.log(str3.trim());	//little bently
			
/*字符串对象的原始值*/
console.log(str2.valueOf());	//William Hammington

Date对象

初始化Date对象

1. new Date()
2. new Date(millisecondes) 返回毫秒
3. new Date(dateString) //例如："Feb 25, 2020 10:05:18"
4. new Date(year, month, day, hours, minutes, seconds, milliseconds) 输入参数设置日期，可选

Date属性

• prototype
• constructor

Date方法

get___方法

• getFullyear() 年
• getMonth() 月(0-11)，显示时记得 +1
• getDate() 日(1-31)
• getHours() 时(0-23)
• getMinutes() 分(0-59)
• getSeconds() 秒(0-59)
• getMilliseconds() 毫秒
• getTime() 1970.1.1到当前时间的毫秒数

set___方法

设置时间

其他方法

• date.toDateString() 将日期部分转换为字符串
• date.toTimeString()
• date.toString()
• date.toLocaleDateString()
• date.toLocaleTimeString()
• date.toLocaleString()
• date.toISOString() 按ISO格式返回日期：YYYY-MM-DDTHH:mm:ss.sssZ
• date.toJSON() JSON数据格式
• date.toUTCString()
• valueOf() 毫秒数原始值，Number

数组对象

用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组创建

1. var arr = new Array()
2. var arr = new Array(1,2,3)
3. var arr = [1, 2, 3]

访问数组

index索引访问

数组属性

• prototype
• constructor
• length

数组方法

方法	描述
Array.isArray(arr)	判断是否是array对象
arr.concat(arr1,...)	连接多个数组 ，返回新数组
arr.join()	将数组元素连接成一个字符串，逗号分隔元素
arr.toString()	把数组转换为字符串，逗号分隔元素
arr.copyWith(tar, s, e)	将从 start 开始到 end 索引位置的元素复制到 target 位置
arr.every(func(cV,ind,arr),tV)	检测所有数值元素是否符合条件。cV必需（当前元素），ind索引。返回boolean
arr.some()	检测部分元素
arr.filter(func(cV,ind,arr),tV)	过滤满足条件的数值元素，返回符合条件的新数组。
arr.forEach(func(cV,ix,arr),tV)	调用数组的每个元素，并将元素传递给回调函数。tV一般为"this"值
arr.find(func(cV,ind,arr),tV)	返回满足func的第一个元素
arr.findIndex(func(c,ix,ar),tV)	返回满足func的第一个元素索引
arr.map(func(cV,ind,arr),tV)	返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值
arr.reduce(func(cV,ind,arr),tV)	接收一个函数作为累加器，数组从左到右计算为一个值
arr.reduceRight()	接收一个函数作为累加器，数组右到左计算为一个值
arr.fill(value,s,e)	用value填充数组从 s 到 e 的元素，ES6
arr.includes(item,from)	判断是否包含 item，返回 boolean，ES6，from 可选
arr.indexOf(item,from)	返回第一个 item 的索引，无则返回-1
arr.lastIndexOf(item,from)	返回最后一个 item 的索引，无则返回-1
arr.keys()	从数组创建一个包含数组键的可迭代对象，对象包含数组的键
arr.Entries()	返回数组的可迭代对象，对象包含数组的键值对
arr.pop()	删除最后一个元素， 修改原数组
arr.shift()	删除第一个元素
arr.splice(index, num, it1,..)	删除或者添加元素，修改原数组
arr.push()	添加元素到末尾 ，在原数组上操作
arr.unshift()	向数组首位添加新元素
sort()	排序
reverse()	倒序
slice()	选取数组的的一部分，并返回一个新数组。
valueOf()	原始值

boolean对象

boolean值为 false : 无初始值/0/-0/null/""/false/undefined/NaN

属性

• constructor
• prototype

方法

• toString()
• valueOf()

Math对象

执行常见的算数任务。

属性

常数值：PI/E/LN2/LN10/LOG2E/LOG10E/SQRT1_2/SQRT2

方法

tan()/sin()/cos()/exp()/pow(x,y)/log()/sqrt()/

方法	描述
abs(x)	绝对值。
acos(x)	反余弦值。
asin(x)	反正弦值。
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度（介于 -PI/2 与 PI/2 弧度之间）。
ceil(x)	对数进行上舍入。
floor(x)	对 x 进行下舍入。
round(x)	四舍五入。
max(x,y,z,...,n)	返回 x,y,z,...,n 中的最高值。
min(x,y,z,...,n)	返回 x,y,z,...,n中的最低值。
random()	返回 0 ~ 1 之间的随机数。

RegExp对象

正则表达式（regular expression）的简写。

属性

• constructor
• global //\g
• ignoreCase //\i
• lastIndex //用于规定下次匹配的起始位置
• multiline //\m
• source //匹配模式

HTML BOM浏览器对象模型

window对象

表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。
全局函数是 window 对象的方法。

window尺寸

1. IE/Chrome/Firefox/Opera/Safari内部高度或宽度: window.innerHeight/innerWidth
2. IE8-5: document.documentElement.clientHeight/clientWidth
3. document.body.clientHeight/clientWidth

//包含所有浏览器
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

如果文档包含框架（ 或