jQuery - Strings and targeting

Question

I've tried to google my question but it makes me even more confused. My question is:

Here's the jQuery code:

$(document).ready(function() {  
    $(window).resize(function() {
        if ($(this).width() < 200) {
          $("p").css("color", "red");
        } else {
          $("p").css("color", "green");
        }
    });  
}

Why do we write (this) and not ("this") ?

How do I know if (document) and (window) should be written with " " - and why's that?

Maybe you could link me somewhere that explains my issue. My code apparently works either way, I'm just curious about the why.

Anything in " is a string. You want a variable/object: this. Same with document and window - they're objects. When you do $("selector") you're passing a string, eg "#myid" — fdomn-m
– fdomn-m, Commented Nov 28, 2021 at 11:51
Wonderful! Is my code an anonymous function btw and why? I'd rather not post a new thread for this tiny question. — HTML_Newbie
– HTML_Newbie, Commented Nov 28, 2021 at 11:57
@HTML_Newbie please view my answer and mark it as the answer if it was helpful — dmanexe
– dmanexe, Commented Dec 21, 2021 at 11:54

dmanexe · Accepted Answer · 2021-11-28 12:26:37Z

In JavaScript namespace, this is reserved [source].

The JavaScript object literal this refers to the inherited object from the present state in the current execution.

Another example of this we can see is when we are looping through an array and the object this would symbolize the current array object. You may, for example, see this.title, or this.description if we were iterating through a database array of blog posts.

this in jQuery refers to the inherited object. When we add the quotation marks, and it becomes a string, such as "this". This makes jQuery parse it as a DOM selector.

Then we are now looking for the HTML DOM selector <this>, which to my knowledge, does not actually exist in the accepted HTML syntax standards.

As otherwise stated, the concept of this will become tricky when you are working in other JavaScript environments, such as React or Angular. Within the context of a functional component, this becomes the state, such as handling user sessions.

Collectives™ on Stack Overflow

jQuery - Strings and targeting

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related