JQuery的ready函数与JS的onload的区别详解_jquery

JQuery的ready函数与JS的onload的区别:
1.执行时间
window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

2.编写个数不同
window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
$(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法
window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

例子:

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ready和js中的onload的区别</title>
        <script type="text/javascript" src="jquery-core/jquery-1.8.0.js"></script>

        <script type="text/javascript">

            //js中window对象的onload属性执行jsFunction1函数
            window.onload=jsFunction1;

            //js中window对象的onload属性执行jsFunction2函数
            window.onload=jsFunction2;

            //jquery的ready方法执行jqFunction1函数
        $(document).ready(jqFunction1);

        //jquery的ready方法执行jqFunction2函数
        $(document).ready(jqFunction2);

        //jsFunction1函数
        function jsFunction1(){
                alert("jsFunction1");        
        }

        //jsFunction2函数
        function jsFunction2(){
        alert("jsFunction2");
        }

        //jqFunction1函数
        function jqFunction1(){
           alert("jqFunction1");
        }

        //jqFunction2函数
        function jqFunction2(){
        alert("jqFunction2");
        }
        </script>

    </head>
    <body>
        <h1>ready和js中的onload的区别</h1>
    </body>
</html>

时间: 2024-07-31 07:41:57

JQuery的ready函数与JS的onload的区别详解_jquery的相关文章

JQuery的read函数与js的onload不同方式实现_jquery

js的onload实现: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

jquery中$(document).ready()和onload用法区别详解介绍

页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 一般样式控制的,比如图片大小控制放在onload 里面加载; jS事件触发的方法,可以在ready 里面加载; 用jQ的人很多人都是这么开始写脚本的: 通常的写法  代码如下 复制代码 $(function(){ // do something }); 其实这个就是jq ready

jQuery EasyUI框架中的Datagrid数据表格组件结构详解_jquery

基础DOM结构什么叫"完整的基础DOM结构",这里"基础"的意思是指这个结构不依赖具体数据,不依赖Datagrid的view属性,只要存在Datagrid实例就会存在这样的基础DOM结构:而"完整"的意思是指在冻结列,冻结行,标题,footer,分页这些功能块都存在时候的DOM结构. 要搞清楚Datagrid的工作原理,这个DOM结构必须要烂熟于胸的,我们直接来看这个"基础完整DOM结构"是什么样子的: <!-- dat

jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解_jquery

本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

jQuery中document与window以及load与ready 区别详解_jquery

用过JavaScript的童鞋,应该知道window对象和document对象,也应该听说过load事件和ready事件,小菜当然也知道,而且自认为很了解,直到最近出了问题,才知道事情并不是那么简单. 首先说说window和document,直观上来讲,window代表的是浏览器窗口,而document代表的是浏览器窗口中加载的dom元素,进一步说,document是window的一个属性,window是最顶级的对象. 二者有啥区别呢?很好理解,假设现在有一个浏览器,里边加载的页面特别长,已经超

js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解_javascript技巧

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数: unescape,decodeURI,decodeURIComponent . 下面简单介绍一下它们的区别 1 escape()函数 定义和用法 escape() 函数可对字符串进行编码,这样就可以在所有的计算机上读取该字符串. 语法 escape(string) 参数 描述 string 必需.要被转义或编码的字符串. 返回值 已编码的 st

jQuery height()、innerHeight()、outerHeight()函数的区别详解_jquery

在jQuery中,获取元素高度的函数有3个,它们分别是height(). innerHeight(). outerHeight(). 与此相对应的是,获取元素宽度的函数也有3个,它们分别是width(). innerWidth(). outerWidth(). 在这里,我们以height().innerHeight().outerHeight()3个函数为例,来详细介绍它们之间的区别. 下面我们以元素element的盒模型为例来介绍它们之间的区别. 函数 高度范围 jQuery版本 支持写操作

jQuery Tags Input Plugin(添加/删除标签插件)详解_jquery

看名字应该知道是干嘛用了吧. 一个jquery开发的标签功能加强插件,可以生成或删除标签,还能对输入重复标签进行检查,和JQuery autocomplete插件配合实现自动完成功能. 官网:http://xoxco.com/projects/code/tagsinput/ 截图: (下面是翻译了官网上的用法,英文不是很好,有能力的尽量看官网吧) 首先,引用下面两个文件 <script src="jquery.tagsinput.js"></script> &l

jQuery对html元素的取值与赋值实例详解_jquery

本文实例讲述了jQuery对html元素的取值与赋值方法.分享给大家供大家参考,具体如下: Jquery给基本控件的取值.赋值 TEXTBOX: var str = $('#txt').val(); $('#txt').val("Set Lbl Value"); //文本框,文本区域: $("#text_id").attr("value",'');//清空内容 $("#text_id").attr("value&qu