Javascript 何时需要使用$（document）.ready（）？

我很好奇在什么情况下需要使用jquery的$（document）.ready（）或prototype的dom:loaded或该事件处理程序的任何其他变体

在我测试过的所有浏览器中，在结束标记之后立即开始与html元素和DOM交互是完全可以接受的。（例如

我的部门
$（'#myID'）。初始化元素（）；

因此，在这一点上，我想知道

$（document）.ready（）

是否只是为了减少编写页面加载期间运行的javascript代码所涉及的思维在浏览器第一次开始绘制页面和页面“就绪”时实际执行的javascript之间，经常会出现弹出和“工件”等渲染问题

是否存在需要

$（document）.ready（）

的场景

---

有什么原因我不应该像演示的那样编写初始化脚本吗？

主要原因是头部包含的外部文件。当你在

中包含一个文件时，它会立即运行。这意味着如果JavaScript与DOM交互，它需要包装在DOM就绪中

对于不引人注目的JavaScript和关注点的分离来说，它也是必需的。理想情况下，JavaScript和HTML是在单独的文件中。如果您遵循这一点，您的HTML中就不会有任何在线脚本标记

第二种方法是在你犯错误时保护自己不受晦涩难懂的浏览器错误的影响。在有些情况下，你不可能在错误发生后立即保存并操作DOM元素。（我正在看你的IE6！）

第三个原因是保持代码干净

将脚本标记混合到HTML中可以生成意大利面代码

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

一些HTML
... 
一些HTML
... 
一些HTML
... 
一些HTML
... 
一些HTML
... 
一些HTML
... 
一些HTML
... 

---

我们的代码比这糟糕十倍。读取/维护它里面的所有东西都是一件痛苦的事，只要加载DOM，在加载页面内容之前就会加载

$（document）.ready（）函数与其他使事件工作的方法相比有很多优点

---

使用$（document）.ready（），您可以在加载窗口之前加载或触发事件，或者执行任何您希望它们执行的操作。

对于外部脚本$（document）.ready（）可能是唯一的选项。对于内联脚本，则略有不同

根据HTML 4.01标准，上面显示的初始化技术是否合法似乎有点含糊不清：

加载文档时执行的脚本可以 修改文档的内容 动态。这样做的能力 取决于脚本语言 本身（例如“document.write” HTML对象模型中的语句 由一些供应商支持）

HTML文档被约束为符合HTML DTD 在处理任何脚本之后 元素

在HTML 5草案中，这一做法似乎得到了充分支持：

下面的示例显示了 脚本元素可用于定义 然后由其他用户使用的函数 文档的一部分。它还显示 如何使用脚本元素 在创建文档时调用脚本 正在解析，在本例中为 初始化表单的输出

函数计算（表格）{
var价格=52000；
if（形式、元素、制动器、检查）
价格+=1000；
if（表格、元素、无线电、选中）
价格+=2500；
if（form.elements.turbo.checked）
价格+=5000；
if（表格元素标签勾选）
价格+=250；
form.elements.result.value=价格；
}
算出你汽车的价格
基本成本：52000英镑

选择其他选项：


陶瓷制动器（1000英镑）
卫星广播（2500英镑）
涡轮增压器（5000英镑）
“XZ”贴纸（250英镑）

总计：£

计算（文件、表格、价格计算）；

我认为用$（document.ready（）初始化dom元素相当麻烦因此，请看呈现问题。您确实提出了一些好的观点。@SmokingRope初始化DOM元素是什么意思？不引人注目的JavaScript应该与渐进式增强一起使用。加载DOM后，您只能用JavaScript增强已经存在的DOM元素。通过初始化，我的意思与“渐进式”相同hancement.让一个测试html文件有1MB的@SmokingRope你这里的问题是你发送了1MB的html文件。你的html页面应该在没有JavaScript的情况下工作。如果它真的那么大，让JavaScript将加载覆盖作为内联脚本注入。如果没有JavaScript，你的页面看起来很差/凌乱，那么这就是它的问题所在elf.@SmokingRope避免跳转页面的正确方法是将它们呈现为它们应该处于的状态。您不应该以这种方式使用Javascript作为拐杖。+1用于指出规范。但我不相信IE在HTML5文档类型中能够正确运行。可能重复

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

some HTML
<script> ... </script>

<script>
 function calculate(form) {
   var price = 52000;
   if (form.elements.brakes.checked)
     price += 1000;
   if (form.elements.radio.checked)
     price += 2500;
   if (form.elements.turbo.checked)
     price += 5000;
   if (form.elements.sticker.checked)
     price += 250;
   form.elements.result.value = price;
 }
</script>
<form name="pricecalc" onsubmit="return false">
 <fieldset>
  <legend>Work out the price of your car</legend>
  <p>Base cost: £52000.</p>
  <p>Select additional options:</p>
  <ul onchange="calculate(form)">
   <li><label><input type=checkbox name=brakes> Ceramic brakes (£1000)</label></li>
   <li><label><input type=checkbox name=radio> Satellite radio (£2500)</label></li>
   <li><label><input type=checkbox name=turbo> Turbo charger (£5000)</label></li>
   <li><label><input type=checkbox name=sticker> "XZ" sticker (£250)</label></li>
  </ul>
  <p>Total: £<output name=result></output></p>
 </fieldset>
 <script>
  calculate(document.forms.pricecalc);
 </script>
</form>