第十一周第三天笔记之html5知识解读

2018-10-09 本文已影响0人果木山

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；
链接知识解读：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解读

第十一周第三天笔记之html5知识解读

1 html5新增标签

2 表单标签类型及属性

3 data自定义属性

4 classList属性

5 localStorage本地存储

猜你喜欢

热点阅读