zoukankan      html  css  js  c++  java
  • JS的window.onload与JQuery的$(document).ready(function(){})的区别

    前段时间去面试被问及JS的加载(onload)与jQuery中加载(ready)方法的区别,瞬时懵逼了,关于这个知识点平时还真没怎么注意。
    最近先来无事便查了一下资料,
    onload 事件(W3c上给出的解释):
    定义和用法
    onload 事件会在页面或图像加载完成后立即发生。
    语法
    onload="SomeJavaScriptCode"
    支持该事件的 HTML 标签:

    支持该事件的 JavaScript 对象:
    image, layer, window
    而橘子哥的文章给出这样的解释
    在JavaScript中
    window.onload = function(){
    alert(“text1”);
    };

    等同于在jQuery中

    $(window).load(function(){
    alert("text1");
    });

    他们都是用于当页面的所有元素,包括外部引用文件,图片等都加载完毕时运行函数内的alert函数。load方法只能执行一次,如果在js文件里写了多个,只能执行最后一个。(初学者常常在页面结构里对元素直接写行为函数,这样是很丑陋的,可以用选择器等,在js代码里对元素进行行为控制。

    对于JQuery的 ready()(W3c的解释):

    定义和用法
    当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
    由于该事件在文档就绪后发生,因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。
    ready() 函数规定当 ready 事件发生时执行的代码。
    ready() 函数仅能用于当前文档,因此无需选择器。
    允许使用以下三种语法:
    语法 1
    $(document).ready(function)
    语法 2
    $().ready(function)
    语法 3
    $(function)

    提示:ready() 函数不应与 一起使用。
    橘子哥解答:
    在jQuery中

    $(document).ready(function(){
    alert("text2");
    });

    等同于(简化写法)

    $(function(){
    alert("text2");
    });

    他们都是用于当页面的标准DOM元素被解析成DOM树后就执行内部alert函数。这个函数是可以在js文件里多次编写的,对于多人共同编写的js就有很大的优势,因为所有行为函数都会执行到。而且$(document).ready()函数在HTML结构加载完后就可以执行,不需要等大型文件加载或者不存在的连接等耗时工作完成才执行,效率高。

    当然 也要根据项目需求来使用,比如有时候有些时候图片或者重要信息没出来,会对用户操作产生误导,或者需要等获取某些图片高宽数据后再执行的行为函数,就得使用window.onload了。
    原文:http://blog.csdn.net/lcc921528642/article/details/48379431

    那么问题了,有些童鞋说我不知道什么时候用load方法,什么时候用ready方法,那好办,当你分不清该用什么的时候就都用ready方法。

  • 相关阅读:
    [转发]深入理解git,从研究git目录开始
    iOS系统网络抓包方法
    charles抓包工具
    iOS多线程中performSelector: 和dispatch_time的不同
    IOS Core Animation Advanced Techniques的学习笔记(五)
    IOS Core Animation Advanced Techniques的学习笔记(四)
    IOS Core Animation Advanced Techniques的学习笔记(三)
    IOS Core Animation Advanced Techniques的学习笔记(二)
    IOS Core Animation Advanced Techniques的学习笔记(一)
    VirtualBox复制CentOS后提示Device eth0 does not seem to be present的解决方法
  • 原文地址:https://www.cnblogs.com/ITyueguangyang/p/6116605.html
Copyright © 2011-2022 走看看