Что такое jQuery-эквивалент элемента Element.extend для Prototype

Question

Я знаю, что jQuery.extend может использоваться для добавления собственных пользовательских методов к объекту, такому как элемент DOM, но Element.extend Prototype добавляет все вспомогательные методы элемента DOM к объекту. Это та функциональность, которая мне нужна.

Например

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

Я хочу, чтобы this.panel являлся ссылкой на этот новый div, но к нему также были прикреплены удобные методы-обертки элементов.

Я могу получить что-то близкое, обернув вызов createElement с помощью jQuery ()

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

но это возвращает массив из одного. Я просто хочу элемент.

Что делают другие?

ТИА

Пэт Лонг

Answer 1

Политика jQuery - никогда не расширять собственные объекты DOM.

Упаковка элемента в jQuery - это путь. Результатом является не массив, это объект jQuery (похожий на массив), но с расширенными доступными методами jQuery.

В качестве подсказки, если вы хотите создавать элементы, вы можете использовать функцию анализа HTML jQuery, которая позволяет создавать сложное дерево 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');

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

предупредит: «бла», а затем «фу»