javascript - 两个变量怎么可能都是一个 JQuery 对象，但 .css 属性不能在其中一个上工作？

Question

在下面的代码中，如何thebody同时app.body成为 JQuery 对象，但将.css属性设置为thebody有效但无效app.body？

var app = app || {};

app.show = function(html) {
    this.baseElement.html(html);
};

app.body = $('body');

app.init = function() {
    this.baseElement = $('div#app');
    var thebody = $('body');
    console.log(app.objectIsJquery(thebody)); //true
    console.log(app.objectIsJquery(app.body)); //true
    app.body.css('background-color', 'yellow'); //does not set the background color, no errors
    //thebody.css('background-color', 'yellow'); //sets color correctly
};

app.start = function() {
    this.baseElement.css('color', 'brown');
    this.show(dp.qstr.addStar('testing'));
};


app.objectIsJquery = function(obj) {
    return obj.selector != undefined;
}

Answer 1

该代码可能位于页面的头部。因此，当执行该行时app.body = $('body');，主体还不存在。但是你稍后再打电话app.init()；可能在 DOMReady 上，所以主体存在于那时。当您运行时，var thebody = $('body');您会在集合中获得一个元素。

您可以通过检查 if app.body.length === 0while来验证这一点thebody.length === 1。

您应该将整个代码块移动到正文或DOMReady回调中，例如：

$(function(){

...

});

Answer 2

尝试

app.body.html().css()

如果我的预感是正确的，那么您的 jquery 没有选择 app.body 的 dom，因此您需要将其转换为 html 以进行选择。