JQuery 代码优化

前言：

Jq是很常用的前端插件，但大家是否都做优化了呢？

---

1.定义jQuery变量是添加$符号

var $loading = $('#loading');

虽然不是必须的，但也统一样式

---

2.DOM操作请务必记住缓存

var $loading = $('#loading');
$loading.html('完毕');
$loading.fadeOut();

---

3.避免使用全局类型的选择器

请勿如下方式书写：

$('.something > *');
// 这样书写更好：
$('.something').children();

---

4.尽量从#id选择器来继承

这是jQuery选择器的一条黄金法则。jQuery选择一个元素最快的方法就是用ID来选择了。

$('#content').hide();
//或：
$('#content p').hide();

---

5.在class前面使用tag

jQuery中第二快的选择器就是tag选择器（如$(‘head')），因为它和直接来自于原生的Javascript方法getElementByTagName()。所以最好总是用tag来修饰class(并且不要忘了就近的ID)

var letter = $('#nslForm input.on');

---

6.使用子查询

将父对象缓存起来以备将来的使用

var header = $('#header');
var menu = header.find('.menu');

---

7.直接的DOM操作很慢。尽可能少的去更改HTML结构。

var menu = '<ul id="menu">';
for (var i = 1; i < 100; i++) {
    menu += ' <li>'  +  i  +  ' </li> ';
}
menu += ' </ul>';
$('#header').prepend(menu);
// 千万不要这样做：
$('#header').prepend('< ul id="menu"></ ul>');
for (var i = 1; i < 100; i++) {
$('#menu').append('<li>' + i + '</li>');