$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法

时间：2022-05-10 21:53:07

$(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载 在”Body”的Onload事件里.
对于Body的Onload事件和JQuery的Ready方法相比，有很多弊端.比如:
1.加载 多个函数的问题
<body onload="a();b();">
</body>
在Onload事件中 只能这样加载，很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行

2.代码和内容不分离
  这个貌似不用说了，让人深恶痛绝-.-!!

3.执行先后顺序不同
  对于Body.Onload事件，是在加载完所有页面内容才会触发，我的意思是所有内容,包括图片，flash等.如果页面的这些内容很多会让用户等待很 长时间.
  而对于$(document).ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
  但是对于一些特殊应用，比如图片的放大缩小，图片的剪裁。需要网页所有的内容加载完毕后才执行的呢？我推荐使用$(window).load()方法，这 个方法会等到页面所有内容加载完毕后才会触发，并且同时又没有OnLoad事件的弊端.
  <script type="text/javascript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
    </script>
  上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
  当然不要忘了与之对应的Unload方法
$(window).unload(function() {
            alert("good bye");
        });
上面代码会在页面关闭时引发.
在 所有DOM加载之前引发JS代码
这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>
对， 就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">

alert($("#test").html());//I Can display the content
        
    </script>
</body>
<body>
   <script type="text/javascript">

alert($("#test").html());//I Can't display the content
        
    </script>
    <div id="test">this is the content</div>
</body>
上面两段代码, 第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

随机推荐

  1. Android -- 软键盘

    1. 应用启动后,自动打开软键盘 InputMethodManager imm = (InputMethodManager) getSystemService(Context.INPUT_METHOD ...

  2. DP总结

    最长回文子序列 int lpsDp(char * str,int n){ int dp[n][n], tmp; memset(dp,0,sizeof(dp)); for(int i=0; i<n ...

  3. DI 之 3&period;2 循环依赖 &lpar;伍&rpar;

    3.2.1  什么是循环依赖 循环依赖就是循环引用,就是两个或多个Bean相互之间的持有对方,比如CircleA引用CircleB,CircleB引用CircleC,CircleC引用CircleA, ...

  4. HDUOJ----2485 Destroying the bus stations（2008北京现场赛A题）

    Destroying the bus stations                                                                          ...

  5. POJ 2777 线段树基础题

    题意: 给你一个长度为N的线段数,一开始每个树的颜色都是1,然后有2个操作. 第一个操作,将区间[a , b ]的颜色换成c. 第二个操作,输出区间[a , b ]不同颜色的总数. 直接线段树搞之.不 ...

  6. css修改滚动条默认样式

    之前因为公司项目需要,在网上找到的: 直接上代码了 html代码 <div class="inner"> <div class="innerbox&qu ...

  7. 550 Create directory operation failed

    往Linux系统中上传文件时候,我们经常会使用FTP连接Linux,也经常会使用mkdir命令来创建目录.最近发现用mkdir创建目录时提示550 Create directory operation ...

  8. Java基础学习笔记八 Java基础语法之接口和多态

    接口 接口概念 接口是功能的集合,同样可看做是一种数据类型,是比抽象类更为抽象的”类”.接口只描述所应该具备的方法,并没有具体实现,具体的实现由接口的实现类(相当于接口的子类)来完成.这样将功能的定义 ...

  9. Regularity criteria for NSE 5&colon; &dollar;u&lowbar;3&comma;&bsol;om&lowbar;3&dollar;

    In [Zhang, Zujin. Serrin-type regularity criterion for the Navier-Stokes equations involving one vel ...

  10. JS浅谈原始值与引用值操作

    值的操作分为三大类:复制,传递,比较 一:复制 原始值 let a = 10; let b = a; 注释:2018-7-30 17:33:49 1 原始类型的值都是存放在栈内存当中,所以他们的赋值操 ...

相关文章