• 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,'')">