jQuery 中的 $('<element>') 与 $('<element />')

Posted 2023-03-05

技术标签:

【中文标题】jQuery 中的 $(\'<element>\') 与 $(\'<element />\')【英文标题】：$('<element>') vs $('<element />') in jQueryjQuery 中的 $('<element>') 与 $('<element />') 【发布时间】：2012-03-29 08:23:12 【问题描述】：

我看到人们以两种不同的方式在 jQuery 中创建 html 元素：

$('<element>')

和

$('<element />')

我很好奇哪个“更正确”。我认为第一个的明显优势是打字更少。使用哪一个有区别吗？

【问题讨论】：

为什么不能使用document.createElement('element')？是否有一些法律迫使您编写尽可能慢的代码？！ @tereško 除非您对这段代码进行基准测试，认为这段代码是您应用程序的瓶颈，否则性能不应成为此选择的主要因素。我希望性能差异仅在紧密循环中相关。而是代码的清晰性和一致性。如果大部分地方使用jquery，这里没有理由使用DOM，如果你主要使用DOM，则没有理由为此使用jquery。 @tereško +1... 对象创建成本 + 字符串解析成本 + 许多条件成本 + 疯狂设计模式成本 = jQuery 账单。 【参考方案1】：

没有区别，如源代码中所见，line 30 & line 121：

/* Line 30*/
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>)?$/,

/* Line 121 */
// If a single string is passed in and it's a single tag
// just do a createElement and skip the rest
ret = rsingleTag.exec( selector );

以下是等价的：

<a></a> <a /> <a>

【讨论】：

当我写这个问题时，我在想我可以通过查看源代码自己弄清楚。感谢您在答案中直接引用代码。所以，没有区别只要你在创建语句中没有属性。如果您将代码更改为$('<a name="foo">')，那么任何人的浏览器 .innerHTML 都会解析它。【参考方案2】：

从技术上讲$('<element></element>') 更正确，因为使用/ 的自闭合标签在HTML5 中被删除，但它完全没有区别，因为该语句是由jQuery 解析的。如果有的话，仅仅使用$('<element>') 可能实际上会稍微快一些，因为它的阅读字符更少。这也应该跳过一些正则表达式条件。

如果您正在寻找使用 jQuery 的最快可能方式，那就更好了：

var temp = new jQuery.fn.init();
temp[0] = document.createElement('element');
temp.length = 1;

这个版本是最快的，因为它跳过了包装“new jQuery.fn.init()”的jQuery()，并且不传递任何参数，因此它立即返回一个新的jQuery对象。它会跳过很多条件和故障安全语句，如果您已经确切知道自己要做什么，那么这些语句是不必要的。

或略短：

var temp = $(document.createElement('element'));

这个版本稍慢，但更容易阅读，也更整洁。它仍然会跳过一大块用于解析传递的字符串的代码。相反，jQuery 可以自动知道我们在这里使用的是一个节点。

参考HTML5 Does NOT Allow “Self-Closing” TagsGoogle: html5 self closing tagsjsperf

【讨论】：

在 HTML5 之前的任何 HTML 版本都没有自闭合标签。 They are valid in HTML5 但对 void 元素没有影响。【参考方案3】：

不，它根本没有区别，只要元素定义格式正确。第二种样式是简单的an alternate syntax，实际上可以保存击键：

$('<a href="herp.derp.com/sherp"/>');    // XML-like syntax
$('<a href="herp.derp.com/sherp"></a>'); // Well-formed HTML
$('<a href="herp.derp.com/sherp">');     // Malformed (no closing tag)

【讨论】：

关于如何在该应用程序中节省击键，这是一个有趣的观点。我一直只是使用 .attr 来设置 href。这是一个愚蠢的例子，没错，但在实际情况下，使用 XML 语法等于减少输入。【参考方案4】：

jQuery docs 是这么说的：

为确保跨平台兼容性，sn-p 必须格式正确。可以包含其他元素的标签应与结束标签配对：

$('<a href="http://jquery.com"></a>');

或者，jQuery 允许类似 XML 的标记语法（斜杠前有或没有空格）：

$('<a/>');

不能包含元素的标签可以快速关闭也可以不：

$('<img />'); $('<input>');

但是，请参阅这个问题，了解什么是最有效的：