对 jQuery 对象和 JavaScript 变量的不同使用场景感到困惑

Posted 2023-03-05

【中文标题】对 jQuery 对象和 JavaScript 变量的不同使用场景感到困惑

【英文标题】：Confused on different usage scenarios of a jQuery object and a JavaScript variable

【发布时间】：2011-12-29 16:13:25

【问题描述】：

我对这两个代码块之间的区别感到困惑：

$("#someButton").click(function() 
    var button = this;
    $(button).attr('disabled', 'disabled');


$("#someButton").click(function() 
    var button = $(this);
    $(button).attr('disabled', 'disabled');

注意按钮变量存储的不同。将$(this) 存储到按钮变量而不只是this 有什么意义？最后，我还是用$(button).jQueryMethod()来操纵它，而不是button.jQueryMethod()。

【问题讨论】：

其他人已经回答了，但我想建议，如果您遵循第二个示例（我认为您应该这样做），您可能需要重命名变量以表明它确实是一个 jquery 对象。我通过在前面用 $ 命名我的 jquery 对象变量来做到这一点。即'var $button = $(this); $button.prop('disabled');'

【参考方案1】：

在您的示例中差异并不显着，因为您只使用了一次包装的 JQuery 对象。如果您需要多次使用 JQuery 对象，这个问题就会变得更加重要。

$("#someButton").click(function() 
    var button = this;
    $(button).attr('disabled', 'disabled');
    $(button).someJQueryMethod();
    ...
    $(button).someOtherJQueryMethod();

在这种情况下，最好将对象包装一次并缓存结果。按照惯例，将结果缓存在以 $ 符号开头的变量中，以表明它包含一个包装的 JQuery 对象。

$("#someButton").click(function() 
    var $button = $(this);
    $button.attr('disabled', 'disabled');
    $button.someJQueryMethod();
    ...
    $button.someOtherJQueryMethod();

这样对$() 的调用只会被调用一次。如果引用在循环内，这将变得特别重要。

【参考方案2】：

$("#someButton").click(function() 
    var button = $(this);
    $(button).attr('disabled', 'disabled');

是冗余的

因为你把 jquery 做了两次！。

$("#someButton").click(function() 
    var button = $(this);
   button .attr('disabled', 'disabled');

【讨论】：

我不知道我可以调用 button.attr('disabled', 'disabled') 出于某种原因，我认为它总是必须作为选择器传递给 jQuery 对象，如 $( button).attr('禁用', '禁用')

附注从现在开始使用 prop 而不是 attr。

哈哈，我不知道他们还添加了另一件事。刚看到它是在1.6中添加的。谢谢！阅读有关 .prop() 的文档，似乎 .attr() 仍用于获取 href 和 title 等属性，对吗？

【参考方案3】：

在示例 1 中，按钮是一个常规的 DOM 对象，因为在点击回调时，this 只是指向一个常规的 DOM 对象，而不是一个 jQuery 对象。如果您不打算对this 执行任何额外的 jQuery 操作，这很好。但是，您正在使用对.attr() 的jQuery 调用禁用下一行中的按钮。我会使用这样写的第二个块：

$("#someButton").click(function() 
    $(this).attr('disabled', 'disabled');

这样您可以消除一个您似乎没有使用的额外变量，还可以消除一个针对$(button) 的额外查询操作

【讨论】：

谢谢。您的代码绝对优于我的代码，因为我并不真正需要该变量，但我只是想弄清楚这两种情况之间的区别。

我是否足够彻底地解释了差异？

是的，非常有道理。我现在知道何时使用每种情况了。

【参考方案4】：

在第二种情况下，您可以这样做：

button.attr('disabled', 'disabled');

使用 $ 前缀命名 jQuery 变量是很常见的：

var $button = $(this);

$button.attr('disabled', 'disabled');

【参考方案5】：

如果你想在元素上使用 jQuery API，你需要使用$(this)。在您的示例中，您只是试图获取元素，因此两种方法都可以。

只是获取元素，所以这两种技术都可以工作。

何时使用$(this)：

var button = $(this).css( "border" : "1px solid red" );

当你可以使用this时：

var button = this.style.border = "1px solid red";