哪些 jQuery 方法可在 jQuery 创建元素调用的对象参数中使用？

Question

约翰·雷西格 (John Resig) 发帖于： 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");

Answer 1

浏览 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 、 mouseleave、更改、选择、提交、keydown、keypress、keyup、错误

因此 config 对象可以包含表示属性名称的键及其值（默认值）或上面列出的任何函数名称，他们的第一个论点。我认为 Resig 在将 addClass 显示为配置对象中的键时存在拼写错误，因为正如您所注意到的，这只会生成一个名为“addclass”的属性。

Answer 2

$("<li/>", {
      //any attribute can go here
      'id': 'text',
      'class': 'clickable'
   })
  .click(function(){})

Answer 3

我刚刚测试了这两种方法。两种方法产生相同的结果（HTML 代码、DOM 属性），而第二种方法的速度是后者的两倍。

测试用例：

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())})();

Answer 4

我认为很明显，考虑到简单的性能优势结果，似乎没有太多情况使用第二个参数对象来定义元素。

正如 John Resig 还指出的那样，这也可以用于复杂的创建：

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

我的假设是这样会更慢，但我发现这个示例更具可读性，并且允许完整的 jQuery 方法支持而不是子集由@nrabinowitz 提到。