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$=\'_tx         


        

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

Answer 3

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.

Answer 4

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 5

"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.