zoukankan      html  css  js  c++  java
  • 【JQuery】jQuery(document).ready(function($) { });的几种表示方法及load和ready的区别

    jQuery中处理加载时机的几种方式

    第一种:

    jQuery(document).ready(function() {
    
    alert("你好");
    });
    // $(document).ready(function() { alert("你好"); });

    第二种:

     jQuery(function() {
    
    alert("你好");
    
    });
    //
    $(function() {
    
    alert("你好");
    
    });

    第三种:

     (function() {
    
    alert("你好");
    
    })(jQuery);
    或
    (function() {
    
    alert("你好");
    
    })($);
    或
    (function() {
    
        alert("你哈");
    
    })();

    以上三种方式,第三种方式的执行优先级比第一种、第二种都要高。第一种和第二种平级。

    以上三种又可以用 window.onload = function () {};代替。

     

    $(function(){})和window.onload(){}区别?

    1.window.onload(){};需要等页面所有的内容(包括元素的所有关联文件)都加载完成才会执行onload的代码;

       $(function(){});在页面的dom元素加载完毕后就执行,而无需等到图片或其他媒体下载完毕;

    执行下面这段代码进行验证:

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>区别验证</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    function img_load(){
        alert($("img").attr("width"));//250
    }
    $(function(){
        alert($("img").attr("width"));//undefined
        $("img").attr("width","250px");
    });
    </script>
    </head>
    <body onload="img_load()">
    <img alt="" src="images/404.jpg" />
    </body>
    </html>
    $(function(){})和window.onload(){}区别验证

     

    2.$(document).ready()方法可以多次使用而注册不同的事件处理程序,而window.onload一次只能保存对一个函数的引用,多次绑定函数只会覆盖前面的函数。

    body.onload和window.onload(){}区别?

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>onload测试</title>
    <script type="text/javascript">
    function test1(){
        alert("我是test1");//显示
    }
    function test2(){
        alert("我是test2");//显示
    }
    </script>
    </head>
    <body onload="test1(),test2()">
    
    </body>
    </html>
    onload加载多个函数测试

    用$(window).load()加载多个函数

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    //window对象只能保存一个函数的应用
    window.onload=function(){
        alert("我是加载一");
    };
    window.onload=function(){
        alert("我是加载二");//显示
    };
    //使用下面的方法解决window加载多个函数
    $(window).load(function (){
        alert("测试1");//显示
    });
    $(window).load(function(){
        alert("测试2");//显示
    });
    </script>
    </head>
    <body>
    
    </body>
    </html>
    window.load加载多个函数测试

    原文链接:jQuery(document).ready(function($) { });的几种表示方法

     

  • 相关阅读:
    codeforces C. Cows and Sequence 解题报告
    codeforces A. Point on Spiral 解题报告
    codeforces C. New Year Ratings Change 解题报告
    codeforces A. Fox and Box Accumulation 解题报告
    codeforces B. Multitasking 解题报告
    git命令使用
    shell简单使用
    知识束缚
    php 调用系统命令
    数据传输方式(前端与后台 ,后台与后台)
  • 原文地址:https://www.cnblogs.com/HDK2016/p/7019568.html
Copyright © 2011-2022 走看看