JavaScript学习笔记

JavaScript

• 概念：一门客户端脚本语言

  • 运行在客户端浏览器中的。每一个浏览器都有 JavaScript 的解析引擎
  • 脚本语言：不需要编译，直接就可以被浏览器解析执行了

• 功能：可以来增强用户和 html 页面的交互过程，可以来控制 html 元素，让页面有一些动态的效果，增强用户的体验。

JavaScript发展史

1. 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验。命名为 ： C–，后来更名为：ScriptEase
2. 1995年，Netscape(网景)公司，开发了一门客户端脚本语言：LiveScript。后来，请来SUN公司的专家，修改LiveScript，命名为JavaScript
3. 1996年，微软抄袭JavaScript开发出JScript语言
4. 1997年，ECMA(欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，就是统一了所有客户端脚本语言的编码方式。

• JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)
  • ECMAScript：客户端脚本语言的标准

与html结合方式

• 内部JS：定义<script>，标签体内容就是 js 代码

  • <script> js代码 </script>

• 外部JS：定义<script>，通过 src 属性引入外部的 js 文件

  • <script src="js文件相对路径"></script>

• 注意

  1. <script>可以定义在 html 页面的任何地方。但是定义的位置会影响执行顺序。
  2. <script>可以定义多个，在一个script中如果前面有异常，则此script中后面的代码不执行，但不影响其它的script代码块
  3. 一般将外部导入的写在前面head中，自己编写的写在最后

基本语法

注释

• 单行注释：//注释内容
• 多行注释：/*注释内容*/

数据类型

原始数据类型（基本数据类型）

• number：数字。整数、小数、NaN（not a number 一个不是数字的数字类型）
• string：字符串。（字符串形如：“abc”、“a”、‘abc’）
• boolean：true 和 false
• null：表示一个空对象，通常用作一个空引用或一个空对象的预期（占位符）
• undefined：未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined

复杂数据类型（引用数据类型）

• object

  • var obj = {};
  • var obj = new Object();

• function

• array

数据类型的判断

• typeof 运算符：获取变量的类型，返回字符串。（注：null运算后得到的是object）
  • typeof(a);
  • typeof a;

<script>
	typeof(7); // number
	typeof("7"); // string
	typeof(true); // boolean
	typeof(null); // object
	typeof(undefined); // undefined
	typeof(NaN); // number

	console.log(null == undefined) // true
	console.log(NaN == NaN) // false，NaN自身不相等
	console.log(isNaN(NaN)) // true，判断一个变量是不是NaN
</script>

数据类型的转换

• 转数值

  • Number()：可以转整数和浮点数。

    • 如果字符串里除了数字还有其它则输出NaN
    • Number(undefined)：结果为NaN
    • Number("") 和 Number(" ")：结果为0，（不论双引号里有多少空格）
    • Number(true)：结果为1，反之false为0
    • Number(null)：结果为0

  • parseInt()：可以转整数（浮点数的小数点后面的会被省去）

    • parseInt("123abc123")：结果为123（从左到右识别字符串，取出未到字符时的数字）
    • parseInt("abc123")：结果为NaN
    • 空字符串为NaN
    • 布尔值为NaN
    • null为NaN
    • undefined为NaN

  • parseInt(num, 指定进制)：将指定进制的数字转为十进制（如果输入有错误，则输出NaN）

  • parseFloat()：可以转换为浮点数

• 转字符串

  • String()：所有数据都可以转字符串，输出加引号
  • str.toString()：对null和undefined不能使用
  • str.toString(进制)：将str转为对应进制的值

<script>
	var num = 15;
	alert(num.toString(16)); //输出f，不能直接数字.toString()
</script>

• 转布尔值
  • Boolean()
    • 数值类型只要不为0和NaN，转换后为true
    • 字符串类型只要不为""，转换后为true
    • null和undefined：转换后为false
    • 所有对象都为 true

变量

• 变量：一小块存储数据的内存空间

• Java语言是强类型语言，而JavaScript是弱类型语言。

  • 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据。
  • 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。

• 语法：var 变量名 = 初始化值;

  • 变量名命名规范
    • 不能以数字开头
    • 不能出现特殊符号，除（_ 和 - 和 $）
    • 不能使用关键字
    • 命名区分大小写
    • 使用小驼峰命名法

运算符

一元运算符：只有一个运算数的运算符++、--、+(正号)、-、!

• ++、--：自增、自减

  • ++(--)在前，先自增(自减)，再运算
  • ++(--)在后，先运算，再自增(自减)

• +(-)：正负号

• string 转 number：按照字面值转换。如果字面值不是数字，则转为 NaN（不是数字的数字）

  • +'s'+2：输出NaN
  • 's'+2：输出s2
  • !!""+"33"：输出false33

• boolean 转 number：true 转为1，false 转为0

• 注意：在JS中，如果运算数不是运算符所要求的类型，那么 js引擎会自动的将运算数进行类型转换

算数运算符：+、-、*、/、%、++、--

赋值运算符：=、+=、-=、*=、/=

比较运算符：>、<、>=、<=、==、===(全等于)、!=、!==

• 比较方式

  1. 类型相同：直接比较

     • 字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。

  2. 类型不同：先进行类型转换，再比较

     • ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回 false

逻辑运算符：&&、||、!

• 短路

  • 1 && 2 && 4：返回4
  • 1+1 && 2 && !false：返回true
  • 1+1 && 0 && true：返回0

• 其他类型转boolean：

  1. number：0 或 NaN 为假，其他为真
  2. string：除了空字符串""，其他都是 true
  3. null&undefined：都是 false
  4. 对象：所有对象都为 true

三元运算符：条件? 表达式1(true): 表达式2(false);

• 判断条件，如果是true则表达式1，如果是false则表达式2；

var a = 3;
var b = 4;
var c = a > b ? 1:0;

运算符优先级

一元运算符 > 算术运算符 > 比较运算符 > 逻辑运算符 > 三元运算符 > 赋值元素符

流程控制语句

• if...else...

• switch

  1. 在java中，switch语句可以接受的数据类型：byte、int、short、char、枚举(1.5)、String(1.7)
  2. switch(变量): case 值:
  3. 在JS中,switch语句可以接受任意的原始数据类型

• while

• do...while

• for

JS特殊语法

1. 语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略 (不建议)
2. 变量的定义使用 var 关键字，也可以不使用
   • 用： 定义的变量是局部变量
   • 不用：定义的变量是全局变量(不建议)

基本对象

内置对象

• 数据对象：Number、String、Boolean
• 组合对象：Array、Math、Date
• 高级对象：Object、Error、Global、Function、RegExp

对象

对象概念

• 无序属性的集合
• 属性值原始值，对象或者函数

创建对象

• var obj=new Object();
• var obj={};：字面量创建方法

添加值

• obj.prop=""
• obj[prop2]=""：prop2必须字符串，如果是变量那么会隐式转toString();

遍历对象

• for in
  • Object.keys()
  • Object.values()
  • Object.entries()

var obj={
	name:"yan",
	age:20,
	address:"北京",
	eat:function(){
		console.log("我正在吃饭");
	},
	car:{
		benci:"",
		aodi:"A8"
	}
}
console.log(obj.name);
obj.eat();
obj.name="wang";
console.log(obj.name);
console.log(obj["car"]);
for(var a in obj){
	console.log(obj[a])
}
console.log(Object.keys(obj));
console.log(Object.values(obj));
console.log(Object.entries(obj));

Function：函数(方法)对象

声明

• 方法一：命名函数（函数可以放在任何位置，调用不分先后）

function 函数名(形式参数列表){
	方法体;
}
// 实例
function fun1(a,b) { alert(a+b); }
fun1(3,4);	//窗口上弹出7

• 方法二：匿名函数（必须先声明后调用）

var 函数名 = function(形式参数列表){
	方法体;
}
// 实例
var fun2 = function(a,b) { alert(a+b); }
fun3(3,4);	//窗口上弹出7

• 方法三：（不推荐使用）

var 函数名 = new Function(形式参数列表,方法体);
// 实例
var fun1 = new Function("a","b","alert(a);");
fun1(3,4);	// 窗口上弹出3

参数

• length 代表形参的个数

var fun1 = new Function("a","b","alert(a);");
alert(fun1.length);	//窗口上弹出2

• 参数列表可以多写

function fun1(a,b){ alert(a,b); }
fun1(1); // 1 undefined
fun1(1,2); // 1 2

• 在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数

function add(){
	var sum = 0;
	for(var i = 0; i < arguments.length; i++){
		sum += arguments[i];
	}
	return sum;
}
var sum = add(1,2,3);
alert(sum); // 6

• 特点

  • 方法定义时，形参的类型不用写，返回值类型也不写。
  • 方法是一个对象，如果定义名称相同的方法，会覆盖
  • 在JS中，方法的调用只与方法的名称有关，和参数列表无关

• 拓展：立即执行函数（匿名函数）

(function(形参){}(实参))
(function(){})()
+function(){}()
!function(){}()

Array：数组对象

创建

1. var arr = new Array(元素列表);
2. var arr = new Array(默认长度);
3. var arr = [元素列表];

var arr1 = new Array(); // 声明一个空数组
var arr2 = new Array(3); // 定义一个长度为3的数组
var arr3 = new Array(1,2,3); // 定义一个数组，并赋值
var arr4 = [1,2,3,4]; // 字面量定义法

增删改查

• 添加值

  • 数组名[索引值]="";

• 修改值

  • 数组名[指定位置]="";

• 获取值

  • 数组名[指定位置]

方法

• concat(item1,item2...)：合并数组，返回新数组arr1.concat(item)，（item可以为变量也可以为数组）

• join(分隔符)：将数组中的元素按照指定的分隔符拼接为字符串，默认,

• pop()：删除数组末尾的值，返回删除的值；如果对空数组进行操作，则返回undefined

• push()：向数组的末尾添加一个或更多元素，并返回新的长度

• shift()：删除数组第一个元素的值，返回删除的值

• unshift(value)：给数组开始位置添加值，并返回新的长度

• splice(startIndex, deletCount, values)：修改增加元素到原数组，返回一个数组，存放被删除的元素

  • startIndex：开始处理数据的位置（包含开始的位置）
  • deletCount：删除的数量
  • values：要添加的值

• slice(startIndex, endIndex)：截取指定位置数组元素，返回的数组，内容为截取出来的元素

  • startIndex：开始位置（如果为负数，那么倒数第一位为-1，从右向左数，负几就是倒数第几位开始）
  • endIndex：结束位置（如果省略，会截取到元素的最后一位）

• sort()：按 unicode 编码排序

• reverse()：数组反转

document.write(arr.join());	//不传参数，默认按逗号进行分隔输出'1,2,3'
document.write(arr.join("-"));	//按'-'进行分隔输出'1-2-3'

var arr = new Array(1,2,3);
document.write(arr.join());	//1,2,3
arr.push(6);
document.write(arr.join());	//1,2,3,6

var arr = [13, 40, 5, 6]
var res = arr.sort(function(a,b){
	return b-a; // 降序
})

属性

• length：数组的长度（arr.length：以0为开始下标）

特点

1. 数组元素的类型可变的。var arr = [1,"abc",true];
2. 数组长度可变的。
3. 索引值从0开始，数组长度为最大索引值+1

var arr = new Array(3);
arr[10] = 'hello';
document.write(arr[10]); //显示hello
document.write(arr[9]); //显示undefined
alert(arr.length); //输出11

二维数组

• arrEr=[[],[],[]]

• 添加值

  • arrEr[一维索引值][二维索引值]=num

• 获取二维数组的值

  • arrEr[一维索引值][二维索引值]

• 多维数组

  • arr=[ [ [[],[]] ,[]] ,[] ]

数组中的比较运算

• [] == []：false
• ![] == false：true
• [] == false：true（Nmber([])结果为0，[]转为字符串为""，所以为false）
• Boolean([])：true

字符串String

方法

• length：字符串的长度

• charAt(index)：返回指定位置的字符（索引从0开始），一般长度为1（如果指定的位置超出了字符串的长度，那么返回空）

• indexOf(subStr, startIndex)：查找字符串，存在返回字符第一次出现的位置，否则返回-1

  • subStr：查找的字符串
  • startIndex：开始查找的位置（超出字符长度返回-1；如果是负数或省略，则从0开始）

• str.substr(startIndex,length) ：截取字符串（截取的字符串包含开始位置的字符）

  • startIndex：开始的位置（如果是负数，从倒数开始，倒数第一个为-1；如果大于字符的长度，那么返回空）
  • length：截取的字符串的长度（如省略，返回从开始位置到结束的所有字符）

• str.substring(startIndex,endIndex)：截取字符串（截取的字符串包含开始位置的字符，不包含结束位置的字符）

  • startIndex：开始的位置（如果是负数，从0开始）
  • endIndex：结束的位置（如省略，截取从开始到结束的所有字符）
  • 注意：endIndex小于startIndex，那么先交换位置，然后在执行

• str.slice(startIndex,endIndex)：截取字符串（截取的字符串包含开始位置的字符，不包含结束位置的字符）

  • startIndex：开始的位置（如果是负数，从倒数开始，倒数第一位为-1）
  • endIndex：结束的位置（如省略，截取从开始到结束的所有字符）
  • 注意：endIndex小于startIndex，返回空

• str.split(delimit,limit)：按指定字符将字符串转成数组（返回是一个数组）

  • delimit：分隔符（如果是 "" 那么按字符分割）
  • limit：分割次数（如果省略，无限分割，分割完为止）

• str.replace(regexp,elem)：将指定的字符替换

  • regexp：正则 或者是 字符（如果是字符，那么只会替换第一个）
  • elem：替换对象

• str.toUpperCase()：将字符串中的字母全部转大写

• str.toLowerCase()：将字符串中的字母全部转小写

Date：日期对象

创建

• var date = new Date();

方法

• toLocaleString()：返回当前date对象对应的时间本地字符串格式
• getTime()：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差
• getFullYear()：返回完整年份
• getMonth()：返回月份 0-11
• getDate()：返回日 1-31
• getDay()：返回星期 0-6
• getHours()：返回时 0-23
• getMinutes()：返回分 0-59
• getSeconds()：返回妙 0-59

设置方法

• setFullYear(year，month，day)

  • year：必需，表示年份的四位整数

  • month：可选,介于 0 ~ 11 之间：如果不填，取系统当月

    • -1 为去年的最后一个月，12 为明年的第一个月，13 为明年的第二个月

  • day：可选,表示月中某一天的数值。如果不填，取系统当日

    • 用本地时间表示。介于 1 ~ 31 之间
    • 0 为上个月最后一天，-1 为上个月最后一天之前的天数
    • 如果当月有 31 天：32 为下个月的第一天
    • 如果当月有 30 天：32 为下一个月的第二天

• setHours(hour,min,sec,millisec)

  • hour：小时
  • min：分钟
  • sec：秒
  • millisec：毫秒

var date = new Date();
document.write(date); //Wed Jan 01 2020 09:00:00 GMT+0800 (中国标准时间)
document.write(date.toLocaleString()); //2020/1/1 上午9:00:00

Math：数学对象

• Math.方法名();：Math对象不用创建，直接使用。

方法及属性

• random()：返回 [0, 1) 之间的随机数。
• ceil(n)：对n进行上舍入。（3.14 -> 4）
• floor(n)：对n进行下舍入。（3.14 -> 3）
• round(n)：把n四舍五入为最接近的整数。（3.14 -> 3）
• pow(x, y)：返回x的y次方
• sqrt(x)：返回数的平方根
• 属性：Math.PI

RegExp：正则表达式对象

• 正则表达式：定义字符串的组成规则。

修饰符

• i：匹配的时候不区分大小写
• g：全局匹配
• m：多行匹配

语法

• 单个字符:[ ]

  • [a]：单个字符a
  • [ab]：a 或 b
  • [a-zA-Z0-9_]：a到z，A到Z，0到9，_（中的一个）
  • [^a-c]：匹配除了括号内a-c的任意字符
  • \d：单个数字字符[0-9]（中的一个）
  • \w：单个单词字符[a-zA-Z0-9_]（中的一个）
  • \s：空格
  • \W：除了\w之外的任意字符
  • \D：除了数字之外的任意字符

• 量词符号

  • ?：表示出现0次或1次
  • *：表示出现0次或多次
  • +：表示出现1次或多次
  • {m,n}：表示 m<= 数量 <= n
    • m如果缺省： {,n}:最多n次
    • n如果缺省：{m,} 最少m次

• 开始结束符号

  • ^：开始
  • $：结束

创建

1. var reg = new RegExp("正则表达式");
2. var reg = /正则表达式/g;

var reg1 = new RegExp("\\w{1,10}");
var reg2 = /\w{1,10}/;
alert(reg1); // /\w{1,10}/
alert(reg2); // /\w{1,10}/
var reg3 = /^\w{1,10}$/;

方法

1. reg.test(str)：验证指定的字符串是否符合正则定义的规范
2. str.match(reg)：输出所有匹配成功的结果

var username = "zhangsan";
var reg = /^\w{6,12}$/;
var flag = reg.test(username);
alert(flag);	//true

Global

• 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();

方法

• encodeURI()：url编码
• decodeURI()：url解码
• encodeURIComponent()：url编码，编码的字符更多
• decodeURIComponent()：url解码
• parseInt()：将字符串转为数字
• isNaN()：判断一个值是否是 NaN
  • NaN 六亲不认，连自己都不认。NaN 参与的 == 比较全部为 false
• eval()：将 JavaScript 字符串，并把它作为脚本代码来执行。

var jscode = "alert(123)";
alert(jscode);	//弹出警告框，显示 alert(123)

URL编码

• 你好 = %E4%BD%A0%E5%A5%BD

var str = "你好";
var encode = encodeURI(str);
document.write(encode+"<br>");	// %E4%BD%A0%E5%A5%BD
var decode = decodeURI(encode);
document.write(decode+"<br>");	// 你好

var encode = encodeURIComponent(str);	// %E4%BD%A0%E5%A5%BD
var decode = decodeURIComponent(encode);	// 你好

/*	区别
encodeURIComponent()
编码"http://www.baidu.com你好"
http%3A%2F%2Fwww.baidu.com%E4%BD%A0%E5%A5%BD

encodeURI()
编码"http://www.baidu.com你好"
http://www.baidu.com%E4%BD%A0%E5%A5%BD
*/

作用域和预编译

js三部曲

1.语法检查
2.预编译
3.逐行解释执行

作用域

• 全局作用域：最外层定义的变量

• 局部作用域：只在固定的代码片段内可用，函数外出不可访问

  • js没有块级作用域，局部作用域是由函数的产生而产生的，也叫函数作用域。
  • 块级作用域：{}

• 注意：建议使用var声明变量，如果没有var声明，那么在函数内也是声明了全局变量。

预编译

发生的时刻：函数执行的前一刻和全局下

• js执行环境

  • 全局执行环境：最外面层的执行环境—>window
  • 因此所有的全局变量和函数都作用为window的属性和方法。GO
  • 局部执行环境：函数内的执行环境—>AO

• 过程
  1.创建AO对象（active object this，arguments）
  2.在函数内找用var定义的变量及形参变量，并且赋值为undefined
  3.形参和实参相统一
  4.找函数内用function定义的函数,并将函数体赋值。

function test(a){
	console.log(a);//function
	aa=345;
	console.log(aa);//345
	var a=6;
	console.log(a);//6
	function a(){
		console.log(a);
		var cc=456;
		console.log(cc);
	}
	a();//报错
}
test(4);
// 原理
AO{
	this:window
	arguments:{0:4}
	aa:undefined->345
	a:undefined->4->function->6
} 
GO{
	window:object
	test:fn
}

作用域链

当一个函数被调用的时候，创建了执行环境和相应的作用域链，并且把作用域链赋值给一个特殊的内部属性[[scope]]，然后用this，arguments(全局不存在),和其他的命名参数来初始化活动对象，当前的执行环境始终在作用域链的最顶端

• [[scope]]中所存储的执行期上下文的集合，这个集合呈链式结构，我们把这种链式叫做作用域链。也是作用域对象的集合。

var a=10;
function test(c,d){
	var b=20;
	function aa(){ }
	aa();
}
test(4);
// 原理
GO{
	a:undefined->10
	test:function
}
test-AO{
	this:window
	arguments:[4]
	b:undefined->20
	c:undefined->4
	d:undefined
	aa:function
}->aa-AO->销毁
aa-AO{
	this:window
	arguments:[]
}->销毁

闭包

概念：函数与函数相互嵌套的情况，将内部函数保存到外部，能从外部访问内部函数环境下的所有变量

• 发生时间：将内部函数保存到外部的时候，闭包就形成了

• 闭包的缺点：把外部变量保存到内存中不被释放。导致空间的消耗，内存泄漏。

• 闭包的作用

  • 可以访问内部变量
  • 模块化开发
  • 避免变量全局污染

• 闭包的使用场景

  1. 采用函数引用方式的setTimeout调用
  2. 封装相关的功能集

function foo(x){
	var tmp=3;
	bar=function(y){
		return (x+y+(++tmp));
	}
}
console.log(foo(2)); // undefined，（没有return）
console.log(bar(10)); // 16（2+10+4）->bar-AO被销毁，但foo-AO（外部变量保存到内存中不被释放）
console.log(bar(10)); // 17（2+10+5）
// 原理
Go{
	foo:function
	bar:function
}->浏览器全部执行完4销毁
foo-AO{
	this:window
	arguments:[2]
	tmp:undefined->3
	x:undefined->2
}->浏览器全部执行完3销毁
bar-AO{
	this:window
	arguments:[10]
	y:undefined->10
}->1销毁
bar-AO{
	this:window
	arguments:[10]
	y:undefined->10
}->2销毁

原型和原型链

• 对象分为两种，普通对象和函数对象。

  • 普通对象里使用存在一个隐式属性（__proto__）;
  • 函数对象里始终有一个属性prototype（原型）同时还存在隐式属性（__proto__）
  • 普通对象的__proto__指向了构造函数的原型

• 对象都有属性和方法

  • prototype本身就是一个对象–原型对象
  • prototype里有一个属性constructor–构造器。指向了构造函数。
  • 普通对象的__proto__指向了构造器的原型对象。
  • 构造函数构造出来的对象继承了构造函数原型上的一切属性和方法。

• 判断对象的数据类型instanceof

• 原型

  • 概念:函数里的一个属性，它定义了公共属性。这个属性本身也是一个对象。
  • prototype：构造函数构造出了一个公共祖先。

BOM

• 概念：Browser Object Model 浏览器对象模型
• 组成：
  • Window：窗口对象
  • Navigator：浏览器对象
  • Screen：显示器屏幕对象
  • History：历史记录对象
  • Location：地址栏对象

Window：窗口对象

与弹出框有关的方法

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

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

  • 如果用户点击确定按钮，则方法返回true
  • 如果用户点击取消按钮，则方法返回false

• prompt()：显示可提示用户输入的对话框。（括号里的第一个内容为提示内容，第二个为默认内容）

  • prompt("请输入您要打开的网站","http://www.baidu.com")
  • 返回值：获取用户输入的值，或为null

var flag = confirm("您确定要退出吗？");
if(flag){
	// 退出
}else{
	// 取消
}

与打开关闭有关的方法

• close()：关闭浏览器窗口。

  • 谁调用我 ，我关谁（不能关闭非脚本打开的窗口）

• open()：打开一个新的浏览器窗口

  • window.open("href","_self/_blank","option")
  • _self自身窗口打开
  • _blank新窗口打开
  • 返回新的Window对象

var openBtn = document.getElementById("openBtn");
openBtn.onclick = function(){
	// 点击按钮打开百度
	open("https://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
	// 点击按钮关闭当前窗口
	window.close();
}
// ---------------------------------
var openBtn = document.getElementById("openBtn");
var newWindow;
openBtn.onclick = function(){
	// 点击按钮打开百度
	newWindow = open("https://www.baidu.com");
}
var closeBtn = document.getElementById("closeBtn");
closeBtn.onclick = function(){
	// 点击按钮关闭打开来的百度
	newWindow.close();
}

与定时器有关的方式

• setTimeout()：一次定时器，在指定的毫秒数后调用函数或计算表达式。

  • 参数可以是：js代码、方法对象，毫秒值
  • 返回值：唯一标识，用于取消定时器

• setInterval()：循环定时器，按照指定的周期（以毫秒计）来调用函数或计算表达式。

• clearTimeout()：取消由 setTimeout() 方法设置的 timeout。

• clearInterval(id)：取消由 setInterval() 设置的 timeout。（id是setInterval产生的值）

// 语法
setInterval(function(){代码},1000) // 匿名函数不重复调用
setInterval(test,1000); // 函数可以重复调用，但是不能传递参数（test函数名）
setInterval("test(参数)",1000) // 函数可以重复调用，也可以传递参数（1000是1秒，这里以毫秒计）

var clear = setTimeout(fun,1000);
clearTimeout(clear);

var clear = setInterval(fun,1000);
clearInterval(clear);

属性

• 获取其他BOM对象

  • history
  • location
  • Navigator
  • Screen

• 获取DOM对象

  • document

特点

• window对象不需要创建可以直接使用 window使用。 window.方法名();
• window引用可以省略。 方法名();
• 总结：方法名(); 效果等同于 window.方法名();

Location：地址栏对象

• 创建(获取)：

  • window.location 或 location

• 方法：

  • reload()：重新加载当前文档（刷新）

• 属性

  • href：设置或返回完整的 URL。
  • prot：获取端口号
  • host：获取域名及端口号
  • hostname：获取域名
  • search：获取参数（?号后的内容）
  • hash：URL的锚部分（从 # 号开始的部分）。
  • pathname：获取路径名（?号前的内容）

var btn = document.getElementById("btn");
btn.onclick = function(){
	// 刷新页面
	location.reload();
}

// 获取href
var href = location.href;
alert(href);	//当前页面url

// 点击按钮去百度
var goBaidu = document.getElementById("goBaidu");
goBaidu.onclick = function(){
	location.href = "https://www.baidu.com/";
}

History：历史记录对象

• 创建(获取)：

  • window.history 或 history

• 方法：

  • back()：加载 history 列表中的前一个 URL（返回上一页===浏览器的后退键）
  • forward()：加载 history 列表中的下一个 URL（进入到下一页===浏览器的前进键）
  • go(参数)：加载 history 列表中的某个具体页面。（参数为正数：前进几个历史记录；参数为负数：后退几个历史记录）

• 属性：

  • length：返回当前窗口历史列表中的 URL 数量。

var btn = document.getElementById("btn");
btn.onclick = function(){
	// 获取当前窗口历史记录个数
	var length = history.length;
	alert(length);
}

var forward = document.getElementById("forward");
forward.onclick = function(){
	// 前进
	history.forward();
}

Screen：显示器屏幕对象

• width：返回当前屏幕宽度(分辨率值)
• height：返回当前屏幕高度(分辨率值)

Navigator：浏览器对象

• userAgent：浏览器类型、版本、操作系统类型、浏览器引擎类型等信息

DOM

• 概念： Document Object Model 文档对象模型

• 将标记语言文档的各个组成部分，封装为对象。可以使用这些对象，对标记语言文档进行CRUD的动态操作

• W3C DOM 标准被分为 3 个不同的部分

  • 核心 DOM - 针对任何结构化文档的标准模型
  • Document：文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment:注释对象
  • Node：节点对象，其他5个的父对象

• XML DOM - 针对 XML 文档的标准模型

• HTML DOM - 针对 HTML 文档的标准模型

Document：文档对象

• 创建(获取)：在html dom模型中可以使用window对象来获取
  • window.document 或 document

获取Element对象

• getElementById()：根据 id属性值 获取元素对象。（id属性值唯一）
• getElementsByTagName()：根据 元素名称（如div等） 获取元素对象们。（返回值是一个数组）
• getElementsByClassName()：根据 Class属性值 获取元素对象们。（返回值是一个数组）
• getElementsByName()：根据 name属性值 获取元素对象们。（返回值是一个数组）

创建其他DOM对象

• createAttribute(name)
• createComment()
• createElement()
• createTextNode()

var table = document.createElement("table");
alert(table);

Element：元素对象

• 获取/创建：通过document来获取和创建

获取元素属性

• removeAttribute("属性名")：删除属性
• setAttribute("属性名","属性值")：设置属性
• getAttribute("属性名")：获取属性
• dataset.prop="值"：自定义属性（dataset.index="1"）

// 获取btn
var btn_set = document.getElementById("btn_set");
// 给a标签设置href属性
btn_set.onclick = function(){
	var element_a = document.getElementsByTagName("a")[0];
	element_a.setAttribute("href","https://www.baidu.com");	// 设置完属性，可以通过点击a标签前往百度
}

获取样式

• dom.style.prop：可读写行间样式，写入的值必须是字符串格式
• window.getComputeStyle(ele,null)：null的地方可以存放伪类，返回的都是绝对值，是只读的，不可修改
• ele.currentStyle：是只读的，不可修改，返回的是经过转换的绝对值，IE独有的属性
  • ele.id
  • ele.title
• 获取样式：ele.style.prop–效率低，维护不方便；ele.className—维护方便
• document.styleSheets[0].cssRules[0].style：获取样式表
• document.styleSheets[0].rules[0];

获取元素的内容

• innerHTML：在赋值的时候：标签会被解析成标签，页面中不会输出；在提取内容时：标签会一并被提取
• innerText：在赋值的时候：标签会被解析成文本，在页面中输出；在提取内容时：标签不会并被提取，只提取文本内容
• value：使用于表单

offset系列属性

滚动条滚动的距离

• window.pageYOffset(ie9以下不支持)
• document.body.scrollTop
• document.documentElement.scrollTop
• 如果body.scrollTop有值那么documentElement.scrollTop为0

可视窗口尺寸

• window.innerWidth(IE8以下不兼容)
• document.documentElement.clientWidth
• document.body.clientWidth(怪异模式没有<!DOCTYPE html>)
• document.compatMode：判断怪异模型的方法

查看元素在页面中的位置

• ele.offsetLeft：包含padding

  • 对于无定位的父级，返回相对文档的位置
  • 对于有定位的父级，返回相对于最近的有定位的父级的位置

• ele.offsetParent

  • 返回最近的有定位的父级，如无，返回body，body.offsetParent为null
  • 滚动到指定位置

• scroll(x,y) scrollTo(x,y) scrollBy(x,y);

Node：节点对象，其他5个的父对象

• 特点：所有dom对象都可以被认为是一个节点

• 方法

  • appendChild()：向节点的子节点列表的结尾添加新的子节点。
  • removeChild()：删除（并返回）当前节点的指定子节点。
  • replaceChild()：用新节点替换一个子节点。

• 属性

  • parentNode：返回节点的父节点。
  • childNodes：返回所有子节点
  • nodeName：节点名，大写标签名
  • nodeValue：节点值
  • nodeType：节点类型

<body>
	<div id = "div1">
		<div id = "div2">
			div2
		</div>
		div1
	</div>
	<input type = "button" id = "del" value = "删除子节点">
	<a href = "javascript:void(0);" id = "add">添加子节点</a>

<script>
	// 1.获取超链接
	var element_a = document.getElementById("del");
	// 2.绑定单击事件
	element_a.onclick = function(){
		var div1 = document.getElementById("div1");
		var div2 = document.getElementById("div2");
		div1.removeChild(div2);	// 删除div2的节点
	}

	// 1.获取超链接
	var element_add = document.getElementById("add");
	// 2.绑定单击事件
	element_add.onclick = function(){
		var div1 = document.getElementById("div1");
		//创建div节点
		var div3 = document.createElement("div");
		div3.setAttribute("id","div3");
		//给div1添加子节点div3
		div1.appendChild(div3);
	}

	var div2 = document.getElementById("div2");
	var div1 = div2.parentNode;
	alert(div1);
</script>
</body>

• 超链接功能
  • 可以被点击：样式
  • 点击后跳转到 href 指定的 url
  • 需求：保留点击功能，去掉跳转功能
  • 实现：href="javascript:void(0);"

HTML DOM

• 标签体的设置和获取：innerHTML

var div = document.getElementById("div1");
div.innerHTML = "<input type='text'>";	//将div转换成文本输入框
div.innerHTML += "<input type='text'>";	//在div标签中追加文本输入框

• 使用html元素对象的属性
• 控制元素样式
  • 使用元素的style属性来设置
  • 提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。

//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
//font-size--> fontSize
div1.style.fontSize = "20px";

事件监听机制

• 概念：某些组件被执行了某些操作后，触发某些代码的执行。
  • 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了
  • 事件源：组件。如： 按钮 文本输入框…
  • 监听器：代码。
  • 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。

点击事件

• onclick：单击事件。
• ondblclick：双击事件。
• onmousedown：在鼠标按键被按下时发生。
• onmousemove：在鼠标指针移到指定的对象时发生。
• onmouseout：离开事件。
• onmouseover：在鼠标指针移动到指定的元素上时发生。（存在冒泡）
• onmouseenter：鼠标穿过事件。（不存在冒泡）
• onmouseup：在鼠标按键被松开时发生。
• onwaiting：在视频由于要播放下一帧而需要缓冲时触发。

表单事件

• onblur：在对象失去焦点时发生。
• onchange：在域的内容改变时发生。
• onreset：在表单被重置后触发。
• onselect：在文本框中的文本被选中时发生。
• onsubmit：确认按钮被点击
  • 可以阻止表单的提交（方法返回false则表单被阻止提交）

加载事件

• onload：一张页面或一幅图像完成加载
• onunload：在用户退出页面时发生。

鼠标事件

• onmousedown：鼠标按钮被按下
  • 定义方法时，定义一个形参，接受event对象
  • event对象的button属性可以获取鼠标按钮键被点击了
• onmouseup：鼠标按键被松开
• onmousemove：鼠标被移动
• onmouseover：鼠标移到某元素之上
• onmouseout：鼠标从某元素移开

键盘事件

• onkeydown：某个键盘按键被按下
• onkeyup：某个键盘按键被松开
• onkeypress：某个键盘按键被按下并松开

// 方法1
<script>
document.getElementById("form").onsubmit = function(){
	//校验用户名格式是否正确
	var flag = false;
	return flag;
}
</script>

// 方法2
<form action="#" id="form" onclick="return checkForm();">
</form>

//失去焦点事件
document.getElementById("lose").onblur = function(){
    alert("失去焦点了");
}

//加载完成事件 onload
window.onload = function(){}

//绑定鼠标点击事件
document.getElementById("username").onmousedown = function(even){
    alert("鼠标点击了");
    alert(even.button);	//返回当事件被触发时，哪个鼠标按钮被点击
}

绑定事件的方法：

1. onclick

   • 一个元素上只能绑定一个
   • this指向dom元素本身

2. obj.addEventListener(type,fn,false);

   • IE9以下不兼容
   • 可以为一个元素绑定多个事件
   • this指向dom元素本身

3. obj.attchEvent(“on”+type,fn);

   • IE独有
   • 可以为一个元素绑定多个事件
   • this指向window

function addEvent(elem,eventType,fun){
    if(elem.addEventListener){
        console.log("listener")
        elem.addEventListener(eventType,fun);
    }else if(elem.attachEvent){
        console.log("attach")
        elem.attachEvent('on'+eventType,function(){
            fun.call(elem);//修改this指向为elem.
        });
    }else{
        console.log("on");
        elem['on'+eventType]=fun;
    }
}

解除事件的方法

1. ele.οnclick=false/null;
2. ele.removeEventListener(type,fn,false)
3. ele.detachEvent(‘on’+type,fn);

• 注意：匿名函数不能解除事件

event 事件对象

• 概念：记录事件上发生的所有数据
• e=e||window.event;
• 事件源 target=e.target||e.srcElement;
• 可视区的位置 e.clientX,e.clientY
• 页面的位置 e.pageX,e.pageY
• 屏幕的位置 e.screenX,e.screenY
• 事件类型 e.type
• 鼠标键值 e.which
• 键盘键值 e.keyCode
• 鼠标距离事件源起始位置的值e.offsetX,e.offsetY

事件流

• 分三个阶段：捕获，目标，冒泡

• 目标阶段：目标元素就是事件源，事件源上的捕获和冒泡是谁写在前面就先执行谁。事件源上的事件是按顺序执行的。

• 冒泡：对于相互嵌套的元素，从结构上（非视觉上）从点击的元素开始向上查找是否存在相同的事件（不是所有的事件），如果存在，就会发生冒泡

• 捕获：对于相互嵌套的元素，从结构上（非视觉上）从顶端的元素开始向下查找是否存在相同的事件（不是所有的事件），直到点击的元素为止，如果存在，就会发生捕获
  IE上没有

• 事件委托：通过给一个元素添加事件，来管理一类元素的事件。

  • 原理：利用了冒泡事件的原理，利用了事件源来查找当前点击的对象
  • 优势：提高效率

• 阻止冒泡

  • W3C：e.stopPropagation()（IE9及IE9以上）
  • ie：e.cancelBubble=true（谷歌已经实现）

• 默认事件：一般用于a标签和表单提交

  • eturn false;
  • preventDefault(); //IE9及IE9以上
  • returnValue=true;//IE独有

• 阻止冒泡的兼容方法：e=e||window.event;