1 html5新增标签
- output标签
- 在form标签中通过事件oninput实施监听文本框的输入变化；
- 代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>output</title> </head> <body> <form action="" oninput="tian3.value=parseInt(tian1.value)*parseInt(tian2.value)"> <input type="text" name="tian1" value="20"/>* <input type="number" name="tian2" value="10"/>= <output name="tian3"></output> </form> <form action="" oninput="tian3.value=parseInt(tian1.value)*parseInt(tian2.value)"> <input type="text" id="tian1" value="20"/>* <input type="number" id="tian2" value="10"/>= <output name="tian3"></output> </form> <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0 <input type="range" id="a" value="50">100 +<input type="number" id="b" value="50"> =<output name="x" for="a b"></output> </form> <script></script> </body> </html> - ruby注释：配合rt定义注释或音标
- 代码：
<body> <p>天空<ruby>分<rt>f<ruby>e<rt>v</rt></ruby>n</rt></ruby>外蓝，鱼儿<mark>你</mark>在何方！！！</p> </body> - 知识解读文件链接
知识解读
2 表单标签类型及属性
- 表单类型：
- type属性：email/tel/url/number/range/Date picker/search/color/file
- file属性：选择文件 代码：
<input type="file" multiple>；
- 表单属性
- 分类：autocomplete/autofocus/multiple/placeholder/required
- autocomplete:自动填补内容；属性值on或空，代表自动填充；属性值off，代表不自动填充；
- autofocus:自动聚焦；
- multiple:多选；
- required:要求，当表单内容为空或表单内容不符合格式，则会出现信息提示字；
3 data自定义属性
- 在html5中data设置自定义属性格式为：
data-xxx="";- 例如：
<a href="javascript:;" data-target=".tiyu">体育频道</a> - 在原生JS中打印元素a身上的属性和方法，其中有一个dataset属性，属性值为对象，对象中存在target属性，属性值为设置的内容
.tiyu；即：oA.dataset.target; - 在jQuery中，通过data方法来获取；即：
$("a").data("target");
- 例如：
- 简易选项卡实例
- 原生JS版代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>data自定义属性</title> <style> .wrap{ width: 400px; } .wrap div{ padding: 20px; width: 100%; height: 200px; border: 1px solid red; display: none; } .wrap div:nth-of-type(1){ display: block; } </style> </head> <body> <div class="wrap"> <a href="javascript:;" data-target=".tiyu">体育频道</a> <a href="javascript:;" data-target=".xinwen">新闻频道</a> <a href="javascript:;" data-target=".nongmin">农民频道</a> <a href="javascript:;" data-target=".fazhi">法制频道</a> <div class="tiyu content">体育频道1111111</div> <div class="xinwen content">新闻频道2222221</div> <div class="nongmin content">农民频道333333</div> <div class="fazhi content">法制频道4444444</div> </div> <script> var aA=document.getElementsByTagName("a"); var aDiv=document.querySelectorAll(".content"); for(var i=0; i<aA.length; i++){ aA[i].onclick=function () { //原生拿this标签元素身上的自定义属性dataset中的属性target console.dir(this); var target=this.dataset.target; for(var i=0; i<aDiv.length; i++){ aDiv[i].style.display="none"; } document.querySelector(target).style.display="block"; } } </script> </body> </html>- jQuery版代码：
<script src="jquery.js"></script> <script> $("a").click(function () { var target=$(this).data("target"); $(target).show().siblings("div").hide(); }) </script>
4 classList属性
- 属性：元素身上的属性，属性值为对象，对象原型链上存在add(),remove(),toggle(),contains(),item()等属性方法；
- 原型链上属性方法解读：
- add():给元素添加class名，如果需要添加多个，用逗号分隔；即：
ele.classList.add("box1,box2");；返回值为：undefined； - remove():给元素删除class名，如果需要删除多个，用逗号分隔；即：
ele.classList.remove("box1,box2");;返回值为undefined； - toggle():用于切换添加和删除class名，相当于一个开关，如果元素身上存在class名，则删除，并返回false；如果不存在，则添加，并返回true；即：
ele.classList.toggle("box1");； - item():用于获取元素身上多个class名中的某一个，通过索引值获取，返回指定的class名；即：
ele.classList.item(1); - contains():用于判断元素身上是否存在某个class名，返回值为布尔值，存在则返回true；不存在则返回false；
- add():给元素添加class名，如果需要添加多个，用逗号分隔；即：
- 链接知识解读：classList解读；
- 验证代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>classList验证</title> <style> div{ width: 200px; height: 200px; background-color: red; } </style> </head> <body> <input type="button" value="点击" id="btn"> <div id="div" class="box1 box2"></div> <script> var oDiv=document.getElementById("div"); var oBtn=document.getElementById("btn"); oBtn.onclick=function () { var res=oDiv.classList.add("box3,box4");//返回undefined； var res1=oDiv.classList.remove("box2");//返回undefined； var res2=oDiv.classList.toggle("box2");//有就删没有就添加，返回false和true； var res3=oDiv.classList.contains("box1");//返回false和true； var res4=oDiv.classList.item(2);//用于返回元素身上多个class名中的一个，按照0开始排序 console.log(res); } </script> </body> </html>
5 localStorage本地存储
- 获取：
var storage=window.localStorage; - 功能：
- 存：
点 []或setItem("key","val") - 取：
点 []或getItem("key") - 删：删除某一个属性：
storage.removeItem("key")；全部删除：storage.clear()； - 获取所有的key：
var storage=window.localStorage; for(var i=0; i<storage.length; i++){ console.log(storage.key(i)); } - 存：
- 详细解读见链接第5.0节
localStorage解读
网友评论