JQuery的ready函數與JS的onload的區別詳解


JQuery的ready函數與JS的onload的區別:
1.執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢后才能執行。
$(document).ready()是DOM結構繪制完畢后就執行,不必等到加載完畢。


2.編寫個數不同
window.onload不能同時編寫多個,如果有多個window.onload方法,只會執行一個
$(document).ready()可以同時編寫多個,並且都可以得到執行


3.簡化寫法
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});

 

在我以前的開發中,一般用到javascript,我都是采用jquery的模式,也就是大多數時候,第一行寫的是:

 $(document).ready(function(){

});

這個時候,不一定要等所有的js和圖片加載完畢,就可以執行一些方法,不過有些時候,必須要等所有的

元素都加載完畢,才可以執行一些方法的時候,比如說,部分圖片或者什么其他方面還沒有加載好,這個時候,點擊某些按鈕,會導致出現意外的情況,這個時候,就

需要用到:

$(window).load(function() {

});

 

eg: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>ready和js中的onload的區別</title>

        <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>

 

        <script type="text/javascript">

 

            //js中window對象的onload屬性執行jsFunction1函數

            window.onload=jsFunction1;

 

            //js中window對象的onload屬性執行jsFunction2函數

            window.onload=jsFunction2;

 

            //jquery的ready方法執行jqFunction1函數

        $(document).ready(jqFunction1);

 

        //jquery的ready方法執行jqFunction2函數

        $(document).ready(jqFunction2);

 

        //jsFunction1函數

        function jsFunction1(){

                alert("jsFunction1");        

        }

 

        //jsFunction2函數

        function jsFunction2(){

        alert("jsFunction2");

        }

 

        //jqFunction1函數

        function jqFunction1(){

           alert("jqFunction1");

        }

 

        //jqFunction2函數

        function jqFunction2(){

        alert("jqFunction2");

        }

        </script>

 

    </head>

    <body>

        <h1>ready和js中的onload的區別</h1>

    </body>

</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM