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) // 输出Infinityvar 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  获取valueconsole.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]breakdefault: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

原型：让程序往上追溯
函数中的this 指的是上一层的对象，
只有对象中使用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 = namereturn 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 = namepfactory.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())//joinvar 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 =2var 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=1function 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)//Aconsole.log(obj.id) //djldjlconsole.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;  //315var offsetLeft = obj.offsetLeft; //离左侧多远  77
var offsetTop = obj.offsetTop; //离顶部多远  只有左上 77obj.scrollLeft = 30; //调整初始化的时候滚动条的位置
var scrollLeft = obj.scrollLeft; //滚动条滚动的X轴位置 0
var scrollTop = obj.scrollTop;  //滚动条滚动的Y轴位置 0console.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.5event.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.offsetLefty = event.pageY  - img.offsetTop },false)img.addEventListener("dragend",function(event){console.log("结束拽动" + event.type)event.target.style.opacity=1event.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动画

通过@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;
}

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.searchif(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.hashif(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,sexdjl,12,男djl2,22,男2*/var bom = '\uFEFF' //文件头，中文乱码解决var csvString = bom + thead+tbodyvar a = document.getElementById("d")//任何文件都可以转化为 data:http类型,数据 开头的http content-type 数据  图片是使用base64编码  a.href="data:text/csv," + csvStringa.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 = 3000xhr.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))

javascript 原生相关推荐

javascript 原生得到document.Element的方法
今天这里写这个博客的主要目的是记录一下javascript原生的选择dom的集中方法. 1.document.getElementById.这个方法接收1个参数,就是DOM元素的id(区分大小写),这 ...
javascript原生事件句柄、BOM、DOM对象属性方法总结
javascript原生事件句柄.BOM.DOM对象属性方法总结 JS事件句柄事件句柄类型说明 onabort 事件句柄图像加载被中断 onblur 事件句柄元素失去焦点 onfocus 事 ...
JavaScript原生添加移除class的方法
转载自 JavaScript原生添加移除class的方法 1.JavaScript原生移除class方法 window.onload = function () {var stamp = docum ...
JavaScript原生实现《贪吃蛇》
概述 JavaScript原生实现<贪吃蛇>,每吃掉一个食物,蛇的身体会变长,食物会重新换位置. 详细代码下载:http://www.demodashi.com/demo/10728.h ...
javascript原生事件总结
javascript原生的事件,总结了一下,包括事件流.处理函数.事件对象这几样东西.而在兼容性方面,主要是老牌ie8以及以下和现代浏览器的差异,也就是ie和DOM事件标准的差异. 事件流这个事件流 ...
javascript原生初级到非凡-姜威-专题视频课程
javascript原生初级到非凡-248人已学习课程介绍本套课程是<初级的前端工程师系列课程>中重要的一部课程,课程需要有HTML5+CSS3基础来学习,课程从初级入 ...
javascript 原生类 DOMParser 把字符串格式的HTML文档源码转换成 document DOM对象
文章目录 Intro QA DOMParser 在 console 的使用 cheerio 在 node 项目中的使用 Reference 测试 sum Intro 有一天我在写爬虫. 其实也说不上是 ...
JavaScript原生代码编写选项卡Tab页跳转功能
本文主要介绍使用 JavaScript 原生代码编写选项卡Tab页的跳转功能. 一.先来看看效果图二.准备文字素材文字素材选择诗经里面的三首古诗,分别是关雎.蒹葭和采薇 <关雎> 关关 ...
vue 加载页面时触发时间_5.6 vue更新数组时触发视图更新的方法，熟记JavaScript原生方法...
问题:vue更新数组时触发视图更新的方法变异方法: Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.什么是变异方法呢?简单理解就是改变了原来的数组,可能包括数组长度length,或者 ...
视频教程-javascript原生初级到非凡-JavaScript
javascript原生初级到非凡全栈工程师.2000年建设第一网站项目起,15年行业经验,从早期WAP到APP,从SP.IVR到流媒体,云框架: 项目解决顾问. 姜威 ¥49.00 立即订阅扫码 ...

javascript 原生

引入JS

数据类型

语句

函数

对象

数组

作用域

Document

Element

Text类型

nodeType其他类型

视口数据

CSS操作

DOM事件

mouse事件

keyboard 事件

进度事件

拖拽事件

CSS动画

弹出框

location

导出CSV

ajax

数据存储

URI编码

javascript 原生相关推荐

最新文章

热门文章