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 = 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 2

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 (i.e. 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 can resolve to different objects, 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