Hefery 的个人网站

CSS语法

CSS选择器

选择器(权值)：
	基本选择器：
		通配符选择器(0)：
		元素选择器(1)：HTML标签，p{...}
		*类选择器(10)：<p class="special one"></p>  <style>.special{...}  .one{...}</style>
		*id选择器(100)：<p id="special"></p>  <style>#special{...}</style>
		*后代选择器：<p><em>...</em></p>  <style>p em{...}</style>

			<section>
				<div>啦啦啦</div>
				<article>
					<div>article1</div>
				</article>
				<article>
					<div>article2</div>
				</article>
			</section>
		子元素选择器：<style>section > div{...}</style>
		相邻兄弟元素：紧接相邻兄弟元素后面的元素  <style>section > div + article{...}</style>
		通用兄弟选择器：同一父亲的兄弟元素  <style>section > div ~ article{...}</style>
		群组选择器：多个选择器间用逗号隔开  <style>.special,p,h1{...}</style>

	*伪类选择器(10)：激活状态(:active)、已访问状态(:visited)、未访问状态(:link)、鼠标悬停状态(:hover)
			<style>
				a:link{...}
				a:visited{...}
				a:hover{...}
				a:active{...}
			</style>
		动态伪类：
			锚点伪类：:link、:visited
			用户行为伪类：:hover、:active、:focus
		UI元素状态伪类：:enabled、:disabled、:checked
		CSS3结构类：
			:first-child  选择其父元素的首个子元素的每个Element元素
			:last-child   选择其父元素的最后一个子元素的每个Element元素
			:nth-child(n、2n、2n+1) 选择其父元素的第n个子元素，无论元素类型
			:nth-last-child(n、2n、2n+1)
			:nth-of-type(n) 选择父元素的特点元素的第n个子元素的每个元素
			:nth-last-of-type(n)
			:first-of-type(n) 选择父元素的特点元素的首个子元素的每个元素
			:last-of-type(n)  选择父元素的特点元素的尾个子元素的每个元素
			:only-child  选择父元素唯一子元素的每个元素
			:only-of-type(n)  选择父元素的特定元素的唯一子元素的每个元素
			:empty  选择没有子元素的元素
		否定选择器：父元素:not(子元素/子选择器)  匹配非指定元素/选择器的每个元素
		伪元素：元素::伪元素
			first-line 用于块级Element元素的第一行文本格式化
			first-letter 用于块级Element元素的首字母格式化
			before 在元素内容前插入新内容（第一个子元素、行级元素）
			after  在元素内容后插入新内容（最后一子元素、行级元素）
			selection 在浏览器选中文本后的背景色和前景色

	属性选择器：对带有指定属性的HTML元素设置样式
		Element[attribute] 选择所有带有 attribute 属性元素  
			a[href]{...}
			a[href="value"]{...}	   href为value或value-
			a[class~="value"]]{...}  包含value的class属性
			a[class$="value"]]{...}  以value结尾的class属性


优先级：行内样式(1000) > 内部样式 > 外部样式 (最后定义的优先级最高)
	   id选择器 > class选择器 > 标签选择器
	   同类样式使用，样式有冲突时引用后定义样式

选择器属性

1.文字样式
  *文字字体：font-family(字体名)
  *文字大小：font-size(px、em/%)
  文字颜色：color
  文字粗细：font-weight(normal、bold、bolder、lighter、100~900)
  文字样式：font-style(normal、italic斜体、oblique倾斜)

2.文本样式
  水平对齐：text-align(left、right、center、justify)  PS：块级元素生效 p、div
  行高：line-height(px、em/%)
  元素内容垂直：vertical-align(top、text-top、middle、bottom、super、sub、baseline、px、%)
  单词间距：word-spacing
  字母间距：letter-spacing
  文本大小写：text-transform(capitalize、uppercase、lowercase、none)
  文本修饰：text-decoration(underline下划线、overline上划线、line-through贯穿线、blink闪烁、none)
  	text-decoration: none; 取出链接下划线

CSS规范

命名规范：驼峰、蛇形(_)
	1.页面结构：
	  页头：header  页面主体：main  页尾：footer  内容：content  容器：container
	  导航：nav  侧栏：sidebar  栏目：column  页面外围控制：wrapper  左右中：left、right、center
	2.导航
	  主导航：mainnav  子导航：subnav  顶导航：topnav  边导航：sidebar  左导航：leftbar  右导航：rightsidebar
	  菜单：menu  子菜单：submenu  标题：title  摘要：summary
	3.功能
	  标志：logo  广告：banner  功能区：shop  标题：title
	  登录：login  登录条：loginbar  注册：regist  搜索：search  

CSS布局

盒子模型

width：内容宽度(px|%|auto)

hight：内容高度(px|%|auto)
	块级元素：p、div、h1...、ul、li、ol、dl、dt、dd
	替换元素：img、textarea、input

border：边框
	border：(px|%|auto)
	border-width：边框宽度(thin、medium、thick、px|%|auto)
	border-hight：边框高度(px|%|auto)
	border-style：边框样式(solid实线、double双实线、dotted点装边框)
	上下左右边框：border-[top|bottom|left|right]-[width|hight]
	简写：border: [宽度] [样式] [颜色]

*padding：内边距
	padding：(px|%)
	padding-top：(px|%)
	padding-right：(px|%)
	padding-bottom：(px|%)
	padding-left：(px|%)
	缩写：
		padding:值1  		   四个方向
		padding:值1 值2 		  上下值1 左右值2
		padding:值1 值2 值3 	  上值1 左右值2 下值3
		padding:值1 值2 值3 值4  上值1 右值2 下值3 左值4（顺时针）

*margin：外边距
	margin：(px|%|auto水平居中)
	margin-top：(px|%|auto)
	margin-right：(px|%|auto)
	margin-bottom：(px|%|auto)
	margin-left：(px|%|auto)
	缩写：
		margin:值1  		   四个方向
		margin:值1 值2 		  上下值1 左右值2
		margin:值1 值2 值3 	  上值1 左右值2 下值3
		margin:值1 值2 值3 值4  上值1 右值2 下值3 左值4（顺时针）

*display：
	inline：元素显示为内联元素，前后无换行符
	block：元素显示为块级元素，前后有换行符

背景列表

背景：content、padding、border，不包括margin
	*background：
	*background-color：背景颜色(颜色|transparent全透明黑色)
	*background-image：背景图像(url|none)   PS:没占满则在水平和垂直方向重复到占满
	background-repeat：背景图像是否重复，如何重复(repeat重复、no-repeat不重复、repeat-x水平重复、repeat-y垂直重复)
	background-position：起始位置((px,px)|(%,%)、top、right、bottom、left、center)
	background-attachment：背景图像是否固定(scroll、fixed)

列表：
	list-style：
	list-style-type：列表项标识类型
		无序：none、disc实心圆点、circle空心圆点、square方块
		有序：none、decimal有理数、lower-roman、upper-roman、lower-alpha、upper-alpha
	list-style-image：将图像设置为列表项标识(url、none)
	list-style-position：标识位置(inside、outside根据文本对齐，不环绕图标)

浮动float

CSS定位机制：
	1.标准流：从上往下、从左往右
		块级元素：独占一行、可设置宽高、不设置宽高占满容器、常用div、p、h1~h6、ul、ol、li、dl、dt、dd
		行内元素：与其他元素同行显示、不能设置宽高、宽高就是文字或图像的宽高、常用span、a、b、i、u、em
	2.浮动：只能横向移动(左右)、遇到包含框\浮动框停止浮动
		设置浮动：float:left|right|none
		清除浮动：clear:none|left|right|both
	3.绝对定位：

定位position

position-static：静态定位，忽略top、right、bottom、left
position-relative：相对定位，相对于其正常位置进行定位
position-absolute：绝对定位，破釜沉舟，参照最近定位的祖先元素
position-fixed：固定定位，相对于浏览器窗口进行定位
position-sticky：
position-inherit：规定应该从父元素继承 position 属性的值

布局基础

1.行布局
  自适应：.container{ width: 100%; margin: 0 auto; }
  限制最大宽：.container{ max-width: 800px; }
  垂直水平居中：
  	.container{
  			position:absolute;
  			top:50%;
  			left:50%;
  			margin-top:-100px;
  			margin-left:-400px; 
  			width:800px; 
  			height:200px;
  			text-align: center;
  	}
  导航随屏幕滚动：
  	.header{
            width:100%;
            position: fixed;
            height: 40px;
            text-align: center;
            font-size: 16px;
            line-height: 40px;
	}

2.多列布局
  两列布局：自适应
  	.left{
           width:60%;
           height: 1000px;
           float:left;
     }
     .right{
            width: 40%;
            height: 1000px;
            float:right;
     }
  三列布局：自适应
  	.left{
            width:25%;
            height: 1000px;
            float:left;
    }
    .right{
            width: 25%;
            height: 1000px;
            float: right;
    }
    .middle{
            width: 50%;
            height: 1000px;
            word-wrap: break-word;
            float:left;
    }

3.混合布局
	页面头部、页面轮播图、页面左侧、页面右侧、页面底部

4.圣杯布局(三列)
  两边定宽，中间自适应
  中间栏优先渲染

5.双飞翼布局
  两边定宽，中间自适应
  中间栏优先渲染

边框与圆角

圆角：border-radius [px|%] 
	四值：左上角、右上角、右下角、左下角
	三值：左上角、[右上角、左下角]、右下角
	两值：[左上角、右下角]、[右上角、左下角]
	左上角：border-top-left-radius
	右上角：border-top-right-radius
	右下角：border-bottom-right-radius
	左下角：border-bottom-left-radius

盒阴影：box-shadow[h-shadow水平  v-shadow竖直  blur模糊度  spread扩展度  color阴影颜色  inset外\内阴影]

边框图片：border-image 
	source 
	slice 边界向内偏移量[px|%] 
	width 
	outset边框外部绘制  
	repeat[repeated是否重复|stretched拉伸|rounded铺满]

背景

background-clip[border-box|padding-box|contain-box] 绘制背景图像区域
background-origin[border-box|padding-box|contain-box] 背景图像定位
background-size[px|%|cover填充整个容器|contain] 背景图像大小
background-image:url(img1.png),url(img2.png) 多重背景图像(前面图像会遮住后面图像)

渐变

渐变：多个颜色间显示平稳过渡

CSS线性渐变：background:linear-gradient(方向,开始颜色,结束颜色,……)
	从上到下：默认
		background: -webkit-linear-gradient(red,blue);
		background:    -moz-linear-gradient(red,blue);
		background:      -o-linear-gradient(red,blue);
		background: 	    linear-gradient(red,blue);
	从左到右：
		background: -webkit-linear-gradient(    left,red,blue);
		background:    -moz-linear-gradient(   right,red,blue);
		background:      -o-linear-gradient(   right,red,blue);
		background: 	    linear-gradient(to right,red,blue);
	对角：
		background: -webkit-linear-gradient(       left top,red,blue);
		background:    -moz-linear-gradient(   right bottom,red,blue);
		background:      -o-linear-gradient(   right bottom,red,blue);
		background: 	    linear-gradient(to right bottom,red,blue);
	角度：background:linear-gradient(角度,开始颜色,结束颜色,……)
		background:linear-gradient(135deg,开始颜色,结束颜色,……)

CSS径向渐变：background:radial-gradient(方向,尺寸.开始颜色,结束颜色,……)
	尺寸：closest-side：最近边、farthest-side：最远边、closest-corner：最近角、farthest-corner：最远角
	颜色结点不均与分布：background:radial-gradient(color1length|percentage,color2length|percentage,...);

重复渐变：background:repeating-radial-gradien(color1length|percentage,color2length|percentage,...);

文本/字体

文本：
	阴影：text-shadow: 水平偏移量10px 竖直偏移量10px 模糊距离10px 颜色red;
	轮廓：text-outline: 粗细 模糊距离 颜色;
	换行：
		word-break：normal中文|break-all|keep-all英文、中文
		word-wrap: normal|break-word; 长单词或URL
	对齐：对齐文本的最后一行, 只有在text-align 属性设置为"justify" 时才起作用
		text-align-last:auto|left|right|center|justify|start|end|initial|inherit
	居中：text-align: center;
	重点：text-emphasis: text-emphasis-style text-emphasis-color;

*字体：
	@font-face{
		font-family: 字体名称;（必写项）
		src: 字体存放路径，可多个;（必写项）
		font-weight: 字体粗细;（选写项）
		font-style: 字体样式;（选写项）
	}

转换transform

2D转换：
	旋转 transform: rotate(角度)：
		background: rotate(deg);
		background: rotate(deg);
		background: rotate(deg);
	平移 transform: translate()：
		background: translateX(x);   水平方向移动
		background: translateY(y);   竖直方向移动
		background: translate(x,y); 水平、竖直都移动
		PS：x轴从左到右，y轴从上到下
	缩放 transform: scale()：
		background: scaleX(x);   水平方向缩放
		background: scaleY(y);   竖直方向缩放
		background: scale(x,y);  水平、竖直都缩放
	扭曲 transform: skew()：
		background: skewX(x);   水平方向斜切扭曲
		background: skewY(y);   竖直方向斜切扭曲
		background: skew(x,y);  水平、竖直都斜切扭曲
		PS：正值逆时针，负值顺时针

3D转换：
	旋转 transform: rotate3d(角度)：
		background: rotateX(deg);
		background: rotateY(deg);
		background: rotateZ(deg);
		background: rotate3d(x,y,z,deg);
	平移 transform: translate3d()：
		background: translateX(x);   水平方向移动
		background: translateY(y);   竖直方向移动
		background: translate(x,y); 水平、竖直都移动
		PS：x轴从左到右，y轴从上到下
	缩放 transform: scale3d()：
		background: scaleX(x);   水平方向缩放
		background: scaleY(y);   竖直方向缩放
		background: scaleZ(x,y);  水平、竖直都缩放
	透视：perspective(n)

坐标系统：
	transform-origin: x y [z]

拓展属性：
	嵌套元素：在三围空间展示 transform-style

过渡transition

过渡：CSS属性在一定时间段内平滑地过渡

transition-property  平滑改变元素宽度
transition-duration  持续时间
transition-timing-function: linear线性|ease平滑|ease-in慢-快|ease-out快-慢|ease-in-out慢-快-慢  过渡节奏
transition-delay     延迟再执行

动画animation

animation: name  duration  timing-function  delay  iteration-count  direction
	动画名称：animation-name: keyframe名称|none
	持续时间：animation-duration
	过渡节奏：animation-timing-function
	动画延迟：animation-delay
	播放次数：animation-iteration-count
	轮流反向：animation-direction

@keyframes：关键帧，一套规则
	@keyframes 关键帧名称 {
		animation-name: 
		keyframes-selector{
			css-style: 
		}
	}

will-change：提前通知浏览器将要做动画，让浏览器提前准备
	none
	scoll-position元素滚动位置
	contents元素内容
	<custom-ident>改动属性与给定名称
	<animateable-feature>可动画的特征值，如left、right

JavaScript

JavaScript介绍

组成：ECMAScript、Browser Objects(DOM、BOM)
单线程语言，所代码必须按顺序执行

预解析

先查找全局Window的变量var，并赋值undefined，函数直接拿过来
再查找局部变量，赋值undefined
最后，逐行读取代码

垃圾收集

机制：回收无用数据，回收内存（内存管理：web浏览器<桌面应用程序）

原理：标记法，周期执行

方法：

• 标记清除：环境中的变量
• 引用计数：

JavaScript语法

标识符

    标识符：
        用途：变量名、函数名、函数参数、属性名
        组成：字母、数字、下划线(_)、美元符($)
        注意：区分大小写、不能以数字开头、不能使用关键字和保留字

数据类型

基本数据类型：存储在栈中
	undefined：说明却没有赋值
	null：空指针对象，准备存东西
	number：整数、浮点数   
		NaN：not a number非数值   PS：NaN操作都返回NaN、NaN与任何值都不等，包括自己
		isNaN(n)：检测n是否非数值，返回boolean值(先尝试转化为数值)
		类型转换：
			Number(n)：强制转换n为数值，string转数值转不过就是NaN
			parseInt(n)：忽略字符串前的空格，直至找到第一个非空格字符，第一个字符为非数值则NaN
			parseFloat(n)：从第一个字符开始解析，直至遇到无效的float为止
	boolean：
		非0数字，转换为boolean为true
		除" "之外的string转换为boolean为true
		null、undefined转换为boolean为false
	string：
		toString(str)：将str转换为string类型

引用数据类型：在堆中开辟内存空间，在栈中存地址(指向堆地址)
	数组[]
	对象{}

变量

变量：
	ECMAScript的变量是松散类型，即可以保存任何类型的变量
	变量本身是没有类型的，变量取决于变量的值
声明：var 变量名

作用域

变量比较

全局作用域：

局部作用域：
	函数作用域：函数括号内有效

作用域链：
	先在当前作用域下查找，找不到了，再沿作用域链往上查找（同名变量，内层优先级高）

变量比较

判断两个引用类型内容是否相等：
	function equalObjs(a, b) {
		for (var p in a) {
			if (a[p] != b[p]) {
				return false;
			}
			return true;
		}
	}

判断两个数组内容是否相同：
	function equalArrays(a, b) {
		if (a.length != b.length) {
			return false;
		}
		for (var i = 0; i < a.length; i++) {
			if (a[i] != b[i]) {
				return false;
			}
		}
		return true;
	}

值的复制

复制两个引用类型内容相等：浅拷贝
	function copyObjs(obj) {
		var newObj={};
		for (var p in obj) {
			newObj[p]=obj[p];
		}
		return newObj;
	}

类型检测

typeof：
	用途：检测变量类型  
	语法：typeof 变量、typeof(变量)
	返回：string、number、boolean、object、undefined、function

instanceof：只能用于引用类型
	语法：具体变量 instanceof 数据类型
	举例：[] instanceof Array
	返回：boolean

运算符/流程控制

算术运算符：+  -  *  /  %
逻辑运算符：||  &&  ！
	&&：两个操作数，如果第一个操作数为真，就返回第二个操作数，否则返回第一个
	    多个操作数，当所有操作数都为真时，返回的是最后一个操作数，如果有至少一个为假时，就返回第一个为假的操作数
	    有一个操作数为null、NaN、undefined结果为null、NaN、undefined
	||：两个操作数，如果第一个操作数为真，就返回第一个操作数，否则返回第二个
	    多个操作数，当所有操作数都为假时，返回的是最后一个操作数，如果有至少一个为真时，就返回第一个为真的操作数
赋值运算符：=  复合赋值（+=、-=、*=、/=）
比较运算符：<  >  <=  >=  ==、！=比较值  ===、！==比较值与数据类型
三元运算符：

流程控制：
	判断：if-else、switch
·	循环：while、for

alert()：警告对话框
prompt()：弹出输入内容

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 创建对象
			var cat = {
				'name': 'Tom',
				'age': 14,
				'family': ['father','mather'],
				'speak': function(){
					console.log('喵喵~');
				},
				'friend': {
					'name': 'Jery',
					'age': 4
				}
			};
			// 访问对象属性
			cat.name = 'Tim';
			cat['name'] = 'Tpm';
			console.log(cat.name);
			// 添加对象属性
			cat.type = '加菲猫';
			console.log(cat.type);
			// 删除对象属性：delete obj.prototype  不能删除原型链中的属性和变量
			delete cat.type;
			// 判断对象是否拥有某一属性： in
			console.log('name' in cat);
			// 遍历对象属性
			for (var p in cat) {
				console.log(p);
				//console.log(cat[p]);
			}

			var person = {
				name: "hefery",
				age: 22,
				sex: "man",
				eat: function(food){
					alert("我在吃" + food);
				},
				play: function(tool){
					alert("我在玩" + tool);
				}
			}
			console.log(person.name);
			person.eat("提子");
		</script>
	</body>
</html> 

原型：利用prototype添加属性和方法
原型链：js在创建对象时，都有_proto_的内置属性，用于指向创建它的函数对象的原型对象prototype

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			// 1.原型继承
			function person(name, age){  // 父
				this.name = name;
				this.age = age;
			}
			person.prototype.sayhello = function(){
				alert("属性值name：" + this.name);
			}
			var per = new person("hefery", 22);
			per.sayhello();  // 属性值name：hefery

			function student(){};  // 子
			student.prototype = new person("lalala", 18); // 原型继承
			student.prototype.grade = 90;
			student.prototype.test = function(){
				alert(this.grade);
			}
			var s = new student();
			s.sayhello();  // 属性值name：lalala
			alert(s.grade);  // 90
			// 继承过程：s._proto_ = student.prototype = p1  p1._proto_ = person.prototype


			// 2.构造继承
			function parents(name){
				this.name = name;
				this.say = function(){
					alert("father name：" + this.name);
				}
			}

			function child(name, age){
				this.parentObj = parents;
				this.parentObj(name);
				this.age = age;
				this.sayLaLaLa = function(){
					alert("child say: " + this.name + ", age: " + this.age);
				}
			}
			var p = new parents("zhangsan");
			p.say();  // father name：zhangsan
			var c = new child("lisi", 22);
			c.sayLaLaLa();	// child say: lisi, age: 22

			// call：调用一个对象的一个方法，以另一个对象替换当前对象
			// apply：应用某一对象的一个方法，用另一个对象替换当前对象
			function person(name, age, len){  // 父
				this.name = name;
				this.age = age;
				this.len = len;
				this.speak = function(){
					alert(this.name + "--" + this.age + "--" + this.len);
				}
			}
			// call继承
			function student(name, age){
				person.call(this, name, age);
			}
			var per = new person("张三", 25, 171);
			per.speak();  // 张三--25--171
			var stu = student("李四", 18);
			stu.speak();  // Uncaught TypeError: Cannot read property 'speak' of undefined
			// apply继承
			function teacher(name, age, len){
				person.apply(this, [name, age, len]);
			}
			var tea = new teacher("王五", 20, 180);
			tea.speak();  // 王五--20--180
        
            // 对象冒充：将父类的属性和方法一起传给子类作为特权属性和特权方法
			function person(name, age){ 
				this.name = name;
				this.age = age;
				this.say = function(){
					alert("Hi");
				}
			}
			person.prototype.walk = function(){
				alert("walk");
			}
			function student(name, age, grade){
				this.newMethod = person;  // 冒充person对象
				this.newMethod(name, age);
				this.grade = grade;
			}
			var s1 = new student("zhangsan", 18, 5); // s1是student对象，继承person，拥有person所有属性及方法
			alert(s1.name + "--" + s1.age + "--" + s1.grade);  // zhangsan--18--5
		</script>
	</body>
</html> 

// 合并对象
const newObj = {
    ...obj1,
    ...obj2
};

Object.is()：
	console.log(Object.is(+0 , -0));    // false
	console.log(+0 === -0);             // true
	console.log(Object.is(NaN , NaN));  // true
	console.log(NaN === NaN);           // false

函数

本质：对象{}
定义：
	字面量：
		// function声明：可以声明前使用
		function 函数名([arg0, arg1...]) {
			语句;
			[return 返回值;]
		}
		// var变量声明：必须先声明再使用
		var 变量名 = function([arg0, arg1...]){};
	构造函数：
		new function([arg0, arg1...]){};

调用：
	函数名(arg0, arg1...);

参数：
	arguments类数组： arguments[0]、arguments.length
		function add(){
			if (arguments.length == 0) return;
			var sum = 0;
			for (var i = 0; i < arguments.length; i++) {
				sum+=arguments[i];
			}
			return sum;
		}
		console.log(add(1,2,3,4,5));
拓展：
	把参数(类数组)转数组：let args = Array.prpotoype.slpce.call(arguments);

闭包：一个拥有许多变量和绑定这些变量的环境的表达式（通常是一个函数）
	 全局变量在函数内部可以访问
	 
	 function a(){
		var i=0;
		function b(){
			alert(++i);
		}
		return b;
	}
	var c = a();
	c();
	特点：函数b嵌套在函数a中，函数a需要返回函数b
    用途：读取函数内部变量、让变量i保留在内存中
    优点：封装、可以访问局部变量
    缺点：内存占用、内存泄漏

// 数值求和
function sum(...numbers) {
    return numbers.reduce(function(a , b){
        return a+b;
    }, 0);
}

console.log(sum(1, 2, 3, 4, 5));

正则

创建：
	字面量：var 变量名 = /表达式/模式修饰符;
	构造函数：var 变量名 = new RegExp("表达式", "模式修饰符");
	PS：
		表达式：
			单个字符：
				. ：匹配除换行符外的任意字符
				[a-z 0-9]：匹配方括号内的任意字符
				[^a-z 0-9]：匹配不在方括号内的任意字符
				\d：匹配数字
				\D：匹配非数字
				\w：匹配字母
				\W：匹配非字母
			空白符：
				\0：匹配NULL
				\b：匹配空格
				\n：匹配换行符
				\r：匹配回车符
				\S：匹配非空白字符
				\t：匹配制表符
			定位符：
				^：行首匹配
				$：行尾匹配
				\A：只匹配字符串的开始处
				\b：匹配单词边界，词在[]内无效
				\B：匹配非单词边界
				\G：匹配当前搜索的开始位置
				\Z：匹配字符串结束处或行尾
				\z：匹配字符串结束处
			限定词：
				x?：匹配0个或1个x
				x*：匹配0个或任意多个x
				x+：匹配至少一个x
				x{m,n}：匹配最少m个，最多n个x
			分组：
				(?:x)：匹配x但不记录匹配结果
				x(?=y)：当x后接y时匹配x
				x(?|y)：当x后不是y时匹配x
			引用： \1...\9  $1...$9
			|：或
		模式修饰符：
			g：全局模式，应用所有字符串
			i：区分大小写
			m：多行匹配
属性：
方法：
	exec()：字符串匹配检索，返回数组或NULL
	match()：查找正则表达式匹配的字符串
	replace()：替换与正则表达式匹配的字符串
	search()：检索与正则表达式匹配的值
	split()：将字符串分割为字符串数组

内置对象

Array

Array：
	创建：var color=new Array("red", "green")
	属性：color.length
	方法：
		添加：
			push()：数组后添加元素  color.push("blue","black")
			unshift()：数组前添加元素  color.unshift("blue","black")
		删除：
			pop()：删除数组最后一个元素并返回  color.pop()
			shift()：删除数组第一个元素并返回  color.shift()
		转换：
			join("分隔符")：数组所有元素转换为一个字符串
			toString()：转换为字符串
		逆序：
			reverse()
		排序：
			sort()：数组排序  转换为string再排序
			数值降序 arr.sort(function(a,b){return b-a});
			数值升序 arr.sort(function(a,b){return a-b});
		连接：
			concat()：连接多个数组 arr3=arr2.concat(arr1, [1,"lalala", 8]);
		截取：
			slice(start,end)：截取元素 (stsrt,end-1)
		splice()：
			删除：splice(index,count)
			插入：splice(index,item1,item2...)
			替换：splice(index,count,item1,item2...)
		查找：
			indexOf(searchValue,[startIndex])：从startIndex开始往后查找searchValue
			lastindexOf()：从startIndex开始往前查找searchValue

实现数组b对数组a的拷贝：
	b=new Array();
    for(var i=0; i<a.length; i++){
        b.push(a[i]);
    }

	b=[].concat(a);

	b=a.slice(0);

String

String：
	检索：
		charAt()：获得index位置的字符
		charCodeAt()：获得index位置的字符编码
		indexOf(value)：从头开始查找value，返回字符串位置，没有返回-1
		lastindexOf(value)：从尾开始查找value，返回字符串位置，没有返回-1
	截取：
		slice(start,[end])：[start,end)
		substring()：[start,end)，当参数为负，自动将参数转换为0
		substr()：
	分割：
		split("分隔符")：字符串分割成字符串数组
	替换：
		replace('旧字符','新字符')：不会修改原字符串
	大小写：
		toUpperCase()：
		toLowerCase()：
	新方法：
		padStart(位数, str)：补全   let str1 = str.padStart(5,'mooc');  // mooci
		padEnd(位数, str)：补全     let str2 = str.padEnd(5,'mooc');    // imooc
		repeat()：复制  function(str, num){ return new Array(num+1).join(str); };
		startsWith()：判断str是否以str1开头  str.startsWith(str1);
		endsWith()：判断str是否以str1结尾  str.endsWith(str1);
		includes()：判断str是否存在子串str1  
			if( str.includes(a promise) ){ console.log('存在'); }
			if( ~str.indexOf(a promise) ){ console.log('存在'); }

// 模板字符串
const hefery = {
    name: 'hefery',
    age: 23,
    say1: function(){
        console.log('我叫' + this.name + ',我今年' + this.age + '岁!');
    },
    say2: function(){
        console.log(`我叫${this.name},我今年${this.age}岁!`);
    }
}
hefery.say1();
hefery.say2();

// 模板字符串
const getImoocCourseList = function(){
    return {
        status: true,
        msg: '获取成功',
        data: [{
            id: 1,
            title: 'Vue入门',
            date: 'xxx-01-09'
        }, {
            id: 2,
            title: 'ES6入门',
            date: 'xxx-01-10'
        }, {
            id: 3,
            title: 'Java入门',
            date: 'xxx-01-11'
        }]
    }
};
const { data: listData, status, msg } = getImoocCourseList();
if (status) {
    let arr = [];
    listData.forEach(function({data, title}){
        /*arr.push(
            '<li>\
                <span>' + title + '</span>' + 
                '<span>' + data + '</span>' +
            '</li>'
        );*/
        arr.push(
            `
                <li>
                    <span>${ `课程名: ${ title }` }</span>
                    <span>${data}</span>
                </li>
            `
        )
    });
    let ul = document.createElememt('ul');
    ul.innerHTML = arr.join('');
    document.body.appendChild(ul);
} else {
    alert(msg);
}

let str = "hefery";

// for循环遍历
for (var i=0,len=str.length; i < len; i++) {
    console.log(str[i]);
    //console.log(str.charAt(i));
}

// 字符串转数组
var ostr1 = Array.prototype.slice.call(str);
console.log(ostr1);  //["h", "e", "f", "e", "r", "y"]
var ostr2 = str.split('');
console.log(ostr2);  //["h", "e", "f", "e", "r", "y"]
const ostr3 = [...str];
console.log(ostr3);  //["h", "e", "f", "e", "r", "y"]

var oStr = str.split('');
oStr.forEach(function(word){
    console.log(word);
});

// 加密：A=100 B=99...
const map = {A: '100', B: '99', C: '98', D: '97', E: '96'};
const words = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
oStr.forEach(function(word, index) {
    if(words.includes(word)) {
        oStr[index] = map[word];
    }
});
console.log(oStr);  //["h", "e", "f", "e", "r", "y"]
console.log(oStr.join(''));  //hefery

// for-of遍历
for (let word of str) {
    console.log(word);
}

获取文件后缀名：
	var url="https://www.bilibili.com/video.txt";
    function getFileFormat(url) {
        var pos=url.lastIndexOf(".");
        return url.substr(pos+1);
    }
    var formatName=getFileFormat(url);

蛇形->驼峰：
	function camelback(str) {
         // 1.字符串拆分为数组
         var arr=str.split("-"), newStr=arr[0];;
         // 2.遍历数组
         for (var i=1,len=arr.length; i < len; i++) {
             var word=arr[i];
             // 3.改变首字母大小写,拼接
             newStr+=word.charAt(0).toUpperCase()+word.substr(1);
         }
         return newStr;
     }
     var camelFormat=camelback("border-left-color");

Math

Math：
	最值：
		min()：Math.min(num1,num2,num3...)
		max()：Math.max(num1,num2,num3...)
	取整：
		ceil() ：Math.ceil(num)   向上取整
		floor()：Math.floor(num)  向下取整
		round()：Math.round(num)  四舍五入
	绝对值：
		abs()：
	随机数：
		random()：Math.random() 返回[0,1)

随机生成[n,m]之间的随机整数：
	random=Math.floor(Math.random()*(m-n+1)+n);

	function getRandom(n, m) {
		var choise=m-n+1;  // 随机整数的个数
		return Math.floor(Math.random()*choise+n);
	}

Date

Date：
	创建：new Date()
	获取：
		年份：getFullYear()
		月份：getMonth()：返回值为0-11
		天数：getDate()
		星期：getDay()
		小时：getHours()
		分钟：getMinutes()
		秒数：getSeconds()
		毫秒：getTime()
	设置：
		年份：setFullYear(year)
		月份：setMonth(mon)：返回值为0-11
		天数：setDate()
		星期：setDay()
		小时：setHours()
		分钟：setMinutes()
		秒数：setSeconds()
		毫秒：setTime()

数值

转换：
	parseInt()：   window.parseInt('1.23');  Number.parseInt(1.23); 
	parseFloat()：
判断：
	isNaN()：	是否为NaN  Number.isNaN(NaN)
	isFinite()： 是否为数值  Number.isFinite(Infinity)  Number.isFinite(2/0) 
	isSafeInteger()：是否为安全数Number.isSafeInteger()  [Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER]
运算：
	幂运算：2 ** 3：2的3次方  PS：右结合

DOM

DOM节点

文档对象模型(DOM,Document Object Model )主要用于对HTML文档的内容进行操作
DOM把HTML文档表达成一个节点树，通过对节点进行操作，实现对文档内容的添加、删除、修改、查找等功能

添加节点

1.document.write()
2.create系列
	document.createElement('元素名') ：创建新的元素节点
	document.createTextCode('文本内容')：创建新的文本节点
	document.createAttribute('属性名')：创建新的属性节点
	document.createDocumentFragment()：创建文档片段节点
	document.createComment('注释节点')：创建注释节点
3.innerHTML：设置或获取当前标签的起始至结束的内容
	局限：
		字符串的最左边不能出现空白，IE6-8会自动移除掉它
		大多数浏览器不会对 script标签进行脚本执行操作
		不能单独创建meta,style,link等元素，一定要在前面加上一些字符
  outerHTML：返回调用它的元素及所有子节点的HTMl标签
4.innerText：设置或获取位于对象起始至结束内的文本
  outerText：返回调用对象起始至结束内的文本

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DOM操作</title>
    <script src="domReady.js"></script>
    <script type="text/javascript">
        myReady1(function(){
			var ul = document.getElementById("myList");
    		var li = document.createElement("li");
    		var text = document.createTextNode("item");
    		li.appendChild(text);
    		ul.appendChild(li);
		});
      
        myReady2(function(){
            var comment = document.createComment("注释内容");
            var fragment = document.createDocumentFragment();
            var ul = document.getElementById("myList");
            var li = null;
            for (var i = 0; i < 3; i++) {
                li = document.createElement("li");
                li.appendChild(document.createTextNode(("Hefery") + (i+1)));
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
            document.body.insertBefore(comment,document.body.firstChild);
        });
      
        myReady3(function(){
            var content = document.getElementById("content");
            var str = "This is a <strong>child</strong>" 
                    + "<ul>" 
                        + "<li>hefery 1</li>"
                        + "<li>hefery 2</li>"
                        + "<li>hefery 3</li>"
                    + "</ul>";
            content.innerHTML = str;
        });
      
        myReady4(function(){
            var content = document.getElementById("content");
            function getInnerText(element) {
                return (typeof element.textContent == "string") ? element.textContent : element.innerText;
            }
            //console.log(getInnerText(content));
            function setInnerText(element, text) {
                if (typeof element.textContent == "string") {
                    element.textContent = text;
                } else {
                    element.innerText = text;
                }
            }
            //setInnerText(content, "hello world");
        });
    </script>
</head>
<body>
    <ul id="myList">Hefery</ul>
</body>
</html>

删除节点

removeChild()	：删除子节点，返回值为删除节点
removeNode()	：IE的私有实现，将目标节点从文档中删除，返回目标节点参数是布尔值，默认值是false
innerHTML		：
deleteContents()：
textContent		：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="domReady.js"></script>
    <script>
      // removeChild()
      myReady(function(){
        var myUl = document.getElementById('myUl');
        console.log(myUl.childNodes.length);
        var secondChild = myUl.removeChild(myUl.childNodes[1]);
        console.log(secondChild);
        console.log(myUl.childNodes.length);
      });

      // removeNode()
      myReady(function(){
        var myUl = document.getElementById('myUl');
        var removedNode = myUl.removeNode(true);
        console.log(removedNode.outerHTML);
      });

      // removeChild() 与 innerHTML比较
      myReady(function(){
        var div = document.createElement("div");
        // console.log(div.parentNode);
        document.body.removeChild(document.body.appendChild(div));

        // console.log(div.parentNode);
        // console.log(div.parentNode.nodeType);

        var myUl = document.getElementById('myUl');
        //document.body.innerHTML = '';
        //console.log(myUl.parentNode);

        myUl.parentNode.removeChild(myUl);
        console.log(myUl.id + ":" + myUl.innerHTML);
        var myUl2 = document.getElementById('myUl2');
        myUl2.parentNode.innerHTML = '';
        console.log(myUl2.id + ":" + myUl2.innerHTML);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ul id="myUl2">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

修改节点

appendChild() ：向父节点的最后一个子节点后追加新节点
insertBefore()：在指定的已有子节点之前插入新的子节点 参数(newNode, index)
replaceChild()：该方法用新节点替换某个子节点 参数(insertNode, replaceNode)
cloneNode()   ：创建节点的拷贝，并返回该副本。
	拷贝的节点要有父节点，如果没有父节点，要通过 appendChild()、insertBefore()、 replaceChild()等方法对其进行添加
normalize()   ：合并相邻的Text节点
splitText()	  ：按照指定的位置把文本节点分割为两个节点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <script src="domReady.js"></script>
    <script>
      // appendChild()
      myReady(function(){
        var myUl = document.getElementById('myUl');
        var txt = document.createTextNode('4');
        var li = document.createElement('li');
        var firstLi = myUl.firstElementChild;
        li.appendChild(txt);
        myUl.appendChild(li);
        var returnedNode = myUl.appendChild(firstLi);
        console.log(returnedNode);
      });

      // insertBefore()
      myReady(function(){
        var myUl = document.getElementById('myUl');
        var txt = document.createTextNode('4');
        var liNew = document.createElement('li');
        liNew.appendChild(txt);
        // var li2 = myUl.children.item(1);
        // var returnNode = myUl.insertBefore(liNew, li2);
        // console.log(returnNode.innerHTML);
        // myUl.insertBefore(liNew, null);
        // myUl.insertBefore(liNew, myUl.firstElementChild);
        myUl.insertBefore(liNew, myUl.lastElementChild);
      });

      // replaceChild
      myReady(function(){
        var myUl = document.getElementById('myUl');
        var txt = document.createTextNode('4');
        var liNew = document.createElement('li');
        liNew.appendChild(txt);
        var li2 = myUl.children.item(1);
        var returnNode = myUl.replaceChild(liNew, li2);
        console.log(returnNode);
      });

      // cloneNode()
      myReady(function(){
        var myUl = document.getElementById('myUl');
        var newNode = myUl.cloneNode(true);
        console.log(newNode);
        document.body.appendChild(newNode);
      });

      // normalize()
      myReady(function(){
        var div = document.createElement("div");
        var textNode = document.createTextNode("DOM探索");
        div.appendChild(textNode);

        var textNode2 = document.createTextNode("之节点操作篇");
        div.appendChild(textNode2);
        document.body.appendChild(div);

        console.log(div.childNodes.length);
        div.normalize();
        console.log(div.childNodes.length);
        console.log(div.firstChild.nodeValue);
      });

      // splitText()
      myReady(function(){
        var div = document.createElement("div");
        var textNode = document.createTextNode("DOM探索之节点操作篇");
        div.appendChild(textNode);
        document.body.appendChild(div);

        var newNode = div.firstChild.splitText(5);
        console.log(div.firstChild.nodeValue);
        console.log(newNode.nodeValue);
        console.log(div.childNodes.length);
      });
    </script>
  </head>
  <body>
    <ul id="myUl">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

遍历节点

父子节点：
	子节点获取父节点：parentNode
	父节点获取子节点：firstNode、lastNode
兄弟节点：
	大兄弟获取小兄弟：nextSibling
	小兄弟获取大兄弟：previousSibling

判断是否存在子节点：hasChildNodes()
任意子孙节点获取文档节点：ownerDocument

遍历所有节点

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>DOM操作（所有元素节点）</title>
    <script src="domReady.js"></script>
    <script type="text/javascript">
        myReady(function(){
            var rootHTML = document.documentElement;  // 获取文档的根节点
            console.log(rootHTML.tagName);  // HTML

            //var rootHead = rootHTML.firstChild;
            //var rootHead = rootHTML.childNodes[0];
            var rootHead = rootHTML.childNodes.item(0);
            console.log(rootHead.tagName);  // HEAD

            console.log(rootHead.parentNode == rootHTML);  // true：判断head标签的父节点是否为html

            var rootBody = rootHTML.childNodes.item(1);
            console.log(rootBody.tagName);  // undefined：</head>与<body>之间存在空格

            console.log(rootHead.nextSibling == rootBody);      // true：判断head标签的小兄弟节点是否为body
            console.log(rootBody.previousSibling == rootHead);  // true：判断body标签的大兄弟节点是否为head

            var p = document.getElementById("hefery");
            console.log(p.ownerDocument == document);   // true
        }); 
    </script>
</head><body>
    <div id="content">
      <p id="hefery">This is a <strong>paragraph</strong> with a list following it.</p>
      <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
</body>
</html>

遍历元素节点

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>查找子节点（忽略空白节点text）</title>
    <script src="domReady.js"></script>
    <script>
      myReady1(function(){
        var box = document.getElementById("box");
        for(var i = 0, len = box.childNodes.length; i < len; i++) {
          console.log(box.childNodes[i]);
        }
      });

      myReady2(function(){
        var box = document.getElementById("box");
        for(var i = 0, len = box.childNodes.length; i < len; i++) {
          if (box.childNodes[i].nodeType == 1) {
            console.log(box.childNodes[i]);
          }
        }
      });

      myReady3(function(){
        var box = document.getElementById("box");
        for(var i = 0, len = box.childElementCount; i < len; i++) {
          console.log(box.children[i]);
        }
      });
    </script>
  </head>
  <body>
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>  
    </ul>
  </body>
</html>

类数组对象NodeList

类数组对象NodeList，用于保存一组有序的节点，可以通过方括号语法来访问 NodeList的值，有item方法与 length属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>NodeList对象的特点</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var box = document.getElementById("box");
        var nodes = box.childNodes;
        console.log(nodes);
        //console.log(nodes[1]);
        //console.log(nodes.item(1));
        //nodes.push("<li>节点四</li>");  // 错误，NodeList不是数组

        // 使NodeList转换为数组
        function makeArray(nodeList){
          var arr = null;  // 存储数组
          try {
            return Array.prototype.slice.call(nodeList);
          }catch (e){
            arr = new Array();
            for(var i = 0, len = nodeList.length; i < len; i++){
              arr.push(nodeList[i]);
            }
          }
          return arr;
        }

        var newNodeList = makeArray(nodes);
        newNodeList.push("<li>节点四</li>");
        console.log(newNodeList);
      });
    </script>
  </head>
  <body>
    <ul id="box">  
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>  
    </ul>
  </body>
</html>

类数组对象HTMLCollection

Ele.getElementsByTagName()：根据标签名获取节点
document.scripts：返回 scripts 内全部元素集合
document.links：返回 document 全部 a 标签元素
document.images：返回 document 全部 images 标签元素
document.forms：返回 document 全部 form 标签元素
tr.cells；返回 tr 标签内所有 td 标签元素
select.options：返回 select 的全部选项

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>类数组对象HTMLCollection</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var scripts = document.scripts;
        var links = document.links;
        var cells = document.getElementById("tr").cells;
        var imgs = document.images;
        var forms = document.forms;
        var options = document.getElementById("select").options;
        var ps = document.getElementsByTagName("p");

        /*console.log(scripts);
        console.log(links);
        console.log(cells);
        console.log(imgs);
        console.log(forms);
        console.log(options);
        console.log(ps);*/

        console.log(cells.namedItem('td'));
      });
    </script>
  </head>
  <body>
    <ul id="box">
      <li>节点一</li>
      <li>节点二</li>
      <li>节点三</li>
    </ul>

    <table border="1">
      <tr id="tr">
        <td>第一行</td>
        <td name="td">第二行</td>
        <td name="td">第三行</td>
      </tr>
    </table>

    <img src="duer.jpg" alt="img1" />
    <img src="ipone6s+.png" alt="img2" />

    <form action="">
      <input type="text" value="用户名">
    </form>
    <form action="">
      <input type="text" value="密码">
    </form>

    <a href="#">忘记密码</a>
    <a href="#">更多内容</a>

    <select id="select">
      <option value="0">北京</option>
      <option value="1">天津</option>
      <option value="2">河北</option>
    </select>

    <p>DOM探索之基础详解篇</p>
    <p>DOM探索之节点操作篇</p>
  </body>
</html>

类数组对象NamedNodeMap

Ele.attributes

查找节点

document.getElementById("id属性值")：通过id获取节点
document.getElementsByName("name属性值")：通过元素name获取节点
Ele.getElementsByTagName("标签名")：返回拥有指定标签名的对象集合
Ele.getElementsByClassName("class属性值")：回拥有指定class的对象集合

Ele.querySelector("CSS选择器")：仅返回第一个匹配的元素
Ele.querySelectorAll("CSS选择器")：返回所有匹配的元素

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>getElementById bugfix</title>
    <script src="domReady.js"></script>
    <script>
      // document.getElementById()
      myReady1(function(){
        var getElementById = function(id) {
          var el = document.getElementById(id);
          if(!+"\v1") {  // 若为IE浏览器
            if(el && el.id === id) {
              return el;
            } else {
              var els = document.all[id],
                  n = els.length;
              for (var i = 0; i < n; i++) {
                if (els[i].id === id) {
                  return els[i];
                }
              }
            }
          }
          return el;
        };
        console.log(getElementById("target").tagName);
      });
    
      // document.getElementsByName()
      myReady2(function(){
        //var myUl = document.getElementsByName('myUl');
        var myDiv = document.getElementById('myDiv');
        //var myUl = myDiv.getElementsByName('myUl');
        var citys = document.getElementsByName('city');
        console.log(myUl);
        console.log(myDiv);
        console.log(citys.length);
      });
      
      // Ele.getElementsByTagName()
      myReady3(function(){
        var lis1 = document.getElementsByTagName('li');
        var lis2 = document.getElementsByTagName('Li');
        var inputs = document.getElementsByTagName('input');
        var comment = document.getElementsByTagName('!');
        var all = document.getElementsByTagName('*');
        /*console.log(lis1.length);
        console.log(lis2.length);
        console.log(inputs[0].value);
        console.log(comment[0].nodeValue);
        console.log(comment[1].nodeValue);*/
        for(var i = 0, len = all.length; i < len; i++) {
          console.log(all[i].tagName);
        }
      });
      
      // Ele.getElementsByClassName()
      myReady4(function(){
        var myUl2 = document.getElementById("myUl2");
        var r = getElementsByClassName({
          searchClass: "light dark",
          node: myUl2
        });
        console.log(r[0].innerHTML);
      });
      
      // Ele.querySelector()
      myReady5(function(){
        var myDiv = document.getElementById('myDiv');
        //var ul = myDiv.querySelector('#myUl');
        var ul = document.querySelector('#myUl');
        var li = myDiv.querySelector('li:last-child');
        var els = document.querySelector('input, li');
        var span = document.querySelector('span');
        var input = document.querySelector('.foo\\:bar');
        //console.log(ul);
        //console.log(li);
        //console.log(els);
        //console.log(span);
        console.log(input);
      });
      
      // Ele.querySelector()
      myReady6(function(){
        var myDiv = document.getElementById('myDiv');
        var ul = myDiv.querySelectorAll('ul');
        var li = myDiv.querySelectorAll('li');
        var span = myDiv.querySelectorAll('span');
        //console.log(ul);
        //console.log(li);
        console.log(span);
      });
      
      // Ele.querySelectorAll()
      myReady7(function(){
        var divs = document.querySelectorAll("div");
        var i = 0;
        while(i < divs.length){
          document.body.appendChild(document.createElement("div"));
          i++;
        }
      });
    </script>
  </head>
  <body>
    <a name="target" href="http://www.cnblogs.com/rubylouvre/">这是错误的元素</a>
    <p id="target">这是正确的元素</p>
    <button id="button" type="button">开始测试</button>
    
    北京<input type="checkbox" id="beijing" name="city" value="北京" />
    天津<input type="checkbox" name="city" value="天津" />
    上海<input type="checkbox" name="city" value="上海" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl" name="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    
    <!--页面元素-->
    <input type="text" name="myDiv" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    
    <ul id="myUl">
      <li class="light">1</li>
      <li class="light dark">2</li>
      <li class="light">3</li>
    </ul>
    <ul id="myUl2">
      <li class="light">1</li>
      <li class="light dark">second</li>
      <li class="light">3</li>
    </ul>
    
    <input type="text" class="foo:bar" value="请输入内容" />
    <div id="myDiv">
      You are my sunshine.
      <ul id="myUl">
        <li>1</li>
        <li>2</li>
        <li>3</li>
      </ul>
    </div>
    
    <div></div>
    <div></div>
    <div></div>
  </body>
</html>

// 解决getElementsByClassName()兼容性
var getElementsByClassName = function(opts) {
	var searchClass = opts.searchClass; // 存储要查找的类名
	var node = opts.node || document;  // 存储要出查找的范围
	var tag = opts.tag || '*'; // 存储一定范围内要查找的标签
	var result = [];
		// 判断浏览器支不支持getElementsByClassName方法
	if (document.getElementsByClassName) { // 如果浏览器支持
		var nodes = node.getElementsByClassName(searchClass);
		if (tag !== "*") {
			for (var i = 0; node = nodes[i++];) {
				if (node.tagName === tag.toUpperCase()) {
					result.push(node);
				}
			}
		} else { 
			result = nodes;
		}
		return result;
	} else { // 使用IE8以下的浏览器能够支持该属性
		var els = node.getElementsByTagName(tag);
		var elsLen = els.length;
		var i, j;
		var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
		for (i = 0, j = 0; i < elsLen; i++) {
			if (pattern.test(els[i].className)) { // 检测正则表达式
				result[j] = els[i];
				j++;
			}
		}
		return result;
	}
}

DOM属性

分类：

• 自定义属性Attribute
• 固有属性Property

方法：

• getNamedItem()
• removeNamedItem()
• setNamedItem()
• getAttribute()：获得指定属性名的属性值
• setAttribute()：
• removeAttribute()：

自定义属性Attribute

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Attributes</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var div = document.querySelector('div');
        // console.log(div.xxx);
        // 获取属性
        console.log(div.attributes.getNamedItem('xxx').nodeValue);  // 自定义属性
        // console.log(div.nodeName);
        // console.log(div.attributes.getNamedItem('nodeName').nodeValue);  // 固有属性
        // console.log(div.attributes.getNamedItem('id').nodeValue);
        // console.log(div.attributes['id'].nodeValue);
        // 移除属性
        div.attributes.removeNamedItem('yyy');
        // 添加属性
        // div.attributes.setNamedItem('data-title', 'ddd');
        var attr = document.createAttribute('data-title');
        attr.value = 'ddd';
        div.attributes.setNamedItem(attr);
      });
    </script>
  </head>
  <body>
    <div id="div0" url="http://www.baidu.com" xxx="aaa" yyy="bbb"></div>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>getAttribute</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        // var div = document.querySelector('div');
        var div = document.getElementById('div0');
        div.innerHTML = "属性操作方法";
        // console.log(div.innerHTML);
        // console.log(div.url);
        // console.log(div.getAttribute('url'));
        // console.log(div.getAttribute('yyy'));
        // console.log(div.getAttribute('style'));
        // console.log(div.style);
        console.log(div.getAttribute('onclick'));
        console.log(div.onclick);
      });

      myReady(function(){
        var div = document.getElementById('div0');
        div.setAttribute('xxx', 'a');
        div.setAttribute('data-event', 'click');
        div.setAttribute('style', 'color:blue');
        div.setAttribute('onclick', 'alert(1)');
      });

      myReady(function(){
        var div = document.getElementById('div0');
        div.removeAttribute('style');
        alert(document.body.innerHTML);
      });
    </script>
  </head>
  <body>
    <div id="div0" style="color:red" onclick="alert(0)" url="http://www.baidu.com" xxx="aaa" Yyy="bbb"></div>

    <div id="div0" style="color:red" onclick="alert(0)" url="http://www.baidu.com" xxx="aaa" Yyy="bbb">点击我</div>

    <div id="div0" style="color:red" onclick="alert(0)" url="http://www.baidu.com" xxx="aaa" Yyy="bbb">点击我</div>
  </body>
</html>

固有属性Property

布尔属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>布尔属性</title>
    <script src="domReady.js"></script>
    <script>
      // checked
      myReady(function(){
        var inputs = document.querySelectorAll("input");
        inputs[0].checked = 1;  // 非空(0，"")就是true，即选中
        inputs[0].removeAttribute('checked');  // checked为input的固有属性，不可移除
      });

      // selected
      myReady(function(){
        var city = document.getElementById('city');
        var options = city.options;
        options[2].selected = true;  // 将纽约作为默认选中城市
      });

      // readOnly
      myReady(function(){
        var nationality = document.getElementById('nationality');
        nationality.readOnly = false;
      });

      // multiple
      myReady(function(){
        var city = document.getElementById('city');
        city.multiple = false;
      });

      // hidden
      myReady(function(){
        var div = document.getElementById('div');
        div.hidden = false;
      });
    </script>
  </head>
  <body>
    <!-- checked -->
    性别：<br/>
    <input type="radio" name="gender" value="male" checked="checked" />男
    <input type="radio" name="gender" value="female" />女
    <br/>

    <!-- selected -->
    你去过的城市：<br/>
    <input type="checkbox" name="beijing" value="北京">北京
    <input type="checkbox" name="hongkong" value="香港" checked="checked">香港   <!--将香港作为默认选中城市-->
    <input type="checkbox" name="newyork" value="纽约" checked>纽约

    <!-- readOnly -->
    国籍：<input id="nationality" type="text" value="中国" readonly="readonly" />

    <!-- multiple -->
    你去过的城市：<br/>
    <select name="city" id="city" multiple="multiple">
      <option value="北京">北京</option>
      <option value="香港" selected="selected">香港</option>
      <option value="纽约">纽约</option>
    </select>

    <!-- hidden -->
    <div id="div" hidden="hidden">html5 新增属性hidden</div>
  </body>
</html>

字符串属性

常见属性：
	id：元素唯一标识
	title：鼠标停留出现的提示信息
	href：超链接，用于a、link元素
	src：数据源
	lang：语言
	dir：输出方向
	accesskey：
	name：控件名
	value：控件值
	class
全局属性：
	accesskey：
	class：
	contenteditable：可编辑
	dir：
	hidden：隐藏
	id：
	lang：
	spellcheck：语法检查
	style：元素样式
	tabindex：规定当使用"tab"键进行导航时元素的顺序
	title：
	translate：规定是否应该翻译元素内容，目前所有主流浏览器都无法正确支持该属性

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>string attributes</title>
    <link rel="stylesheet" href="style.css">
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var p = document.getElementById('sentence');
        // alert(p.innerHTML);
        var author = document.getElementById('author');
        author.className = 'light';
      });
    </script>
  </head>
  <body>
    <p style="text-align:center" id="title" class="large"><bdo dir="RTL">芙蓉楼送辛渐</bdo></p>
    <p style="text-align:center" id="author"><bdo dir="RTL">王昌龄</bdo></p>
    <p style="text-align:center" id="sentence"><bdo dir="RTL">寒雨连江夜入吴，</bdo></p>
    <p style="text-align:center" id="sentence"><bdo dir="RTL">平明送客楚山孤。</bdo></p>   <!-- id一样，只认第一个 -->
    <p style="text-align:center" title="洛阳亲友如相问，"><bdo dir="RTL">洛阳亲友如相问，</bdo></p>
    <p style="text-align:center" title="一片冰心在玉壶。"><bdo dir="RTL">一片冰心在玉壶。</bdo></p>
    <a href="http://www.diyifanwen.com/sicijianshang/tangshisanbaishou/">更多</a>
    <img src="x.jpg" alt="欧美小孩">
    <input type="text" name="txt1" value="tab1" accesskey="a" />  <!-- Alt + A -->
    <input type="text" name="txt2" value="tab2" accesskey="s" />  <!-- Alt + S -->
  </body>
</html>

data属性

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>data attributes</title>
    <script src="domReady.js"></script>
    <script>
      myReady(function(){
        var btn = document.getElementById('btn');
        console.log(btn.dataset.toggle);
        console.log(btn.dataset.xxxYyy);
      });
    </script>
  </head>
  <body>
    <button id="btn" type="button" data-xxx-yyy="abc" data-toggle="modal">Small modal</button>
  </body>
</html>

class属性

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>class attributes</title>
    <script src="domReady.js"></script>
    <script>
      var CC = {
        // 获取 class
        getClass: function(ele) {
          return ele.className.replace(/\s+/, " ").split(" ");
        },

        // 是否存在 class
        hasClass: function(ele, cls) {
          return -1 < (" " + ele.className + " ").indexOf(" " + cls + " ");
        },

        // 添加 class
        addClass: function(ele, cls) {
          if (!this.hasClass(ele, cls))
            ele.className += " " + cls;
        },

         // 删除 class
        removeClass: function(ele, cls) {
          if (this.hasClass(ele, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)', "gi");
            ele.className = ele.className.replace(reg, " ");
          }
        },

        // 存在 class 就移除，不存在添加
        toggleClass: function(ele, cls) {
          if (this.hasClass(ele, cls)) {
            this.removeClass(ele, cls);
          } else {
            this.addClass(ele, cls);
          }
        }
      };

      myReady(function() {
        var body = document.body;
        console.log(CC.getClass(body));
        console.log(CC.hasClass(body, 'bbb'));
        CC.addClass(body, 'ccc');
        CC.removeClass(body, 'aaa');
        CC.toggleClass(body, 'bbb');
      });
    </script>
  </head>
  <body class="aaa bbb aaa">
      TEST
  </body>
</html>

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>classList</title>
    <script src="domReady.js"></script>
    <script>
      var CL = {
        addClass: function(ele, cls) {
          ele.classList.add(cls);
        },

        removeClass: function(ele, cls) {
          ele.classList.remove(cls);
        },

        hasClass: function(ele, cls) {
          return ele.classList.contains(cls);
        },

        toggleClass: function(ele, cls) {
          return ele.classList.toggle(cls);
        }
      };

      myReady(function() {
        var body = document.body;
        console.log(CL.hasClass(body, 'bbb'));
        CL.addClass(body, 'ccc');
        CL.removeClass(body, 'aaa');
        CL.toggleClass(body, 'bbb');

        setTimeout(function(){
            alert(document.body.classList.toString());
        },2000);
      });
    </script>
  </head>
  <body class="aaa bbb aaa">
      TEST
  </body>
</html>

DOM事件

事件：文档或浏览器窗口中发生的一些特定的交互瞬间

HTML事件

HTML事件：直接在HTML元素标签内添加事件，执行脚本
	语法：<tag事件=“执行脚本"></tag>
	功能：在HTML元素上绑定事件
	说明：执行脚本可以是一个函数的调用
	注意：不建议使用HTML事件原因：
		多元素绑定相同事件时，效率低
		不建议在HTML元素中写JavaScript代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .btn{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<input type="button" value="弹 出" onclick="alert('我是按钮')">
	<!--鼠标划过按钮时调用mouseoverFn的函数-->
	<div class="btn" onmouseover="mouseoverFn(this,'#f00')" onmouseout="mouseoutFn(this,'#ff0')">开始</div>
	<div class="btn" onmouseover="mouseoverFn(this,'#0f0')" onmouseout="mouseoutFn(this,'#333')">结束</div>
	<script>
        function mouseoverFn(btn,bgColor){
        	// 鼠标划过按钮时，按钮的背景变为红色
            btn.style.background=bgColor;
        }
        function mouseoutFn(btn,bgColor){
            btn.style.background=bgColor;
        }
	</script>
</body>
</html>

DOM 0级事件

DOM0级事件：通过DOM获取HTML元素，再（获取HTML元素）事件=执行脚本
	语法：ele事件=执行脚本
	功能：在DOM对象上绑定事件
	说明：执行脚本可以是一个匿名函数，也可以是一个函数的调用

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
       .lock{width:140px;height:30px;line-height: 30px;background:#00f;
       	color:#fff;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
       .unlock{width:140px;height:30px;line-height: 30px;background:#666;
       	color:#ccc;font-size:14px;text-align:center;border-radius:5px;
       	cursor:pointer;margin-top:30px;}
	</style>
</head>
<body>
	<div class="lock" id="btn">锁定</div>
	<script>
        // 获取按钮
        var btn=document.getElementById("btn");

        function clickBtn(){
           alert("我是按钮");
        }
        // 点击按钮调用clickBtn这个函数(不要加圆括号)
        btn.onclick=clickBtn;

        // 给按钮绑定事件,this是对该DOM元素的引用
        btn.onclick = function() {
           // 判断如果按钮是锁定，则显示为解锁，变为灰色，否则显示为锁定，变为蓝色
           if (this.className=="lock") {
               this.className="unlock";
               this.innerHTML="解锁";
           } else {
               this.className="lock";
               this.innerHTML="锁定";
           }
           if (this.innerHTML=="锁定") {
               this.className="unlock";
               this.innerHTML="解锁";
           } else {
               this.className="lock";
               this.innerHTML="锁定";
           }
        }
	</script>
</body>
</html>

鼠标事件

鼠标事件：
	onload	   ：页面加载时触发（解决JS加载顺序的问题：解析完body再解析onload脚本）
	onclick	   ：鼠标点击时触发
	onmouseover：鼠标滑过时触发
	onmouseout ：鼠标离开时触发
	onfoucs	   ：获得焦点时触发（onfocus事件用于：input标签type为text、password、textarea标签）
	onblur	   ：失去焦点时触发
	onchange   ：域的内容改变时发生
	onsubmit   ：在表单中的确认按钮被点击时触发（主要用在<form>标签）
	onmousedown：在鼠标按键被按下时发生
	onmousemove：鼠标在对象上移动时发生
	onmouseup  ：在鼠标按键被松开时发生
	onresize   ：在窗口大小被调整时发生（主要用于window上）
	onscroll   ：在滚动条被拖动时触发

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>电话号码输入检测：onload、onfoucs、onblur</title>
	<style>
       .box{
       	  padding:50px;
       }
       .left,.tip{
       	  float:left;
       }
       .left{margin-right:10px;}
       .tip{display:none;font-size:14px;}
	</style>
	<script>
       window.onload=function(){
       	  // 获取文本框和提示框
       	  var phone=document.getElementById("phone"),
              tip=document.getElementById("tip");
          // 给文本框绑定激活的事件
          phone.onfocus=function(){
          	  // 让tip显示出来
          	  tip.style.display='block';
          }
          // 给文本框绑定失去焦点的事件
          phone.onblur=function(){
             // 获取文本框的值,value用于获取表单元素的值
             var phoneVal=this.value;
             // 判断手机号码是否是11位的数字
             // 如果输入正确，则显示对号图标，否则显示错号图标
             if(phoneVal.length==11 && isNaN(phoneVal)==false){
                tip.innerHTML='<img src="img/right.png">';
             }else{
             	  tip.innerHTML='<img src="img/error.png">';
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		<div class="left">
			<input type="text" id="phone" placeholder="请输入手机号码">
		</div>
		<div class="tip" id="tip">
           请输入有效的手机号码
		</div>
	</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>选择颜色项改变背景颜色：onchange</title>
	<script>
       // 页面加载
       window.onload=init;

       // 初始化
       function init() {
          // 获取下拉菜单
          var menu=document.getElementById("menu");
          // 给菜单绑定change事件,一般作用域select或checkbox或radio
          menu.onchange=function(){
             // 获取当前选中的值
             //var bgcolor=this.value;
             var bgcolor=menu.options[menu.selectedIndex].value;
             // 如果bgcolor为空，则下面的脚本将不执行
             // if(bgcolor=="")return;
             // 设置body的背景色
             // 如果bgcolor为空，则将背景色设为白色，否则是选择的颜色
             if(bgcolor==""){
                document.body.style.background="#fff";
             }else{
             	document.body.style.background=bgcolor;
             }
          }
       }
	</script>
</head>
<body>
	<div class="box">
		请选择您喜欢的背景色：
		<select name="" id="menu">
			<option value="">请选择</option>
			<option value="#f00">红色</option>
			<option value="#0f0">绿色</option>
			<option value="#00f">蓝色</option>
			<option value="#ff0">黄色</option>
			<option value="#ccc">灰色</option>
		</select>
	</div>
</body>
</html>

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>onmousedown、onmousemove、onmouseup、onclick、onresize、onscroll</title>
	<style>
	   body{height:2000px;}
       .box{width:200px;height:200px;background:#f00;overflow:auto;}
	</style>
</head>
<body>
	<div class="box" id="box">
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
		<p>拖动</p>
	</div>
	<script>
       var box=document.getElementById("box");
       // 绑定按下的事件
       box.onmousedown=function(){
              console.log("我被按下了");
       }
       // 绑定移动的事件
       box.onmousemove=function(){
       	console.log("我被移动了");
       }
       // 绑定松开的事件
       box.onmouseup=function(){
       	console.log("我被松开了");
       }
       // 绑定点击的事件
       box.onclick=function(){
       	console.log("我被点击了");
       }
       // 浏览器窗口尺寸发生改变时
       window.onresize=function(){
       	console.log("我的尺寸被改变了");
       }
       // 拖动滚动条
       window.onscroll=function(){
       	console.log("我被拖动了");
       }
       box.onscroll=function(){
       	console.log("我是DIV的滚动条");
       }
	</script>
</body>
</html>

键盘事件

onkeydown ：事件会在用户按下一个键盘按键时发生
onkeypress：事件会在键盘按下时发生
onkeyup   ：事件会在键盘按键被松开时发生
keyCode   ：返回onkeypress、onkeydown或onkeyup事件触发的键的值的字符代码，或键的代码

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>输入剩余字数</title>
	<style>
       .text span{font-weight:bold;color:#f00;}
       em{font-style:normal;}
       b{font-weight:normal;}
	</style>
</head>
<body>
	<div>
		<p class="text">
			<b id="showcount">您还可以输入</b>
			<span id="totalbox"><em id="count">30</em>/30</span>
		</p>
		<div class="input">
			<textarea name="" id="text" cols="70" rows="4"></textarea>
		</div>
	</div>
	<script>
	   // 获取文本框及其他元素
       var text=document.getElementById("text");
       var total=30;
       var count=document.getElementById("count");
       var showcount=document.getElementById("showcount");
       var totalbox=document.getElementById("totalbox");
	   // 绑定键盘事件
	   document.onkeyup=function(){
	   	  // 获取文本框值的长度
	   	  var len=text.value.length;
	   	  // 计算可输入的剩余字符
	   	  var allow=total-len;
	   	  var overflow=len-total;
	   	  // 如果allow小于0
	   	  if(allow<0){
              showcount.innerHTML="您已超出"+overflow;
              totalbox.innerHTML='';
	   	  }else{
	   	  	  showcount.innerHTML='您还可以输入';
	   	  	  totalbox.innerHTML='<em id="count">'+allow+'</em>/30';
	   	  }
	   }
	</script>
</body>
</html>

JS事件

事件：可以被 JavaScript侦测到的行为，通俗的讲就是当用户与Web页面进行某些交互时，解释器就会创建响应的event对象以描述事件信息

事件句柄：事件处理函数、事件监听函数，指用于响应某个事件而调用的函数
每个事件均对应一事件句柄，程序执行时，将相应函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数

DOM事件流

为特定事件定义监听函数有三种方式：
	1.直接在HTML中定义元素的事件相关属性
	  <button onclick="alertWindow()">点击我</button>
	  function alertWindow() {
		 alert("我被点击了")
	  }
	  缺点：违反了“内容与行为相分离”的原则，应尽可能少用
	2.DOM0级事件
	  缺点：此语法实现了“内容与行为相分离”，但元素扔只能绑定一个监听函数
	3.DOM2级事件
	  高级事件处理方式，一个事件可以绑定多个监听函数

DOM事件流
	DOM0级与DOM2级区别：
		1.DOM2支持同一dom元素注册多个同种事件
		2.DOM2新增了捕获和冒泡的概念

在HTML定义元素事件相关属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>直接在HTML中定义元素的事件相关属性</title>
	</head>
	<body>
		<button id="btn">点击我</button>
		<script type="text/javascript">
			var btn = document.getElementById("btn");
			//方法一
			var clickme = function(){
				alert("我已经被点击");
			}
			btn.addEventListener('click',clickme)
			//方法二
			/*btn.addEventListener('click',function(){
				alert("我已经被点击");
			})*/
		</script>
	</body>
</html> 

DOM 0级事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM0级事件</title>
	</head>
	<body>
		<!--<button onclick="alert('我被点击了')"></button>-->
		<button onclick="alertWindow()">点击我</button>
		<button id="btn">DOM0级事件绑定方式</button>
		<button id="btn2">DOM2级事件绑定方式</button>
	
		<script type="text/javascript">
			//DOM0级事件
			//方法二
			var Dom0 = function() {
				alert("DOM0级事件绑定方式 ");
			}
			var Dom0_1 = function() {
				alert("DOM0级事件绑定方式 ");
			}
			var btn = document.getElementById("btn");
			btn.onclick = Dom0;
			btn.onclick = Dom0_1;
			//方法一
			/*btn.onclick = function(){
				alert("DOM0级事件绑定方式 ");
			}*/
		</script>
	</body>
</html>

DOM 2级事件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>DOM2级事件</title>
	</head>
	<body>
		<!--<button onclick="alert('我被点击了')"></button>-->
		<button onclick="alertWindow()">点击我</button>
		<button id="btn">DOM0级事件绑定方式</button>
		<button id="btn2">DOM2级事件绑定方式</button>
	
		<script type="text/javascript">
			var Dom0 = function() {
				alert("DOM0级事件绑定方式 ");
			}
          
            //DOM二级事件
			var = function() {
				alert("DOM2级事件绑定方式")
			}
			var btn2 = document.getElementById("btn2");
			//第一个参数是事件类型，第二个参数是事件句柄，第三个参数默认是false，可以设置成true
			//btn2.addEventListener('click',function(){
			//	alert("DOM2级事件绑定方式")
			//,false);
			btn2.addEventListener('click',Dom2, false);
			//btn2.addEventListener('click',function(){
			//	alert("DOM2_1级事件绑定方式")
			//},false);
          
            /* 
             * removeEventListener(event, function, useCapture)
             * event：字符串，要移除的事件名称
			 * function：必须。指定要移除的函数
			 * useCapture：可选。布尔值，指定移除事件句柄的阶段
			 */
			//事件解绑
			//btn2 = removeEventListener('click', function() {
			//	alert("DOM2级事件绑定方式")
			//});
			var Dom2 = function() {
				alert("DOM0级事件绑定方式 ");
			}
			//事件解绑
			btn2.removeEventListener('click', Dom2);
			//事件解绑成功的主要原因是：保持addxx和removexx里面的参数相同
		</script>
	</body>
</html>

IE事件流

添加事件：
	语法：element.attachEvent(event, function)
	参数：
    	 event：字符串，指定事件名，必须加“on"前缀
		 function：指定要事件触发时执行的函数
	功能：用于向指定元素添加事件句柄参数

移除事件：
	语法：element.detachEvent(event, functio)
	参数: 
		 event：字符串，要移除的事件名称
		 function：指定要移除的函数
	功能：移除 attachEvent()方法添加的事件句柄

注意：
	addEventListener：Chrome、Firefox、IE9
	attachEvent：IE8及以下版本