H5整理（一）
HTML5新的页面结构
<!doctype html>
<meta charset=”utf-8”/>
语义化标签
这样做的好处是使得文档结构层次清晰，利于代码编写和开发，还有搜索引擎优化（seo）等等的好处。
<header></header> 页眉
主要用于页面的头部的信息介绍，也可用于板块头部
<hgroup></hgroup>标题组合
一个标题和一个子标题，或者标语的组合
<nav></nav>导航
<section></section>页面上的板块
用于划分页面上的不同区域
<article></article>独立的内容部分
比section具有更明确的语义，可包含其他语义化标签
<aside></ aside>
aside标签定义 article 以外的内容，一般用于辅助信息或侧边栏
<figure><figure>
描述图像或视频
<figcaption><figcaption> 图像标题
<datalist></datalist> 选项列表
与 input 元素配合使用，来定义 input 可能的值。
<input type="text" list="valList">
<datalist id="valList">
<option>javascript</option>
</datalist>
<details></details>
用于描述文档或文档某个部分的细节
<summary></summary>
open属性 , 展开，不写open 就是折叠
<progress><progress> 定义进度条
<progress max="100" value="76">
</progress>
IE兼容
针对IE6-8这些不支持HTML5语义化标签的浏览器我们可以使用javascript来解决他们 方法如下：
<script>
document.createElement(“header”);
document.createElement(“nav”);
</script>
注意display的问题
表单控件
<form action="http://www.baidu.com">
<p>邮箱：<input type="email" /> </p>
<p>手机号：<input type="tel" /></p> <!--在手机访问会弹出数字键盘-->
<p>url:<input type="url"/></p>
<p>search:<input type="search"/></p>
<p>range范围: <input type="range" max="100" min="0" value="50" step="1"> </p>
<p>number:<input type="number"/></p>
<p>color:<input type="color"/></p>
<p>time:<input type="time"/></p>
<p>date:<input type="date"/></p>
<p>week:<input type="week"/></p>
<p>month:<input type="month"/></p>
<input type="submit" />
</form>
表单属性
<form action="http://www.baidu.com">
<input type="text" name="abc" autocomplete="on" >
<!--autocomplete="on" "off"
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
-->
<!-- autofocus自动获取光标-->
<input type="submit">
</form>
<input type="text" name="abc2" required pattern="\d{1,5}" maxlength="10">
<!--required属性 表示值不能为空
pattern 后面正则表达式， 表示用户输入的内容要匹配正则表达式，否则提示
格式不一致
maxlength 限制用户输入最大长度
-->
表单验证--事件invalid
通过这个事件可以自己定制错误信息框
<form action="http://www.baidu.com" id="form1">
<p>email：<input id="usereamil" type="email" name="useremail" required pattern="\d{1,7}"></p>
<input type="submit">
</form><div id='errorInfo'></div>
<script>
var oemail = document.getElementById("usereamil");
var oform = document.getElementsByTagName("form")[0];
var oerror = document.getElementById("errorInfo");
var error = {
patternMismatch:"格式错误",
typeMismatch:"类型错误",
valueMissing:"空错误",
tooLong:"输入过长",
}
oemail.addEventListener("invalid",function(ev){
oerror.innerHTML="";
console.log(this.validity);
//这个对象中的属性值 是true ， 就表示该项不匹配。
ev.preventDefault();
//阻止浏览器默认输入 错误提示。
for(var i in this.validity){
if(this.validity[i]){
oerror.innerHTML += error[i]+"<br/>";
}
}
})
新选择器
<div id="div1" class="box">
<span>span标签</span>
<input type="text" />
<input type="password" />
</div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var ospan = document.querySelector("ul li");
// querySelector 参数是css 选择器的写法。
// 只能匹配第一个dom元素,
ospan.style.background = "red";
var oli = document.querySelectorAll("#div1 span");
// queryselecotor 能够匹配所有的元素， 返回值是一个数组，
//如果只匹配到了一个,返回值则是一个只有一个元素的数组
console.log(oli);
var odiv = document.getElementsByClassName("box");
//getElementsByClassName 返回值是一个数组， 通过class 名字匹配
console.log(odiv[0]);
</script>
获取class列表
<div id="div1" class="box1 box2 box3">aaaa</div>
<script>
var odiv = document.querySelector("#div1");
odiv.classList.add("box4") ; //box1 box2 box3 box4
odiv.classList.remove("box1"); //box2 box3 box4
odiv.classList.toggle("box5"); //切换 ， 已有class 就是删除，没有class就是添加
console.log(odiv.classList);
</script>
历史管理—onhashchange
<!DOCTYPE HTML>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{
margin: 0px;
padding:0px
}
html,body{
height: 100%;
width: 100%;
overflow: hidden;
}
body{
display: flex;
flex-flow: column;
}
header,footer{
height: 50px;
background: gray;
}
article{
flex: 1;
overflow: auto;
}
article section{
height: 100%;
display: none;
}
footer{
display: flex;
text-align: center;
line-height: 50px;
}
footer a{
flex: 1;
}
</style>
</head><body>
<header> </header>
<article>
<section id="weixin">
我是微信界面
</section>
<section id="me">
我是我的相关设置界面
</section>
<section id="contact">
我是联系人界面
</section>
</article>
<footer>
<a href="#weixin">微信</a>
<a href="#me">我</a>
<a href="#contact">联系人</a>
</footer>
<script>
var ome = document.getElementById("me");
var oweixin = document.getElementById("weixin");
var ocontact = document.getElementById("contact");var divObj={
"#weixin":oweixin,
"#contact":ocontact,
"#me":ome
}
window.onhashchange = function(){
console.log(location.hash);
//window.location.hash 取值就是 锚点部分 #weixin
for(var i in divObj){
divObj[i].style.display = "none";
}
divObj[location.hash].style.display = "block";
}
//window.location.hash 可读可写
window.location.hash = "#me";
//单页面 的路由管理机制
</script>
</body></html>
拖拽操作
被拖拽
draggable
设置为true，元素就可以拖拽了
拖拽元素事件 : 事件对象为被拖拽元素
dragstart , 拖拽前触发
drag ,拖拽前、拖拽结束之间，连续触发
dragend , 拖拽结束触发
<style>
#div1 {
width: 100px;
height: 100px;
background: red;
color:white;
}
</style>
<div id="div1" draggable="true">
</div>
<script>
var odiv = document.getElementById("div1");
odiv.addEventListener("dragstart",function(){
this.style.backgroundColor = "yellow";
});
odiv.addEventListener("drag",function(){
console.log(1111);
});
odiv.addEventListener("dragend",function(){
this.style.backgroundColor = "red";
});
</script>
降落
目标元素事件 : 事件对象为目标元素(必须绑定的)
dragenter , 进入目标元素触发，相当于mouseover
dragover ,进入目标、离开目标之间，连续触发
dragleave , 离开目标元素触发，相当于mouseout
drop , 在目标元素上释放鼠标触发
注意：当ondrop事件想触发的时候，必须阻止ondragover的默认事件
dataTransfer对象
setData() : 设置数据 key和value(必须是字符串)
getData() : 获取数据，根据key值，获取对应的value
解决火狐下的问题：
必须设置dataTransfer对象才可以拖拽除图片外的其他标签
<style>
.commondiv {
width: 100px;
height: 100px;
background: red;
color:black;
}
#div2{
width: 300px;
height: 300px;
background: gray;
position: absolute;
top:100px;
left:400px;
}
</style>
<div id="div1" draggable="true" class="commondiv">
12345678
</div>
<div id="div2">
</div>
<script>
var odiv1 = document.getElementById("div1");
odiv1.addEventListener("dragstart",function(ev){
this.style.backgroundColor = "yellow";
//设置要传递的键值对
ev.dataTransfer.setData("content",this.innerHTML);
});
odiv1.addEventListener("drag",function(){
// console.log(1111);
});
odiv1.addEventListener("dragend",function(){
this.style.backgroundColor = "red";
});
var odiv2 = document.getElementById("div2");
odiv2.ondragenter = function(){
this.style.border= "5px solid red";
}
odiv2.ondragover = function(ev){
console.log(111);
ev.preventDefault();
}
odiv2.ondragleave = function(){
this.style.border= "none";
}
odiv2.ondrop = function(ev){
//获取的传递过来的键值对。
console.log(ev.dataTransfer.getData("content"));
this.style.border= "none";
var div = document.createElement("div");
div.className = "commondiv";
div.innerHTML = ev.dataTransfer.getData("content");
this.appendChild(div);
odiv1.remove();
}
</script>
拖放外部文字
（1）dragover事件中设置
ev.dataTransfer.dropEffect = “copy”
(2) ev.dataTransfer.getData(“text”)“; 来访问
拖放外部文件
（1）阻止ondrop 默认事件
（2） 获取ev.dataTransfer.files
（3） var fileReader = new FileReader();
fileReader.onload = function(){
console.log(this.result);
}
fileReader.readAsDataURL(ev.dataTransfer.files[0]);
www.dropzonejs.com 发现的一个关于drop的库
浙公网安备 33010602011771号