jQuery奇怪的语法答案

【问题标题】：JQuery weird syntaxjQuery奇怪的语法
【发布时间】：2012-01-06 17:58:19
【问题描述】：

我是 JQuery 的新手，并尝试使用它来根据 JSON 对象的查询结果动态构建 HTML。无论如何，在 JQuery API 站点 (http://api.jquery.com/jQuery.getJSON/) 上，我发现了这个例子，我不理解语法，我似乎找不到任何解释为什么这种语法是合法的或如何使用它。

$.getJSON('ajax/test.json', function(data) {
  var items = [];

  $.each(data, function(key, val) {
    items.push('<li id="' + key + '">' + val + '</li>');
  });

  // *** THIS IS THE PART THAT IS WEIRD ***
  $('<ul/>', {
    'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');
});

有人可以向我介绍解释语法的文档吗？

【问题讨论】：

好的，谢谢大家，现在我得到了所有的回复。出于某种原因，我注意到 '$' 的唯一上下文是它是一个选择器。
值得注意：有很多方法可以将多个元素添加到 DOM。这种方法通常是最有效的，因为您在内存中构建一个数组并在最后一次将其全部添加到 DOM 中。
@midnitex31 - 请务必选择其中一个答案作为“答案”。只需单击对您最有帮助的答案旁边的复选标记。谢谢！

标签： json jquery syntax

【解决方案1】：

$('<ul/>')

创建一个未附加到 DOM 的新 UL 元素

$('<ul/>', {'class':'my-new-list'})

使用键值对为该元素设置 DOM 变量。所以现在你有一个 UL 元素，其类为 my-new-list。

$('<ul/>', {'class':'my-new-list', 'html': items.join('')})

这是将上面创建的 LI 元素数组连接到一个字符串中（在这种情况下没有分隔符，.join('-') 将在每个 LI 元素之间放置一个连字符）并分配给内部UL 的 html。

$('<ul/>', {'class':'my-new-list', 'html': items.join('')}).appendTo('body');

最后但并非最不重要的一点是，它将带有此子 LI 元素的新创建的 UL 元素附加到 BODY 元素，使其在页面上可见。

【讨论】：

【解决方案2】：

$('<ul/>', {
   'class': 'my-new-list',
   html: items.join('')
}).appendTo('body');

这只是创建了一个带有“my-new-list”类和项目内容的新 UL 元素。它将创建如下结构：

<ul class='my-new-list'>
<li id="key1">val1</li><li id="key2">val2</li><li id="key3">val3</li>
</ul>

这只是以下的简写：

$('<ul></ul>').attr('class', 'my-new-list').attr('html', items.join('')).appendTo('body');

文档：http://api.jquery.com/jQuery/#jQuery2

【讨论】：

【解决方案3】：

查看jQuery ($) 的文档。具体看处理过载的部分jQuery( html, props )：

html：定义单个独立 HTML 元素（例如或）的字符串。

props：用于调用新创建元素的属性、事件和方法的映射。

下面还有更多信息：

从 jQuery 1.4 开始，jQuery() 的第二个参数可以接受一个映射由可以传递给 .attr() 方法。此外，可以传入任何事件类型，并且可以调用以下 jQuery 方法：val、css、html、text、data、宽度、高度或偏移量。名称“类”必须在地图中引用因为它是 JavaScript 保留字，不能使用“className” 因为它不是正确的属性名称。

【讨论】：

【解决方案4】：

请参阅 jQuery 文档here。具体标题为：

创建新元素

本节包含有关使用 1.4 版中添加的 jQuery( html, props ) 重载的详细信息。这是您的示例中使用的重载。它接受一个 html 字符串参数，用于创建一个新的 DOM 元素，然后添加包含在 props 对象参数中的属性。

【讨论】：

【解决方案5】：

这意味着您将带有my-new-list 类的<ul> 元素附加到正文。然后将您在items 数组中构造的<li> 项添加到<ul>，因此您最终会得到如下内容：

<ul class="my-new-list">
  <li id="key1">val1</li><li id="key2">val2</li>...
</ul>

【讨论】：

【解决方案6】：

$('<ul/>', {
   'class': 'my-new-list',
    html: items.join('')
  }).appendTo('body');

在 jQuery 中，除了搜索 DOM 元素外，还可以创建它们。

$('<ul/>') // or $('<ul></ul>')

这会创建一个新的 <ul> 元素并将其作为 jQuery 对象返回。

作为第二个参数传递的对象设置其属性。从而使这个：

<ul class="my-new-list"><li id="one">O Hai</li></ul>

然后将此<ul> 附加到body。

【讨论】：

【解决方案7】：

你不明白的部分是 $ 函数的完全不同的用法。在大多数情况下，您使用 $ 函数作为选择器，它返回一组 jquery 元素（包装为 jquery 对象的 dom 节点），您可以对其执行某种操作。

在这种情况下，您改为使用 $ 函数来构建 DOM 节点（实际上是 jquery 对象），然后您可以在这些对象上执行功能，例如所示示例中的 appendTo。

这几乎等同于写类似的东西

var node = document.createElement("ul");
node.setAttribute("class", "my-new-list");
node.innerHTML = items.join('');

document.body.appendChild(node);

【讨论】：