访问 Jquery 选择器作为对象属性，意外结果

Accessing a Jquery selector as an object property, unexpected outcome

本文关键字：属性 意外 结果 对象 Jquery 选择器 访问      更新时间：2023-09-26

假设我有一个看起来像这样的div：

<div id="testDiv">some stuff in here</div>

我有一个定义对象文字的脚本：

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv    
};

为什么当我访问testObject.testDiv时，我得到了对jQuery对象的引用，即

[<div id=​"testDiv">​…​</div>​]

但是当我访问testObject.testDivProperty时，我得到了对实际元素的引用，即

<div id=​"testDiv">​…​</div>​

因此无法对testObject.testDivProperty执行 jQuery 操作？

尝试在

对象实例化期间引用您定义为this的对象并不像您期望的那样工作。

示例中this实际上是指window对象。某些浏览器(例如，Chrome和IE(会将命名的DOM节点附加到document和/或window对象，这就是为什么this.testDiv用id="testDiv"引用元素的原因。碰巧您尝试访问的属性名称与元素 ID 具有相同的值。

要演示真实情况，请尝试以下操作：

<div id="test"></div>
var myObj = {
    prop1: $('#test'),
    prop2: this.prop1
};

this.prop1在上下文中myObj应该是undefined，但window.test可能(取决于浏览器(引用DOM节点<div id="test"></div>。

根据您的示例，您可以按如下方式执行作业：

var myObj = { prop1: $('#test') };
myObj.prop2 = myObj.prop1;

或

var test = $('#test');
var myObj = {
    prop1: test,
    prop2: test
};

这行不通。 在这方面this window。

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: this.testDiv // window.testDiv
}

经过一番玩耍，我找到了答案。 在创建第二个属性时，this指的是 window ，其中您有一个 id 为 testDiv 的div

。

所以你实际上是在做这个...

var testObject = 
{
    testDiv: $("#testDiv"),
    testDivProperty: window.testDiv    
}

我个人不知道你可以这样做，但window.testDiv返回 ID testDiv 的 DOM 元素。

如前所述，这是指全局窗口对象。

this.testDiv 引用 DOM 元素的原因是 Web 浏览器中的标准行为是向每个带有 id 的 DOM 元素添加全局引用。引用是在分析元素时添加的，因此脚本代码必须位于要引用的元素下方。

是否依赖这些参考资料是另一个讨论。

实际上，在第一种情况下，获取jQuery对象是显而易见的，应该被理解(因为你使用了'$'(。在第二种情况下，由于以下原因，您可以引用一个简单的DOM节点(对象(-

- 你没有在任何地方使用jQuery，所以不要指望它是一个 jQuery 对象。

-

您访问this.testDiv这意味着 -给我命名的财产 当前节点(正在访问(的"testDiv"现在，如果您在 <body> 标记中编写了此代码，那么this应该指向body元素的节点/对象(在 DOM 中(。我不确定这部分，但是，不知何故，您的" testDiv"对象被注册为body对象中的属性(可能是因为您为此元素使用了" id"属性，从而使其唯一(。因此，当您尝试使用 this.testDiv 获取对象时，您得到了 DOM 中 <div> 元素的确切对象。而且，javascript 默认给你一个对 DOM/javascript 对象(不是 jQuery 对象(的简单引用。

除此之外，jQuery对象可以被认为是普通javascript/DOM对象的涂层。这不是问题的一部分，但如果你想作为jQuery对象访问，那么，

要将 javascript 对象Obj转换为 jQuery 对象，请执行以下操作 Obj=$(Obj);

新Obj将是一个jQuery对象。

let object = $('#someId') -- jQueryObject
accesing any custom object field
object[0].anyProp = 'anyValue'
console.log(object) -- jQuery object
console.log(object[0]) -- Raw JS object
console.log(object[0].anyProp) -- Raw JS object prop
相关文章：