为什么这个jQuery引用'$(“<div>”)'而不是'$(“<div> </div>”)'?</div>

时间:2011-09-03 22:23:03

标签: javascript jquery html

popup =
$("<div />")
.css(settings.popupCSS)
.attr("id", settings.popupId)
.css("position", "absolute")
.appendTo("body").hide();

我正在阅读一些jQuery代码,我对$("<div />")的含义感到有些困惑。它只是指那个时刻突然出现的<div />实例吗?

5 个答案:

答案 0 :(得分:5)

jQuery允许您使用$("<p><em>Your</em> HTML here!</p>")创建一个新的HTML元素,稍后您可以将其插入到文档中(例如,使用.append())。

<div />是“自闭”元素的XML / XHTML语法(不需要结束标记的元素)。在这种情况下,它相当于使用<div></div><div>通常不应该是自动关闭的,但jQuery无论如何都支持它。

答案 1 :(得分:2)

<div></div>相同。你将使用哪一个

并不重要

答案 2 :(得分:2)

$("<element />")创建一个未附加到DOM(文档对象模型)的该类型的新元素。一旦完成设置div,他们几乎肯定会在稍后将其添加到文档中。正如其他用户已经说过的那样,在这种情况下使用<div></div><div />并不重要,因为两者都会创建一个新的空div元素。

答案 3 :(得分:1)

从技术上讲,如果您使用$('<div />')$('<div></div>')无关紧要。

这段代码正在做的是创建一个新的div元素,为它添加一些css样式,添加id,定位它,将它附加到正文然后隐藏它。

我猜jQuery使用document.createElement来创建元素,这意味着浏览器知道如何渲染它。

答案 4 :(得分:1)

$("<div />")正在创建一个新的div标签作为jQuery对象并将其分配给popup变量。剩下的就是应用样式设置id并将其添加到<body></body> display: none

如果您要写出div标签的html,则会显示:<div id="{value of settings.popupId}" style="{value of settings.popupCSS}; position:relative;"></div>

appendTo,将其添加到正文并隐藏隐藏的内容:

<body>
    <div id="{value of settings.popupId}" style="{value of settings.popupCSS}; position:relative; display:none;"></div>
</body>