什么是原型的 Element.extend 的 jQuery 等价物答案

【问题标题】：What is the jQuery equivalent of Prototype's Element.extend什么是原型的 Element.extend 的 jQuery 等价物
【发布时间】：2009-02-06 11:20:34
【问题描述】：

我知道 jQuery.extend 可以用来通过自己的自定义方法添加到对象，例如 DOM 元素，但 Prototype 的 Element.extend 将所有 DOM 元素辅助方法添加到对象。这就是我所追求的功能。

例如

this.panel = document.createElement('div');

我希望 this.panel 成为对那个新 div 的引用，但同时也附加了方便的元素包装方法。

我可以通过使用 jQuery() 包装对 createElement 的调用来获得一些接近的东西

this.panel = jQuery(document.createElement('div'));

但返回一个数组。我只想要元素。

别人是怎么做的？

TIA

帕特龙

【问题讨论】：

标签： jquery

【解决方案1】：

jQuery 政策是永远不要扩展原生 DOM 对象。

在 jQuery 中包装元素是可行的方法。结果不是一个数组，它是一个 jQuery 对象（类似于数组），但具有可用的扩展 jQuery 方法。

作为提示，如果你想创建元素，你可以使用 jQuery HTML 解析功能，它可以比使用 DOM 创建方法更容易地创建复杂的 DOM 树。

也许你想要这样的东西

// Creates a DIV node with some attributes and text inside, and append it to the body
this.panel = jQuery('<div class="myClass" id="myPanel">My panel</div>').appendTo('body');

【讨论】：

感谢您明确表示“jQuery 策略是永远不要扩展本机 DOM 对象”，可惜我喜欢 Prototyopes 方法。我真的不喜欢使用 jQuery 来解析动态 HTML 字符串。它看起来很老派，就像使用 innerHtml
是的，它看起来很老派，我同意。但它通常比手动创建每个 DOM 节点并将它们链接在一起更简单。与 innerHtml 不同的是，您实际上得到了一个不错的 DOM 树，因为 jQuery 为您完成了所有的解析。
如果您将大量节点添加为一个字符串，代码也会快很多

【解决方案2】：

您可以使用以下方法在 jQuery 对象中选择一个元素：

$(selector).eq(0): //this will select the first element

所以在你的情况下：

this.panel = $(document.createElement('div')).eq(0);

但你也可以这样做：

this.panel = $('<div></div>');

也一样。

如果你想扩展 jquery 功能：

jQuery.fn.myOwnFunction = function(){
 this.each( function() {
  alert($(this).attr('name'));
 }
}

如果你这样做：

<input name='bla'>
<input name='foo'>

$('input').myOwnFunction();

会提示：'bla' 然后是 'foo'

【讨论】：