• 1em=16px（浏览器默认值）

  • 在 before 或 after 伪类中使用字体图标时，记得设置 font-weight，否则显示不出来

  • oncontextmenu=”return false” 在

    标签中用来取消鼠标右键

  • 使用数学运算的时候，可以先查看 Math 对象。运行速度比用 js 算快。

  • 使用缓存机制来提升页面回访效率。

  • jquery 在 1.9 开始的版本都不支持 live()和 bind()方法了，全部都改成 on()方法

延迟脚本

HTML4.01 为 script 标签定义了 defer 属性，这个属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行

1
2
3
4
5
6
7
8
9
10
11
12
<!-- 这个例子中的script元素虽然放在了<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后执行。 -->
<!DOCTYPE html>
<html>
    <head>
        <title>Example HTML Page</title>
        <script type="text/javascript" defer="defer" src="example1.js"></script>
        <script type="text/javascript" defer="defer" src="example2.js"></script>
    </head>
    <body>
        <!-- 这里放内容 -->
    </body>
</html>

严格模式

ECMAScript 5 引入了严格模式，要整个脚本启用严格模式，可以在顶部加入如下代码：

1
"use strict";

也可以指定函数在严格模式下执行：

1
2
3
4
function doSomething() {
  "use strict";
  // 函数体
}

防止在一定时间内重复执行：

1
2
3
4
5
6
7
8
9
10
11
12
//改变窗口大小之后500ms刷新表格
var tout;
window.onresize = function() {
  if (tout) {
    clearTimeout(tout);
  }
  tout = setTimeout(function() {
    tout = null;
    calcSize();
    defEcharts();
  }, 500);
};

document.documentElement 与 document.body

  • document 代表的是整个文档(对于一个网页来说包括整个网页结构)，
  • document.documentElement 是整个文档节点树的根节点，在网页中即 html 标签；
  • document.body 是整个文档 DOM 节点树里的 body 节点，网页中即为 body 标签元素。
  • 在文档使用了 DTD 时，document.body.scrollTop 的值为 0，此时需要使用 document.documentElement.scrollTop 来获取滚动条滚过的长度；在未使用 DTD 定义文档时，使用 document.body.scrollTop 获取值。

使用 console.time 和 console.timeEnd 来计算代码执行的时间

1
2
3
4
5
console.time("获取数据");
//
// 执行一些代码
//
console.timeEnd("获取数据");

浏览器内核模式

ie8 以上浏览器使用最新文本模式；双内核浏览器强制使用 chrome 浏览器内核

1
2
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit" />

ie 杂项模式：

1
2
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!--要放到页面的最顶部位置，<head></head>下的第一个-->

input 标签

监听 input 值变化

1
2
3
4
document.getElementById("myInput").addEventListener("input", myFunction);
function myFunction() {
  alert("input 输入框值已发生变化。");
}

input 输入框限制输入类型

输入中文:

1
<input type="text" onkeyup="this.value=this.value.replace(/[^\u4e00-\u9fa5]/g,'')">

输入数字:

1
<input type="text" onkeyup="this.value=this.value.replace(/\D/g,'')">

输入英文:

1
<input type="text" onkeyup="this.value=this.value.replace(/[^a-zA-Z]/g,'')">

三个合在一起

1
<input onkeyup="value=value.replace(/[^\w\u4E00-\u9FA5]/g, '')">

只输入数字和字母

1
<input class=input maxLength=12 size=15 name=username id="username" onKeyUp="value=value.replace(/[\W]/g,'')">