html5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <p>querySelector:选择一个元素,可以是class、name、标签、id等;eg:document.querySelector("[class=xxx]")</p> <p>querySelectorAll:获取多个元素,返回数组,可以是class、name,标签、id等;eg:document.querySelector("#text")</p> <p>getElementsByClassName:通过class获取元素,返回数组。</p> <h1>class列表属性</h1> <p>length : class的长度</p> <p>add() : 添加class方法</p> <p>remove() : 删除class方法</p> <p>toggle() : 切换class方法,如果存在class值就remove,如果不存在就add</p> <p></p> <p></p> <p></p> <p></p> <form> <div id="text" class="clsText class1 class2"/> <div id="text1" class="clsText"/> </form> <script type="text/javascript"> window.onload = function(){ //querySelector表示获取一个,如果有多个时,只会对第一个生效,例如多个class、name时只会对第一个生效 /*var oText = document.querySelector("#text"); oText.style.height="20px"; oText.style.width="100%"; oText.style.background="red";*/ //querySelectorAll获取全部 以数组的形式 /*var querySAll = document.querySelectorAll(".clsText"); alert(querySAll.length);//弹出长度2*/ //getElementsByClassName获取class元素 /*var getClssName = document.getElementsByClassName("clsText"); alert(getClssName.classList); alert(getClssName.length);//弹出长度2*/ //classList 获取class属性值 var clsList = document.getElementById("text"); //alert(clsList.classList);//弹出 clsText class1 class2 //alert(clsList.classList.lenngth);//弹出3 clsList.classList.add("class3");//调试页面class值为:clsText class1 class2 class3 clsList.classList.remove("clsText");//调试页面class的值为:class1 class2 class3 clsList.classList.toggle("clsText");//class值为:class1 class2 class3 clsText }; </script> </body> </html>
JOSN特性
<title>无标题文档</title> <script src="json2.js"></script> <script> /* var str = 'function show(){alert(123)}'; eval(str); show();//弹出123*/ /*var str = '{"name":"zhangsan","age":"19"}'; var nStr = JSON.parse(str); alert(nStr.name);//弹出zhangsan*/ /*var str = {name:"zhangsan",age:90}; var nstr = JSON.stringify(str); alert(nstr);//弹出:{"name":"zhangsan","age":90} var n = JSON.parse(nstr); alert(n.age);//弹出90*/ </script> </head> <body> eval:可以解析任何字符串变成JS,但是这样不安全<br/> JSON.parse():一定是严格的json格式。<br/> JSON.stringify():将json转成字符串<br/> 在IE7下不兼容的情况下,需要引入json2.js文件;http://www.json.org/去下载json2.js。在javascript下有一个json2.js文件,这样可以很好的兼容IE7低版本了。 </body>
html5自定义属性:
<script> window.onload = function(){ var z = document.getElementById("div1"); //alert(z.dataset.zhangsan);//弹出:zhangsan-lis //alert(z.dataset.lisiAll);//弹出:张三呵呵呵呵呵呵呵 alert(z.dataset.nameFirstList);//弹出:html5真神奇啊~ }; </script> <body> <div id="div1" data-zhangsan="zhangsan-lis" data-lisi-all="张三呵呵呵呵呵呵呵" data-name-first-list="html5真神奇啊~">dataset,可以无限写下去,自定义属性格式名称前面必须有”data“</div><br/> <p>defer : 延迟加载,会按顺序执行,在onload执行前被触发,用法为:<script src="xxxx.js" defer="defer"></script></p>
<p>–async : 异步加载,加载完就触发,多个js时有顺序问题;并排执行多个js文件或者图片,加载速度快。用法:<script src="xxx.js" async="async"></script></p>
<p>LABjs轻松解决了异步加载的顺序问题。</p>
</body>
随机数,历史记录;例子随机选择彩票:
<script> window.onload = function(){ var buttonE = document.getElementById("btn"); var value = document.getElementById("div1"); var json = {}; buttonE.onclick = function(){ var num = Math.random();//0-1之间的随机数 var arr = randomNum(35,7); json[num] = arr; value.innerHTML=arr; window.location.hash = num; //value.innerHTML=randomNum(35,7); } window.onhashchange = function(){ document.getElementById("div1").innerHTML = json[window.location.hash.substring(1)];//截取#号 } }; function randomNum(iAll,iNow){ var arr =[]; var newArr = []; for(var i = 1;i<=iAll;i++){ arr.push(i); } for(var i =0;i<iNow;i++){ newArr.push(arr.splice(Math.floor( Math.random()*arr.length),1)); } return newArr; } </script> </head> <body> <input type="button" id="btn" value="提交"/> <div id="div1"></div> </body>
HTML5使用history对象做历史管理,需要运行在服务器端:
<script> window.onload = function(){ var oInput = document.getElementById('input1'); var oDiv = document.getElementById('div1'); oInput.onclick = function(){ var arr = randomNum(35,7); history.pushState(arr,'',arr); oDiv.innerHTML = arr; }; window.onpopstate = function(ev){ oDiv.innerHTML = ev.state; }; function randomNum(iAll,iNow){ var arr = []; var newArr = []; for(var i=1;i<=iAll;i++){ arr.push(i); } for(var i=0;i<iNow;i++){ newArr.push( arr.splice( Math.floor(Math.random()*arr.length) ,1) ); } return newArr; } }; </script> </head> <body> <input type="button" value="随机选择" id="input1"> <div id="div1"></div>
<div>onhashchange :改变hash值来管理
history :
–服务器下运行
–pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
–popstate事件 : 读取数据 event.state
–注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
</div>
</body>
HTML5拖拽:
<title>HTML5拖拽功能</title> <style type="text/css"> #div1{ width:120px;height:30px; background:#CCFF00; margin-left:20px; } #div2{ width:120px;height:30px; background:#CCFF00; margin-top:20px; margin-left:20px; } #div3{ width:120px;height:30px; background:#CCFF00; margin-top:20px; margin-left:20px; } #div4{ width:200px;height:130px; background:#FF0000; margin-left:280px; } </style> </head> <body> <div> <h1>HTML5拖拽事件</h1> <p>draggable :</p> <p>设置为true,元素就可以拖拽了</p> <p>拖拽元素事件,事件对象为被拖拽元素</p> <p>dragstart:拖拽前触发 </p> <p>drag:拖拽前、拖拽结束之间,连续触发</p> <p>dragend:拖拽结束触发</p> <p>目标元素事件,事件对象为目标元素</p> <p>dragenter:进入目标元素触发,相当于mouseover</p> <p>dragover:进入目标、离开目标之间,连续触发</p> <p>dragleave:离开目标元素触发,相当于mouseout</p> <p>drop: 在目标元素上释放鼠标触发</p>
<p>html5的执行顺序是:dragstart>drag>dragenter>dragover>dragleave>dragend </p>
</p> </div> <ul style="list-style-type:none;"> <li id="div1" draggable="true"></li> <li id="div2" draggable="true"></li> <li id="div3" draggable="true"></li> </ul> <div id="div4"></div> </body> <script type="text/javascript"> window.onload = function(){ var liList = document.getElementsByTagName("li"); var tagert = document.getElementById("div4"); var i=0; for(var i = 0;i<liList.length;i++){ liList[i].ondragstart = function(){//ondragstart:点击li元素拖拽时li的背景颜色变绿色,拖拽钱触发 this.style.background="green"; }; liList[i].ondrag = function(){//ondrag:当开始拖拽和结束拖拽之间的事件。 this.style.background="yellow"; document.title = i++; }; liList[i].ondragend = function(){//ondragend当li元素拖拽完后触发的事件。 this.style.border="1px solid blue"; }; } tagert.ondragenter = function(){//ondragenter当元素拖拽到目标元素时发生的事件。 this.style.border = "1px solid #00FFFF"; }; tagert.ondragover = function(){//li元素拖拽到目标元素之间连续发生的事件,从开始拖拽到结束拖拽时。 this.innerHTML="我多少岁:"+i++;
ev.preventDefault();// 当阻止时ondrop事件产生 }; tagert.ondragleave = function(){//ondragleave拖拽到目标元素结束后触发的事件。 this.innerHTML="亲,你松开了鼠标、或者元素已经元素路过我这里。拖拽、飘过结束了!"; }; tagert.ondrop = function(){ alert(1);//移动到目标元素松开鼠标后弹出1 }; }; </script>
html5解决在火狐下不能实现拖拽的,仍然在之前的基础上加:
var oUl = document.getElementsByTagName('ul')[0];
var liList = oUl.getElementsByTagName("li");
liList[i].index = i;
liList[i].ondragstart = function(ev){//ondragstart:点击li元素拖拽时li的背景颜色变绿色,拖拽钱触发
var ev =ev || window.event;
ev.dataTransfer.setData('name','hello');
this.style.background="green";
};
tagert.ondrop = function(ev){
//alert(ev.dataTransfer.getData('name'));//弹出hello
//oUl.removeChild( liList[ev.dataTransfer.getData('name')] );
oUl.removeChild( liList[1] );
alert(1);
};
HTML5图片拖拽并预览:
<title>无标题文档</title> </head> <body> <div id="div1" style="background:#0099FF;width:200px;height:190px;">请将文件拖拽至此</div> <ul id="ul1"></ul> </body> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById("div1"); var oUl = document.getElementById("ul1"); oDiv.ondragstart = function(){ this.innerHTML="可以释放咯!"; }; oDiv.ondragover = function(ev){ ev.preventDefault(); }; oDiv.dragleave = function(){ this.innerHTML="将文件拖拽此处"; }; oDiv.ondrop = function(ev){ ev.preventDefault(); var fs = ev.dataTransfer.files;//得到文件,返回文件数组 //alert(fs.length);//得到拖拽的文件个数、长度 //alert(fs[0].type);//得到文件的类型:image/png for(var i =0;i<fs.length;i++){ if(fs[i].type.indexOf('image') != -1){//判断是否为图片格式 var fd = new FileReader(); fd.readAsDataURL( fs[i]); fd.onload = function(){ var oli = document.createElement('li'); var oImge = document.createElement('img'); oImge.src=this.result; oli.appendChild(oImge); oUl.appendChild(oli); } }else{ oDiv.innerHTML="目前仅支持图片格式的"; } } }; }; </script>
未完待续.............
时间,请带我像一条小溪流般,安静地流淌,汇入爱的海洋。