你什么時候需要使用$（document）.ready（）？

Question

我很好奇什么情況確實需要使用jquery的$（document）.ready（）或prototype的dom：loaded或者此事件的處理程序的任何其他變體。

在我測試的所有瀏覽器中，在結束標記之后立即開始與html元素和DOM進行交互是完全可以接受的。 （例如

<div id="myID">
 My Div
</div>
<script type="text/javascript">
$('#myID').initializeElement();
</script>

所以在這一點上我想知道$(document).ready()是否只是為了減少編寫在頁面加載期間運行的javascript代碼所涉及的思路。 在使用$(document).ready()的情況下，在瀏覽器首先開始繪制頁面之間定期渲染諸如彈出和“工件”之類的問題，並且當頁面“准備好”時實際執行javascript。

有沒有需要$(document).ready()場景？

是否有任何理由我不應該編寫初始化腳本？

Answer 1

主要原因是頭部包含的外部文件 。 當您在<head>包含文件時，它會立即運行。 這意味着如果JavaScript與DOM交互，則需要將其包裝在Dom Ready中。

它也需要不引人注目的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>

我們的代碼差了十倍。 閱讀/維護是一種正確的痛苦

Answer 2

在外部腳本的情況下，$（document）.ready（）可能是唯一的選擇。 至於內聯腳本，它有點不同。

根據HTML 4.01標准，無論上面顯示的初始化技術是否合法，似乎有點模棱兩可：

http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.4

加載文檔時執行的腳本可能能夠動態修改文檔的內容。 這樣做的能力取決於腳本語言本身（例如，某些供應商支持的HTML對象模型中的“document.write”語句）。

在處理任何SCRIPT元素之前和之后，HTML文檔都被約束為符合HTML DTD。

在HTML 5草案中，似乎非常清楚這種做法得到了完全支持：

http://www.w3.org/TR/html5/scripting-1.html#scripting-1

以下示例顯示了如何使用腳本元素定義隨后由文檔的其他部分使用的函數。 它還顯示了在解析文檔時如何使用腳本元素來調用腳本，在這種情況下，初始化表單的輸出。

<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>

Answer 3

在加載DOM之后和加載頁面內容之前，其中的所有內容都將加載。

$（document）.ready（）函數比其他使事件工作的方式有很多優點。 首先，您不必在HTML中添加任何“行為”標記

使用$（document）.ready（），您可以在窗口加載之前加載或觸發事件或者您希望它們執行的操作。

你什么時候需要使用$（document）.ready（）？

問題描述

3 個解決方案

解決方案1
10 2011-05-15 00:54:53

解決方案2
6 已采納 2011-05-16 07:18:18

解決方案3
1 2011-05-15 00:55:59

你什么時候需要使用$（document）.ready（）？

問題描述

3 個解決方案

解決方案1 10 2011-05-15 00:54:53

解決方案2 6 已采納 2011-05-16 07:18:18

解決方案3 1 2011-05-15 00:55:59

解決方案1
10 2011-05-15 00:54:53

解決方案2
6 已采納 2011-05-16 07:18:18

解決方案3
1 2011-05-15 00:55:59