Question

In the following code, how can thebody and app.body both be a JQuery object, yet setting the .css property on thebody works but does not work on 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

That code is likely in the head section of your page. So when the line app.body = $('body'); is executed, the body doesn’t exist yet. But then you call app.init() later; probably on DOMReady, so the body exists at that point. When you run var thebody = $('body'); you get one element in the collection.

You can verify this by checking if app.body.length === 0 while thebody.length === 1.

You should either move that entire block of code into the body or into a DOMReady callback like:

$(function(){

...

});