This and $ (this) in jQuery, and this in jquery

This and $ (this) in jQuery, and this in jquery

There are a lot of introductions about jQuery's this and $ (this) on the Internet. Most of them just clarify the points of this and $ (this). In fact, they have application sites, it cannot be generalized. When jQuery calls a member function, this indicates a dom object.

$ (This) points to a jQuery object, but this is to point to a dom object, because jQuery has made special processing.

When creating a dom jQuery object, jQuery not only creates a jQuery object for the dom, but also stores the dom in the array of the created object.

Copy codeThe Code is as follows:
Elem = document. getElementById (match [2]);
If (elem & elem. parentNode ){
This. length = 1;
This [0] = elem;
}

This. context = document;
This. selector = selector;
Return this;

This [0] = elem is an array of implemented objects. Therefore, javascript is a very interesting language. When using this for access, you can access the member functions of the objects it points to. In fact, this is an array of objects. It stores dom objects.

First look at $ ("p"). each () -- loop

Copy codeThe Code is as follows:
Each: function (callback, args ){
Return jQuery. each (this, callback, args );
}

After reading the call of the each function, you should understand that jQuery. each (this, callback, args); calls the object array, and the object array stores the dom object. Therefore, this in the callback function is naturally a dom object.

Let's take a look at $ ("p"). hide () -- member function

Copy codeThe Code is as follows:
Hide: function (){
Return showHide (this );
},
Function showHide (elements, show) {var elem, display,
Values = [],
Index = 0,
Length = elements. length;
For (; index <length; index ++ ){
Elem = elements [index];
If (! Elem. style ){
Continue;
}
Values [index] = jQuery. _ data (elem, "olddisplay ");
If (show ){
// Reset the inline display of this element to learn if it is
// Being hidden by cascaded rules or not
If (! Values [index] & elem. style. display = "none "){
Elem. style. display = "";
}
// Set elements which have been overridden with display: none
// In a stylesheet to whatever the default browser style is
// For such an element
If (elem. style. display = "" & isHidden (elem )){
Values [index] = jQuery. _ data (elem, "olddisplay", css_defaultDisplay (elem. nodeName ));
}
} Else {
Display = curCSS (elem, "display ");
If (! Values [index] & display! = "None "){
JQuery. _ data (elem, "olddisplay", display );
}
}
}
// Set the display of most of the elements in a second loop
// To avoid the constant reflow
For (index = 0; index <length; index ++ ){
Elem = elements [index];
If (! Elem. style ){
Continue;
}
If (! Show | elem. style. display = "none" | elem. style. display = ""){
Elem. style. display = show? Values [index] | "": "none ";
}
}
Return elements;
}

From the code above, we can see that the number of lines in hide actually calls showHide, and the first input parameter this is not a dom object, but an array of jQuery objects, therefore, the showHide function obtains each dom object by looping through this object array.

Finally, let's take a look at $ ("p"). bind () -- event

Copy codeThe Code is as follows:
Bind: function (types, data, fn ){
Return this. on (types, null, data, fn );
},

Copy codeThe Code is as follows:
On: function (types, selector, data, fn,/* INTERNAL */one ){
// This part of code is omitted
Return this. each (function (){
JQuery. event. add (this, types, fn, data, selector );
});
},

The bind function calls the on function, and the on function implements jQuery. event. add through the each function. Therefore, jQuery. event. add (this in this is the dom object. So this in the event is the dom object.

The above is my understanding of this and $ (this) in jQuery. If you have any questions, please contact me or leave a message for me.