jquery | $document ready 和 $funcion 的迷思？要用哪個(gè)才對(duì)？以及使用的時(shí)間點(diǎn)？

$(document).ready(function() {

});

$(window).ready(function () {

});

$(window).load(function() {

});

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

$(function() {

});

(function($) {

})(jQuery);

想問(wèn)一下要用哪個(gè)才對(duì)？還是有其他更好的？
以及使用的時(shí)間點(diǎn)？

另外我發(fā)現(xiàn)我把這個(gè)拔下來(lái)，js代碼還是可以運(yùn)行...所以是要在什麼樣的情況下才需要使用？
再來(lái)就是看哪個(gè)最通用？

補(bǔ)充

我有很多js檔
每一個(gè)可能是 fucntion (){}, click, submit 等等
這樣每一個(gè)都要 $(function(){ 嗎？

又發(fā)現(xiàn)了一個(gè)

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

補(bǔ)充
我發(fā)現(xiàn)有時(shí)候不能用這個(gè) function 耶
像我有一個(gè)檔案全部都是 function 的
我用了之後導(dǎo)致不能用

回答

編輯回答

失魂人

回答之前，先來(lái)點(diǎn)背景知識(shí)

假設(shè)有一個(gè)html網(wǎng)頁(yè)，它的dom結(jié)構(gòu)如下

<html>
    <head>
        <link rel='stylesheet'>
        <script src="jquery.js"></script>
    </head>
    <body>
        <img src="圖片地址, 圖片很大或傳輸很慢">
    </body>
    <script>
        //do something
    </script>
</html>

整個(gè)頁(yè)面加載過(guò)程

上面那段html全部達(dá)到瀏覽器，當(dāng)全部js加載完畢可用后，jQuery的ready事件觸發(fā)。此時(shí)圖片可能還沒(méi)下載完。
當(dāng)網(wǎng)頁(yè)中的全部資源：js，css，圖片資源完全加載完畢后， load事件觸發(fā)。

正式回答

$(document).ready, $(window).ready，$(function() {})無(wú)差別：
他們是在上面第一步中js全部加載完畢后執(zhí)行，此時(shí)頁(yè)面的圖片可能還沒(méi)展示出來(lái)。
$(window).load和$(window).on('load'無(wú)差別：
他們?cè)谏厦姹尘爸R(shí)中所有資源都加載完畢后，圖片此時(shí)已經(jīng)展示出來(lái)，才被觸發(fā)。
何時(shí)使用ready, 何時(shí)使用load？
一般ready早于load觸發(fā)。
如果你寫(xiě)的js不依賴于圖片尺寸，那么完全可以放在ready中去執(zhí)行。
如果你寫(xiě)的js計(jì)算元素位置或大小時(shí)，要受圖片大小影響，那么必須放在load中執(zhí)行。
最后那個(gè)(function($) {})(jQuery);只是先定義一個(gè)函數(shù)，參數(shù)是$, 然后把jQuery對(duì)象作為參數(shù)傳給它而已，與上面的ready,load不是一件事情，沒(méi)有可比性。它相當(dāng)于
```
//$在這里只是一個(gè)參數(shù)名稱，不要和jQuery中的$混淆
function foo($) {
  $.prototype.someMethod = function() {}; //假設(shè)的
  $('.className').attr(...);
}
foo(jQuery);
```
為什么會(huì)有最后這種寫(xiě)法，直接用jquery的$不好嗎？
有的公司可能自己寫(xiě)了專有庫(kù)，里面也用$作為方法引用，一旦同時(shí)引入jQuery，兩個(gè)$就沖突了。開(kāi)發(fā)人員又不想改變使用$的默認(rèn)習(xí)慣，于是將腳本寫(xiě)到一個(gè)函數(shù)中，在這個(gè)作用域內(nèi)的$表示的是jQuery或者是其它庫(kù)，完全由傳入的參數(shù)決定。

jQuery 是引入jQuery庫(kù)時(shí)帶入的變量，等同$

2018年1月14日 14:55

編輯回答

溫衫

$(function(){

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

});
的簡(jiǎn)寫(xiě)方式

ready 是 DOM 樹(shù)可操作時(shí)的回調(diào), 先于 onload

所以你只管盡情使用$(function(){})吧

2018年3月16日 20:19

編輯回答

孤酒

Html頁(yè)面的生命周期

DOMContentLoaded,load,beforeunload,unload

2017年1月15日 03:50

編輯回答

嫑吢丕

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

**自己理解下document和window的區(qū)別
再或者你想想 JQ的寫(xiě)法，到了原生JS怎么寫(xiě)**

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

addEventListener

$(function() {});

等同于 window.onload

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

跟上面區(qū)別大了，這是封閉空間，解決變量沖突等問(wèn)題
封閉空間傳送門

2018年6月26日 09:42

編輯回答

筱饞貓

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 );
    };

上源碼

2018年6月11日 20:35