编写高效jQuery代码的4个原则和5个技巧
jquery的编写原则：
一、不要过度使用jquery
1. jquery速度再快，也无法与原生的javascript方法相比，而且建立的jquery对象包含的信息量很庞大。所以有原生方法可以使用的场合，尽量避免使用jquery。
. 代码如下:
$("a").click(function(){
alert($(this).attr("id"));
});
//改良后↓
$("a").click(function(){
alert(this.id);
});
2. 许多jquery方法都有两个版本，一个是供jquery对象使用的版本，另一个是供jquery函数使用的版本。由于后者不通过jquery对象操作，所以相对开销较小，速度比较快。
. 代码如下:
var $text = $("#text");
var $ts = $text.text();
//改良后↓
var $text = $("#text");
var $ts = $.text($text);
这里是用了“$.text()”的内置函数，其他类似的还有“$.data()”等。
二、缓存jquery对象
查找dom元素实际上有不小的内存开销，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。记住，永远不要让相同的选择器出现多次。
例如：
. 代码如下:
$("#top").find("p.classa");
$("#top").find("p.classb");
改良后↓
var cached = $("#top");
cached.find("p.classa");
cached.find("p.classb");
三、少改动dom结构
如果要多次改动dom结构，就先把要改动的部分先取出来，改动完成后再放回去。这里的基本思想是在内存中建立你确实想要的东西，最后做一次最有效的更新dom操作。
例如：
. 代码如下:
var top_100_list = [...], // 这里是100个字符串的数组
$mylist = $("#mylist");
for (var i=0, l=top_100_list.length; i<l; i++){
$mylist.append("<li>" + top_100_list[i] + "</li>"); // 100次dom操作
}
改良后↓
var top_100_list = [...],
$mylist = $("#mylist"),
top_100_li = ""; // 这个变量用来存储变化的字符串
for (var i=0, l=top_100_list.length; i<l; i++){
top_100_li += "<li>" + top_100_list[i] + "</li>";
}
$mylist.html(top_100_li);// dom操作只有这么一次
四、命名规范
jquery代码中不免夹杂有js代码，如何让jquery代码看起来严谨有序，规范自己的命名规则能更好的提高代码的性。
1. 函数名：function getresultbyuserid(){..}，遵循骆驼命名法，首字母小写，单词首字母大写，尽量短而且明确表达方法的用意。
还可以这样定义：
. 代码如下:
$.flushcartitemlist = function() {
isajaxdate = true;
}
2. 参数名：function method(recordidx, recordval){..}, 同函数名，参数尽量用缩写。
命名就是要有意义，一些属性的缩写也很有讲究，例如：索引：idx；值：val；长度：len；名称：nm；等...
3. 变量名：var user_id; var user_list_tab; var user_list_tr_1;，一般以下划线为单词分割，按照“命名_元素_索引”的规则。
jquery对象的变量名要加上“$”的前缀以区分javascript对象。
jquery编写技巧：
一、选择器择优
选择器是jquery的基础，如何选择效率最高的选择器，先要了解各种选择器的性能差异。
①id选择器和标签元素选择器：$("#id"); $("tag");
jquery内部会自动调用的原生方法（getelementbyid();，getelementbytagname();），所以执行速度快。
②类选择器：$(".class");
jquery会遍历所有dom节点查找class=class的dom对象，所以执行速度较慢。
③伪类选择器和属性选择器：$(":type"); $("[attribute='value']");
因为浏览器没有针对它们的原生方法，这两种选择器执行速度是最慢的。不过，不排除一些第三方浏览器增加了queryselector()和queryselectorall()方法，因此会使这类选择器的性能有大幅提高。
二、链式写法
. 代码如下:
$("p").find("h3").eq(2).html("hello");
采用链式写法时，jquery会自动缓存每一步的结果，比非链式写法（手动缓存）要快。
三、高效循环
循环总是一种比较耗时的操作，javascript原生循环方法for和while，要比jquery的“.each()”快。并且关于for循环，以下这种写法效率最高。
. 代码如下:
for (var i = 0, len = array.length; i < len; i++) {
// alert(i);
}
先声明变量，再进行循环操作，效率远比遍历数组“for (var i in arr)”高得多，也比循环取得数组长度“for (var i = 0; i < arr.length; i++)”的效率高！
四、字符串拼接
字符串的拼接在开发中会经常遇到，用“+=”的方式来拼接字符串的效率非常的低，我们可以利用数组的“.join()”方法。
. 代码如下:
var array = [];
for(var i = 0; i < 10000; i++){
array[i] = "<input type='button' value='a'>";
}
document.getelementbyid("one").innerhtml = array.join("");
以前我很喜欢用数组的原生的方法“.push()”，其实直接用arr[i]或者arr[arr.length]的方式要快一点，但是差别不是很大。
五、页面加载
尽管$(function(){}); 确实很有用， 它是在所有dom元素加载完成。如果你发现你的页面一直是载入中的状态，很有可能就是这个函数引起的。你可以通过将jquery函数绑定到$(window).load 事件的方法来减少页面载入时的cpu使用率。
. 代码如下:
$(window).load(function(){
// 页面完全载入(包括所有的dom元素和js代码)后才初始化的jquery函数.
});
一些特效的功能，例如拖放，视觉特效和动画，预载入隐藏图像等等，都是适合这种技术的场合。