jQuery性能优化的28个建议(2)

7. 编写属于你的选择器

如果你经常在代码中使用选择器，那么扩展jQuery的$.expr[':']对象吧，编写你自己的选择器。下面的例子中，我创建了一个abovethefold选择器，用来选择不可见的元素：

1 $.extend($.expr[':'],
 {

2 abovethefold:
function(el)
 {

3 return

$(el).offset().top < $(window).scrollTop() + $(window).height();

4 }

5 });

6 var

nonVisibleElements = $('div:abovethefold');
// 选择元素

二、优化DOM操作建议

8. 缓存jQuery对象
将你经常用的元素缓存起来：

1 var

header = $('#header');

2 var

divs = header.find('div');

3 var

forms = header.find('form');

9. 当要进行DOM插入时，将所有元素封装成一个元素
这里的基本思想是在内存中建立你确实想要的东西，然后更新DOM。这并不是一个jQuery最佳实践，但必须进行有效的JavaScript操作 。直接的DOM操作速度很慢

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

1 var

menu = '<ul
 id="menu">';

2 for

(var

i = 1; i < 100; i++) {

3 menu
 += '<li>'

+ i + '</li>';

4 }

5 menu
 += '</ul>';

6 $('#header').prepend(menu);

7 // 千万不要这样做：

8 $('#header').prepend('<ul
 id="menu"></ul>');

9 for

(var

i = 1; i < 100; i++) {

10 $('#menu').append('<li>'

+ i + '</li>');

11 }

冒泡事件：
除非在特殊情况下, 否则每一个js事件(例如:click, mouseover等.)都会冒泡到父级节点。当我们需要给多个元素调用同个函数时这点会很有用。代替这种效率很差的多元素事件监听的方法就是, 你只需向它们的父节点绑定一次。 比如, 我们要为一个拥有很多输入框的表单绑定这样的行为: 当输入框被选中时为它添加一个class传统的做法是，直接选中input，然后绑定focus等，如下所示：

1 $("#entryform
 input").bind("focus",
function(){

2     $(this).addClass("selected");

3 }).bind("blur",
function(){

4     $(this).removeClass("selected");

5 });

当然上面代码能帮我们完成相应的任务，但如果你要寻求更高效的方法，请使用如下代码：

1 $("#entryform").bind("focus",
function(e){

2     var

$cell = $(e.target); // e.target 捕捉到触发的目标元素

3     $cell.addClass("selected");

4 }).bind("blur",
function(e){

5     var

$cell = $(e.target);

6     $cell.removeClass("selected");

7 });

通过在父级监听获取焦点和失去焦点的事件，对目标元素进行操作。在上面代码中，父级元素扮演了一个调度员的角色, 它可以基于目标元素绑定事件。如果你发现你给很多元素绑定了同一个事件监听, 那么现在的你肯定知道哪里做错了。同理，在Table操作时，我们也可以使用这种方式加以改进代码：普通的方式