让我们从一个减少对其他:
$.fn.myplugin = function() {
return $(this).each(function() {
return $(this).bind('click', function() {
console.log('Hi');
});
});
};
当您启动功能this
是一个jQuery对象,所以$(this)
不买任何东西,它很可能会成为:
$.fn.myplugin = function() {
return this.each(function() {
return $(this).bind('click', function() {
console.log('Hi');
});
});
};
所以你说“对于jQuery对象中的每个元素,创建一个jQuery对象并将一个事件绑定到该对象。“
如果您在bind
看,它调用on
,执行一些逻辑,最后做这一行:
return this.each(function() {
jQuery.event.add(this, types, fn, data, selector);
});
这意味着它要在事件应用于该jQuery对象的每一个元素,所以你实际上是在说:
所以你说
“对于jQuery对象中的每个元素,创建一个jQuery对象,并为
在jQuery对象中的每一个元素事件绑定到该元素。”
您现在循环两次,一次在N
元素的列表中,然后在1个元素的列表中循环N
次。你实际上可以直接全部绑定:
$.fn.myplugin = function() {
return this.bind('click', function() {
console.log('Hi2');
});
};
而这当然是最终的代码。
提示:**使用第二个。** – Ryan 2012-07-12 16:47:46
@minitech:为什么?一个真正的插件最有可能不仅仅是绑定一个事件。然后,为集合中的每个元素分别设置一个范围可能会更好。但是,在**这个特定的情况**你是对的。 – ThiefMaster 2012-07-12 16:52:27
您可能想知道为什么第二种方法在元素堆栈包含多个匹配元素的情况下工作。在内部,jQuery调用所有匹配元素链中规定的任何方法。换句话说,迭代仍然完成,但在内部。 – Utkanos 2012-07-12 16:45:53