原生javascript替代jQuery选择器写法：http://caibaojian.com/toutiao/5264?wb
为了达到平稳退化，向后兼容，标记分离的思想，每次写js代码时做的第一件事应该是必要的测试和检查工作：
在js文件里首先添加以下代码进行检查：
window.onload = function(){
if(!document.getElementsByTagName) return false;
if(!document.getElementById) return false;
if(!document.getElementsByClassName) return false;
if(!document.getElementById("selector")) return false;
if(!document.getElementsByTagName("tag")) return false;
if(!document.getElementsByClassName("selector")) return false;
};
通用封装函数：
var $ = function(id){
return typeOf id=="string"?document.getElementById(id):id;
}
var EventUtil = {
addHandler: function(element, type, handler) { // 该方法接受3个参数：要操作的元素，事件名称和事件处理程序函数
if (element.addEventListener) { //检查传入的元素是否存在DOM2级方法
element.addEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.addEvent) { // 如果存在的是IE的方法
element.attachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。
} else { // 最后一种可能是使用DOM0级
element["on" + type] = hander;
}
},
removeHandler: function(element, type, handler) { // 该方法是删除之前添加的事件处理程序
if (element.removeEventListener) { //检查传入的元素是否存在DOM2级方法
element.removeEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.detachEvent) { // 如果存在的是IE的方法
element.detachEvent("on" + type, handler); //则使用IE的方法，注意，这里的事件类型必须加上"on"前缀。
} else { // 最后一种可能是使用DOM0及方法(在现代浏览器中，应该不会执行这里的代码)
element["on" + type] = null;
}
}
};
//调用方式：
var btn =document.getElementById("btn");
var hander= function(){
alert("clicked");
};
EventUtil.addHandler(btn,"click",hander);
EventUtil.removeHandler(btn,"click",hander); //移除之前添加的事件处理程序
对于很多函数需要页面加载即运行，window.onload封装方法如下：
function addLoadEvent(func){
var oldonload = window.onload;
if(typeof window.onload != "function"){
window.onload = func;
}
else{
window.onload = function(){
oldonload();
func();
}
}
}
addLoadEvent(firstFunction);
addLoadEvent(secondFunction);
//浏览器可视区域窗口大小，兼容不同浏览器
var w= document.documentElement.clientWidth || document.body.clientWidth;
var h= document.documentElement.clientHeight || document.body.clientHeight;
//整体文档窗口大小，兼容不同浏览器
var w=document.documentElement.scrollWidth || document.body.scrollWidth;
var h=document.documentElement.scrollHeight || document.body.scrollHeight;
火狐和IE之间的7个JavaScript差异：http://bbs.html5cn.org/thread-83252-1-1.html
5种JavaScript和CSS交互的方法：http://www.imooc.com/article/1241
1、在大多数情况下,为事件处理函数返回false，可以防止默认的事件行为.例如,默认情况下点击一个a元素，页面会跳转到该元素href属性指定的页。
return false 就相当于终止符，return true 就相当于执行符。
return false 就相当于终止符，return true 就相当于执行符。
在js中对于return用法的三种景象的总结如下：
retrun true； 返回正确的处理惩罚成果。
return false；返回错误的处理惩罚成果；终止处理惩罚；阻拦提交表单；阻拦履行默认的行动。
return；把把握权返回给页面。
3、noscript标签可被用于可识别 script标签但无法支持其中的脚本的浏览器。如果浏览器支持脚本，那么它不会显示出 noscript 标签中的文本。
4、在动态设置样式时，只要有可能，最好选用CSS，最简单的就是选择最容易实现的方法。
5、在一个函数中会用到全局对象存储为局部变量来减少全局查找，因为访问局部变量的速度要比访问全局变量的速度更快些。
6、如果针对的是不断运行的代码，不应该使用setTimeout，而应该是用setInterval，因为setTimeout每一次都会初始化一个定时器，而setInterval只会在开始的时候初始化一个定时器。
7、如果要连接多个字符串，应该少使用+= ,条件分支时尽量使用三目运算符替代条件分支。
8、很多人喜欢使用parseInt()，其实parseInt()是用于将字符串转换成数字，而不是浮点数和整型之间的转换，我们应该使用Math.floor()或者Math.round()。
9、在JavaScript中所有变量都可以使用单个var语句来声明，这样就是组合在一起的语句，以减少整个脚本的执行时间。
10、对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。
11、当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。
12、如果定义了toString()方法来进行类型转换的话，推荐显式调用toString()，因为内部的操作在尝试所有可能性之后，会尝试对象的toString()方法尝试能否转化为String，所以直接调用这个方法效率会更高。
13、//因为elemet.style只能获取内联样式，而element.currentStyle.width是IE浏览器专有属性，getComputedStyle(element, null).width是火狐和Chrome浏览器的特有属性，所以为了兼容，获取内外样式方法如下(不可取复合样式，如background，border，而是应该写成backgroundColor，borderWidth)：
function getStyle(obj,name) {
if(obj.currentStyle) {
return obj.currentStyle[name];
}
else
{
return getComputedStyle(obj,null)[name];
}
}
14、function getClass(parent, className) { //第一个参数表示是className是所属那个dom标签下,这样为了提高检索效率
//如果是火狐则调用火狐的getElementsByClassName 内置函数
if (document.getElementsByClassName) {
return document.getElementsByClassName(className);
}
else {
var nodes = parent.getElementsByTagName("*"),
ret = []; //创建一个数组，用于存储类为className的元素
for (i = 0; i < nodes.length; i++) { //遍历子集，判断类名，压入数组
if (nodes[i].className === className)) {
ret.push(nodes[i]);
}
}
return ret;
}
}
15、//js中空格也作为一个文本节点，此函数是为了删除空格准确寻找子节点
function cleanWhitespace(element){
for(var i=0; i<element.childNodes.length; i++){
var node = element.childNodes[i];
if(node.nodeType == 3 && !/S/.test(node.nodeValue)){
node.parentNode.removeChild(node);
}
}
}
16、/*自定义insertAfter函数*/
function insertAfter(newElement,targetElement){
var parent = targetElement.parentNode;
if(parent.lastChild == newElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
17、有些时候你发现调用childNodes属于没有获得你期望的值。比如：
<a href="javascript:;" onclick="getValue(this);">
<span>apple</span>
</a>
function getValue(obj){
var text = obj.children[0].innerHTML;
alert(text);
}
我们希望获得的text属性值为“apple”，但实际上的值是undefined，也就是说获取失败。
原因：childNodes属性返回值包含了元素节点和文本节点，此例中obj.children[0]返回的实际是空格。
解决方案：
1）去掉<span>和<a>之间的空格。
2）改用obj.children[0].innerHTML。children属性只返回元素节点。
18.//寻找下一个元素节点，而不是下一个节点,兼容不同浏览器
function getNextElement(node){
if(node.nodeType == 1)
{
return node;
}
if(node.nextSibling)
{
return getNextElement(node.nextSibling);
}
return null;
}
19、js可以通过insertRow()来进行插入行，通过insertCell()方法来插入单元格。
20、cssText的巧妙用法(兼容不同浏览器)：http://www.cnblogs.com/rguanghui/archive/2013/02/26/cssText.html
21.//在for循环中的不正确函数调用
var li = document.getElementsByTagName("li");
var n = li.length;
for (var i=0;i<n;i++) {
li[i].onclick = function() {
alert("你点击的是第" + i + "li"); //i始终为n
};
}
//解决方案
var li = document.getElementsByTagName("li");
var n = li.length;
for (var i=0;i<n;i++){
bar(li[i],i);
}
function bar(x,y){
x.onclick = function(){
alert("你点击的是第" + y +"li");
};
}
22.//js滚轮事件，兼容不同浏览器
var wheel = function (e) {
e = e || window.event;
if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
if (e.wheelDelta > 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.wheelDelta < 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
} else if (e.detail) { //Firefox滑轮事件
if (e.detail> 0) { //当滑轮向上滚动时
alert("滑轮向上滚动");
}
if (e.detail< 0) { //当滑轮向下滚动时
alert("滑轮向下滚动");
}
}
};
//给页面绑定滑轮滚动事件
if (document.addEventListener) {//firefox
document.addEventListener('DOMMouseScroll', wheel, false);
}
//滚动滑轮触发scrollFunc方法 //ie 谷歌
window.onmousewheel = document.onmousewheel = wheel;
23.iframe自适应高度：http://www.html5cn.org/article-7272-1.html http://caibaojian.com/iframe-adjust-content-height.html
24.js实现自适应宽度的瀑布流：http://www.html5cn.org/article-4652-1.html http://bbs.html5cn.org/thread-149650-1-1.html
三种方式实现瀑布流布局：http://www.w3cfuns.com/notes/27624/397dc45aeb17e2da9e0351a3ae973b64.html
25.js实现图片预加载：http://www.cnblogs.com/siqi/p/3304662.html
26.用Array.prototype.join代替原有的基本的字符连接的写法：
var items = [];
ajaxResult.items.forEach(function(item) {
// 构建字符串
items.push('<li>', item.text, '</li>');
});
// 通过innerHTML设置列表内容
document.querySelector('ul').innerHTML = items.join('');
26.DOM优化：https://segmentfault.com/a/1190000008267184
27.如何用JS操纵伪元素：http://nicejade.github.io/2016/10/24/how-to-operate-pseudo_element-using-js.html?utm_medium=hao.caibaojian.com&utm_source=hao.caibaojian.com
28.高性能滚动 scroll 及页面渲染优化：http://web.jobbole.com/86158/
29.轻巧的 JavaScript 动画库：http://anime-js.com/
30.一般认为，使用超时调用来模拟间歇调用的是一种最佳模式。在开发环境下，很少使用真正的间歇调用，原因是后一个间歇调用可能会在前一个间歇调用结束之前启动。而像前面示例中那样使用超时调用，则完全可以避免这一点。所以，最好不要使用间歇调用。