A detailed discussion of this and $(this)_jquery in jQuery

There are many introductions about jQuery's this and $(this) on the Internet. Most of them just clarify the directions of this and $(this). In fact, they have applications and cannot be generalized. When jQuery calls member functions, this points to the dom object.

It is understandable that

$(this) points to the jQuery object, but this points to the dom object. This is because jQuery has done special processing.

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

Copy code The 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;

The statement this[0] = elem implements an object array. So JavaScript is a very interesting language. When using this to access, you can access the member functions of the object it points to, and in fact this is an array of objects. It stores dom objects.

Let’s take a look at $("p").each() -- loop

Copy code The code is as follows:

each: function( callback, args ) {
          return jQuery.each( this, callback, args );
}  

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

Look again at $("p").hide()　--Member function

Copy code The 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; 
} 

 从上面的代码可以看出hide行数其实调用的是showHide，而传入的第一个参数this，并不是dom对象，而是jQuery对象数组，因此showHide函数通过循环此对象数组获取每一个dom对象。

最后看看$("p").bind()　--　事件

复制代码 代码如下:

bind: function( types, data, fn ) { 
        return this.on( types, null, data, fn ); 
    }, 

复制代码 代码如下:

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
// This part of the 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, this in jQuery.event.add( this is also the dom object. So this in the event is also the dom object.

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