jquery - 这是什么：$（'')

Question

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

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

我没见过'<div />'以前的。看起来不像 CSS 选择器。有任何想法吗？

Answer 1

如果你说，我略有不同selector。

那是Jquery Html属性

如果一个字符串作为参数传递给 $()，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 < 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>");