Question

在教程中我遇到了这个jQuery：

var encodedName = $('<div />').text(name).html();

我之前没见过'<div />'。看起来不像是CSS选择器。有什么想法吗？

Answer 1

如果您说selector，我会略有不同。

那是Jquery Html attribute

如果将字符串作为参数传递给$（），jQuery会检查字符串以查看它是否看起来像HTML（i.e., it starts with <tag ... >）。如果不是，则将字符串解释为选择器表达式，如上所述。但是如果字符串看起来像是一个HTML片段，那么jQuery会尝试按照HTML的描述创建新的DOM元素。

前

$( "<p id='test'>My <em>new</em> text</p>" ).appendTo( "body" );

Answer 2

这根本不是一个选择器，而是一些HTML

var encodedName = $('<div />').text(name).html();

相当于

var encodedName = $('<div></div>').text(name).html();

或

var encodedName = $('<div>').text(name).html(); // HTML fragments are automatically closed

它从一些HTML构建一个jQuery元素，给它一些文本，然后获取innerHTML。

此代码的目的显然是将字符串编码为HTML。例如

console.log($('<div>').text("3 < 4").html());

日志

"3 &lt; 4"

Answer 3

这种结构创建了一个包含一个div元素的新jQuery对象。它可以略短：$("<div>")

Answer 4

<div />是一个空的div元素。使用$('<div />')，您可以创建一个空的div元素作为jquery对象（尚未在页面中的DOM /中），然后您可以根据需要进行操作并稍后插入到页面中。

Answer 5

$(...) jQuery选择器的输出始终是对Document元素（或零长度集合）的引用。为了使其成为现实。它将在内存中构造DOM元素以满足此要求。

因此$('<div>')返回对jQuery的引用，其中已选择DIV元素，但不在DOM中。 jQuery只在内存中创建它。

然后您可以将其附加到当前文档，如此;

$('<div>').appendTo('body');

您也可以对返回的对象执行选择，如此;

$('<div><span class="stuff"></span></div>').find('.stuff').html("<span>something else</span>");

这是什么：$（'<div>'）</div>

5 个答案: