What is the difference between "$(this)" and "this"?

Question

I was reading the http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery. And got confused with use of this in these 2 code segments.

     $(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
        $(this).append( " BAM! " + i );
       });
     });

    $(document).ready(function() {
      // use this to reset several forms at once
       $("#reset").click(function() {
        $("form").each(function() {
         this.reset();
        });
     });
   });

When do we need $(this) and this? And what is the difference between them? Thanks in advance.

Answer 1

this refers to the DOM element itself; $(this) wraps the element up in a jQuery object.

In the first example, you need $(this) because .append() is a jQuery method.

In the second example, reset() is a JavaScript method, so no jQuery wrapper is needed.

Answer 2

this by itself is just a regular object.

$(this) takes this and adds the jQuery wrapper so you can use the jQuery methods with the object.

Answer 3

this refers to a DOM object. So reset() is a function of a form DOM object. append() on the other hand is a jQuery method so it has to be called by a jQuery object, hence the $(this).

When you surround this with $, you get a jQuery object back representing that DOM object.

Answer 4

Generally in jQuery, this will be an instance of the DOM element in question, and $(this) builds a jQuery object around this which gives you the usual jQuery methods like each() and val().