jQuery最佳实践

转自：http://keenwon.com/955.html

本文介绍一些使用jQuery的通用标准和最佳实践，这些标准不涵盖Javascript的标准和最佳实践，英文原文地址是 http://lab.abhinayrathore.com/jquery-standards/。

加载jQuery

1、尽量使用CDN加载：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script type</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"text/javascript"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> src</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">window</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jQuery </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">||</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">write</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'<script src="js/jquery-1.11.0.min.js" type="text/javascript"><\/script>'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li></ol>

2、就像上面的代码一样，在CDN加载失败时，要回源到本地服务器的同版本jQuery。

3、使用依赖协议的URL（不加http:和https:，直接使用//），参看上面的例子。

4、尽可能在页面底部加载jQuery和javascript。

5、如何选择jQuery版本？

• 如果要兼容IE6/7/8，不要使用2.x版本的
• 对于新的应用，如果不考虑一些插件的兼容性问题，尽可能的使用最新版
• 从CDN加载jQuery的时候，使用完整的版本号（例如，使用1.11.0，不用1.11和1）
• 不要加载多个版本的jQuery

6、如果你使用了Prototype, MooTools, Zepto等，尝试使用jQuery代替$。可以使用$.noConflict()让出$的控制权。

jQuery变量

1、所有被缓存的jQuery对象，变量名以$开头。

2、总是缓存jQuery选择器返回的对象，方便复用：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myDiv </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myDiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myDiv</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">click</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...});</span></li></ol>

3、使用驼峰命名。

选择器

1、尽可能的使用ID选择器。ID选择器使用document.getElementById()，所以更快。

2、当使用类选择器的时候，不要加DOM元素类型：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $products </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $products </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快</span></li></ol>

3、使用find查找ID->Child的嵌套查询，.find()方法更快，因为第一次选择没有使用jQuery的选择器引擎：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差, 全部使用jQuery的选择器引擎</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $productIds </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#products div.id"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, #products使用document.getElementById(), 只有div.id需要使用jQuery的选择器引擎</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $productIds </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#products"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">find</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.id"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

4、越靠右侧越具体：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"div.data .gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 最佳</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

5、选择器不要太“具体”：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data table.attendees td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 更好，尽可能省去中间部分</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">".data td.gonzalez"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

6、给选择器指定上下文（限定范围）：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢，因为它在整个DOM结构中查找</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.class'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快，因为它只查找 class-container 下的.</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.class'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#class-container'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

7、避免使用“*”：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.container > *'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.container'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">children</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>

8、避免隐式使用“*”：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.someclass :radio'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差，还是用了“*”</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div.someclass input:radio'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>

9、不要使用多个ID选择器，或者嵌套使用ID选择器，单独的ID选择器使用document.getElementById()，速度很快：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#outer #inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'div#inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'.outer-container #inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'#inner'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, 调用 document.getElementById()</span></li></ol>

DOM操作

1、先把元素分离出DOM结构，再进行复杂的操作，之后再附加回DOM中。不明白原因的话，可以了解下.detach()这个方法

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list-container > ul"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">detach</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 对 $myList 执行大量复杂操作</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">appendTo</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list-container"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

2、使用字符串连接或者array.join()，少用.append()，点击这里查看性能比较。

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 慢</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    $myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">append</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 快</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $myList </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#list"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> list </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">""</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    list </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">html</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">list</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 更快</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> array </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">[];</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">for</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">0</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">10000</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">++){</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    array</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">[</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">]</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"<li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">i</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">+</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</li>"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myList</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">html</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">array</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">join</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">''</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">));</span></li></ol>

3、不要对不存在的元素做操作：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差: 在发现该ID不存在之前，已经执行了3个函数</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#nosuchthing"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">slideUp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $mySelection </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#nosuchthing"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">if</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$mySelection</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">length</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    $mySelection</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">slideUp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li></ol>

事件

1、一个页面只使用一个Document ready，便于调试和跟踪。

2、不要使用匿名函数绑定事件，匿名函数不利于调试，复用，测试，debug：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myLinkClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){...}</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myLinkClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

3、Document ready 不要用匿名函数，原因同上：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差: 你没办法写单元测试和复用</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// or $(document).ready(initPage);</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">function</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(){</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">//...</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li></ol>

4、Document ready 的处理函数应该写在外部文件，内联的javascript可以在一些初始化设置之后调用 ready 函数，例如：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script src</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my-document-ready.js"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">	</span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 做一些初始化设置.</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">	$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ready</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">initPage</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// or $(initPage); initPage函数在外部文件中</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"></</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">script</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">></span></li></ol>

5、不要把事件直接写在HTML元素上，这样不方便调试：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;"><a</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">id</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"myLink"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">href</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="atn" style="font-family:inherit;color:#bdb76b;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">onclick</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span><span class="atv" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"</span><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">my link</span><span class="tag" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;"></a></span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"><!-- 差--></span></li></ol>

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>

6、尽可能的给事件加上命名空间。这样方便解除绑定，而不影响该DOM元素的其他事件：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click.mySpecialClick"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myEventHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 之后，很容易的解除绑定</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">unbind</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click.mySpecialClick"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

AJAX

1、使用.ajax()，避免.getJson()或者.get()，它们在内部也是调用.ajax()的。

2、不要在https的站点上请求http，使用依赖协议的URL

3、不要把数据加在url上，使用data属性。

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 可读性差</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"something.php?param1=test1&param2=test2"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">....</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 可读性好</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"something.php"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    data</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> param1</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> test1</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> param2</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> test2 </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li></ol>

4、指定dataType属性，更容易知道数据类型。

5、对于ajax加载的内容，使用委托绑定事件，这样可以在元素不存在的时候执行绑定。（之后ajax加载进DOM结构中）

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#parent-container"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"a"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> delegatedClickHandlerForAjax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

6、使用Promise

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">then</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 或者</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> jqxhr </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">...</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">done</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">fail</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

7、抽象出ajax模板，方便复用：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">var</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> jqxhr </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">=</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> $</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">ajax</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> url</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    type</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"GET"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// default is GET but you can use other verbs based on your needs.</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    cache</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="kwd" style="font-family:inherit;color:#f0e68c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:bold; line-height:inherit; vertical-align:baseline;">true</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// default is true, but false for dataType 'script' and 'jsonp', so set it on need basis.</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    data</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{},</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// add your request parameters in the data object.</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    dataType</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"json"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// specify the dataType for future reference</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    jsonp</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"callback"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// only specify this to match the name of callback parameter your API is expecting for JSONP requests.</span></li><li class="L7" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    statusCode</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// if you want to handle specific error codes, use the status code mapping settings.</span></li><li class="L8" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">        </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">404</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> handler404</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L9" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">        </span><span class="lit" style="font-family:inherit;color:#cd5c5c;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">500</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> handler500</span></li><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">done</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">successHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">jqxhr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">fail</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">failureHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

动画效果

1、Adopt a restrained and consistent approach to implementing animation functionality（大意：采取受限制的和统一的方法来实现动画功能。）

2、满足用户体验即可，不要做过多的动画：

• 尽量使用简单的show/hide，slideUp/slideDown来切换元素
• 尽量使用jQuery预定义的时间间隔（durations），“slow”，“fast”或者400（中等）

插件

1、选择兼容性好，文档，测试齐全何社区支持好的插件。

2、检查插件在不同版本jQuery下的兼容性。

3、任何参加的可复用的组件，都应该以插件的形式实现。

链式调用

1、使用链式调用代替变量缓存和多次调用选择器：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myDiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"error"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">show</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li></ol>

2、当链式调用超过3级的时候，适当的换行增加可读性：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myLink"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"bold"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"click"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myClickHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">on</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"mouseover"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> myMouseOverHandler</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">)</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">show</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">();</span></li></ol>

3、链太长的时候，缓存中间对象是可以接受的。

其他

1、参数尽量使用对象形式：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myLink</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"href"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"title"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my link"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"rel"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"external"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差, 调用三次attr()</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好, 调用一次</span></li><li class="L2" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$myLink</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">attr</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span></li><li class="L3" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    href</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L4" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    title</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"my link"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span></li><li class="L5" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">    rel</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"external"</span></li><li class="L6" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span></li></ol>

2、尽量不要把css混在js中：

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#mydiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">css</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">({</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'color'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">red</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">,</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'font-weight'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">'bold'</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">});</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 差</span></li></ol>

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">error </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">{</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> color</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> red</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> font</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">-</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">weight</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">:</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> bold</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">;</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">}</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">/* 好*/</span></li></ol>

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#mydiv"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">).</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">addClass</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"error"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 好</span></li></ol>

3、不要使用过时的方法，注意新版更新时弃用的方法，不要使用它们。

4、必要的时候使用原生js，这里看查看性能对比 http://jsperf.com/document-getelementbyid-vs-jquery/3

<ol class="linenums" style="margin:0px 0px 0px 1.9em; padding:0px 0px 0px 12px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline; list-style-position:initial; color:rgb(174,174,174)"><li class="L0" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">$</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"#myId"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;"> </span><span class="com" style="font-family:inherit;color:#87ceeb;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">// 还是有一点点点点慢...</span></li><li class="L1" style="margin:0px; padding:0px; border:0px; font-family:inherit;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline"><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">document</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">.</span><span class="pln" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">getElementById</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">(</span><span class="str" style="font-family:inherit;color:#ffa0a0;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">"myId"</span><span class="pun" style="font-family:inherit;color:#ffffff;margin:0px; padding:0px; border:0px;font-size:undefined; font-style:inherit; font-variant:inherit; font-weight:inherit; line-height:inherit; vertical-align:baseline;">);</span></li></ol>

就这么多，技术有限，翻译的不妥的地方，欢迎留言指出！