When to use '$(this)' and 'this' in a jQuery plugin? (Article on net.tutsplus.com)

Question

Hello, I'm learning jQuery now, and was reading an article of Jeffrey Way, "You Still Can’t Create a jQuery Plugin?" Almost everything is clear, but there are some points that I still cannot understand.

Problems begin on the 'Step 3: Building the Plugin', heading title 'For Each...', and next 'Error Checking'.

   this.each(function() {  
     $this = $(this);
     var title = this.title; 
     if ($this.is('a') && $this.attr('title') != '') {  
       this.title = '';  
       $this.hover(function(e){

Questions

1. this.title - what a method is it? When we use jQuery we type $(this).attr('title') - and jQuery was created to simplify development) Does this.title refer to a DOM Specification, or Javascript built-in methods?

2. I totally cannot understand what is going on with this keyword here, when do we have to use this and when $(this)? Why do we use this.each(func..., and not $(this).each(func...? (I've tested it - and it works too, but what is a difference?) I know that factory method $() returns a wrapped set of DOM elements, but why do we use this.title here (and again $(this).attr('title') does the job)? I made a little bit of testing. We can type this.title or title instead of $this.attr('title') in the conditional statement, but if only we use anything (title or $(this).attr('title')) instead of this.title in the statement this.title = ''; - it doesn't work.

3. Well, we specified var title = this.title;. But when we use this variable, why do we declare it?

I think that some of you can understand even better than me, understanding of what things I need, so I finish my explanation) Thank you very, very much, if you can make it clear)

Answer 1

As you said yourself the $() function returns a wrapped set of DOM elements which adds the jquery functionality to it. The reason $(this).attr('title') won't exchange for this.title is because the correct way to use that function is like this

$(this).attr( 'title', '' );

and not

$(this).attr( 'title' ) = '';

you can't use title = '' either because title is a local variable not a reference to the attribute itself.

Answer 2

1. Using jQuery's attr('title', newVal) method you would be able to apply a single value to all elements included in your jQuery selector, but to change a single element it is simpler to just manipulate the element's title attribute directly

2. In the each() function, the this parameter is the item being iterated over. When iterating over a collection of DOM elements, this will be a DOM element. If you want to use jQuery functions on DOM elements you need to wrap them in jQuery again, meaning you need to use $(this).doAwesomeness()

3. The var title is probably being used within the function nested inside $this.hover()

Answer 3

1. this.title is the object's title attribute in plain JS DOM. (http://w3schools.com/htmldom/prop_title.asp).

The following is equivalent with jQuery and normal JS:

 var  blah = this.title;  // is the same as...
 var  blah = $(this).attr('title');

 this.title = 'blah';     // is the same as ...
 $(this).attr('title', 'blah');

1. this is a pointer to the object that fired an event or a method you are running belongs to, all methods in JavaScript belong to a parent object of some kind.

2. $(object) will attach the jQuery wrappers to a standard object (giving you access to use all the jQuery methods/etc on that object)