jQuery foo.html("bar") 没有改变 foo[0]，那么这是什么意思呢？

Question

使用jQuery，在Firebug中，如果一一进行如下操作：

foo = $('<div>foo</div>')

foo[0]  // => <div>

foo.html('<span>bar</span>')

foo.html()  // => "<span>bar</span>"

foo[0]  // => <div>

$('body').prepend(foo)  // => shows bar at top of page

奇怪的是foo.html()显示的是span，但是foo[0] 显示 div...为什么不一致？看起来 foo 成为了 span 元素的 jQuery 包装器。 foo[0] 不应该也显示 span 吗？

Answer 1

html() 写入/读取

元素的innerHtml 属性；它不会替换该元素。您现在实际拥有的是

bar

。所以不，这并不是特别奇怪的行为。 :)

Answer 2

jQuery 对象上的索引访问器访问 jQuery 序列中的元素。在您的示例中，您创建了一个仅包含一个元素 - div 的 jQuery 序列。您可以将该 div 的内容设置为任何类型的复杂树，但它仍然只是一个元素。 html('') 设置节点的内部内容，但外部节点保持不变。