[Original] jQuery's this and $ (this), original jquerythis

[Original] jQuery's this and $ (this), original jquerythis

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.

 

Js Code

1. Elem = document. getElementById (match [2]);
2. If (elem & elem. parentNode ){
3. This. length = 1;
4. This [0] = elem;
5. }
7. This. context = document;
8. This. selector = selector;
9. 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

 

 

Js Code

1. Each: function (callback, args ){
2. Return jQuery. each (this, callback, args );
3. }

 

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

 

 

Js Code

1. Hide: function (){
2. Return showHide (this );
3. },

Js Code

1. Function showHide (elements, show) {var elem, display,
2. Values = [],
3. Index = 0,
4. Length = elements. length;
6. For (; index <length; index ++ ){
7. Elem = elements [index];
8. If (! Elem. style ){
9. Continue;
10. }
11. Values [index] = jQuery. _ data (elem, "olddisplay ");
12. If (show ){
13. // Reset the inline display of this element to learn if it is
14. // Being hidden by cascaded rules or not
15. If (! Values [index] & elem. style. display = "none "){
16. Elem. style. display = "";
17. }
19. // Set elements which have been overridden with display: none
20. // In a stylesheet to whatever the default browser style is
21. // For such an element
22. If (elem. style. display = "" & isHidden (elem )){
23. Values [index] = jQuery. _ data (elem, "olddisplay", css_defaultDisplay (elem. nodeName ));
24. }
25. } Else {
26. Display = curCSS (elem, "display ");
28. If (! Values [index] & display! = "None "){
29. JQuery. _ data (elem, "olddisplay", display );
30. }
31. }
32. }
34. // Set the display of most of the elements in a second loop
35. // To avoid the constant reflow
36. For (index = 0; index <length; index ++ ){
37. Elem = elements [index];
38. If (! Elem. style ){
39. Continue;
40. }
41. If (! Show | elem. style. display = "none" | elem. style. display = ""){
42. Elem. style. display = show? Values [index] | "": "none ";
43. }
44. }
46. Return elements;
47. }

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

 

Js Code

1. Bind: function (types, data, fn ){
2. Return this. on (types, null, data, fn );
3. },

 

 

 

Js Code

1. On: function (types, selector, data, fn,/* INTERNAL */one ){
2. // This part of code is omitted
3. Return this. each (function (){
4. JQuery. event. add (this, types, fn, data, selector );
5. });
6. },

 

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.