jQuery的VS JavaScript示例

我讀W3Schools的，發現這個例子：jQuery的VS JavaScript示例

<body> 

<p>Hello World!</p> 
<p>The DOM is very useful!</p> 
<p>This example demonstrates the <b>length</b> property.</p> 

<script type="text/javascript"> 
x=document.getElementsByTagName("p"); 

document.write("------<br />"); 
for (i=0;i<x.length;i++) 
    { 
    document.write(x[i].innerHTML); 
    document.write("<br />"); 
    } 
document.write("------"); 
</script> 
</body>

它工作得很好。後來我想用

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Demo Page</title> 

<script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript" src="code.js"></script> 
    </head>

做與jQuery相同的，然後在code.js文件有

$(document).ready(function()   { 

     x=document.getElementsByTagName("p"); 

     document.write("------<br />"); 
     for (i=0;i<x.length;i++) 
      { 
      document.write(x[i].innerHTML); 
      document.write("<br />"); 
      } 
     document.write("------"); 

       });

但與第二個例子中，使用jQuery的頁面加載永遠永不打印p標籤innerHTML值。

這是爲什麼？

來源

2011-06-04 Dora G.

這是因爲你使用W3Schools學習。 W3Schools是一個不好的參考和充滿破碎的代碼。 [從MDN學習]（https://developer.mozilla.org/en-US/learn/javascript） – Raynos 2011-06-04 22:43:40

感謝您的參考...但stil爲什麼不是上述代碼工作？ – 2011-06-04 22:45:21

作爲Raynos所說的後續工作，我會提供此鏈接，因爲如果您繼續從w3schools學習，最終會遇到它：http://w3fools.com/ – cabaret 2011-06-04 22:45:25

在document.ready重寫文檔後調用document.write。並且單個返回值document.getElementsByTagName是直播列表列表變爲空。

所以實際發生的是該文件包含。

<p>Hello World!</p> 
<p>The DOM is very useful!</p> 
<p>This example demonstrates the <b>length</b> property.</p>

當文檔準備好你打電話x = document.getElementsByTagName("p");和x包含<p>元素的數組。但這是一個直播列表並反映了文檔的實時狀態。因此，當<p>元素被刪除時，列表會自動更新。

然後您撥document.write與"-----<br/>"，這將清空文件並用它替換它。因此，變量x現在包含0 <p>元素，因爲文檔中有0個元素。

for循環不運行，因爲x.length === 0

如前所述，這是打破，因爲W3Schools的給你斷碼。

我強烈建議你學習從the MDN

Live Example

一種更好的方式來實現這一目標與jQuery是：

$(document).ready(function() { 

    var ps = $("p"); 
    var body = $(document.body); 

    body.append("------" + "<br/">); 
    ps.each(function() { 
     body.append(this.innerHTML + "<br/>"); 
    }): 
    body.append("------"); 

});

Live Example

來源

2011-06-04 22:45:18 Raynos

不要使用後document.write DOM被加載，就像jQuery的$(document).ready一樣。事實上，不要在jQuery中使用document.write。改用DOM操作。例如：

$(document).ready(function() { 
    var x = $('p'), 
     toAdd = ''; 

    x.each(function() { 
     toAdd += this.innerHTML; 
    }); 

    $(document.body).append(toAdd); 
});

見$，each，append。

基本上，學習jQuery的範例和模式，並使用它們。不要指望能夠將jQuery語法隨機刪除到Javascript代碼中。此外，不要聽W3Schools。

來源

2011-06-04 22:45:57 lonesomeday

+1。 – 2011-06-04 22:49:15

你自己錯過了一些範例。 '$（this）.html（）'優於'this.innerHTML'，'toAdd'應該是一個字符串數組，它被添加到並附加到主體時摺疊。請看這裏：http：//pastie.org/2020158 – 2011-06-04 22:51:25

@Raynos否，'this'不是一個數組... – 2011-06-04 22:53:15

你應該閱讀從適當resource約document.write：

書面形式向已加載，而無需調用document.open()將自動執行document.open調用的文件。一旦你完成了寫作，建議調用document.close（），告訴瀏覽器完成加載頁面。

當您在document.ready事件上運行jQuery代碼時，文檔（結構）已經加載。這意味着document.open被調用。 Lets see what MDC says about it：

如果目標中存在文檔，則此方法將清除它（請參閱上面的示例）。

這意味着所有現有的內容都被刪除。因此，您的代碼無法訪問p元素，因爲它們不再存在。

爲什麼它沒有jQuery？

在原始代碼中，JavaScript在結構完成加載之前執行（因爲它是它本身的一部分）。因此document.open不叫，內容也不會被清除：

如果document.write()呼叫會在HTML代碼直接嵌入，那麼就不會調用document.open()。

有幾乎沒有一個理由使用document.write。如果要修改文檔，請改用適當的DOM操作方法。 You can find a list of methods provided by jQuery here.

來源

2011-06-04 22:47:54

這並不完全準確。 _「如果document.write（）調用直接嵌入到HTML代碼中，那麼它將不會調用document.open（）。」_這實際上就是OP代碼中的情況。你引用的第二部分當然是好的。 – 2011-06-04 22:52:27

@Matt：我實際上是指jQuery代碼...我編輯了我的答案，我希望現在有點更清楚了...... – 2011-06-04 22:55:20

這是因爲每次jQuery在文檔中寫入一些新元素，所以$（document）.ready（）;應再次進行另一次
也許解決方案是一個新元素，寫這樣一個「格」

$(document).ready(function()   { 
x=document.getElementsByTagName("p"); 
    $('div.myDiv').html("------<br/>"); 
    for (var i=0; i<x.length; i++) 
    { 
     $('div.myDiv').html(x[i].innerHTML()); 
     $('div.myDiv').html("<br />"); 
    } 
    $('div.myDiv').html("------"); 
});

的身體，你應該把一個「格」一類的名稱，如「myDiv」

來源

2011-06-04 23:01:03 homayoun

jQuery的VS JavaScript示例

回答

相關問題