Quel est l'équivalent jQuery de Element.extend de Prototype

Question

Je sais que jQuery.extend peut être utilisé pour ajouter par ses propres méthodes personnalisées à un objet tel qu'un élément DOM, mais Element.extend de Prototype ajoute toutes les méthodes auxiliaires de l'élément DOM au objet. C'est cette fonctionnalité que je suis après.

Par exemple

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

Je veux this.panel être une référence à cette nouvelle div, mais aussi les méthodes d'enveloppe d'éléments pratiques qui s'y rattachent.

je peux obtenir quelque chose de proche en enveloppant l'appel à CreateElement avec jQuery()

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

mais qui retourne un tableau d'un. Je veux juste l'élément.

Que font les autres?

TIA

Pat long

Answer 1

La stratégie jQuery consiste à ne jamais étendre les objets DOM natifs.

Envelopper un élément dans un jQuery est la solution. Le résultat n'est pas un tableau, c'est un objet jQuery (similaire à un tableau) mais avec les méthodes jQuery étendues disponibles. Comme un indice, si vous voulez créer des éléments, vous pouvez utiliser la fonction d'analyse syntaxique HTML de jQuery, cela permet de créer des arborescences DOM complexes plus facilement qu'avec les méthodes de création DOM.

Peut-être que vous voulez quelque chose comme ça

// 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

Vous pouvez sélectionner un élément dans l'objet jQuery en utilisant:

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

Donc dans votre cas:

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

Mais vous pouvez aussi faire :

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

Cela fera la même chose.

Aussi, si vous souhaitez étendre les fonctionnalités jquery:

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

Ensuite, si vous faites quelque chose comme ceci:

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

$('input').myOwnFunction(); 

alertera: 'bla', puis 'foo'