• 【javascript中的window.onload() 和 jquery中的 $(document).ready()】


     1 加载DOM (javascript中的window.onload() 和 jquery中的 $(document).ready())

    Window.onload()方法是在网页中的所有元素(包含元素的所有关联文件)完全加载到浏览器后才执行

    Jquery$(document).ready()) 方法注册的时间处理程序,在dom完全就绪就可以被调用

    如果一个网站有很多图片,那么用window.ready() 加载 就要等图片都下好后 才可以执行操作,而用$(document).ready())则是dom加载完就会执行操作了。 $(document).ready())

    由于dom已经被解析,但图片还有可能没被加载完毕,所以例如图片的高度和宽度这样的属性不一定有效,jquery还提供另一种加载方法,load()方法、load方法会在元素的onload事件绑定一个处理函数。如果处理函数绑定给一个window对象,则会在所有内容(包括窗口,框架,对象,图像)加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。

    jquery代码如下

    $window.load(function(){

    //代码

    })

    javascript

    Window.onload=function(){

    //代码

    }

    2,多次使用

    Function one()       Function two()

    {                    {

    Alert(“one”);          Alert(“two”);

    }                      }

    使用window.onload加载 

    Window.onload=onewindow.onload=two;  运行代码后 发现智慧显示 two

    因为javascriptonload事件一次只能保存对一个函数的引用。后面的函数会自动覆盖前面的函数

    两个函数效果顺序实现

    Window.onload=function(){

    One();

    Two();

    }

    Jquery每次都会在现有的行为上追加新的行为

    $document.ready(function(){

    One();

    })

    $document.ready(function(){

    two();

    })

    3简写

    $(function(){

    代码

    })

     

    <script type="text/javascript">

    function fn1(){alert("OK");}

    function fn2(){alert("再来一次!")}

    //document.getElementById('div1').attachEvent('onclick',fn1);

    //document.getElementById('div1').addEventListener('click',fn1,false);

    //document.getElementById('div1').addEventListener("click",fn2,false);

    //document.getElementById('div1').onclick=fn1;

    //document.getElementById('div1').attachEvent('onclick',fn2);

    //document.getElementById('div1').onclick=function(){fn2();fn1()}

    //document.getElementById('div2').attachEvent('onclick',fn3);

    function addEventHandler(obj,sEvent,fnHandler){

    if(obj.addEventListener){

    obj.addEventListener(sEvent,fnHandler,false);

    } else if(obj.attachEvent){

    obj.attachEvent("on"+sEvent,fnHandler);

    }else{

    alert();

    }

    }

    function removeEventHandler(obj,sEvent,fnHandler){

    if(obj.removeEventListener){

    obj.removeEventListener(sEvent,fnHandler,false);

    } else if(obj.detachEvent){

    obj.detachEvent("on"+sEvent,fnHandler);

    }else{

    alert();

    }

    }

    var obj=document.getElementById('div1');

    var obj2=document.getElementById('div2');

    addEventHandler(obj,"click",fn1);

    addEventHandler(obj,"click",fn2);

    addEventHandler(obj2,"click",function fn3(){removeEventHandler(obj,"click",fn2); alert("我是FN3");}

    )

    addEventHandler(document.getElementById('div3'),"click",function(){removeEventHandler(obj2,"click",fn3); alert("run");});

    //addEventHandler(window,"load",function aa(){alert("WINDOW加载完成后运行的");});

    //removeEventHandler(window,"load",aa);

    </script>

  • 相关阅读:
    QFramework 使用指南 2020(二):下载与版本介绍
    QFramework 使用指南 2020 (一): 概述
    Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践
    Unity 游戏框架搭建 2018 (一) 架构、框架与 QFramework 简介
    Unity 游戏框架搭建 2017 (二十三) 重构小工具 Platform
    Unity 游戏框架搭建 2017 (二十二) 简易引用计数器
    Unity 游戏框架搭建 2017 (二十一) 使用对象池时的一些细节
    你确定你会写 Dockerfile 吗?
    小白学 Python 爬虫(8):网页基础
    老司机大型车祸现场
  • 原文地址:https://www.cnblogs.com/aqbyygyyga/p/1972466.html
Copyright © 2020-2023  润新知