欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JQuery的ready函数与JS的onload的区别详解

程序员文章站 2022-05-28 15:50:22
jquery的ready函数与js的onload的区别： 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document)...

jquery的ready函数与js的onload的区别：
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是dom结构绘制完毕后就执行，不必等到加载完毕。


2.编写个数不同
window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行


3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

例子：

. 代码如下:


<!doctype html public "-//w3c//dtd html 4.01 transitional//en"
"https://www.w3.org/tr/html4/loose.dtd">
<html xmlns="https://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>

 

上一篇： jtable列中自定义button示例代码

下一篇： 历史上的杨丽华是什么样的 她到底有多惨呢

推荐阅读