你不知道的js
1、<a>标签
(1)href属性包含超链接或超链接指向的URL或URL片段,URL 片段是哈希标记(#)前面的名称,哈希标记指定当前文档中的内部目标位置(HTML 元素的 ID)。URL 不限于基于 Web(HTTP)的文档,也可以使用浏览器支持的任何协议。例如,在大多数浏览器中正常工作的file:、ftp:和mailto:。
(2)可以使用 href="#top" 或者 href="#" 链接返回到页面顶部(HTML5)
(3)创建一个可点击的图片
<a href="https://developer.mozilla.org/en-US/">
<img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
alt="MDN logo" />
</a>
(4)创建一个email链接
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
点击将用户的电子邮件程序打开,让他们发送新邮件
(5)创建电话链接
<a href="tel:+491570156">+49 157 0156</a>
(6)使用download属性将<canvas>保存为PNG格式
如果你想允许用户下载一个HTML画布,你可以创建一个下载属性和画布数据作为文件URL链接图像
var link = document.createElement('a');
link.innerHTML = 'download image';
link.addEventListener('click', function(ev) {
link.href = canvas.toDataURL();
link.download = "mypainting.png";
}, false);
document.body.appendChild(link);
(7)最好不要滥用<a href="javascript:;"></a>,使用<button></button>代替,<a>最好只用于正常的URL导航
2、Blob
Blob 对象表示一个不可变、原始数据的类文件对象
Blob()构造函数允许用其它对象创建 Blob 对象。比如,用字符串构建一个 blob:
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)],
{type : 'application/json'});
使用 Blob 创建一个指向类型化数组的URL
var url = URL.createObjectURL(blob);
// 会产生一个类似blob:d3958f5c-0777-0845-9dcf-2cb28783acaf 这样的URL字符串
// 你可以像使用一个普通URL那样使用它,比如用在img.src上。
3、html元素的id里如果包含斜杠(/),用querySelector()等选择器时会报错,所以要对斜杠进行转义,key.replace('/', '\\/')
你不知道的js的更多相关文章
- 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...
- 你不知道的JS之 this 和对象原型(一)this 是什么
原文:你不知道的js系列 JavaScript 的 this 机制并没有那么复杂 为什么会有 this? 在如何使用 this 之前,我们要搞清楚一个问题,为什么要使用 this. 下面的代码尝试去 ...
- 你不知道的JS之作用域和闭包 附录
原文:你不知道的js系列 A 动态作用域 动态作用域 是和 JavaScript中的词法作用域 对立的概念. 动态作用域和 JavaScript 中的另外一个机制 (this)很相似. 词法作用域是 ...
随机推荐
- CentOS 6.5下PXE+Kickstart无人值守安装操作系统centos7.3
CentOS 6.5下PXE+Kickstart无人值守安装操作系统centos7.3 一.简介 1.1 什么是PXE PXE(Pre-boot Execution Environment,预启动执行 ...
- centos6.7环境半虚拟化软件xen及xm配置工具使用详解
1.xen软件的安装及配置 环境准备: ①操作系统:centos6.7(注意最好使用centos6.7,centos6.5无法使用xen的图形化界面创建操作系统) ②调整虚拟机配置,内存4G(推荐2G ...
- chart学习
效果图: 目录信息 graphic.jsp <%@ page language="java" contentType="text/html; charset=UTF ...
- vue 安装教程(自己安装过程及遇到的一些坑)
1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...
- 笔记 oracle 创建联合主键
笔记 alter table tablename add constraint unionkeyname primary key (column1,column2); 上面语句中: tablename ...
- C++ code:判断字符串相等
如果两个字符串中0和1的个数分别相等,则称该对字符串为相等. 方法一: 由于string类对于读取文件中子串以及比较都很方便,所以,用string类的对象来逐对存放字串,然后将字串分别排序后对其进行比 ...
- 性能测试二十七:环境部署之Dubbo原理
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成. Dubbo是框架,并不是像http那种传输协议 传统 ...
- 图片3D旋转
<!DOCTYPE html5> <html lang="en"> <head> <meta charset="UTF-8&qu ...
- LINQ学习之旅 (四)
LINQ to SQL语句之Group By/Having和Exists/In/Any/All/Contains 1.Group By/Having操作符 适用场景:分组数据,为我们查找数据缩小范围. ...
- C#获取路径
System.Diagnostics.Process.GetCurrentProcess().MainModule.FileName -获取模块的完整路径. System.Environment.Cu ...