Question

我有一个基本的HTML页面，仅包含：

<body id="body">
<script src="js/jquery-2.0.3.js"    type="text/javascript"></script> 
<script src="js/three.min.js"       type="text/javascript"></script> 
<script src="js/stats.min.js"       type="text/javascript"></script> 
<script src="js/application.js"     type="text/javascript"></script>
</body>

作为index.html页面的主体，application.js的内容为：

function init() {
    var container = $('div');
    container.attr('id', 'container');
    $('body').append(container);
    alert('Container: ' + $('#container').length);
}

$(function() {
    init();
});

所以这显然是一些非常基本的代码，我创建了一个div并将其附加到正文中。但是，我调用的alert调用返回0，当我通过chrome检查DOM树时，不会添加div。

当我将脚本文件添加到<body>标记的底部，并从jQuery init()块调用ready()时，为什么会发生这种情况？看起来像是一个基本而简单的任务。

注意：chrome的控制台

中没有抛出任何错误

Answer 1

$('div')

这会使用元素选择器选择页面中的所有<div>元素您没有任何<div>元素，因此它返回一个空的jQuery对象。

因此，其余代码无效。

听起来你真的想要创建一个新元素：

$('<div />')

Answer 2

您的专线var container = $('div');并非正在创建 DIV，而是选择。如果您想创建容器，请执行var container = $('<div></div>');

因此，您当前的代码返回一个空的jQuery对象，但是您没有注意到jQuery与它们很好地匹配，并且什么都不做。

令人困惑的jQuery行为

2 个答案: