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的更多相关文章

  1. 翻译连载 | 第 9 章:递归(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  2. 翻译连载 | 第 10 章:异步的函数式(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  3. 翻译连载 | 第 10 章:异步的函数式(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  4. 翻译连载 | 第 11 章:融会贯通 -《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  5. 翻译连载 | 附录 A:Transducing(上)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  6. 翻译连载 | 附录 A:Transducing(下)-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  7. 翻译连载 | 附录 B: 谦虚的 Monad-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  8. 翻译连载 | 附录 C:函数式编程函数库-《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...

  9. 你不知道的JS之 this 和对象原型(一)this 是什么

     原文:你不知道的js系列 JavaScript 的 this 机制并没有那么复杂 为什么会有 this? 在如何使用 this 之前,我们要搞清楚一个问题,为什么要使用 this. 下面的代码尝试去 ...

  10. 你不知道的JS之作用域和闭包 附录

     原文:你不知道的js系列 A 动态作用域 动态作用域 是和 JavaScript中的词法作用域 对立的概念. 动态作用域和 JavaScript 中的另外一个机制 (this)很相似. 词法作用域是 ...

随机推荐

  1. CentOS 6.5环境使用ansible剧本自动化部署Corosync + pacemaker环境及corosync常用配置详解

    环境说明: 192.168.8.39 node2.chinasoft.com 192.168.8.42 node4.chinasoft.com 192.168.8.40 ansible管理服务器 19 ...

  2. discuz安装:mysqli_connect()不支持advice_mysqli_connect

    原文:http://blog.csdn.net/changzhi1990/article/details/40983247 php -m 输出: PHP Warning: PHP Startup: U ...

  3. Android用户界面开发:Fragment

    Android用户界面开发:Fragment 1:注意事项  3.0以前的Android 版本要使用FragmentActivity 来装载Fragment ,使用到support v4包.  3.0 ...

  4. 深入对比TOML,JSON和YAML

    坦率地说,在我开始与Hugo TOML合作之前,我感到羞耻是一个需要发现的新领域,但我对YAML和JSON非常熟悉.本文将帮助您了解如何通过不同的数据格式构建数据.       在Hugo中,您可以将 ...

  5. LeetCode(57):插入区间

    Hard! 题目描述: 给出一个无重叠的 ,按照区间起始端点排序的区间列表. 在列表中插入一个新的区间,你需要确保列表中的区间仍然有序且不重叠(如果有必要的话,可以合并区间). 示例 1: 输入: i ...

  6. Spring IOC 低级容器解析

    1.IOC是什么 IOC-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不 ...

  7. SPLAY,LCT学习笔记(四)

    前三篇好像变成了SPLAY专题... 这一篇正式开始LCT! 其实LCT就是基于SPLAY的伸展操作维护树(森林)连通性的一个数据结构 核心操作有很多,我们以一道题为例: 例:bzoj 2049 洞穴 ...

  8. python+selenium+Jenkins构建自动化测试

    环境准备 本次使用JDK:1.8.tomcat:8.5.Jenkins:2.127 安装jdk 官方下载地址 安装教程参考 安装tomcat 和jenkins tomcat官方下载地址 jenkins ...

  9. python 全栈开发,Day134(爬虫系列之第1章-requests模块)

    一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...

  10. IntelliJ IDEA快捷键:Ctrl+Alt+B

    To navigate to the implementation(s) of an abstract method,position the caret at its usage or its na ...