jquery | $document ready 和 $funcion 的迷思？要用哪個才對？以及使用的時間點？

$(document).ready(function() {

});

$(window).ready(function () {

});

$(window).load(function() {

});

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

$(function() {

});

(function($) {

})(jQuery);

想問一下要用哪個才對？還是有其他更好的？
以及使用的時間點？

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

補充

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

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

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

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

回答

編輯回答

失魂人

回答之前，先來點背景知識

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

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

整個頁面加載過程

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

正式回答

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

jQuery 是引入jQuery庫時帶入的變量，等同$

2018年1月14日 14:55

編輯回答

溫衫

$(function(){

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

});
的簡寫方式

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

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

2018年3月16日 20:19

編輯回答

孤酒

Html頁面的生命周期

DOMContentLoaded,load,beforeunload,unload

2017年1月15日 03:50

編輯回答

嫑吢丕

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

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

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

addEventListener

$(function() {});

等同于 window.onload

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

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

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