开发者

Why is this jQuery reference '$("<div />")' instead of '$("<div></div>")'?

开发者 https://www.devze.com 2023-04-02 10:53 出处:网络
popup = $(\"<div /&g开发者_如何学JAVAt;\") .css(settings.popupCSS) .attr(\"id\", settings.popupId)
popup =
$("<div /&g开发者_如何学JAVAt;")
.css(settings.popupCSS)
.attr("id", settings.popupId)
.css("position", "absolute")
.appendTo("body").hide();

I'm reading some jQuery code and I'm a bit confused as to what $("<div />") means. Is it just referring to the <div /> instance that's popping up at that moment?


jQuery allows you to use $("<p><em>Your</em> HTML here!</p>") to create a new HTML element, which you can later insert into the document (using .append(), for example).

<div /> is the XML/XHTML syntax for a "self-closing" element (one which doesn't require a closing tag). In this case, it's equivalent to using <div></div>. <div> isn't normally supposed to be self-closing, but jQuery supports it anyway.


It is same as <div></div>. It does not matter which one you'll use


A $("<element />") creates a new element of that type that is unattached to the DOM (document object model). Once they're done setting up the div they'll almost certainly be adding it to the document later on. As other users have already said, the use of <div></div> or <div /> doesn't matter in this case as both will create a new empty div element.


Technically it doesn't matter if you use $('<div />') or $('<div></div>').

What this code is doing is creating a new div element, adding some css styles to it, adding an id, positioning it, appending it to the body and then hiding it.

I'm guessing jQuery uses document.createElement to create the element and that means the browser knows how to render it.


$("<div />") is creating a new div tag as a jQuery object and assigning it to the popup variable. The rest is applying the style settings, id and adding it to the <body></body> with display: none.

If you were to write out the html for the div tag it would read: <div id="{value of settings.popupId}" style="{value of settings.popupCSS}; position:relative;"></div>

The appendTo, adds it to the body and the hide makes it hidden:

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

精彩评论

暂无评论...
验证码 换一张
取 消