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

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


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


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

 

在我以前的开发中,一般用到javascript,我都是采用jquery的模式,也就是大多数时候,第一行写的是:

 $(document).ready(function(){

});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就

需要用到:

$(window).load(function() {

});

 

eg: 

<!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.οnlοad=jsFunction1;

 

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

            window.οnlοad=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>

转载于:https://www.cnblogs.com/supereast/p/10840504.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247970.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue — 第四天(components组件)

问题导入 下面的代码是一个折叠面板的效果。 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Docu…

iOS开发常用的RGB色值和宏

iOS中RGB常用的色值,同时可将对颜色的设置定义成宏,方便开发应用,如: // name 颜色相关 // 参数格式为&#xff1a;0xFFFFFF #define kColorWithRGB(rgbValue) \ [UIColor colorWithRed:((float)((rgbValue & 0xFF0000) >> 16)) / 255.0 \ …

防火墙综合实验

防火墙技术综合实验 一、实验目的&#xff1a;本次实验是将多种访问控制列表以及防火墙部分的知识做一个汇总 二、实验内容 A&#xff1a;Established控制列表 拓扑图 配置步骤 1:配置各端口ip地址&#xff0c;配置登陆密码 R4: 登陆账号&#xff1a;ys 密码&#xff1a;123 2:…

iOS获取当前设备型号等信息总结 包含iPhone7和iPhone7P

#include <sys/types.h> #include <sys/sysctl.h>//获得设备型号(NSString *)getCurrentDeviceModel {int mib[2];size_t len;char *machine;mib[0] CTL_HW;mib[1] HW_MACHINE;sysctl(mib, 2, NULL, &len, NULL, 0);machine malloc(len);sysctl(mib, 2, mac…

Vue — 第五天(路由)

前端路由 问题导入 在前面完成的资产管理案例中&#xff0c; 我们是把列表区域和添加表单区域实现在了一个区域。当页面功能比较复杂时&#xff0c;我们需要它们拆分开来&#xff1a;一个页面中只显示一个区域。 一个比较直观的解决方案是把它们分别做成两个独立的网页文件&…

获取网络时间,在不同时间触发事件

<!DOCTYPE html><html lang"en"><head>   <meta charset"UTF-8">   <title>时间事件</title></head><body></body><script> var int_timenew Date();//使用Date获取网络时间;   functi…

iOS获取手机的IP地址

1.添加这五个库&#xff08;在联网的情况下&#xff09; #import <sys/socket.h> #import <sys/sockio.h> #import <sys/ioctl.h> #import <net/if.h> #import <arpa/inet.h>2.写一个方法 - (NSString *)getDeviceIPIpAddresses {int sockfd soc…

Vue — 第六天(vue-cli-介绍)

vue-cli-介绍 vue-cli是官方提供的开发vue项目的脚手架工具。 脚手架是为了保证各施工过程顺利进行而搭设的工作平台。 在开发过程中&#xff0c;脚手架工具是有用的&#xff0c;开发完成&#xff08;项目上线&#xff09;&#xff0c;它就没有用了。 vue-cli可以提供基于vue项…

python安装pyautogui遇到的gbk异常解决

一开始使用pip install pyautogui,报错,大概信息如下: Collecting pygetwindow (from pyautogui) Using cached https://files.pythonhosted.org/packages/01/ed/56d4a369c6e18f6b239d9ef37b3222ba308bfebf949571b2611ff7d64f1d/PyGetWindow-0.0.4.tar.gz ERROR: Complete …

NSString的各种用法总结(创建、截取、判断比较、转化数据类型、拼接、替换、添加、追加、读取、写入、删去、改变)

1、创建字符串1&#xff09;NSSring *str ”adf”;2&#xff09;NSString *str1 [NSString new];NSString *str2 [[NSString alloc] initWithString:”adf”]; &#xff08;等同于1&#xff09;4&#xff09;NSString *str3 [NSString stringWithFormat:”name is %”,”小…

Vue — 第七天(vue-cli-案例)

资料获取地址&#xff1a; github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH&#xff1a; gitgitee.com:wang_yu5201314/VUE_vuecli.git hero案例-项目介绍 功能介绍&#xff1a; 三个模块 英雄列表(只做这个)装备列表技能列表 英雄列表 列表组件删除功能添加组件编…

postman测试工具

做文件上传测试的时候可以选择输入方式为文件 做文件下载测试的时候&#xff0c;可以选择 转载于:https://www.cnblogs.com/thesun/p/10853226.html

webpack — 概述介绍

webpack概述 webpack是一个流行的前端项目构建工具&#xff08;打包工具&#xff09;&#xff0c;可以解决当前web 开发中所面临的困境。 webpack提供了友好的模块化支持&#xff0c;以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能&#xff0c;从而让程序员把工作的…

彻底解决iOS项目中 _OBJC_CLASS_$_XXXService, referenced from: 的类似问题

这是大家熟悉的开发过程中可能遇到的问题 这是提交源码到appStore不支持64位设备的提示 本人在提交项目到appStore时发生的的错误&#xff0c;提示必须要支持64的设备&#xff0c;然后自己赶紧进行相关的适应&#xff0c;出现了类似标题的问题&#xff0c;解决方法如下: 1、…

THUPCCTSAPIO2019:Far Away

流水账~ THUPC nmdwsmduliu&#xff01; THUPC Day -INF~Day -2 大概就是自己做题和每周两次的考试&#xff0c;lsy和fcw两个外校的来吊打我们qwqqq THUPC Day -1 Z208 长沙->北京 在车上看gzy/tjj/xzz打摆&#xff1f; THUPC Day 0 从火车站出来做地铁的时候和tjj做反了可海…

UIDocumentInteractionController之程序间文档共享

iOS中的沙盒可以让平台更加的安全&#xff0c;这也是沙盒给用户带来的最主要好处。不过由于沙盒的严格限制&#xff0c;导致程序之间共享数据比较麻烦。一般在程序间共享文档可以通过UIDocumentInteractionController类实现通讯。它支持在你的app中用其他app预览和显示文档。同…

webpack — 概述 (2)

webpack学前必备 webpack中文网 webpack官网 1. Webpack 介绍 Webpack 是什么?? (面试) 前端模块化打包工具WebPack可以看做是模块打包机&#xff1a;它做的事情是&#xff0c;分析你的项目结构&#xff0c;找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言…

VUE安装依赖命令总结

以下是个人用到过的vue安装包以及依赖命令&#xff08;在接触项目时&#xff0c;有未写到的会随时补充&#xff09; 1. vuex 作用&#xff1a;vue状态管理 安装&#xff1a;npm install vuex --save 开源地址&#xff1a;github 文档&#xff1a;https://vuex.vuejs.org/zh/ 2.…

SQL总结(快速参考)

SQL 语句 语句 语法 AND / OR SELECT column_name(s) FROM table_name WHERE condition AND|OR condition ALTER TABLE (add column) ALTER TABLE table_name ADD column_name datatype ALTER TABLE (drop column) ALTER TABLE table_name DROP COLUMN column_name AS (alias…

Vue -项目创建(rem适配项的设置)

3. 项目rem 配置 ####3.1 rem介绍 小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com 核心原理 1rem 当前 html 的fontSize也就是说 : rem是相当于根元素的字体大小// 使用div {width:2rem;height:2rem}// 媒体查询media (min-width:320px) {html {font-size : 20px}}media (mi…