Javascript 编写此函数的更有效/优化的方法是什么

我一直在努力学习如何更快、更高效地编写jQuery，并希望了解如何编写此函数，以使其更快地工作。如果我使用变量，我最关心的是页面的速度，那么什么将运行更优化的跨浏览器，以及为什么是我希望看到的答案

    $("#div-one, #div-two").find('tr').hover(function(){
    $(this).find('a').stop().animate({color:"#FFF"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#7DBE36"
    }, 'fast');
}, function(){
    $(this).find('a').stop().animate({color:"#000"}, 'fast');
    $(this).stop().animate({
        backgroundColor:"#FFF"
     }, 'fast')
});

提前感谢大家。

您可以在此处使用，如下所示：

$("#div-one, #div-two").delegate('tr', 'mouseenter', function(){
    $(this).stop().animate({ backgroundColor:"#7DBE36" }, 'fast')
           .find('a').stop().animate({ color:"#FFF" }, 'fast');
}).delegate('tr', 'mouseleave', function(){
    $(this).stop().animate({ backgroundColor:"#FFF" }, 'fast')
           .find('a').stop().animate({ color:"#000" }, 'fast');
});

---

这将在

#div one

和

#div two

上附加一对处理程序，而不是在每个

内部附加一对处理程序，这意味着更快的绑定，并且只依赖于事件冒泡来侦听事件。在函数内部，您还可以链接，无需创建另一个

$（此）

jQuery对象。

您可以编写另一个实用程序函数来提供切换回调：

function animCallback(linkColor, bgColor) {
  return function() {
    $(this).stop().animate({backgroundColor: bgColor}, 'fast')
      .find('a').stop().animate({color: linkColor}, 'fast');
  };
}
$('#div-one, #div-two').find('tr').hover(
  animCallback('#FFF', '#7DBE36'),
  animCallback('#000', '#FFF')
);

---

编辑也尼克的想法是好的-你可以结合我们的两个答案

除了按照Nick的建议使用

委托

，您还可以重用

$（this）

的结果进行额外的微观优化

$("#div-one, #div-two").delegate('tr', 'mouseenter', function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({ backgroundColor:"#7DBE36" }, 'fast');
}).delegate('tr', 'mouseleave', function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({ backgroundColor:"#FFF" }, 'fast');
});

---

编辑尼克将答案改为使用链接，从而避免了再次使用

$（此）

。所以我会选择他的版本。

作为jQuery开发人员，我有一个简单的规则，如果我在一个范围内多次使用选择器，我会将其存储在一个变量中

$("#div-one tr, #div-two tr").hover(function() {
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({backgroundColor:"#7DBE36"}, 'fast');
}, function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({backgroundColor:"#FFF"}, 'fast');
});

我听说或读到jQuery在对相同的选择器或对象使用

$（…）

时使用某种缓存。jQuery本身用于包装关键字this，并将其存储在局部变量中

$("#div-one tr, #div-two tr").hover(function() {
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({backgroundColor:"#7DBE36"}, 'fast');
}, function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({backgroundColor:"#FFF"}, 'fast');
});

简而言之，要优化jQuery代码，您应该避免对函数范围中的同一选择器使用

$（…）

。提高性能的更好做法是使用一次并存储在变量中

$("#div-one tr, #div-two tr").hover(function() {
    var $this = $(this);
    $this.find('a').stop().animate({color:"#FFF"}, 'fast');
    $this.stop().animate({backgroundColor:"#7DBE36"}, 'fast');
}, function(){
    var $this = $(this);
    $this.find('a').stop().animate({color:"#000"}, 'fast');
    $this.stop().animate({backgroundColor:"#FFF"}, 'fast');
});

编辑

在阅读了Pointy和nickcraver的答案后，您的代码不需要进行这种优化。因为在这两个答案中，他们只使用了一次

$（this）

---

PD感谢您的评论/反馈

这正是我想要的，谢谢。不幸的是，我使用的是Drupal所要求的较旧的jQuery版本，但这是我将来会用到的东西。谢谢谢谢你的回答，Nicks是我一直在寻找的，但仍然很有价值。谢谢，这是我一定会使用的经验法则。