Details on this and $of this in jQuery

There is a lot of introduction about jQuery's this and $(this) on the Internet, most of which just make clear the pointing of this and $(this), in fact, it has its application place, it can't be generalized when jQuery calls a member function, this is pointing to the dom object.

There's nothing wrong with $(this) pointing to a jQuery object, but this is pointing to a dom object, because jQuery does something special.

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

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 the implementation object array. So javascript is an interesting language, and when you use this access, you can access the member function of the object that it points to, which is actually an array of objects. It holds a dom object.

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

each: function( callback, args ) {  

        return jQuery.each( this, callback, args );  

    }  

  JQuery. Each (this, callback, args); The object array is called, and the array of the object stores the dom object, so this in the callback function is a dom object

Look at $("p").hide()-- the member function

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;  

}  

  As you can see from the above code, the number of hide lines is actually calling showHide, and the first parameter passed in, this, is not a dom object, but an array of jQuery objects, so the showHide function loops through the array of objects to get each dom object.

Finally, look at $("p").bind()-- the event

bind: function( types, data, fn ) {  

        return this.on( types, null, data, fn );  

    },  

on: function( types, selector, data, fn,  one ) {  

        //This part of the code is omitted & NBSP; < br / >
        return this.each( function() {  

            jQuery.event.add( this, types, fn, data, selector );  

        });  

    },  

The bind function calls the on function, which in turn implements jQuery.event.add through the each function. So 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 there is any mistake, please contact me or leave me a message