jquery的ready()方法与 <body onload=""> 有什么区别？

最新推荐文章于 2024-05-13 15:29:24 发布
最新推荐文章于 2024-05-13 15:29:24 发布
阅读量207 收藏
点赞数
分类专栏： jquery 文章标签： ready jquery load 脚本 onload ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sho_ko/article/details/84080220
版权
请查看 [url]http://qiusuozhe.com/archives/4391.html[/url]

一般情况下都是设置body标签的onload监听window的load事件.但load事件是要在页面的元素全部加载完了才触发的,如果页面上图片较多或图片太大,就会导致初始化的代码未被执行的时候用户就做了其它操作了. Jquery库提供了一个非常方便好用的函数( $(selector).ready()),让我们可以在页面的dom加载完后就可以做相应的操作(当然,这还得看用户浏览器的支持).,而不用等待全部元素加载完成.例如: 
$(document).ready(function (){ alert('use in page script tag') }); 
$(document).ready(function (){ alert('use in import js file') });

现在让我们来研究一下这个函数的实现.
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded事件(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.

jquery ready可以写好几个，每个都执行
onload只能写一个，你写好几个，也只执行一个，好像是执行最后一个
sho_ko
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
<body>标签中onload方法与 Jquery库函数 $(selector).ready()比较
hungerliu的博客
12-14 744
这个方法的不足之处是如果遇到网页需要加载的内容过多，就可能会发生用户在脚本执行前就进行了一些操作，导致问题发生。 $(document).ready(function (){ alert('use in page script tag') ;});ready方法则会在页面的dom加载完后就可以加载一些方法(当然与浏览器的支持有一定关系，不如onload通用)，而不用等待全部元素加载完
jQuery中ready()方法的理解
qq_36438460的博客
02-06 3913
ready是什么？ ready是jQuery的文档就绪函数，它用于防止文档在完全加载（就绪）之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数，操作可能失败。 ready示例 先来一段代码示例： 一般来说，html代码加载是从上往下的，对于上面的代码，当js开始加载时，body部分还未加载，此时页面还没有div标签，$(“div”)就无法获取到div的元素，所以没办法实现上面的点击...
jQuery中的ready()函数：优雅地处理页面加载事件
最新发布
一起coding，一起嗨。
05-13 527
jQuery中的ready()函数：优雅地处理页面加载事件
jQuery ready事件的4种写法
xtho62的博客
02-23 1138
在 jQuery 中，对于 ready 事件，共有以下 4 种写法。 语法： //写法1： $(document).ready(function(){ …… }) //写法2： jQuery(document).ready(function(){ …… }) //写法3： $(function(){ …… }) //写法4： jQuery(function(){ …… }) 【代码分析】 在写法 1 中，$(document) 表示先选取 document，然后
jQuery中的$(doncument).ready()详解
qq_62042780的博客
05-27 1833
window.onload=function(){alert("welcome");} 该语句的作用是希望在页面加载完，自动执行定义JS代码（function）。 $(document).ready(function(){……})这个函数是用来取代页面中的window.onload; $(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度。 一、$(document).ready()和onload的区别 1.执行时机 JS(window.on
jQuery 事件 - ready() 方法
weixin_44345448的博客
05-16 314
Document //jQuery 名称冲突 jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自...
JQuery onload、ready概念介绍及使用方法
10-27
在JQuery中，可以链式调用多个`ready`函数，它们会按照添加的顺序依次执行，这比HTML中的`onload`事件更加灵活，避免了`<body onload="...">`的写法，使得代码更加清晰和易于维护。 当涉及到页面关闭时，`$(window)...
JQuery的read函数与js的onload不同方式实现
10-27
总结一下，`window.onload`和`jQuery .ready()`的主要区别在于： 1. **触发时机**：`window.onload`等待整个页面完全加载，包括所有资源；而`jQuery .ready()`只等待DOM加载完成。 2. **执行效率**：`jQuery .ready...
JQuery-- onload，ready方法详细解说
07-17
JQuery onload、ready 方法详细解说 在 JavaScript 库中，JQuery 提供了两种事件处理机制，即 onload 和 ready。它们都是在页面加载完成后触发的事件，但是它们之间有着一定的区别。 首先，我们需要了解这两种事件...
全面解析jQuery $(document).ready()和JavaScript onload事件
01-19
对元素的操作和事件的绑定需要等待一个合适的时机,可以看下面的例子: <!DOCTYPE html> <meta charset=utf-8> <...document.getElementById...<div id=panel>click me.</div> </body> </html>
浅析$(function) ready和onload 的区别
10-21
另一方面，`onload` 是原生JavaScript中的一个事件，通常用于`window.onload` 或 `<body onload="...">`。当整个页面，包括所有的DOM元素、样式表、脚本、图片等所有资源都已加载完毕时，`onload` 事件才会触发。这...
jQuery(document).ready(function($) { });的几种表示方法
11-24
在写jquery的时候，因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });，所以忘记了其他的几种表示方法，今天花了几分钟特意记录了一下。
jQuery的引入及onload事件的几种方式
04-13 6535
（一）jQuery下载 链接：https://pan.baidu.com/s/1ODSzeDbx1geKrDuwTuqvhw 提取码：pz0e （二）onload事件的几种方式（普通方式，jQuery方式） 新建web项目，导入jQuery进js文件夹 比如现在我们要实现如下功能：弹出“helloworld”对话框，普通的方式有以下几种 第一种方式： <!DOCT...
html页面改变js的ready,jQuery 的 ready()的纯js替代方法
weixin_36328790的博客
06-03 635
ready方法是 jQuery 实现的在 html 页面在 DOM(Document Object Model, 文档对象模型) 树完全加载完成后触发的一个方法. 因为它接收的方法在页面中所有的 DOM 都可访问时才执行, 所以此时你完全可以访问和操作 html 中的元素.在 jQuery 3.0 之前, 典型的匿名函数方式的用法如下:$(document).ready(function() {/...
$(document).ready、body.Onload()和 $(window).load的区别
热门推荐
john2522的专栏
08-20 3万+
JavaScript文档加载完成事件 window.load(function(){...})和body.onload()都存在同样一个问题，那都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.$(document).ready()是文档结构已经加载完成（不包含图片等非文字媒体文件），不必等到所有的加载完毕。 原理是： $(do
前端处理主页大图片加载慢的方法
weixin_42165130的博客
02-22 1万+
可以先用一个压缩过的缩略图去展示，等到所有的东西都加载完毕之后，再用大图片去替代。这里建议用window.onload()。而不是$(document).ready(）   区别如下：   Jquery的ready()与Javascrpit的load()   window.onload() $(document).ready() 加载时机   必须等待网页全...
Jquery对象、代替body标签的onload、事件机制、同一函数实现get\set
Cactus
08-01 8627
Jquery对象　 jquery提供了很多遍历的函数，如each(fn)，但是使用这些函数的前提是：你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单，通过下面一些方式（只是一部分）： 　　代码 　　var a = $("#cid")
jquery当中$(function() 与“$(document).ready(function(){})和 window onload的区别
mark_to_win的专栏
03-27 532
马克-to-win：$(function() 与“$(document).ready(function(){})”是一样的，（二者都存在时，谁在前面谁先执行。）只不过头者是简写， 二者都是document加载完就执行，不过不包括图片或视频。这一点与window.onload不一样。（no experiment support） 例 1.2_b: <html> <head> ...
jQuery中$(document).ready()函数的理解
weixin_42940821的博客
03-08 9780
(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用(document).ready()方法是事件模块中最重要的一个函数，可以极大的提高Web应用程序的响应速度，jQuery就是用(documen...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="jquery-3.6.4.min.js"></script> <script> $("#add").addEventListener('click',function(event) { let num1 = $("#num1").val(); let num2 = $("#num2").val(); let result = num1+num2; $("#result").val(result); }); </script> </head> <body> <form> 数据1：<input type="text" id="num1"/> <br /> 数据2：<input type="text" id="num2"/> <br /> <input type="submit" value="+" id="add"/> <input type="submit" value="-" id="jian"/> <input type="submit" value="*" id="cheng"/> <input type="submit" value="/" id="chu"/> <br /> 运算结果：<input type="text" id="result"/> </form> </body> </html> 请问有什么问题？该怎么修改？
06-09
可以使用jQuery的$(document).ready()函数或者原生的window.onload事件来确保DOM元素加载完毕后再添加事件监听器。 2. 在计算结果时，需要将输入的数值转换为数值类型，否则会出现字符串拼接的问题。可以使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值