1 html5新增標簽
- output標簽
- 在form標簽中通過事件oninput實施監(jiān)聽文本框的輸入變化匀归；
- 代碼
<!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:自動填補內(nèi)容迄沫；屬性值on或空，代表自動填充卦方；屬性值off邢滑，代表不自動填充；
- autofocus:自動聚焦愿汰；
- multiple:多選困后；
- required:要求，當表單內(nèi)容為空或表單內(nèi)容不符合格式衬廷，則會出現(xiàn)信息提示字摇予；
3 data自定義屬性
- 在html5中data設(shè)置自定義屬性格式為：
data-xxx="";- 例如：
<a href="javascript:;" data-target=".tiyu">體育頻道</a> - 在原生JS中打印元素a身上的屬性和方法，其中有一個dataset屬性吗跋，屬性值為對象侧戴，對象中存在target屬性，屬性值為設(shè)置的內(nèi)容
.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">農(nóng)民頻道</a> <a href="javascript:;" data-target=".fazhi">法制頻道</a> <div class="tiyu content">體育頻道1111111</div> <div class="xinwen content">新聞頻道2222221</div> <div class="nongmin content">農(nóng)民頻道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名慨默，相當于一個開關(guān)贩耐，如果元素身上存在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節(jié)
localStorage解讀
