JavaScript进阶复习（内含思维导图）

BOM

window

• 全局变量
• 全局函数

系统对话框

alert()

	在当前页面上弹出警告框，并且显示内容

confirm()

	功能：弹出一个带确定和取消按钮的提示框
	返回值：
		点击确定返回true
		点击取消返回false

prompt()

	功能：弹出一个带输入框的提示框
	参数：
		第一个参数：提示面板上的内容。
		第二个参数：输入框默认的值。
	返回值：
		点击确定，返回输入框中的内容
		点击取消，返回null

open方法

1.要加载的URL
2.窗口的名称或者窗口的目标
3.一个特性的字符串

history对象

history.length 输出历史记录的条数
方法：
	 history.back()  返回上一条记录
	history.forward() 前进到下一条记录
	history.go()
		0  刷新当前页面
		正整数  前进对应数字条记录
		负整数  后退对应数字条记录

location对象

url：统一资源定位符。
完整格式：协议://域名(IP):端口号/路径?查询字符串#锚点
英文格式：protocol://hostname:port/pathname?search#hash

DOM

DOM节点的类型

元素节点：<div></div>
属性节点：id = 'div1'
文本节点：div文本

获取元素节点的方式

• document.getElementById();
• node.getElementsByTagName();
• document.getElementsByName();
• node.getElementsByClassName();
  IE8以下不兼容
• document.querySelector()
• 返回值：一定是一个元素节点，只返回符合条件的第一个。
• document.querySelectorAll()
  • 返回值：一定是数组，这个数组装有符合条件的元素。
  • 功能：通过传入的参数，获取对应的元素节点。
  • 参数：字符串 模拟css选择器获取元素的方式。

元素节点的属性

• oDiv.id
• oDiv.title
• oDiv.className
  访问class 必须写成className
• oDiv.style.width
• oDiv.style.backgroundColor
• innerHTML 标签间内容
• innerText 标签间纯文本(不带标签)
• outerHTML 整个标签
• tagName 返回当前元素节点的标签名(大写)

setAttribute系列方法

• setAttribute
• getAttribute
• removeAttribute

元素节点子节点

• childNodes 获取某一个元素节点所有的子节点。 伪数组
• firstChild 快速获取到第一个子节点
• lastChild 快速获取到最后一个子节点
• nextSibling 找到兄弟节点中的下一个节点
• previousSibling 找到兄弟节点中的上一个节点
  【注】只获取子节点中的元素节点。
  • children
  • firstElementChild
  • lastElementChild
  • nextElementtSibling
  • previousElementSibling
• parentNode 可以快速获取到当前节点的父节点

节点操作的方法

• document.write(“hello world”);
• document.createElement(标签的类型)
• appendChild()
  - 格式：node1.appendChild(node2);
  - 功能：将node2插入到node1的子节点末尾
• createTextNode()
  • 格式：document.createTextNode()
  • 参数：文本内容
  • 功能：创建文本节点
• insertBefore()
  • 格式：box1.parentNode.insertBefore(box2, box1);
  • 功能：将box2插入到box1的前面
• replaceChild()
  • 格式：box1.parentNode.replaceChild(box2, box1);
  • 功能：用box2节点，将box1节点替换。
• removeChild()
  • 格式：box1.parentNode.removeChild(box1);
  • 功能：将box1删除
• cloneNode()
  • 格式：node.cloneNode()/node.cloneNode(true)
  • 功能：克隆节点,默认克隆节点本身
  • 返回值：新克隆出来的节点。
    
    

事件

绑定事件

1、内联模式
2、外联模式/脚本模式(最多)

事件类型

一、鼠标事件（可以绑定在任意的元素节点上）

	click      单击
	dblclick   双击
	mouseover  鼠标移入 
	mouseout   鼠标移出
	mousemove  鼠标移动（会不停的触发）
	mousedown  鼠标按下
	mouseup    鼠标抬起
	mouseenter 鼠标移入
	mouseleave 鼠标移出

二、键盘事件

	keydown    键盘按下（如果按下不放手，会一直触发）
	keyup      键盘抬起
	keypress   键盘按下（只支持字符键）

三、HTML事件

1、window事件

		load    当页面加载完成以后会触发
		unload  当页面解构的时候触发(刷新页面，关闭当前页面)  IE浏览器兼容
		scroll  页面滚动
		resize  窗口大小发生变化的时候触发

2、表单事件

		blur   失去焦点
		focus  获取焦点
		select 当我们在输入框内选中文本的时候触发
		change 当我们对输入框的文本进行修改并且失去焦点的时候
		submit 当我们点击submit上的按钮才能触发
		reset  当我们点击reset上的按钮才能触发

事件对象

button 的属性

	0  左键
	1  滚轮
	2  右键
获取当前鼠标位置：(原点位置不一样)
	clientX  clientY  原点位置：可视窗口的左上角为原点
	pageX    pageY    原点位置：整个页面的左上角(包含滚出去的滚动距离)
	screenX  screenY  原点位置：电脑屏幕的左上角
四个修改键：
	shiftKey  如果按下shift键，值就是true，否则是false
	ctrlKey
	altKey
	metakey （windows键  mac电脑下command键）
键码:只在keydown下支持。
	【注】不管是在大写字母还是小写字母的情况下，返回的统一都是大写字母的ASIIC码值。
字符码: 只在keypress下支持
	【注】区分大小写，并且按下的时候我当前按下这个键的ASCII码值。
 target
	【注】这个事件是由谁而起的。
	IE8以下不兼容 window.event.srcElement;

事件流

事件冒泡：由里向外逐级触发。（默认）
事件捕获：由外向里逐级触发。

正则表达式

声明正则表达式

1、通过new去声明正则表达式
2、省略new运算符去声明正则表达式
3、通过常量赋值

正则表达式对象只有两个方法

test

	格式：正则.test(字符串)
	功能：在字符串中匹配这个正则是否存在
	返回值：如果匹配成功返回true，匹配失败返回false。

exec

	格式：正则.exec(字符串)
	功能：在字符串中匹配这个正则是否存在
	返回值：返回匹配到的串，匹配成功，返回一个装有字符串的数组
	                    匹配失败，返回null

字符串的函数：

match()

	格式：字符串.match(正则)
	功能：在字符串匹配是否有符合正则表达式，
	返回值：匹配成功，返回装有匹配到子串的数组
	       匹配失败，返回null

replace()

	格式：字符串.replace(oldStr/正则, newStr);
	功能：用newStr将oldStr替换，
	返回值：替换成功的新字符串。

split()

	格式：字符串.split(分割符/正则);
	功能：用分割符将原字符串进行分割
	返回值：分割剩下的子串组成的数组。

search()

	格式：字符串.search(子串/正则)
	功能：找到符合条件的子串第一次出现的位置
	返回值：
	    如果找到，返回>=0的下标
	    否则，返回-1

元字符

单个数字和字符的元字符

	.          匹配单个的任意字符
	[范围]         匹配单个范围内的字符
	[0-9]
	[a-zA-Z0-9_] 匹配单个的数字、字母下划线
	[^范围]        匹配任意一个除括号范围内的字符
	[^0-9]     匹配任意一个非数字字符
	\w         匹配单个的数字、字母下划线  等价于 [a-zA-Z0-9_]
	\W         匹配单个非数字、字母下划线
	\d         匹配单个数字  等价于 [0-9]
	\D         匹配单个非数字  等价于 [^0-9]

空白字符

	\s   匹配任意单个的空白字符
	\S   匹配任意单个非空白字符

重复字符 x（任意的单个字符）

	x?    匹配0个或者1个x
	x+    匹配至少一个x字符
	x*    匹配任意个x字符
	x{m,n}匹配至少m个，最多n个x字符，包括n
	x{n}  必须匹配n个x字符
	(xyz)+ 小括号括起来的部分是当做单个字符处理

锚字符

	^  行首匹配  必须以这个正则开头
	$  行尾匹配  必须以这个正则结尾

ES6

强制改变this指向

show.call("call", 20, 40);
show.apply("apply", [20, 40]);
	alert(Math.min.apply(null, arr));
	alert(Math.max.apply(null, arr));
show.bind("bind")(40, 50); 

let 关键字是用来声明变量

const 声明变量

箭头函数：新潮的函数写法。

1、箭头函数，不能用new
2、箭头，如果返回值是一个对象，一定要加()；
3、箭头函数中的this，指向的是上一层函数的主人。