$(document).ready() / $(function(){ }) 的作用？

理解jQuery与JS加载机制
最新推荐文章于 2025-10-18 09:28:40 发布
原创 最新推荐文章于 2025-10-18 09:28:40 发布 · 5k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#jquery #$(function(){ }) #作用 #$(document).ready()

本文探讨了jQuery中$(document).ready()的功能及其与window.onload的区别。解释了DOMContentLoaded事件的作用，并对比了jQuery与纯JS在页面加载过程中的不同。

在使用jquery的时候，我们会加上$(document).ready(function（）{} }) 或者简单写：$(function(){  }),

为什么要这么做呢？

 

因为jquery是对DOM进行操作的，也就是说需要 DOM 结构加载完成之后，jquery才能工作，

那么 $(document).ready() 或者 $(function(){}) 的作用就是等待DOM 结构加载完成，然后再

执行里面的jquery操作；


js有一个 window.onload( ) ,这个的作用是等待页面上的所有资源都加载完成才执行函数里面的

代码，和jquery是有区别的。


但是，在js中，也有一个 DOMContentLoaded 事件 和 jquery 的作用是一样的；


jQuery(document).ready(function($) { });的几种表示方法
11-24
在写jquery的时候，因为平时用sublime text快捷键生成jQuery(document).ready(function($) { });，所以忘记了其他的几种表示方法，今天花了几分钟特意记录了一下。
$(document).ready(function() {})不执行初始化脚本
09-04
$(document).ready(function() { // 在这里编写你的初始化脚本 }); ``` 在这个例子中，当DOM完全加载时，`function() { ... }`中的代码会被执行。通常，这比`window.onload`事件更早触发，因为它等待的是DOM的加载...
$(document).ready()使用讨论
博海软件
07-19 355
一、先为说说 $(document).ready() 的功能：     1. JQuery API对 $(document).ready() 的解释是：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。     2. 我的理解：$(document).ready() 用于当前页面加载完成后，就执行其定义的方法，用于异步加载，提交页面响影的速度，用于在一个页面中包含多个页面的情况（一个页面中...
jQuery .ready() 方法完全指南：确保 DOM 安全操作的基石
最新发布
weixin_42107409的博客
10-18 726
本文介绍了jQuery中.ready()方法的核心概念和使用要点。.ready()会在DOM加载完成后立即执行，而无需等待图片等外部资源加载，比window.onload更早触发。文章详细讲解了.ready()的三种语法形式，推荐使用简洁的$(function(){...})写法。通过对比表格明确区分了.ready()和window.onload的关键差异。最后给出了最佳实践建议：所有jQuery代码都应包裹在.ready()中，放在</body>前，使用简写形式。这是确保DOM操作安全可靠的基
$(document).ready(function()
weixin_45156514的博客
05-20 5073
$就是jquery的简写，$()就是一个选择器，document是html的所有元素，$(document）返回一个数组， 而这个数组是一个对象，这个对象调用ready方法，function则是ready里面的参数，就是说等这个页面全部加载完之后就去执行写入的js。 而且在$(document）.ready(function(){ }); 里面写入的js特效是和下一个里面写入的特效是不冲突的，俩者之间是不影响的， 因此可以通过$(function(){});在一个页面中加载多个js。 read.
jquery中$(document).ready()作用
tudou721的专栏
02-23 347
       $(document).ready()，这是学习jQuery首先要明白的jquery语句：如果你想在你的页面应用jQuery,就得在页面中引 用$(document).ready()功能函数。$(document).ready()函数里面的内容将会在整个页面其他内容下载之前预先加载。代 码如下所示： $(document).ready(function(...
Jquery中$(document).ready()的作用
rongwenbin的专栏
08-09 2760
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。 1.执行时间 window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 $(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 2.编写个数不同 window.on
Jquery中$(document).ready(function(){ })函数的使用详解
01-19
jQuery(document).ready(function(){}); 使用jQuery的好处是它包装了各种浏览器版本对DOM对象(javascript的DOM对象你应该知道吧，就是它了)的操作. 比如jquery写法：$(“div p”); // (1)$(“div.container”); // ...
jquery中的$(document).ready()使用小结
12-11
$(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和...
Jquery中"$(document).ready(function(){ })"函数的使用详解
10-26
$(document).ready(function() { alert("hello"); }); 这行代码将会在页面加载完成后立即显示一个包含“hello”的对话框。它等同于传统的JavaScript写法： ('hello');"> 但在使用JQuery时，我们倾向于将表现和...
jquery $(document).ready() 方法的作用
tinny77的专栏
05-13 1102
javascript处理HTML样式,通常,JavaScript代码在浏览器初次遇到它们时就会执行,而在浏览器处理头部时,HTML还不会呈现样式。因此,我们需要将代码延迟到DOM可用时再执行(可以将js代码直接写在html文件的末尾)。 通过使用 $(document).ready() 方法, jQuery支持我们预定在DOM加载完毕后调用某个函数,而不必等待页面中的图像加载。尽管不使用jQue
Jquery中的$(document).ready()详解
wyyy2088511的博客
05-27 4861
确保在 元素的onload事件中没有注册函数，否则可能不会触发$(document).ready()事件。我尝试用下面的例子来演示这个情况，但是没有成功，所以我想这种情况只是可能发生。复制代码代码如下:< html>< head>//下面是load的函数含有jquery注册函数$//下面是jQuery的代码$("p").append("我的第一个jQuery代码!");});< /script>< /head>
$(function(){})和$(document).ready(function(){})
只作为个人备忘录
11-12 825
document.ready和onload的区别——JavaScript文档加载完成事件 页面加载完成有两种事件 一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件） 二是onload，指示页面包含图片等文件在内的所有元素都加载完成。 用jQ的人很多人都是这么开始写脚本的： $(function(){// do something});
$(document).ready(function (){})和$(function(){})无区别
likingsn的技术专栏
08-29 762
最近在学习和使用jquery，经常会用到 $(document).ready(function (){})和$(function(){})，网上查了下，shuo
jQuery的document ready与 onload事件——你真的思考过吗？
weixin_33736048的博客
07-04 172
在进行实验和资料查询时，我遇到了几个关键问题： 1. window.onload到底是什么加载完触发？ 2. body为什么会有onload事件？ 3. 为什么是window.onload，而不是document.onload？ 4. document ready到底是什么ready，DOM渲染完成？ 5. jQuery怎么实现$(document).ready？ 6. jQuery的...
$(document).ready(function(){})、$().ready(function(){})和$(function(){})区别
qq_16632067的博客
10-15 588
$(document).ready(function(){}),$().ready(function(){})和$(function(){})三个有区别么 三者都是一样的， 最完整的写法是：$(document).ready(function(){}) ready() 函数仅能用于当前文档，因此无需选择器。 所以document选择器可以不要，那么就可以写成： ().ready(function())最后().ready(function(){}) 最后().ready(function())最后的默认事件
document.ready
dgjianke的专栏
01-28 80
[size=large] [color=green]//等待dom元素加载完毕.[/color] [color=red]$(document).ready(function(){ alert("Hello World!"); }); //test2 $(document).ready(function(){ ...
$(document).ready(function() {
08-08
`$(document).ready(function() { ... });` 是 jQuery 提供的一个方法，用于确保在 DOM（文档对象模型）加载完成后再执行其中的 JavaScript 代码。这样可以避免因为 DOM 尚未加载完成而导致的元素找不到、操作失败等问题。 --- ### 语法详解： ```javascript $(document).ready(function() { // 这里的代码会在 DOM 完全加载后执行 }); ``` - `$(document)`：将原生的 `document` 对象封装为 jQuery 对象。 - `.ready()`：是一个 jQuery 方法，用于监听 DOM 加载完成事件。 - `function() { ... }`：DOM 加载完成后执行的回调函数。 --- ### 简写方式（最常用）： ```javascript $(function() { // DOM 加载完成后执行 }); ``` 这是 `$(document).ready()` 的简写形式，功能完全一样，更简洁。 --- ### 示例：在 DOM 加载完成后修改页面内容 ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>jQuery ready 示例</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(function() { $('#myButton').click(function() { $('#myText').text('按钮已点击，jQuery 正常运行！'); }); }); </script> </head> <body> <p id="myText">点击按钮测试 jQuery 是否生效</p> <button id="myButton">点击我</button> </body> </html> ``` --- ### 注意事项： 1. **不要在 ready 之前操作 DOM** 如果在 `$(document).ready()` 之外直接操作 DOM 元素，可能会因为元素尚未加载而失败。 ❌ 错误示例： ```javascript $('#myButton').click(...); // 如果 DOM 还没加载，会找不到该元素 $(function() { // ... }); ``` 2. **多个 ready 是允许的** 可以在多个 `<script>` 中使用 `$(document).ready()`，jQuery 会按顺序依次执行。 3. **兼容性** 在 jQuery 3.0+ 中，`.ready()` 依然支持，但推荐使用 `.on('ready')` 或简写方式。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值