javascript 原生

引入JS

• 引入外部js代码存放在assets包中，因为android打包 H5 对assets 不进行编译默认

• 用户代理从上至下读 ，正常 js 放置最低端 ，css 放置前面

• 如果想要js放前面需要添加属性defer ： 下载完后，再执行js

<script type="text/javascript" src="./assets/js/index.js" defer="defer"></script>

<!--async 异步： 另起一个线程去打开js-->

<script type="text/javascript" src="./assets/js/index.js" async></script>

<!--标签 noscript： -->
<noscript>
	你的浏览器不支持js
</noscript>

状态 ： 304 从js缓存中加载

数据类型

console.log("hello js")
var a = '100',
	b = '200'
console.log(typeof(a) ) //string
var d = parseInt(a) + parseInt(b);

console.log(d)
// undefined
var e
console.log(typeof(e))

var f = null
console.log(f) //null

// json 原生的JavaScript 对象object
var j = {
	"name" : "djl",
	"sex":1
}
console.log(typeof(j))

//boolean 类型
var bo = true
var po = false
console.log(typeof(po) ) //boolean
var num = 1 // 数字类型 十进制
console.log(Number.MIN_VALUE)
console.log(Number.MAX_VALUE)
//大数字 Infinity
var bigNum = 1.7976931348623157e+500
console.log(isFinite(bigNum)) // 判断是否在限制内	 , 也能判断是否是数字
console.log(bigNum) // 输出Infinity

var num8 = 0254 // 如果数字转换不了8进制，默认转换十进制
var num16 = 0xA // 十六进制
var f1 = 1.1 // 浮点类型
var e1 = 2e2 // 200
console.log(e1)
if(typeof(num) == "number"){
	console.log(typeof(num) )
}

//NaN
var n1 = 0
var n2 = "hello"
console.log(n1/n2)

console.log(Number("数字转换")) //NAN
console.log(Number(true)) //1
console.log(Number("1.99")) //1.99
console.log(parseInt("数字转换")) //NAN
console.log(parseInt("1.99")) //1
console.log(parseInt(true)) //NAN
console.log(parseFloat("1.99")) //1.99
var st = 1;
console.log(typeof(st.toString())) //string

//函数
var fun = function(a){
	console.log("a 函数被调用" + a)
}
fun(121) // 调用

语句

//语句：

var a = 2;
if(a<2){
	console.log("小于2")
}else if(a>2){
	console.log("大于2")
}else{
	console.log("等于2")
}
switch(a){
	case 1:
		console.log("等于1");
		break;
	case 2:
		console.log("等于2");
		break;
	case 3:
		console.log("等于3");
		break;
}

var blo = true;
while(blo){
	console.log("this is while")
	if(blo = true){
		blo = false;
	}
}
do{
	console.log("do..while")
}while(false)

//for.. in
var user={
	"name" : "djl",
	"age" :12
}
var arr = [1,2,3,4,5]
for(var u in user){
	// 得到json 的key  获取value
	console.log(u +":" +user[u])
}
for(var a in arr){
	// 得到数组的下表  获取数组的值
	console.log(a +":" +arr[a])
}

//with 语句 方便修改对象的属性
with(user){
	name="changename",
	age = 123
}
console.log(user.name + "--" + user.age)

//break 中断循环 continue 不往下执行单次循环
for(var i=0;i<10;i++){
	if(i==1){
		continue
	}
	console.log(i)
	if(i==3){
		break
	}
}
// label
var count_num = 1;
if(i < 10){
	label_a:
		for(var i=0;i<3;i++){
			if(a==2){
				continue label_a // 跳出去再循环一次
			}
			a++
			console.log(a);
		}
}
console.log(a);

函数

//普通函数
function f_fun_1(x,y){
	return x+y;
}
/*普通函数*/
var add = function(x,y){
	return x+y;
}

/*构造函数*/
var People = function(name,age,heigh){
	this.name = name;
	this.age = age;
	/*可以使用this  设置对象的属性*/
	switch(heigh){
		case 170 :
		 	this.BMH=[1,2,3]
		 	break
		default:
		 	this.BMH=[4,5,6]
	}
	this.say=function(str){
		console.log(this.name +" say:"+str)
	}

}
var p = new People("张三",33,170);
console.log(p.name+"-----"+p.age+"-----"+p.BMH);
p.say(666)

/*匿名函数*/
var add =(function(x,y){
	return x + y
})(1,2)
console.log(add)

对象

• 对象的原型 proto
• 函数的原型 prototype

1. 原型：让程序往上追溯
2. 函数中的this 指的是上一层的对象，
3. 只有对象中使用this

//对象
var obj1 = {}
//var obj2 = new Object()
obj1.name='djl';
obj1.age = '123';

obj1["first name"] ='www'
console.log(obj1["first name"] +"--"+obj1.name)

// this使用
obj1.fullname = function(){
	return this["first name"] +"--"+this.name;
}
console.log(obj1.fullname())
// 删除对象属性
delete obj1.name

/*修改原型的方法*/
obj1.__proto__.toString= function(){
	return "对象无法转换"
}
console.log(obj1.toString())



//1 .工厂模式
function CreateFactory(name){
	var obj = new Object()
	obj.name = name
	return obj
}

var a = new CreateFactory("djl")
console.log(a.name)

//2 .构建函数
var cfactory = function(name){
	this.name = name
}
var b = new cfactory("djl");
console.log(b.name);

//3. 原型模式
function pfactory(name){
	pfactory.prototype.name = name
	pfactory.prototype.info = function(){
		console.log("prototype ------------")
	}
}
var c = new pfactory("adada");
console.log(c.name)
c.info()

//4. 不允许修改的属性
var a = {
	_name :"djl",
	age : 123
}
/*只针对一个属性的配置*/
Object.defineProperty(a,"name",{
	writeable:true,	 //是否可修改
	enumerable:false, //是否可列举
	configurable:false, //是否可删除
	//value:"tho", // 直接修改值 与 get 冲突
	get:function(){
		console.log("哎！被读取了")
		return "MR." + this._name
	},
	set:function(){
		console.log("哎！被修改了")
	}
})
var obj = {
	name :"djl",
	age : 123
}
/*针对所有属性的配置 ， 方便后续日志记录*/
Object.defineProperties(obj,{
	name:{
		writeable:true,	 //是否可修改
		enumerable:false, //是否可列举
		configurable:false, //是否可删除
		//value:"tho", // 直接修改值 与 get 冲突
		get:function(){
			console.log("哎！被读取了")
			return "MR." + this._name
		},
		set:function(){
			console.log("哎！被修改了")
		}
	},
	age:{
		get:function(){
			console.log("年龄被读取了")
			return this.age
		},
		set:function(){
			console.log("年龄被修改了")
		}
	}
})
obj.age=123 //年龄被修改了

/*设置了enumerable 则不可用for 读取出*/
for (w in a){
	console.log(w)
}

console.log(a.name)

/*得到设置的描述*/
var info = Object.getOwnPropertyDescriptor(a,"_name");
console.log(info)

数组

/**数组**/

var arr = new Array()
arr[0]='ww'
arr[1] =0
console.log(arr.toString())
var arr2 = [1,2,3,4,{"name":123}]
console.log(arr2.toString())

/*数组的操作*/
arr2.pop(); //删除最后一个
console.log(arr2.toString())
arr2.push("last data")// 添加到最后一位
console.log(arr2.toString()) 
arr2.unshift("fisrt data") // 添加在第一位
console.log(arr2.toString()) 
arr2.shift() //删除第一位
console.log(arr2.toString())

//连接数组
arr = arr.concat(arr2)
console.log(arr.toString())

//splice 的用法 从第1 位开始删除到第3位 再在第一位处插入后面的内容
arr.splice(1,3,"删除了很多","插入的多个")
console.log(arr.toString())
//翻转
arr.reverse()
console.log(arr.toString())
//按字母排序
arr.sort()
console.log(arr.toString())

function paixu(a,b){
	return a - b
}
arr.sort(paixu)
console.log(arr.toString())

//join

var arr3 = ["列表1","列表2","列表3","列表4","列表5","列表6"]

var msg = arr3.join(" | ")

console.log(msg) //列表1 | 列表2 | 列表3 | 列表4 | 列表5 | 列表6

作用域

// 基本类型
// 引用类型
var a = 1
var b = a
b = 2
console.log(a , b)  // a =1  b =2

var a = {}
var b = a
a.name = "123"
console.log(a,b) // a == b


// 局部作用域中
function add_1(x){
	x++
	return x
}
var x = 1
var y = add_1(x)
console.log(x) // x=1

function changeObj(obj){
	obj.name = "wwwww"
}
var ob1 = {}
var ob2 = changeObj(ob1)
console.log(ob1) //{name: "wwwww"}

//全局作用域
var url;
function getUrl(){
	with(window){
		url = location.href;
	}
}
getUrl()

console.log(window.url)

//a ='alert("hello word")';
//eval(a)

Document

document.nodeType=9

var doc = document.getElementsByTagName("title")[0].innerHTML
console.log(doc)
document.getElementsByTagName("title")[0].innerHTML = "hello document"

/*新增节点*/
var ul = document.getElementById("ul");
var li = document.createElement("li")
li.setAttribute("id","newLi")
li.innerHTML="nihao"
//最后面插入
ul.appendChild(li)

/*插入到标签中某个位置之前：*/
document.body.insertBefore(ul,document.body.childNodes[3])
/*删除子节点*/
var newLi = document.getElementById("newLi");
ul.removeChild(newLi)

console.log(document.nodeType) // document.nodeType=9  标识一个dom对象
console.log("页面标题"+document.title)
console.log(document.URL ) //得到http://服务器名:端口号/
console.log(document.domain) //得到服务器名
console.log(document.referrer) //来源页面 哪个页面跳转过来的

console.log(document.anchors) //页面a 标签
console.log(document.forms) //页面所有的表单标签
console.log(document.images) //所有的图片
console.log(document.links) //页面a 标签


/*页面加载完毕后执行*/
window.onload = function(){
	//页面内容被替换，使用这种方式可以关闭页面
	document.write(new Date(),"<p>你好</p>")
}

Element

document.nodeType=1

var obj = document.getElementById("djldjl"); 
console.log(obj.nodeType)//1
console.log(obj.nodeName)//A
console.log(obj.tagName)//A

console.log(obj.id) //djldjl

console.log(obj.name) // 获取name 属性

console.log(obj.innerHTML)

/*自定义属性*/
obj.setAttribute("myattr","dwdwdw");
var attr = obj.getAttribute("myattr")
console.log(attr)

Text类型

document.nodeType=3

/*Text 类型 ： 元素内的内容 ，不包括元素也没有子元素*/
var obj =  document.getElementById("ul"); 
console.log(obj.firstChild.nodeType)
console.log(obj.childNodes[0]) //text类型
console.log(obj.firstChild) //text类型
console.log(obj.lastChild) //text类型

var obj =  document.getElementById("p"); 
var child = obj.firstChild //得到文本类型
console.log(child)
console.log(child.nodeValue)
console.log(child.parentNode)

child.appendData("后面追加内容")
child.insertData(0,"前面追加")

child.deleteData(0,10) //删除文本字符串
child.replaceData(0,10,'[这里被替换了]')
child.splitText(5) //切分Text 对象
obj.normalize() // 合并obj 下的Text 对象

// 添加textNode 对象

var div  = document.createElement("div")
div.id ="tempInsert"
var textNode = document.createTextNode("hello word")
div.appendChild(textNode)
document.body.appendChild(div)
div.append("追加的内容")
textNode.nodeValue ="可以随时通过对象进行更改内容"

nodeType其他类型

/**
 * 1. 注释类型noteType = 8 Comment 类型
 */
var body = document.body
console.log(body.childNodes[3].nodeType)
var comment = document.createComment("comment 类型为 8")
body.appendChild(comment);

/**
 * 2. DocumentFragment 类型 暂存不显示 noteType 为11
 */
var fragment = document.createDocumentFragment();
var div = document.createElement("div");
var text=document.createTextNode("hello word")
div.appendChild(text)
fragment.appendChild(div)
body.appendChild(fragment)

视口数据

/*视口数据*/
//获取div的高 
/*
        body,div{
		margin: 0;
		padding: 0;
	}
	#big{
		height: 200px;
		width: 200px;
		padding: 66px;
		margin: 77px;
		border: 10px solid green;
		overflow: scroll;
	}
	#small{
		height: 500px;
		width: 500px;
		background-color: red;
	}

	<div id="big">
		<div id="small">
			
		</div>
	</div>
*/

//获取body的话
var obj = document.body;
var obj =  document.getElementById("big"); 
var height = obj.offsetHeight; //352  视口200 + padding 66*2 + border 10*2
var width = obj.offsetWidth;   //352   	
var scrollHeight = obj.scrollHeight //632  实际内容物尺寸  500 + 66*2
var scrollWidth = obj.scrollWidth   //566  滚动条右侧是没有padding 500 + 66
var clientHeight = obj.clientHeight; //315 内容高度   200 + padding * 2 - scroll宽度 17px
var clientWidth = obj.clientWidth;  //315

var offsetLeft = obj.offsetLeft; //离左侧多远  77
var offsetTop = obj.offsetTop;	//离顶部多远  只有左上 77

 obj.scrollLeft = 30; //调整初始化的时候滚动条的位置
var scrollLeft = obj.scrollLeft; //滚动条滚动的X轴位置 0
var scrollTop = obj.scrollTop;  //滚动条滚动的Y轴位置 0

console.log("滚动条",scrollLeft +"\t"+ scrollTop)
//352 | 352 | 632 | 566 | 315 | 315
console.log([height,width,scrollHeight,scrollWidth,clientHeight,clientWidth,offsetLeft,offsetTop].join(" | "))

CSS操作

• element.style.margin="100px 100px";
• element.style.setProperty("margin","100px 100px")
• element.setAttribute("style","重写样式")
• element.style.cssText="重写样式"

//css 操作 
//setAttribute 操作
var body = document.body;
body.setAttribute("style","background-color:red")

// 对象属性操作
var bodyStyle = body.style
bodyStyle["background-color"] = "yellow"
bodyStyle.backgroundColor= "blue"

//css Text
bodyStyle.cssText="background-color:#ddd"

//setProperty 设置属性
bodyStyle.setProperty("background-color","#000")

//得到用户代理的属性
var box = document.getElementById("bg")
console.log(window.getComputedStyle(box).backgroundColor)
//获取伪元素
console.log(window.getComputedStyle(box,":hover").backgroundColor)

DOM事件

//dd2 是一个函数，移除的时候要声明这个函数
element.addEventListener("click",dd2,false)
element.removeEventListener("click",dd2,false)


mouseenter 鼠标移入  mouseleave 鼠标移除

function show(val) {
	console.log("hello word" + val)
}
//添加监听
var uid = document.getElementById("uid")

uid.addEventListener('click',function(){
	show('监听点击事件');
},false) // false 是否冒泡

//匿名函数的形式是不允许移除监听的，只有这样声明才可以移除 ，移除监听节省内存
//uid.addEventListener("click",show,false)	
//uid.removeEventListener('click',show)

uid.addEventListener("djl",function(event){
	console.log(event.value)
},false)

var event = document.createEvent("HTMLEvents") //原生的用户代理事件
event.initEvent("djl",true,true) 
uid.dispatchEvent(event) //调用事件 随时出发 


//1. 捕获阶段 window -> element
//2. 目标阶段 element-> target
//3. 冒泡阶段 element -> window
// p 在div 标签内
var div = document.getElementById("div")
var p = document.getElementById("p")
function callback(event){
	console.log(event.currentTarget.tagName)
	if(event.currentTarget.tagName.toLowerCase() == "p"){
		console.log("监听事件代理")
		event.stopPropagation() //取消继续向上传播 父传播结束
		event.stopImmediatePropagation() //取消其他相同绑定事件，不会执行callback2 同一事件传播结束
	}
}
function callback2(event){
	console.log(event.currentTarget.tagName)
	if(event.currentTarget.tagName.toLowerCase() == "p"){
		console.log("2-监听事件代理")
		event.stopPropagation() //取消继续向上传播
	}
}
div.addEventListener("click",callback,false);
p.addEventListener("click",callback,false);
p.addEventListener("click",callback2,false);

mouse事件

• console.log(event.screenY) //整个屏幕
• console.log(event.clientY) // 页面顶部
• console.log(event.pageY) // 整个页面（包括滚轮滚动的）

//click 之前有两个事件发生 mousedown  和 mouseup 
//mousemove 鼠标移动事件
//mouseover mouseout  会产生事件冒泡
//mouseleave mouseenter  一次性事件
//添加监听
var uid = document.getElementById("uid")

uid.addEventListener('click',function(event){
	show('监听点击事件');
	
	console.log("点击事件的对象",event.target)
	console.log("连续点击次数",event.detail)
	console.log("点击类型",event.type)
	event.target.value = parseInt(event.target.value) + event.detail;

},false) // false 是否冒泡
div.addEventListener("mousemove",function(event){
	console.log("x轴"+event.clientX ,"y轴"+event.clientY)
},false)
div.addEventListener("mousedown",function(event){
	console.log("鼠标按下：",event.type);
	
},false)
div.addEventListener("mouseup",function(event){
	console.log("鼠标松开",event.type);

},false)

div.addEventListener("mouseleave",function(event){
	console.log("鼠标移出",event.type);

},false)
div.addEventListener("mouseenter",function(event){
	console.log("鼠标移入",event.type);
},false)
//右键的行为
div.addEventListener("contextmenu",function(event){
	console.log("鼠标移入",event.type);
	event.returnValue=false; //禁止右键

},false)

//鼠标滚轮的支持
div.addEventListener("mousewheel",function(event){
	console.log("鼠标上下滚动，滚轮距离顶部的距离",event.offsetY);
},false)

//鼠标点击的时候键盘事件监测，H5游戏中使用居多
function showkey(event){
	console.log("ALT 按键是否点击" + event.altKey)
	console.log("CTRL 按键是否点击" + event.ctrlKey)
	console.log("SHIFT 按键是否点击" + event.shiftKey)
	console.log("META 按键是否点击" + event.metaKey)
}
var div = document.getElementById("div")
//移动端手势库 Touch.js
//手机端点击事件
div.addEventListener("touchstart",function(event){
	console.log("点击的时候产生的事件",event.type);
},false)
//手机端点击后移动事件
div.addEventListener("touchmove",function(event){
	console.log("手机端点击后移动事件",event.type);
},false)
//手机端点击结束事件
div.addEventListener("touchend",function(event){
	console.log("手机端点击结束事件",event.type);
	},false)
		

keyboard 事件

//键盘事件
var age = document.getElementById("age")
//按住
age.addEventListener("keypress",function(event){
	console.log(event.type)
	console.log(event.target.value)
},false)
//按下
age.addEventListener("keydown",function(event){
	console.log(event.type)
	console.log(event.target.value)
},false)
//松开
age.addEventListener("keyup",function(event){
	// console.log(event.type)
	// console.log(event.target.value)
	// showKey(event)
	console.log("输出按键对应的键值"+event.keyCode)	
	//数字校验
	var reg = /^\+?[1-9][0-9]*$/;

	var ageValue = event.target.value;
	if(reg.test(ageValue)){
		document.getElementById("age-alert").innerHTML =""
	}else{
		document.getElementById("age-alert").innerHTML ="error : is number"
		event.target.value = ageValue.substring(0,ageValue.length -1);
	}
	//回车事件
	if(event.keyCode == 13){
		

		document.getElementById("name").focus()
	}
},false)

//点击的时候是否按住按键
function showKey(event){
	console.log("ALT KEY 按住" + event.altkey)
}

进度事件

//进度事件
window.onload = function(){

}
//等同于
window.addEventListener("load",function(){

}.false)
//图片加载事件
var img = document.getElementById("img")
img.src = "whttp://img.17sucai.com/upload/701856/2018-05-15/5e60ed43e782ebc4408e51d32f80c735.png?x-oss-process=style/big"
img.addEventListener("load",function(event){
	console.log("图片加载事件"+ event.target.nodeType)
},false)
img.addEventListener("error",function(event){
	console.log("图片加载错误事件")
	event.target.src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1539092862&di=ebdecc66f1928f06bdb4feafcf62c318&src=http://pic.58pic.com/58pic/17/47/06/15i58PIC8V7_1024.jpg"
	event.target.style.cssText="width:100%";
	event.target.setAttribute("alt","888")
},false)

//loadstart  loadend  只针对video
var video = document.getElementById("video")
video.addEventListener("loadstart",function(event){
	console.log(event.type)
},false)
video.addEventListener("loadend",function(event){
	console.log(event.type)
},false)

拖拽事件

<img src="./assets/images/dd.png" style="max-width: 300px;" draggable = "true" id="img">
<div style="background-color: yellow;height: 1800px;width: 800px;float: right;" id="div">
</div>
<script type="text/javascript">
	var img = document.getElementById("img")
	var x= 0,y=0;
	img.addEventListener("drag",function(event){
		console.log("实时拖拽" + event.type)
	},false)
	img.addEventListener("dragstart",function(event){
		console.log("开始拽动" + event.type)
		event.target.style.opacity=0.5
		event.target.style.border="1px solid red"
		//图片距离屏幕的高度
		console.log(img.offsetLeft )
		console.log(img.offsetTop )
		
		/**
		 screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角
		 clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。
		 pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动
		 */
		//鼠标离屏幕的距离
		console.log(event.pageX )
		console.log(event.pageY )
		console.log(event.clientX )
		console.log(event.clientY )
		x = event.pageX  - img.offsetLeft
		y = event.pageY  - img.offsetTop 
	},false)
	img.addEventListener("dragend",function(event){
		console.log("结束拽动" + event.type)
		event.target.style.opacity=1
		event.target.style.border="none"
		event.target.style.position="absolute"
		//鼠标离屏幕的距离
		console.log(event.pageX )
		console.log(event.pageY )
		console.log(event.clientX )
		console.log(event.clientY )

		event.target.style.left = event.pageX -x +"px" 
		event.target.style.top = event.pageY  -y + "px"

	},false)
	//区域被动拽入和拽出事件
	var div =document.getElementById("div")
	div.addEventListener("dragenter",function(event){
		event.target.style.backgroundColor="red"
	},false)
	div.addEventListener("dragleave",function(event){
		event.target.style.backgroundColor="yellow"
	},false)
	div.addEventListener("dragover",function(event){
		event.target.style.backgroundColor="green"
	},false)
</script>

CSS动画

1. 通过@keyframes 来定义关键帧动画 伪类 ： from to 百分比{样式} css 中通过animation 来引用

/*关键帧动画*/
@keyframes donghua{
	from{
		background-color: red
	}
	to{
		background-color: yellow
	}
}
@keyframes donghua2{
	0% {background-color: red;left: 0px;}
	25% {background-color: yellow;left: 50px;}
	50% {background-color: blue ;left: 100px;}
	75% {background-color: black ;left: 150px;}
	100% {background-color: pink;left: 200px;}
}
/*css animation 动画计算方法*/
#box{
	/*引用那个动画，效果持续时间*/
	animation: donghua2 5s;

	animation-delay: 0s;/*页面2s后执行动画*/

	animation-iteration-count: 2;/*执行几遍*/

	animation-direction: alternate;/*第二遍逆序，依赖animation-iteration-count*/

	animation-play-state: running;/*paused 暂停 ： js控制的属性*/

	animation-fill-mode: backwards;/*默认normal   forwards保存最后一帧   backwards 回到默认的时候*/

	animation-timing-function: cubic-bezier(.17,.67,.57,.81);/*贝赛尔曲线：ease 从慢到快 linear 速度相同  cubic-bezier函数 参考： http://cubic-bezier.com/#1,0,0,.98*/

	width: 100px;
	height: 100px;
	position: absolute;
	background-color: #00000047;
}

1. transition 动作动画： 通过js 来控制transition中定义的属性并且用定时器还原 或者使用伪类来修改transition中定义的属性

<style type="text/css">
#box2{
	width: 100px;
	height: 100px;
	top:200px;
	position: absolute;
	background-color: brown;
	left: 10px;
	/*参数 ： 1.触发的属性  2.效果的时间 3.贝赛尔曲线 4. 几秒后开始 */
	/*transition: width 2s cubic-bezier(.17,.67,.57,.81) 1s;*/
	/*多属性*/
	transition: width,height 2s,1s cubic-bezier(.17,.67,.57,.81) 1s;
}
/*transition 动画激发通过定义伪类 必须是在transition 中定义的属性：缺点无法控制还原*/
#box2:hover{
	width:300px;
	height: 300px;
}
</style>



<script type="text/javascript">
	/*js 触发 改变transition 中定义的属性*/
	var box2 = document.getElementById("box2");
	box2.onclick=function(event){
		box2.style.width = "300px"
		box2.style.height = "300px"
		box2.style.backgroundColor = "yellow"
		//还原
		setTimeout(function(){
			box2.style.width = "100px"
			box2.style.height = "100px"
			box2.style.backgroundColor = "brown"
		},3000)
	}
	/*transition 触发的事件*/
	box2.addEventListener("transitionend",function(event){
		console.log("动画完成触发的事件",event.type)
		console.log("动画完成的时间",event.elapsedTime)
		console.log("对哪个属性进行动画",event.propertyName)
	},false)
</script>

弹出框

<h3>弹窗</h3>
<button type="button" onclick="newwindow.document.write('<p>hello world</p>')">空白弹窗添加文字</button>
<button type="button" onclick="newwindow.moveTo(200,200)">移动到某位置</button>
<button type="button" onclick="newwindow.moveBy(50,50)">每点击一次移动距离</button>
<button type="button" onclick="newwindow.resizeTo(500,500)">更换尺寸</button>
<script type="text/javascript">
	//弹窗 1.地址  2.名称（有名字重复只会存在一个） 3.大小
	var newwindow = window.open("","newWindow","width=200,height=200")
</script>

<h3 class="class_a">系统对话框</h3>
<button type="button" onclick="alert('hello')">alter</button>
<button type="button" onclick=" if(confirm('确定？')){console.log('ok')}">confirm</button>
<!-- prompt 提示框一些浏览器不支持 -->
<script type="text/javascript">
	/*通过class属性定义js事件*/
	var class_a = document.getElementsByClassName("class_a")
	if(class_a.length > 0){
		for(i in class_a){
			if(class_a[i].nodeType == 1){
				//element 节点
				class_a[i].addEventListener('click',function(event){
					console.log("这个class_a属性的标签点击了，文本节点：",event.target.childNodes[0])

				},false)
			}
		}
	}

</script>

location

console.log("href :" + location.href)
console.log("protocol: "+ location.protocol)
console.log("hostname :" + location.hostname)
console.log("port :" + location.port)
console.log("hostname + port :" + location.host)
console.log("search :" + location.search)
console.log("hash :" + location.hash)
console.log(getQueryString("aa"))
console.log(getHashString("aa"))
function getQueryString(searchKey){
	var urlSerach = location.search
	if(urlSerach.length > 0){
		if(typeof(queryJson) === "undefined"){
			var queryJson = {}
			var arr = urlSerach.substring(1,urlSerach.length).split("&") //去掉?
			for(i in arr){
				var n = arr[i].indexOf("=")
				var key = arr[i].substring(0,n)
				var value = arr[i].substring(n+1,arr[i].length)
				queryJson[key]=value
			}
			console.log(queryJson)
		}
		if(queryJson[searchKey] != "undefined"){
			return queryJson[searchKey]
		}
	}
	return undefined
}

function getHashString(searchKey){
	var urlHash = location.hash
	if(urlHash.length>0){
		if(typeof(queryJson) === "undefined"){
			var queryJson = {}
			var arr = urlHash.substring(1,urlHash.length).split("&") //去掉#
			for(i in arr){
				var n = arr[i].indexOf("=")
				var key = arr[i].substring(0,n)
				var val = arr[i].substring(n+1,arr[i].length)
				queryJson[key] = val
			}
		}
		if(queryJson[searchKey] != "undefined"){
			return queryJson[searchKey] 
		}
	} 
	return undefined
}

导出CSV

<a id="d">导出csv</a>
<script type="text/javascript">
	var stu=[
		{"name":"djl","age":12,"sex":"男"},
		{"name":"djl2","age":22,"sex":"男2"}
			]

	var th = ""
	for(var i in stu[0]){
		th = th + "," + i
	}
 	var thead = th.substring(1,th.length)+ "\n";

 	
 	var tbody=""
 	for(var i in stu){
 		var td = ""
		for(var s in stu[i]){
			td = td +"," + stu[i][s]
		}
		tbody = tbody + td.substring(1,td.length) + "\n"
	}
	console.log(thead+tbody)
	/**
	 * name,age,sex
		djl,12,男
		djl2,22,男2
	 */
	var bom = '\uFEFF' //文件头，中文乱码解决
	var csvString = bom + thead+tbody
	var a = document.getElementById("d")
	//任何文件都可以转化为 data:http类型,数据 开头的http content-type 数据  图片是使用base64编码	
	a.href="data:text/csv," + csvString
	a.target ="_blank"
	a.download = "output.csv"
</script>

ajax

• 同源策略 和 跨域 ：浏览器限制 两个不同的域名 或者 两个不同的端口号 或者 不同的协议
• 解决办法： jsonp 服务器设置CORS nginx 反向代理

var xhr = new XMLHttpRequest()
//true  收取返回信息  同源测录， 同一个域名下访问
xhr.open("GET","http://localhost:3000/1.xml",true)

//timeout 超时
xhr.timeout = 3000

xhr.addEventListener("timeout",function(){
	this.abort()//中断发送
},false)

//声明返回类型
//xhr.responseType = "json"
xhr.onreadystatechange=function(){
	//xhr.readyState 状态值 ：0 初始化  1 启动  2 发送  3.接受 4.完成
	//xhr.status http的访问头  200 成功 400	
	if(xhr.readyState == 4 && xhr.status == 200){
		//默认读取text 文件
		//console.log(xhr.responseText)
		//配置responseType 直接转化json格式
		//console.log(xhr.response)
		//读取XML文件
		console.log(xhr.responseXML)
		document.body.appendChild(xhr.responseXML.firstChild)
	} 
}
//进度相关事件
xhr.addEventListener("progress",function(event){
	if(event.lengthComputable){ //是否开始有数据
		console.log(event)
		console.log("下载多少",event.loaded,event.total)
	}
},false)
xhr.send() 

数据存储

//cookie  得到的cookie信息 
console.log(document.cookie)
// 前端存储localStorage 的对象永久存储 同域名下  , 服务端存储的sessionStorage 服务器关闭则清空临时存储
console.log(window.localStorage,window.sessionStorage)
window.localStorage.setItem("name","djl")
window.sessionStorage.setItem("age","6666")
console.log(window.localStorage.getItem("name"))
window.localStorage.removeItem("name")
window.localStorage.clear()
//web sql T-sql语言	关系型数据库（停滞不前了） 一些登录日志中，HTML5的小游戏中

if(window.openDatabase){
	console.log("浏览器支持关系型数据")
}
//创建数据库 库名 ， 版本号 ，别名 ，库的大小 
var db = window.openDatabase("temp","1.0","TEMP DB",2*1024*1024)
db.transaction(function(context){
	context.executeSql("DROP TABLE USERS")
})
//创建表 context 上下文
db.transaction(function(context){
	context.executeSql("CREATE TABLE USERS(UID,PASSWD)")
})
db.transaction(function(context){
	context.executeSql("INSERT INTO USERS(UID,PASSWD)VALUES('DJL','123')")
	context.executeSql("INSERT INTO USERS(UID,PASSWD)VALUES('DJL','123')")
	context.executeSql("INSERT INTO USERS(UID,PASSWD)VALUES('DJL','123')")
})
//查询 executeSql  参数1 sql语句 参数2 返回的格式  参数3 成功后的回调 参数4 失败后的回调
db.transaction(function(context){
	context.executeSql("SELECT * FROM USERS",[],function(context,results){
		console.log(results.rows[0])
	},function(context,results){
		console.log("error")
	})
})

// indexedDB 文本型数据库 mongoDB

URI编码

//URI编码输出
var urlText = "http://www.baidu.com/s?wd=中国好"
console.log(encodeURI(urlText))
//所有进行转码
console.log(encodeURIComponent(urlText))
//转成URL转码
var uriTxt = "%E4%B8%AD%E5%9B%BD%E5%A5%BD";
console.log(decodeURI(uriTxt))