JQuery 和“this”对象答案

【问题标题】：JQuery and 'this' objectJQuery 和“this”对象
【发布时间】：2023-12-16 07:17:02
【问题描述】：

我将以下 JQuery 函数附加到网页上 n 个文本框的模糊事件。

$(document).ready(function() {
        $("input[id$='_txtTuitionAmt']").blur(function() {
            alert(this.value);
        })
    });

它工作得很好。当用户跳出任何文本框时，会弹出一个警报并在文本框中显示值。

我感到困惑的是“this.value”，以及它是 JQuery 还是 JavaScript。我是否以正确的方式使用“this”对象，还是应该做其他事情以获得元素的值？

对不起，如果我的问题似乎有点模糊。我只是想了解“this”对象及其工作原理。我查看了 JQuery 文档，但在“this”上找不到任何内容。

【问题讨论】：

我相信 jQuery 使用 call 或 apply 重新绑定“this”，以便您传入的函数的上下文是 jQuery 对象表示的 DOM 元素的上下文。

标签： jquery this

【解决方案1】：

this 指的是当前的dom 对象（同样的方式，即document.getElementById("someid") 指的是想要的dom 对象）。根据浏览器，您现在可以访问该对象的函数/字段（即this.nodeName, this.value，...）您正在访问浏览器实现提供的内容。

如果您使用 $(this)（或 $("#someid") 或 $(document.getElementById("someid"))），您将在 jquery 中封装对象 - 因此您现在可以访问 jquery 函数和字段（即 @987654326 @, ....)

如果你有一个 jquery 对象（即 var n = $(this).find("#someid"); ）并且你想摆脱 jquery 胶囊，因为你需要一个标准的 dom 函数，你可以使用 .get(0)。

this 本身可以解析为不同的对象，具体取决于调用它的位置。如果在 onclick 或其他事件处理程序（<div id="asdf" onclick="alert(this.id)... - 将打印 asdf）、表单或其他对象中调用，它可以是一个节点 - 请参阅 http://www.quirksmode.org/js/this.html

【讨论】：

啊……灯泡亮了！优秀的描述。非常感谢！

【解决方案2】：

this = DOM 元素

$(this) = jQuery'ified

通常我会尽可能使用普通的旧 JavaScript。在这种情况下，jQuery 替代品是 $(this).val() - 我认为不需要它。

【讨论】：

虽然$(this).val() 在处理选择元素this.options[this.selectedIndex].value 时更短，但也适用于多种类型的元素。

【解决方案3】：

Core/each 的 JQuery 文档：

在每个匹配元素的上下文中执行一个函数。

这意味着每次传入的函数被执行时（每个匹配的元素执行一次），'this' 关键字指向特定的 DOM 元素。请注意，“this”并不指向 jQuery 对象。

【讨论】：

【解决方案4】：

"this" 指的是之前的 jQuery 选择元素。因为您在 jQuery 回调函数中使用“this”，所以“this”实际上指向 jQuery 选择的 DOM 对象。如果您使用“$(this)”，那将直接暴露作为匹配元素的 jQuery 对象。正如其他人所提到的，您可以在该元素上应用 jQuery 函数。

请参阅：this demystified 和 The this keyword。

【讨论】：

this 不是指 jQuery。正如 Prakash 注意到的，它指向 DOM 元素。

【解决方案5】：

这篇文章（请原谅双关语）解释了它的工作原理：

Why I still prefer Prototype to JQuery

作者认为这对 JQuery 库来说是一个糟糕的设计决策，但我并不提倡任何一种方式。我只是觉得这篇文章很有趣。

【讨论】：