Question

我感到困惑的是为什么$（this）指向'#navigation a'对象而不是'#navigation_blob'对象？要清楚我知道$（this）的作用。我对这个例子中的范围很困惑。

谢谢！

取自“Jquery新手到忍者”：

$('#navigation a').hover(function() {
    // Mouse over function
    $('#navigation_blob').animate(
        {width: $(this).width() + 10, left: $(this).position().left},
        {duration: 'slow', easing: 'easeOutElastic', queue: false}
    );
}, function() {
    // Mouse out function
    var leftPosition = $('#navigation li:first a').position().left;
    $('#navigation_blob').animate(
        {width:'hide'},
        {duration:'slow', easing: 'easeOutCirc', queue:false}
    ).animate({left: leftPosition}, 'slow');
});

Answer 1

this指向调用它的上下文。 jQuery将您搜索的元素作为上下文传递，因此this指向'#navigation a'。

$(this)获取DOM元素（由this引用）并将其包装在jQuery对象中。

在$('#navigation_blob').animate()内，this将指向'navigation_blob'。

Answer 2

在确定变量名称的绑定时，有几个部分在起作用：

JS具有函数范围和全局范围，因此当您使用var关键字定义变量时，只能在全局执行代码时获取新变量，或者在函数定义内获取新变量。否则，当定义一个函数时，变量名被绑定到函数定义的作用域中存在的任何名称，考虑依次嵌套函数定义，直到全局作用域。
与其他变量名称不同，this是特殊的;它永远不会被束缚。这很重要，否则定义函数的范围就会发挥作用。
在事件侦听器中，某些浏览器将this绑定到侦听器注册的元素，就好像事件侦听器是元素的方法一样。 IE（通过版本8）没有执行此绑定;结果，它被绑定到全局对象（window），与调用任何其他自由函数（即未绑定到对象的函数）时相同。据我所知，没有标准解决这两种行为。相关标准应该是DOM事件标准，例如DOM Level 2的ECMAScript Language Binding附录。

animate对#navigation_blob的调用并不涉及定义新函数，因此this的范围是事件处理程序。 jQuery强制执行非IE绑定行为，确保this引用#navigation a。

为什么$（this）选择器指向它在此函数中的作用？

2 个答案: