Question

我是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');
});

有人可以向我推荐使用上面评论解释语法的文档吗？

Answer 1

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

这只是创建一个新的UL元素，其中包含一个'my-new-list'类和items的内容。它将创建一个类似的结构：

<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

Answer 2

$('<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');

最后但并非最不重要的是，它会将新创建的UL元素与此子LI元素附加到BODY元素，使其在页面上显示。

Answer 3

查看jQuery ($)的文档。具体来说，请查看处理重载jQuery( html, props )的部分：

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

props ：要在新创建的元素上调用的属性，事件和方法的映射。

更进一步了解更多信息：

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

Answer 4

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

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

Answer 5

$('<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。

Answer 6

请参阅jQuery文档here。特别是题为：

的部分

创建新元素

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

Answer 7

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

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

与写

之类的东西非常相似

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

document.body.appendChild(node);

JQuery奇怪的语法

7 个答案: