Какие методы jQuery доступны для использования в аргументе объекта вызова элемента jQuery create? - PullRequest
Новая
       5

Какие методы jQuery доступны для использования в аргументе объекта вызова элемента jQuery create?

3 голосов
/ 16 сентября 2011

Сообщение Джона Резига по адресу: http://ejohn.org/apps/workshop/adv-talk/#3 говорит, что я могу прикрепить методы, используя параметр объекта.

Кажется, что 'text' работает нормально, но все остальное в объекте добавляется как атрибут элемента.

Есть ли другие способы, которые я могу прикрепить к этому? 

$("<li/>", { 
  click: function(){}, 
  id: "test", // mix ids and jQuery methods 
  class: "clickable" 
});

или это решение? 

$("<li/>")
  .click(function(){})
  .attr("id","test")
  .addClass("clickable");

Ответы [ 4 ]

2 голосов
/ 16 сентября 2011

Просматривая исходный код jQuery, кажется, что @Neal почти прав. Похоже, что с использованием синтаксиса 

$(htmlCode, config);

эквивалентно звонку: 

$(htmlCode).attr(config, true);

где true - это (недокументированный?) Параметр, указывающий .attr() на вызов функций jQuery, указанных в ключах config, ЕСЛИ они перечислены в $.attrFn. Список $.attrFn (по крайней мере, в jQuery 1.6.4) включает следующие функции:

val, css, html, текст, данные, ширина, высота, смещение, размытие, фокус, фокусировка, фокусировка, загрузка, изменение размера, прокрутка, выгрузка, щелчок, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter , отпуск мыши, изменить, выбрать, отправить, нажатие клавиши, нажатие клавиши, нажатие клавиши, ошибка

Таким образом, объект config может содержать либо ключи, представляющие имена атрибутов с их значениями (по умолчанию), либо любые из имен функций, перечисленных выше, с их первым аргументом. Я думаю, что у Resig есть опечатка, когда он показывает addClass как ключ в своем объекте конфигурации, потому что, как вы заметили, это просто создает атрибут с именем «addclass».

1 голос
/ 16 сентября 2011

Я только что проверил оба метода. Оба подхода дают один и тот же результат (HTML-код, свойства DOM), тогда как второй вариант работает в два раза быстрее.

TestCase: 

javascript:void(function(){
var t=new Date;
for(var i=0;i<100;i++){

/*paste code here, copy the whole code to the location bar*/

}
alert((new Date).getTime()-t.getTime())})();
1 голос
/ 16 сентября 2011 
$("<li/>", {
      //any attribute can go here
      'id': 'text',
      'class': 'clickable'
   })
  .click(function(){})
0 голосов
/ 16 сентября 2011

Я думаю, что это очевидно, учитывая простые результаты по производительности, что, похоже, нет особого случая использовать объект второго параметра для определения элемента.

Как отмечает Джон Резиг, этотакже может использоваться для сложного создания: 

$("<li><a></a></li>") // li 
  .find("a") // a 
    .attr("href", "http://ejohn.org/") // a 
    .html("John Resig") // a 
  .end() // li 
  .appendTo("ul");

Я предполагал, что так будет медленнее, но я считаю этот пример более читабельным, а также допускаю полную поддержку метода jQuery вместоподмножество, упомянутое @nrabinowitz.

...