扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >5个不知道的HTML5的接口是怎样的
  • 241

0
分享到

5个不知道的HTML5的接口是怎样的

2024-04-02 19:04:59 241人浏览 泡泡鱼
摘要

5个不知道的HTML5的接口是怎样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。当人们看到或者说出"html5"这个词的

5个不知道的HTML5的接口是怎样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

当人们看到或者说出"html5"这个词的时候，估计至少有一半以上的人，会联想到她既是一个性感而又充满魅力的美女，同时也是一只能把你搞得焦头烂额的独角兽，这能怪我们这些开发者吗？
我们注意到那些基础的api停滞发展了如此漫长的时间(大概是1999-2009)，以至于像"placeholder"这样基础的一个附加功能，也要花费我们不短的时间来处理。
尽管当前的主流浏览器已经实现了很多的HTML5新特性，但是很多开发者根本就没注意到这些更简洁，也很有用的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" >
<h2>点击此区域查看菜单</h2>
<!--
为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方:
-->
<!-- 添加菜单,至于图片图标，请自己设置。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新页面" onclick="window.location.reload();" icon="/file/imgs/upload/202210/19/ek45eufpgph.png"></menuitem>
<menu label="分享到..." icon="/file/imgs/upload/202210/19/d03lp1425mi.png">
<menuitem label="新浪微博" icon="/file/imgs/upload/202210/19/d03lp1425mi.png" onclick="window.location.href='Http://www.weibo.com'"></menuitem>
<menuitem label="腾讯微博" icon="/file/imgs/upload/202210/19/ek45eufpgph.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" >
<img src="/file/imgs/upload/202210/19/ek45eufpgph.png" alt=""
>
<div class="loadingtext" >正在加载中</div>
</div>
</div>
<div>
<a href="javascript:void(0)" id="open">打开</a>
</div>
</div>
<div class="hide">
<!-- contextmenu 指定了使用哪个上下文菜单。 -->
<!-- !!!不知道为什么，我的浏览器上这个配置不起作用。 -->
<section contextmenu="mymenu" >
<h2>点击此区域查看菜单</h2>
<!--
为了代码结构的清晰，把menu元素放到了要使用的元素内部，其实你也可以放到外部的任何地方:
-->
<!-- 添加菜单,至于图片图标，请自己设置。add the menu -->
<menu type="context" id="mymenu">
<menuitem label="刷新页面" onclick="window.location.reload();" icon="/file/imgs/upload/202210/19/ek45eufpgph.png"></menuitem>
<menu label="分享到..." icon="/file/imgs/upload/202210/19/d03lp1425mi.png">
<menuitem label="新浪微博" icon="/file/imgs/upload/202210/19/d03lp1425mi.png" onclick="window.location.href='http://www.weibo.com'"></menuitem>
<menuitem label="腾讯微博" icon="/file/imgs/upload/202210/19/ek45eufpgph.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>

看完上述内容，你们掌握5个不知道的HTML5的接口是怎样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注编程网node.js频道，感谢各位的阅读！

--结束END--

本文标题: 5个不知道的HTML5的接口是怎样的

本文链接: https://lsjlt.com/news/82788.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 5个不知道的HTML5的接口是怎样的
    5个不知道的HTML5的接口是怎样的，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。当人们看到或者说出"HTML5"这个词的...
    99+
    2024-04-02
  • 你可能不知道的几个JavaScript原生方法是怎样的
    这篇文章将为大家详细讲解有关你可能不知道的几个JavaScript原生方法是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。自ES6发行以来，许多新的，...
    99+
    2024-04-02
  • JavaScript的这5个技巧你知道了吗
    JavaScript的这5个技巧你知道了吗，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。谁要是说 JavaScript 是世界上比较好的语言，...
    99+
    2024-04-02
  • 5个你应该知道的JavaScript技巧分别是哪些
    这篇文章将为大家详细讲解有关5个你应该知道的JavaScript技巧分别是哪些，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。JavaScript是目前最流行...
    99+
    2024-04-02
  • xp 系统中"我的文档"5个大家都不知道的秘密
    “我的文档”是WindowsXP中的一个系统文件夹，不过很多朋友并不经常使用它，或者仅仅将它用来存放一些曰常工作的文件。其实“我的文档”并不只是存放文件这么简单，它还藏有许...
    99+
    2023-05-30
    xp 我的文档 秘密 系统 文档
  • Spring的Aware接口你知道多少
    若 Spring 检测到 bean 实现了 Aware 接口，则会为其注入相应的依赖。所以通过让bean 实现 Aware 接口，则能在 bean 中获得相应的 Spring 容器资...
    99+
    2024-04-02
  • Spring异步编程的5个技巧：你知道吗？
    在现代的Web应用程序中，异步编程已经成为了不可或缺的一部分。Spring框架是一个非常流行的Java开发框架，它提供了多种异步编程的方式来帮助开发人员构建高效的Web应用程序。在本文中，我们将介绍Spring异步编程的5个技巧，让你更好...
    99+
    2023-10-08
    django spring 异步编程
  • 你需要知道的 5 个 Linux 新手会犯的失误
    Linux 爱好者们分享了他们犯下的一些最大错误。终身学习是明智的 —— 它可以让你的思维敏捷，让你在就业市场上更具竞争力。但是有些技能比其他技能更难学，尤其是那些小菜鸟错误，当你尝试修复它们时可能会花费你很多时间，给你带来很大困...
    99+
    2023-06-05
  • 5个强大的HTML5 API分别是哪些
    5个强大的HTML5 API分别是哪些，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。1.  全屏API（Fullscreen API）该API允许开发...
    99+
    2023-06-17
  • IDE 中的 Java 同步：你需要知道的 5 个关键点
    Java 同步是多线程编程中非常重要的一个概念，它可以确保多个线程在访问共享资源时的正确性。在 IDE 中进行 Java 开发时，同步也是一个常见的问题。在本文中，我们将介绍 IDE 中的 Java 同步，包括你需要知道的 5 个关键点，以...
    99+
    2023-06-26
    同步 ide http
  • 4个Java8中你需要知道的函数式接口分享
    目录前言为什么需要知道这几个函数式接口Function 接口说明apply 方法andThen 和 compose 方法identify 方法Consumer 接口说明accept ...
    99+
    2023-05-14
    Java8函数式接口 Java 函数式接口 Java8 接口
  • ASP IDE接口重定向：为什么这是一个必须知道的技术？
    在ASP开发中，我们经常需要使用接口来实现模块化和代码复用。然而，当我们在实际应用中使用接口时，我们可能会遇到一些问题，比如接口的路径被修改或者接口被删除。为了解决这些问题，我们需要了解ASP IDE接口重定向。 接口重定向是一种ASP开...
    99+
    2023-08-22
    ide 接口 重定向
  • Unix 中的 Python 和 Javascript 接口：你是否知道它们的作用？
    Unix 操作系统一直以来都是开发人员和系统管理员的首选平台。在 Unix 中，Python 和 Javascript 是两种广泛使用的编程语言。与其他编程语言相比，Python 和 Javascript 具有易学易用、灵活、高效等优点。...
    99+
    2023-08-27
    javascript unix 接口
  • 您知道吗？Python API接口是Linux开发中不可或缺的一部分！
    Python是一种高级编程语言，被广泛用于各种领域的软件开发。在Linux开发中，Python API接口是不可或缺的一部分。Python API接口提供了一种便捷的方式来访问操作系统的内部功能和资源，从而实现更高效的开发和管理。 Pyth...
    99+
    2023-10-29
    linux api 接口
  • 不知道这5种下划线的含义，你就不算真的会Python！
    什么是 Python？ Python 之父 Guido van Rossum 说：Python是一种高级程序语言，其核心设计哲学是代码可读性和语法，能够让程序员用很少的代码来表达自己的想法。对于我来说，学习 Python 的首要原因是，Py...
    99+
    2023-06-05
  • 揭秘数据库性能调优的秘密：5个你不知道的优化秘诀
    数据库性能调优是一门复杂的艺术，它不仅需要掌握数据库的原理和结构，还需要丰富的实践经验。数据库性能调优的方法有很多，常用的有索引优化、参数优化、架构优化、硬件优化和数据优化。 1. 索引优化 索引是数据库中一种重要的数据结构，它可以加速...
    99+
    2024-02-10
    数据库性能调优 索引优化 参数优化 架构优化 硬件优化 数据优化
  • Laravel 中的 ASP 响应接口：你需要知道的三个重要概念。
    Laravel 中的 ASP 响应接口：你需要知道的三个重要概念 在 Laravel 中，ASP（Application Service Provider）是一种提供服务的机制，可以让我们在 Laravel 应用程序中注册服务。ASP 为我...
    99+
    2023-07-19
    响应 接口 laravel
  • HTML5结构是怎样的
    这篇文章将为大家详细讲解有关HTML5结构是怎样的，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　由于缺少结构，即使是形式良好的 HTML...
    99+
    2024-04-02
  • 基于Consumer接口、Predicate接口初使用是怎样的
    这篇文章将为大家详细讲解有关基于Consumer接口、Predicate接口初使用是怎样的，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。Consumer 接口源码package j...
    99+
    2023-06-22
  • HTML5中不需要Flash插件的YouTube是怎样的
    HTML5中不需要Flash插件的YouTube是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。现在的视频网站标准不一，观看Yout...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作