Question

学习jQuery，我有几个问题。我想知道为什么这不起作用：

$('li').html(function(){
  return '<em>' + this.text() + '</em>';
});

但这会：

$('li').html(function(){
  return '<em>' + $(this).text() + '</em>';
});

而且，为什么这有效：

$(document).on('load', alert('done'));

但不是这样：

$(document).on('load', function(){alert('done');
});

谢谢，

Answer 1

这和$（this）：

在第一个示例中，this是一个节点元素，由于节点元素没有名为text的函数，代码将抛出错误！

在第二个示例中，您将节点元素this包装在jQuery对象中，jQuery对象确实有一个名为text的函数，它返回该jQuery中第一个包装元素的文本内容对象换行，所以代码工作正常。

回调：

当你想要监听一个事件时，你必须传入一个函数的引用，该函数将在事件发生后执行（因此称为回调函数）。

在第一个示例中，您没有传递对函数的引用，您将调用的返回值传递给alert undefined。第一个例子与：

相同

var alertResult = alert('done');
// alertResult === undefined
$(document).on('load', alertResult);

这是错误的，因为当事件发生时，事件监听器将尝试调用传入的函数，只是为了找到传入的内容是undefined。

在第二个示例中，您将定义一个函数并将对它的引用传递给事件侦听器。因为在JS中你可以这样做：

var referenceToAFunction = function() {

}

然后代码等同于：

$(document).on('load', referenceToAFunction);

修改

为什么第一个例子正常工作，第二个例子不工作？

在第一个示例中，弹出窗口将显示事件的任何内容，即使是这样：

$(document).on('MrChocolatIsDeadOrCaptured', alert('done'));

因为正如我所说的那样：

var alertResult = alert('done'); // this executed right away $(document).on('MrChocolatIsDeadOrCaptured', alertResult); // the alert is already poped up and closed now we are setting an event listener using the alert result

所以无论如何都会弹出alert！

由于this，第二个不起作用。在load上没有发生名为document的此类事件。使用以下替代方案之一：

$(document).on("DOMContentReady", function() { ... }); // the right event $(document).ready(function() { ... }); // shortcut of the above $(function() { ... }); // shortcut of the shortcut (only for the ready event)

请注意，在第一个示例中，alert执行未绑定到任何事件。根据它在DOM中的位置，我会说99％是在DOM实际准备好之前执行的（因此缺少事件监听的整个点）。它发生得如此之快以至于你认为它在加载DOM之前就出现了，但事实并非如此！

使用jQuery在事件与$（this）和回调函数之间的区别

1 个答案:

这和$（this）：

回调：