来源：自学PHP网 时间：2015-01-26 11:14 作者： 阅读:次
[导读] 尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API，本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些...
|
尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API，本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API
原文日期： 2010年09月27日 翻译日期： 2013年8月7日 当人们看到或者说出"HTML5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？ 我们注意到那些基础的Api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。 尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的API。 本系列文章介绍这些接口API，同时也希望能鼓励更多开发者去探索那些还不广为人知的API。 Element.classList 这个属性已经发布了好几年，通过classList,我们可以通过JavaScript来操纵底层css的class属性. 代码如下： 复制代码 代码如下:// 使用classList属性(Dom元素,css类名) function toggleClassList(element,cName){ // 1. classList API // 切换类,有则移除，没有则添加 if(element.classList.toggle){ element.classList.toggle(cName); return true; } // !!! 其实，本函数 toggleClassList 如果支持的话， // 那么下面的代码就不会被执行，此处仅作演示,请灵活应用 // 2. classList API // element 的class属性是否包含 hide 这个CSS类 var hasHide = element.classList.contains(cName); // if(hasHide){ // 3. classList API // 移除hide类 element.classList.remove(cName); } else { // 4. classList API // 添加hide类 element.classList.add(cName); } return true; }; ContextMenu API 经测试chrome28不管用。。。 新的API，ContextMenu 是极好的接口： 此接口允许你很简单地添加菜单项到浏览器的上下文菜单(右键菜单)，而不是去覆盖浏览器的默认右键菜单。 需要注意的是，你最好采用js脚本来动态的创建菜单contextmenu，这样可以避免页面禁用JS脚本的情况 下出现多余的HTML代码。 代码如下： 复制代码 代码如下:<div class="hide"> <!-- contextmenu 指定了使用哪个上下文菜单。 --> <!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 --> <section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;"> <h1>点击此区域查看菜单</h1> <!-- 为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方: --> <!-- 添加菜单,至于图片图标，请自己设置。add the menu --> <menu type="context" id="mymenu"> <menuitem label="刷新页面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem> <menu label="分享到..." icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png"> <menuitem label="新浪微博" icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png" onclick="window.location.href='http://www.weibo.com'"></menuitem> <menuitem label="腾讯微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href='http://t.qq.com'"></menuitem></menuitem> </menu> </menu> </section> </div> Element.dataset 数据集(dataset) API 允许开发者对DOM元素设置(set)和获取(get) 以 data- 前缀开头的属性值。 代码如下： 复制代码 代码如下:<div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url="http://blog.csdn.net/renfufei"></div> 复制代码 代码如下:function testDataset(){ // var intro = document.getElementById("intro"); // 注意这个不是 id属性哦，是 data-id 的值 var id = intro.dataset.id; // data-website var website = intro.dataset.website; // data-blog-url,驼峰命名法.. var blogUrl = intro.dataset.blogUrl; // data-my-name var myName = intro.dataset.myName; // var msg = "qq:"+id +",website:"+website +",blogUrl:"+blogUrl +",myName:"+myName ; // warn(msg); }; 没有什么好说的，和classList一样，简单却实用。(想一想，是否改变了后台和前台JS的某些交互以及解耦？) window.postMessage API IE8 已经支持 postMessage API 好几年了，此API允许window 和iframe 元素之间互相传递消息。 跨域支持哦。 代码如下： 复制代码 代码如下:// From window or frame on domain 1, send a message to the iframe which hosts another domain var iframeWindow = document.getElementById("iframe").contentWindow; iframeWindow.postMessage("Hello from the first window!"); // From inside the iframe on different host, receive message window.addEventListener("message", function(event) { // Make sure we trust the sending domain if(event.origin == "http://davidwalsh.name") { // Log out the message console.log(event.data); // Send a message back event.source.postMessage("Hello back!"); } ]); // message 只允许string 类型的数据，然而您可以使用 JSON.stringify 以及 JSON.parse 传递更多有意义的消息。 autofocus Attribute autofocus 属性确保当页面加载后，给定的 BUTTON,INPUT或者 TEXTAREA 元素能够自动获得焦点。 复制代码 代码如下:<input autofocus="autofocus" /> <button autofocus="autofocus">Hi!</button> <textarea autofocus="autofocus"></textarea> autofocus 属性主要用在简单的输入页面，详情请参考：autofocus 属性 各浏览器厂商对这些API的支持度各不相同，所以在使用之前最好检测一下兼容性，花一些时间来阅读上面所列出的API，您将会对他们了解和掌握更多。 部分的测试代码如下： 复制代码 代码如下:<!DOCTYPE html> <html> <head> <title>5个你不知道的 HTML5 API接口演示 </title> <meta name="Generator" content="EditPlus"> <meta name="Author" content="renfufei@qq.com"> <meta name="Description" content="original=http://davidwalsh.name/html5-apis"> <style> .hide{ display:none} .poplayer{ z-index:999; position:absolute;background-color:#fff; top:0px;left:0px;overflow: hidden;width:100%;height:100%;opacity:1;} .close{ top:3px; right:10px;position:absolute;} </style> <script> // 显示警告信息 function warn(msg){ warn = warn || "一个未知警告!"; if(window.console){ console.warn(msg); } else { alert(msg); } }; // 使用classList属性(Dom元素,css类名) function toggleClassList(element,cName){ // 1. classList API // 切换类,有则移除，没有则添加 if(element.classList.toggle){ element.classList.toggle(cName); return true; } // !!! 其实，本函数 toggleClassList 如果支持的话， // 那么下面的代码就不会被执行，此处仅作演示,请灵活应用 // 2. classList API // element 的class属性是否包含 hide 这个CSS类 var hasHide = element.classList.contains(cName); // if(hasHide){ // 3. classList API // 移除hide类 element.classList.remove(cName); } else { // 4. classList API // 添加hide类 element.classList.add(cName); } return true; }; // 使用className属性(Dom元素,css类名) function toggleClassName(element,cName){ var className = element.className || ""; // 去掉首尾的空白 cName = cName.replace(/^\s*|\s*$/g,""); // cName 中间如果含有空白字符，则失败. 如果要好好处理，可以拆分为数组，单个处理 var blankReg = /\s+/; if(blankReg.test(cName)){ warn("'"+cName+"'中间含有空白字符"); return false; } // 正则， \b 表示可见连续字符的边界，可以这么理解: // "hide2 hide hide myname" 那么， // hide2 的前后各有一个虚拟的\b ,hide 前后也有， // 但是 hi 和 de之间则没有。 // g 表示单行全局 //var rep = /\bhide\b/g; var rep = new RegExp("\\b" + cName + "\\b", "g"); if(rep.test(className)){ className = className.replace(rep,""); } else { className += " "+cName; } // 替换新className。 element.className = className; return true; }; // 函数，切换(元素id，className) function toggleClass(elementId,cName){ // 获取一个DOM元素 var element = document.getElementById(elementId); // 如果不存在元素 if(!element){ warn("id为"+elementId+"的元素不存在"); return false; } if(!element.classList){ warn("id为"+elementId+"的元素不支持classList属性，将使用其他手段来实现"); return toggleClassName(element,cName); } else { return toggleClassList(element,cName); } }; function testDataset(){ // var intro = document.getElementById("intro"); // 注意这个不是 id属性哦，是 data-id 的值 var id = intro.dataset.id; // data-website var website = intro.dataset.website; // data-blog-url,驼峰命名法.. var blogUrl = intro.dataset.blogUrl; // data-my-name var myName = intro.dataset.myName; // var msg = "qq:"+id +",website:"+website +",blogUrl:"+blogUrl +",myName:"+myName ; // warn(msg); }; // dom加载后 执行 window.addEventListener("DOMContentLoaded", function() { var open = document.getElementById("open"); var close = document.getElementById("close"); open.addEventListener("click",function(){ // toggleClass("diary2","hide"); toggleClass("loading","hide"); }); close.addEventListener("click",function(){ // toggleClass("diary2","hide"); toggleClass("loading","hide"); }); // testDataset(); }, false); </script> </head> <body> <div> <div id="diary2" class="diary poplayer hide"> <a href="javascript:void(0)" _fcksavedurl=""javascript:void(0)"" id="close">关闭</a> <div id="loading" class="loading hide" style="z-index:1; position: absolute; left: 40%; top: 30%; width: 104px; height: 104px;opacity: 0.5;background: #000000;border: 0px solid #000000;border-radius: 10px;-webkit-border-radius: 10px;"> <img src="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" alt="" style="position:absolute; left:26px; top:10px;width: 50px;height: 50px;border-radius: 10px;-webkit-border-radius: 10px;"> <div class="loadingtext" style="position:absolute;left: 12px;top: 76px;color: #ffffff;">正在加载中</div> </div> </div> <div> <a href="javascript:void(0)" id="open">打开</a> </div> </div> <div class="hide"> <!-- contextmenu 指定了使用哪个上下文菜单。 --> <!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 --> <section contextmenu="mymenu" style="min-height:100px;min-height:200px;background:#999;"> <h1>点击此区域查看菜单</h1> <!-- 为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方: --> <!-- 添加菜单,至于图片图标，请自己设置。add the menu --> <menu type="context" id="mymenu"> <menuitem label="刷新页面" onclick="window.location.reload();" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png"></menuitem> <menu label="分享到..." icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png"> <menuitem label="新浪微博" icon="http://www.sinaimg.cn/blog/developer/wiki/32x32.png" onclick="window.location.href='http://www.weibo.com'"></menuitem> <menuitem label="腾讯微博" icon="http://mat1.gtimg.com/app/opent/images/wiki/resource/weiboicon32.png" onclick="window.location.href='http://t.qq.com'"></menuitem></menuitem> </menu> </menu> </section> </div> <div id="intro" data-website="www.csdn.net" data-id="551996458" data-my-name="铁锚" data-blog-url="http://blog.csdn.net/renfufei"></div> </body> </html> |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com
