script脚本中写不写$(document).ready(function() {});的差别

本文介绍如何使用jQuery实现点击段落后使该段落隐藏的功能。通过将事件处理程序绑定到页面加载完成事件上,确保DOM元素加载完毕后再进行操作,避免出现错误。同时探讨了不同放置<script>标签位置对代码执行的影响。

$(document).ready() 里的代码是在页面内容都载入完才运行的,假设把代码直接写到script标签里。当页面载入完这个script标签就会运行里边的代码了,此时假设你标签里运行的代码调用了当前还没载入过来的代码或者dom,那么就会报错。当然假设你把script标签放到页面最后面那么就没问题了,此时和ready效果一样。

$(document).ready(function(){})能够简写成$(function(){});


点击段落后,此段落隐藏:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>

<body>
  <p>If you click on me, I will disappear.</p>
</body>

</html> 

假设把$(document).ready(function() {});去掉后,无法隐藏段落:

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $("p").click(function(){
    $(this).hide();
  });
</script>
</head>

<body>
  <p>If you click on me, I will disappear.</p>
</body>

</html> 

可是把script放到页面最后的话,就可恢复隐藏效果:

<html>
<head>
</head>

<body>
  <p>If you click on me, I will disappear.</p>
</body>

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
  $("p").click(function(){
      $(this).hide();
  });
</script>

</html> 



<think>我们正在讨论JavaScript中的普通函数与jQuery的$(document).ready()方法之间的区别。根据引用内容,我们可以总结以下几点:1.**执行时机**:-**普通函数**:当被调用时执行,无论页面加载状态如何。-**`$(document).ready()`**:在文档的DOM结构加载完成后执行,必等待图片等其他资源加载完成。因此,它比`window.onload`(等待所有资源加载完成)执行得更早。2.**多次使用**:-**普通函数**:可以多次定义,但同名函数会覆盖之前的定义(除非使用同的函数名)。-**`$(document).ready()`**:可以多次使用,多个`ready`事件处理函数会按照注册顺序依次执行,而会覆盖。3.**与`window.onload`的区别**:-引用[3]指出:`window.onload`需要等待整个页面(包括图片等)加载完成,而`$(document).ready()`只需等待DOM结构加载完成。4.**简形式**:-`$(document).ready(function(){})`可以简为`$(function(){})`或`$().ready(function(){})`(引用[4])。5.**使用目的**:-使用`$(document).ready()`是为了确保在操作DOM元素之前,这些元素已经被加载到DOM树中,避免出现操作未加载元素的情况。6.**与普通事件绑定的区别**:-引用[5]中提到了`$(".btn").click(function(){...})`,这表示给类为`btn`的元素绑定点击事件。而`$(document).ready()`则是等待DOM就绪后执行其内部的代码,包括绑定事件等操作。**总结区别**:-普通函数需要被显式调用才会执行,而`$(document).ready()`中的函数会在DOM就绪时自动执行。-`$(document).ready()`是jQuery提供的一种机制,用于在DOM就绪后执行代码,而普通函数没有这种自动触发的机制(除非将其放在`ready`中或通过事件触发)。**示例**:假设我们有一个按钮,需要在DOM就绪后绑定点击事件:```javascript//使用$(document).ready()确保DOM就绪后再绑定事件$(document).ready(function(){$("#myButton").click(function(){alert("Buttonclicked!");});});```如果用`ready`,而直接将这段代码放在`<script>`标签中(且该标签在按钮元素之前),那么代码执行时按钮尚未加载,绑定会失败。而`ready`确保了代码在DOM就绪后执行,此时按钮已存在。**相关问题**:根据以上内容,生成以下问题:</think>### JavaScript普通函数与jQuery的$(document).ready()区别解析 #### **1. 执行时机同** - **普通函数**: 需**显式调用**才会执行(如`myFunction()`),执行时机完全由开发者控制。 - **`$(document).ready()`**: 在**DOM树构建完成后自动触发**(无需等待图片/样式表等资源加载),确保DOM可操作后才执行内部代码[^3][^4]。 #### **2. 与window.onload的区别** | 特性 | `$(document).ready()` | `window.onload` | 普通函数 | |---------------------|-------------------------------|-------------------------------|---------------| | **触发时机** | DOM解析完成时 | 所有资源(图片等)加载完成后 | 手动调用时 | | **执行速度** | ⚡️ 更快 | ⚠️ 较慢 | 即时 | | **多次注册** | ✅ 可重复添加,按序执行 | ❌ 后者覆盖前者 | 无此机制 | #### **3. 代码结构差异** ```javascript // 普通函数(需主动调用) function initPage() { console.log("手动触发"); } initPage(); // 必须显式调用 // $(document).ready()(自动执行) $(document).ready(function() { console.log("DOM就绪后自动执行"); }); // 简形式(功能相同) $(function() { console.log("简形式"); }); ``` #### **4. 核心使用场景** - **`$(document).ready()`**: 用于**初始化DOM操作**(绑定事件、修改元素内容等),避免操作未加载的元素[^2][^5]。 ```javascript $(function() { $("#btn").click(() => alert("按钮生效!")); // 确保按钮存在 }); ``` - **普通函数**: 适用于**通用逻辑封装**(数据处理、工具方法等),依赖特定DOM状态。 #### **5. 典型错误示例** ```html <script> // 错误:脚本在按钮加载前执行,导致绑定失败 document.getElementById("myBtn").onclick = handleClick; </script> <button id="myBtn">点击</button> <!-- 按钮在脚本之后 --> <!-- 正确做法 --> <script> $(function() { // DOM就绪后执行,按钮必定存在 $("#myBtn").click(handleClick); }); </script> ``` > **关键总结**: > `$(document).ready()` 是 **jQuery提供的DOM就绪事件处理器**,解决脚本与DOM加载顺序问题; > 普通函数是 **基础JavaScript执行单元**,无自动触发机制[^4][^5]。 --- ### 相关问题 1. 如果同时使用多个`$(document).ready()`,它们的执行顺序是怎样的? 2. 如何在原生JavaScript中实现类似`$(document).ready()`的功能? 3. 为什么说`$(document).ready()`比`window.onload`更适合做页面初始化? 4. 在单页面应用(SPA)中,`$(document).ready()`的使用有哪些注意事项? [^1]: jQuery中的$(document).ready(function)应用场景 [^2]: $(document).ready()确保代码在内容加载后执行 [^3]: $(document).ready()与window.onload的执行时机对比 [^4]: $(function(){})$(document).ready()的简形式 [^5]: $(document).ready()解决DOM操作时机问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值