Differences between this and $ (this) in JQuery _ jquery

This article describes the differences between this and $ (this) in JQuery. this indicates that the current context object is an html object and can call the attributes and methods of an html object, $ (this) indicates that the context object is a jquery context object, which can call jquery methods and attribute values. If you need it, you can refer to this rarely used in jquery. When the code is used, the value of this is debugged. It is quite useful. Here we will summarize the differences between this and $ (this) and their usage.

What is $ (this) generated?

What is $ () generated? In fact, $ () = jquery () is returned as a jquery object.

We usually use $ () for convenience (). In fact, this function omitting the context parameter. Select the matched object $ (selector, context) based on the selector and return it in the form of a jQuery package set.

Context can be a Dom object set or a jQuery package set. If it is passed in, it indicates that you want to select a matching object from the context. If it is not passed in, it indicates that the range is a Document Object (that is, all objects on the page ), that is, $ (selector) = $ (selector, document ).

This refers to the html object that calls the function.

Example:

The Code is as follows:

$ ("# Textbox"). hover (
Function (){
This. title = "Test ";
},
Fucntion (){
This. title = "OK ";
}
);

Here this is actually an Html element (textbox), and this is in js. Textbox has the text attribute, so there is no problem with this writing.

The Code is as follows:

$ ("# Textbox"). hover (
Function (){
$ (This). title = "Test ";
},
Function (){
$ (This). title = "OK ";
}
);

$ (This) is a JQuery object, and the jQuery object does not have the title attribute. Therefore, this write is incorrect.

Conclusion:

This indicates that the current context object is an html object and can call the attributes and methods of the html object.
$ (This) indicates that the context object is a jquery context object. You can call jquery methods and attribute values.

Instance (Tab ):

The Code is as follows:

Tabs ($ ("# nav a"), $ (". content "));
Function tabs (tab, content ){
Content. hide ();
Content. eq (0). show ();
Tab. click (function (){
Var index = tab. index (this );
Tab. removeClass ("current ");
$ (This). addClass ("current ");
Content. hide ();
Content. eq (index). animate ({opacity: 'show'}, 200 );
});
}