Странный синтаксис JQuery

Question

Я новичок в JQuery и пытаюсь использовать его для динамического построения HTML на основе результатов запроса для объектов JSON. В любом случае на сайте API JQuery (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' и содержимым элементов.Он создаст такую ​​структуру, как:

<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/>')

Создает новый UL элемент, не прикрепленный к DOM

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

Устанавливает переменные DOM для этого элемента, используя пару ключ-значение. Итак, теперь у вас есть элемент UL с классом my-new-list.

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

Это берет массив элементов LI, созданный выше, соединяя элементы в строку (без разделителя в этом случае, .join('-') поставил бы дефис между каждым элементом LI) и присваивал внутреннему HTML из UL.

$('<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 () может принимать карту состоящий из надмножества свойств, которые могут быть переданы Метод .attr (). Кроме того, любой тип события может быть передан, и Можно вызывать следующие методы jQuery: val, css, html, text, data, ширина, высота или смещение. Название "класс" должно быть указано на карте так как это зарезервированное слово JavaScript, и "className" не может быть использовано поскольку это неверное имя атрибута.

Answer 4

Часть, которую вы не понимаете, это совершенно другое использование функции $. В большинстве случаев вы используете $ 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);

Answer 5

См. Документацию jQuery здесь .В частности, раздел, озаглавленный:

Создание новых элементов

В этом разделе содержатся подробные сведения об использовании перегрузки jQuery( html, props ), добавленной в версии 1.4.Это перегрузка, используемая в вашем примере.Он принимает строковый аргумент html, который используется для создания нового элемента DOM, а затем добавляет атрибуты, содержащиеся в аргументе объекта props.

Answer 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.

Answer 7

Это означает, что вы добавляете элемент <ul> с классом my-new-list к телу.<li> элементы, которые вы создали в массиве items, затем добавляются в <ul>, так что вы получите что-то вроде:

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