学习笔记之html5相关内容

写一下昨天学习的html5的相关内容，首先谈下初次接触html5的感受。以前总是听说html5是如何的强大，如何的将要改变世界。总是充满了神秘感。首先来谈一下我接触的第一个属性是 input的里面的一个属性是 type="email"。以前用html的时候，type是有很多类型的，有text，password，summit。就是没听说过email。当得知这个email是验证输入的内容是否为email格式的时候。我顿时兴奋了。以前接触到html的时候，如果要验证输入内容时，是需要写js代码的。如果高级的话是要加入js插件的。html5直接一个email就搞定了。应了那句话，html5让世界更美好。

　　学的第一个内容还是一些标签和属性之类的，可以参考一个http://www.w3school.com.cn/html5/index.asp。上面有大量的内容，不在这废话了。这里主要来介绍写的几个程序来写一下重要的知识点。

　　第一个程序是关于拖拽的主要介绍一下drag和drop

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)

{

ev.dataTransfer.setData("Text",ev.target.id);

}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)

{

ev.preventDefault();

var data=ev.dataTransfer.getData("Text");

ev.target.appendChild(document.getElementById(data));

}

这里主要就是被拖拽的元素是加 draggable="true" ondragstart="drag(event)" 记住被拖拽的元素要加上id的，不然是不行的

被放拖拽地方的元素加 ondrop="drop(event)" ondragover="allowDrop(event)" 也要加上id的然后加上js代码

  <script type="text/javascript">

    function allowDrop(e) {

        e.preventDefault();

    }

    function drag(e) {

        e.dataTransfer.setData("id", e.target.id);

    }

    function drop(e) {

        e.preventDefault();

        var id = e.dataTransfer.getData("id");

        e.target.appendChild(document.getElementById(id)); //需要做的事情

        /*var block = document.getElementById(id);

        block.parentNode.removeChild(block);*/

    }

    </script>

这样就OK了

下面一个是html5的

localStorage 方法来储存本地的查询记录，类似百度的那种

<!DOCTYPE html>

<head>

	<meta charset="utf-8">

	<meta name="viewport" content="width=device-width,

                               initial-scale=1.0,

                               maximum-scale=1.0,

                               user-scalable=no"/>

	<title></title>

	<script type="text/javascript">

	//获得焦点

		function focuse(){

			var storage = window.localStorage; //获取本地storage

			if(storage.length!=0){             //确定不为空

				document.getElementById("div1").style.display="" //显示装本地搜索历史的div

				document.getElementById("div1").innerHTML="";   //该div清空

				for(var i=0;i<storage.length;i++){              //循环出本地storage的内容

			 		document.getElementById("div1").innerHTML+=storage.getItem(i)+"<br>";

		 									}

		 							}

		 				}

		 //失去焦点

		function blure(){

		document.getElementById("div1").style.display="none"

	}

	//点击按钮执行

	function search(){

		if(window.localStorage){

			var storage = window.localStorage;

			var i=storage.length;

			var input=eval(document.getElementById("in")).value;

				if(ergodic()){            //判断内容是否与原来相同

					if(input!=""){        //判断是否为空

					localStorage.setItem(i,input);   //向本地的storage中加入内容，本地的内容是以键值对的形式存储的

					}else{

						alert("不能为空");

					}

			}else{

				}

			document.getElementById("in").value="";   //清空输入框的内容

		}else{

		 	alert('This browser does NOT support localStorage');

		}

	}

	//用来本次输入的内容是否和之前搜查的内容相同

	function ergodic(){

		var input=eval(document.getElementById("in")).value;

		var storage = window.localStorage;

		for(var i=0;i<storage.length;i++){

		 		  				if(input==storage.getItem(i)){

		  						return false;

		  				}

		 	/* document.write(storage.key(i)+ " : " + storage.getItem(storage.key(i)) + "<br>");*/

		 									}

		 				return true;

	}

	//清除本地的storage

	function quit(){

		localStorage.clear();

	}

</script>

</head>

<body >

	<div >

		<div  style="margin:0 auto;">

			<div style="position:static;float:left;">

				<input id="in" type="text" style="width: 10em" onfocus="focuse()" onblur="blure()">

			</div>

			<div>

				<button id="button1" onclick="search()" style="float: left" >搜查</button>

			</div>

			<div>

				<button onclick="quit()">清除</button>

			</div>

		</div>

		<div  id="div1" style="border: 2px solid #F0F0F0;width:8.5em;position:static;float:none;line-height: 1.2em; display:none">

		</div>

	</div>

</body>

</html>

本地内容是以键值对的形式来存储的

localStorage.setItem(i,input); 向本地加内容

localStorage.getItem(i); 从本地取内容

localStorage.clear();　　　　清除本地内容