Jquery | the myth of $document ready and $funcion? Which one should I use? And when to use it?

$(document).ready(function() {

});
$(window).ready(function () {

});
$(window).load(function() {

});
$(window).on("load", function () {
     
});
$(function() {

});
(function($) {

})(jQuery);

want to figure out which one to use? Or is there something better?
and when to use it?

in addition, I found that when I unplug this, the js code still works. So under what circumstances do you need to use it?
which one is the most versatile?

charge

I have a lot of js files
each of which may be fucntion () {} , click , submit and so on
so each $(function () {?

found another

jQuery(document).ready(function ($) {

recharge
I find that sometimes I can"t use this function
like I have a file that is all function
I can"t use it after I use it


$(function () {

})
is
$(document) .ready (function () {

});
shorthand

ready is the callback when the DOM tree is operable, which precedes onload

so just use $(function () {})

.
jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    },
init = jQuery.fn.init = function( selector, context, root ) {
        var match, elem;

        // HANDLE: $(""), $(null), $(undefined), $(false)
        if ( !selector ) {
            return this;
        }

        // Method init() accepts an alternate rootjQuery
        // so migrate can support jQuery.sub (gh-2101)
        root = root || rootjQuery;

        // Handle HTML strings
        if ( typeof selector === "string" ) {
            ...
            
            // HANDLE: $(expr, $(...))
            } else if ( !context || context.jquery ) {
                return ( context || root ).find( selector );

            // HANDLE: $(expr, context)
            // (which is just equivalent to: $(context).find(expr)
            } else {
                return this.constructor( context ).find( selector );
            }

        // HANDLE: $(DOMElement)
        } else if ( selector.nodeType ) {
            this[ 0 ] = selector;
            this.length = 1;
            return this;

        // HANDLE: $(function)
        // Shortcut for document ready
        } else if ( isFunction( selector ) ) {
            return root.ready !== undefined ?
                root.ready( selector ) :

                // Execute immediately if ready is not present
                selector( jQuery );
        }

        return jQuery.makeArray( selector, this );
    };

Source code


$(document).ready(function() {});
$(window).ready(function () {});

* * understand the difference between document and window
or if you think about how to write JQ, when it comes to native JS, how to write * *

$(window).load(function() {});
$(window).on('load', function () {});

addEventListener

$(function() {});

is equivalent to window.onload

(function($) {})(jQuery);

is very different from the above. This is closed space , solving problems such as variable conflicts
closed space portal

.

before you answer, let's have some background

.

suppose you have a html page whose dom structure is as follows

  DOMContentLoaded,load,beforeunload,unload  

Menu