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. 转载:使用Nginx的必备软件(1.3.2)《深入理解Nginx》(陶辉)

    原文:https://book.2cto.com/201304/19612.html 如果要使用Nginx的常用功能,那么首先需要确保该操作系统上至少安装了如下软件. (1)GCC编译器 GCC(GN ...

  2. Python中的一些小语法

    目录: 生成随机数 将一个字符串变为datetime类型,并且获取星期几 1.生成随机数 假设我们要操作的list如下: >>> import random >>> ...

  3. android 手机拍照返回 Intent==null 以及intent.getData==null

    手机拍照第一种情况:private void takePicture(){ Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);Si ...

  4. PYTHON-基本数据类型-元祖类型,字典类型,集合类型

    内容: 1. 元组 2. 字典 3. 集合=========================== 元祖类型什么是元组: 元组就是一个不可变的列表============================ ...

  5. android-----带你一步一步优化ListView(一)

    ListView作为android中最常使用的控件,可以以条目的形式显示大量的数据,经常被用于显示最近联系人列表,对于每一个 Item,均要求adapter的getView方法返回一个View,因此L ...

  6. LeetCode(46):全排列

    Medium! 题目描述: 给定一个没有重复数字的序列,返回其所有可能的全排列. 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [ ...

  7. Paget Object 设计模式编写selenium测试用例

    示例常规代码 baidu.py # _*_ coding:utf-8 _*_ import csv,unittest,time #导入csv模块 from time import sleep from ...

  8. python 全栈开发,Day111(客户管理之 编辑权限(二),Django表单集合Formset,ORM之limit_choices_to,构造家族结构)

    昨日内容回顾 1. 权限系统的流程? 2. 权限的表有几个? 3. 技术点 中间件 session orm - 去重 - 去空 inclusion_tag filter 有序字典 settings配置 ...

  9. Linux下编写互相通信的驱动模块并将其加入到内核中

    以Mini2440为例,其Linux内核目录为/opt/FriendlyARM/mini2440/linux-2.6.32.2,在linux-2.6.32.2(Linux内核目录)下的drivers目 ...

  10. 安装oracle11g时遇到INS-13001环境不满足最低要求

    在安装oracle11g,点击setup.exe之后,弹出了如下提示框: 解决方法: 首先,打开你解压后的database文件夹,找到stage,然后cvu,找到cvu_prereq.xml文件,用记 ...