InnerHTML - 自调用函数有效，但为什么Jquery文件没有准备好工作？

Question

我正在测试在innerHTML中写一些东西，没有任何事件处理程序。我想知道为什么 Jquery文档准备好没有工作 - 我认为它应该是一个自我调用功能？常规自我调用功能确实有效。

如果我在HTML中有这个

<div id="content">
  <p><span id="html_span1"></span></p>
  <p><span id="html_span2"></span></p>
</div>    

在JS中，常规自调用函数有效：

(function(){
     document.getElementById('html_span1').innerHTML = "self invoking function works";
}());    

但不是Jquery准备好的功能：

$(document).ready(function() {
    document.getElementById('html_span2').innerHTML = "Is this displayed?";
});    

如果我将Jquery函数放在顶部，那么另一个函数就会停止工作 - 为什么会这样？ 另外，自我唤起功能，以}（）结尾; - 额外的括号非常重要，否则它不起作用。我不明白那个括号的含义吗？

Answer 1

如果您正在使用Jquery，请更好地使用选择器：

$( document ).ready(function() {
// Handler for .ready() called.
    $("#html_span2").html("Is this displayed?");
});

看到它在运行并玩它： http://jsfiddle.net/c66t0tb2/