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

回答

相关问题