zoukankan      html  css  js  c++  java
  • 关于ready和load方法作用于不同情况下的比较

    jQuery中有两个方法——ready和load。它们非常容易混淆。这里做一下区分:

    jQuery中的ready特指“DOM”全部加载完毕,也就是说,只要DOM加载完毕了,这个事件自然被触发了。所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕,至于说某些标签内部可能还存在着一系列事件未完成(譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况)则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言,在ready方法中显然比load更为适合因为load必须等到全部的标签都处于完成状态,包括img把图片全部加载完毕为止)。

    这里不妨给出一个现成的示例代码(纯Html):

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.3.js"></script>
        <script>
            $(function () {
                alert("DOM加载完毕");
            });        
        </script>
    </head>
    <body onload="alert('Body加载完毕');">
        <form id="form1" runat="server">
        <div>
       <img src="http://lbvagrant.com/images/desktops/a-m/Bliss.bmp" />
        </div>
        </form>
    </body>
    </html>

    注意jQuery中的$(function……)就是静止等待知道整个DOM加载完毕之后触发事件。其等同于:
    1)

    $.ready(function () {
                alert("DOM加载完毕");
            }); 

    2)

    $(document).ready(function () {
                alert("DOM加载完毕");
            }); 

    如果你运行这个页面(直接在IE或者其它页面中打开),你会发觉先弹出“DOM加载完毕”的消息框,然后可能直到BMP图片加载完毕之后才会弹出“Body”加载完毕的消息。这就是它们之间最大的差别。

    顺便提及一句,如果这样进行比较:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-1.8.3.js"></script>
        <script>
            $(function () {
                alert("DOM加载完毕");
            });
    
            $(window).ready(function ()
            {
                alert("Window加载完毕");
            });
            
        </script>
    </head>
    <body onload="alert('Body加载完毕');">
        <form id="form1" runat="server">
        <div>
         <img src=……/>
        </div>
        </form>
    </body>
    </html>

     运行顺序将是先弹出“DOM加载完毕”,之后才弹出“Window加载完毕”,最后弹出“Body加载完毕”。那是因为DOM的本质是document,是Window的一个属性对象。自然等到DOM加载完毕之后Window对象才表示初步构建完毕(window对象自身没有顶层对象了,其本身就是顶层对象)。而DOM初步加载完毕并不表示每一个元素都加载完毕,因此body中的那个js对话框是在最后才弹出。

    关于深入理解DOM,你可以使用IE7以及以上的浏览器,或者FireFox等带有代码调试功能的浏览器;以IE为例——

    随意打开一个Url(譬如“www.baidu.com”)。先按F12启用调试功能,切换到“网络”面板,点击“开始捕获“按钮,切换到“HTML”面板,随后在地址栏输入百度地址,回车。

    如果你注意HTML,它会生成一个Html的TreeView,这个就是DOM(也就是document.ready)需要执行的内容,因此如果你要对一些Html标签进行设置属性等,直接可以在这个事件中去做,而不是等到document全部加在完毕了才去做;相反地,body的onload标签要到body中全部内容彻底加载完毕为止(证明就是你可以看“网络”,里边发现大量Image下载以及内部跳转等复杂信息)。

    另外值得注意的是:

    $(document).load是错误的,因为“load”并不是document对象的一个内置的方法;如果要人为为某个标签对象增加一个自定义事件,在jQuery中你只能使用bind方法增加一个自定义的事件,然后必须使用trigger去人为触发这个自定义事件。

  • 相关阅读:
    Python os.walk() 方法
    Python os.utime() 方法
    Python os.unlink() 方法
    qtp 自动化测试桌面程序-点滴1(录制设置、共用文件)
    功能测试的一些心得----转载
    sqlmap-学习1 配置环境
    qtp 自动货测试桌面程序-笔记(使用参数 parameters)
    qtp 自动货测试桌面程序-笔记(使用函数)
    QTP键盘操作笔记
    QTP 自动化测试桌面程序--笔记(下拉选择、右键菜单、在控件仓库中查找对应的控件)
  • 原文地址:https://www.cnblogs.com/ServiceboyNew/p/2869963.html
Copyright © 2011-2022 走看看