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

asys0512
  • 2.7k
$(document).ready(function() {

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

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

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

});
(function($) {

})(jQuery);

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

另外我發現我把這個拔下來,js代碼還是可以運行...所以是要在什麼樣的情況下才需要使用?
再來就是看哪個最通用?

補充

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

又發現了一個

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

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

评论
阅读 890
5 个回答
✓ 已被采纳

回答之前,先来点背景知识

假设有一个html网页,它的dom结构如下

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

整个页面加载过程

  1. 上面那段html全部达到浏览器,当全部js加载完毕可用后,jQuery的ready事件触发。此时图片可能还没下载完。
  2. 当网页中的全部资源:js,css,图片资源完全加载完毕后, load事件触发。

正式回答

  1. $(document).ready, $(window).ready$(function() {})无差别:
    他们是在上面第一步中js全部加载完毕后执行,此时页面的图片可能还没展示出来。
  2. $(window).load$(window).on('load'无差别:
    他们在上面背景知识中 所有资源都加载完毕后,图片此时已经展示出来,才被触发。
  3. 何时使用ready, 何时使用load?
    一般ready早于load触发。
    如果你写的js不依赖于图片尺寸,那么完全可以放在ready中去执行。
    如果你写的js计算元素位置或大小时,要受图片大小影响,那么必须放在load中执行。
  4. 最后那个(function($) {})(jQuery);只是先定义一个函数,参数是$, 然后把jQuery对象作为参数传给它而已,与上面的ready,load不是一件事情,没有可比性。它相当于

    //$在这里只是一个参数名称,不要和jQuery中的$混淆
    function foo($) {
      $.prototype.someMethod = function() {}; //假设的
      $('.className').attr(...);
    }
    foo(jQuery);
  5. 为什么会有最后这种写法,直接用jquery的$不好吗?
    有的公司可能自己写了专有库,里面也用$作为方法引用,一旦同时引入jQuery,两个$就冲突了。 开发人员又不想改变使用$的默认习惯,于是将脚本写到一个函数中,在这个作用域内的$表示的是jQuery或者是其它库,完全由传入的参数决定。
jQuery 是引入jQuery库时带入的变量,等同$

$(function(){

})

$(document).ready(function() {

});
的简写方式

ready 是 DOM 树可操作时的回调, 先于 onload

所以你只管尽情使用$(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 );
    };

上源码

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

**自己理解下document和window的区别
再或者你想想 JQ的写法,到了原生JS怎么写**

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

addEventListener

$(function() {});

等同于 window.onload

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

跟上面区别大了,这是封闭空间,解决变量冲突等问题
封闭空间传送门

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏