3

John Resig 在： http ://ejohn.org/apps/workshop/adv-talk/#3 的帖子 说我可以使用 object 参数附加方法。

'text' 似乎工作得很好，但是对象中的任何其他内容都作为属性添加到元素中。

我可以附加任何其他方法吗？

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

还是这是解决方案？

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

4 回答 4

2

查看 jQuery 源代码，看起来@Neal几乎是正确的。看来使用语法

$(htmlCode, config);

相当于调用：

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

哪里true有一个（未记录的？）参数告诉.attr()调用config键中命名的 jQuery 函数，如果它们列在$.attrFn. 该$.attrFn列表（至少在 jQuery 1.6.4 中）包括以下函数：

val，css，html，文本，数据，宽度，高度，偏移，模糊，焦点，focusin，focusout，加载，调整大小，滚动，卸载，单击，dblclick，mousedown，mouseup，mousemove，mouseover，mouseout，mouseenter，mouseleave，更改、选择、提交、keydown、keypress、keyup、错误

因此，该config对象可以包含表示属性名称的键及其值（默认值）或上面列出的任何函数名称及其第一个参数。我认为 ResigaddClass在他的配置对象中显示为键时有一个错字，因为正如您所注意到的，这只会产生一个名为“addclass”的属性。

于 2011-09-15T22:41:39.787 回答
1 
$("<li/>", {
      //any attribute can go here
      'id': 'text',
      'class': 'clickable'
   })
  .click(function(){})
于 2011-09-15T22:21:18.080 回答
1

我刚刚测试了这两种方法。两种方法产生相同的结果（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())})();
于 2011-09-15T22:37:17.443 回答
0

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

正如 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 提到的子集。

于 2011-09-16T16:21:29.707 回答