• 【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>

  • 相关阅读:
    彼之蜜糖,吾之砒霜——聊聊软件开发中的最佳实践
    WebAPI框架里设置异常返回格式统一
    Entity Framework Plus
    实体框架自定义代码优先约定(EF6以后)
    npm 切换淘宝镜像几种方式
    EntityFramework中Json序列化的循环引用问题解决--Newtonsoft.Json
    Json序列化循环引用的问题
    Windows Service 之 安装失败后的删除
    Windows Service 之 详解(二)
    Windows Service 之 详解(一)
  • 原文地址:https://www.cnblogs.com/aqbyygyyga/p/1972466.html
Copyright © 2020-2023  润新知