Question

与答案相关https://stackoverflow.com/a/10619477/1076753来清除元素更好用

$("<div>", {id: "foo", class: "a"});

或

$("<div />", {id: "foo", class: "a"});

它们都有效，但使用哪个更好或更正？

官方API Documentation表示，要确保跨平台兼容性，该代码段必须格式正确。可以包含其他元素的标记应与结束标记配对：

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

虽然不能包含元素的标签可以快速关闭，但不是：

$( "<img>" );
$( "<input>" );

那么，最后使用 div 的前两个选项之一是错误的吗？

Answer 1

如果你只使用易于衡量的指标：第一个更好，因为它缩短了2个字节。

一旦开始考虑可读性和其他不太明显的考虑因素，它就变成了一个很大的意见问题。

那么，最后使用div的前两个选项之一是错误的吗？

不，该部分仅适用于“如果HTML比没有属性的单个标签更复杂”

Answer 2

查看jQuery库，以下是v2.2.0 line 2827的相关部分。

init = jQuery.fn.init = function(selector, context, root) {
    var match, elem;

    // HANDLE: $(""), $(null), $(undefined), $(false)
    if (!selector) {
      return this;
    }

    // Method init() accepts an alternate rootjQuery
    // so migrate can support jQuery.sub (gh-2101)
    root = root || rootjQuery;

    // Handle HTML strings
    if (typeof selector === "string") {
      if (selector[0] === "<" &&
        selector[selector.length - 1] === ">" &&
        selector.length >= 3) {

        // Assume that strings that start and end with <> are HTML and skip the regex check
        match = [null, selector, null];

      } else {
        match = rquickExpr.exec(selector);
      }

      // Match html or make sure no context is specified for #id
      if (match && (match[1] || !context)) {

        // HANDLE: $(html) -> $(array)
        if (match[1]) {
          context = context instanceof jQuery ? context[0] : context;

          // Option to run scripts is true for back-compat
          // Intentionally let the error be thrown if parseHTML is not present
          jQuery.merge(this, jQuery.parseHTML(
            match[1],
            context && context.nodeType ? context.ownerDocument || context : document,
            true
          ));

          // HANDLE: $(html, props)
          if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {
            for (match in context) {

              // Properties of context are called as methods if possible
              if (jQuery.isFunction(this[match])) {
                this[match](context[match]);

                // ...and otherwise set as attributes
              } else {
                this.attr(match, context[match]);
              }
            }
          }

          return this;

您会看到它会检查选择器是否为string，如果选择是<，则会看到它是否以>开头并以if (typeof selector === "string") { if (selector[0] === "<" && selector[selector.length - 1] === ">" && selector.length >= 3) {结尾。

rsingleTag

然后，考虑到正则表达式var rsingleTag = ( /^<([\w-]+)\s*\/?>(?:<\/\1>|)$/ );： -

"<div>"

哪个匹配"<div />"和div，将group[1]作为parseHTML返回。

div使用它来返回merge中的jQuery.parseHTML = function( data, context, keepScripts ) { ... var parsed = rsingleTag.exec( data ); // Single tag if ( parsed ) { return [ context.createElement( parsed[ 1 ] ) ]; }元素： -

context

然后再次使用正则表达式，// HANDLE: $(html, props) if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) {作为设置属性的对象： -

for

this.attr(match, context[match]);使用measurement: revenue_count field: users field: revenue # timestamp: (auto generated by influx)

对每个属性设置进行了

<html>
<head>
<script type="text/javascript">
    var loc = window.location.href;
    if (loc.indexOf ("#DoNotRefresh") < 0) {
        setTimeout(function(){
            window.location="#DoNotRefresh";
        },1000);
    }
    console.log(new Date());
</script>
</head>

所以，最后使用前两个选项之一是错误的 DIV？

如上所示，其个人偏好。两者都是一样的。

Answer 3

来自jQuerys网站：

它使像HTML文档遍历和操作，事件处理，动画和Ajax更简单..

请注意，它没有提及 HTML生成。

JavaScript提供document.createElement方法。如果将类似HTML的字符串作为选择器传递，则jQuery使用此方法。

jQuery入口点（$(whatEverIFeelLikeDoingToday)）类型检查选择器的字符串，节点或函数，然后相应地处理请求。如果参数是字符串，那么它会通过+/- 60行代码（我是HTML吗？我是一个选择器，我是一个ID，我是一个类？）。在识别出类似HTML的字符串之后，然后将其传递给另一个要生成的函数（附加函数调用） - 因此很慢（参见下面的基准测试）。事实上，除了统一性之外，它不会给流程增加太多价值，只会减慢它的速度。

我发现了最好的做法：不使用jQuery来完成相当简单的任务（即节点创建） - 无论在哪里练习，都可以消除障碍。

var div = document.createElement('div');
div.setAttribute("id", "foo");
div.setAttribute("class", "a");
div = $(div);

请注意此benchmark的性能显着提高。（在Chrome中快4倍）。此解决方案比上述两个解决方案更快，并且固有Cross platform。

我不认为更少字节的参数-vs更快的执行时间是在这个线程的范围内。但是，假设您正在缩小代码，我将抛出一个循环遍历数组以生成表的html行的实际示例。字节不是问题，你只需要加载脚本一次 - 执行就是让你陷入困境。

Answer 4

在您的情况下使用更好或更正确，取决于此代码在您的网页中出现的频率。 @Quentin是正确的，因为第一个和第二个选项之间只有两个字节的差异。现在，如果代码只在整个页面中出现几次，那么除非您在服务器上记录大量流量，否则您将看不到两者之间的显着差异，另一方面如果您运行中到高流量网站或将有大量的这个javascript实例出现在你的页面上然后最好的选择是选择一个，因为它是两个字节小和一个更大的页面与这个代码的许多实例你会发现可测量节省了页面的字节大小。

对于用于跨平台兼容性的格式良好的标签，第一个和第二个选项将在浏览器中产生完全相同的最终结果，因此在您的用例中兼容性不会受到任何选项的影响。

基于这些观点，我建议使用选项1，因为它提供了比选项2更好的两个字节，这实际上是用例中两个选项之间的唯一区别。

使用jQuery创建新元素的正确或更好的方法是什么？

4 个答案: