JQuery and 'this' object

Question

I have the following JQuery function being attached to the blur event of n textboxes on a webpage.

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

It works just fine. When the user tabs out of any of the textboxes then an alert popups and displays the value within the textbox.

What I'm confused about is "this.value," and whether it is JQuery or JavaScript. Am I using the 'this' object in the correct manner, or should I be doing something else in order to get at the value of the element?

Sorry if my question seems a bit murky. I'm just trying to come to grips with the "this" object and how it works. I looked in the JQuery documentation, but couldn't find anything on "this".

Answer 1

"this" refers to the jQuery selected element just before. Because you are using "this" inside of a jQuery callback function, "this" actually points to the DOM object selected by jQuery. If you would have used "$(this)", that would expose the jQuery object directly which is/are the matched element(s). And as mentioned by others allows you to apply the jQuery functions upon that element.

See: this demystified, and The this keyword.

Answer 2

this = DOM element

$(this) = jQuery'ified

Typically I use plain old JavaScript where I can. The jQuery alternative in this instance is $(this).val() - I don't see the need for it.

Answer 3

JQuery doc for Core/each:

Execute a function within the context of every matched element.

This means that every time the passed-in function is executed (which is once for every element matched) the 'this' keyword points to the specific DOM element. Note that 'this' does not point to a jQuery object.

Answer 4

this refers to the current dom object (the same way ie document.getElementById("someid") refers to the wanted dom object). Based on the browser you can now access functions/field of that object (ie. this.nodeName, this.value, ...) You are accessing what is provided by the browser's implementation.

If you use $(this) (or $("#someid") or $(document.getElementById("someid"))) You are ecapsulating the object in jquery - thus you can now access the jquery functions and fields (ie. $(this).val() $(this).find("somenode"), ....)

If you have a jquery object (ie var n = $(this).find("#someid"); ) and you want to get rid of the jquery capsule, because you need a standard dom function you get use .get(0).

this itself resolves to different parts, depending on where it is called. It can be a node if called within an onclick or other event handler (div id="asdf" onclick="alert(this.id)... - will print asdf), the form or some other object - see http://www.quirksmode.org/js/this.html

Answer 5

This article (please excuse the pun) explains how this works a little more:

Why I still prefer Prototype to JQuery

The author considers it a poor design decision for the JQuery library, but I'm not advocating either way. I just thought the article was pretty interesting.