2010-09-11 18 views
17

Sto provando a utilizzare jQuery in un'estensione di Firefox e in realtà voglio utilizzare jQuery per manipolare il DOM della pagina corrente, in contrapposizione al contesto del file XUL. Così, carico jQuery nel mio file XUL e lo passo ad alcuni dei miei script in una sandbox (usando il compilatore di estensione Greasemonkey http://arantius.com/misc/greasemonkey/script-compiler). Poiché jQuery non è stato caricato con il DOM della pagina, voglio impostare il suo contesto di selezione sul DOM della pagina invece di passarlo sempre nelle chiamate jQuery.Ignora il contesto di selettore jQuery predefinito

Ho seguito la soluzione a How to use jQuery in Firefox Extension e quasi raggiunge quello che voglio.

jQuery.noConflict(); 
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); }; 
$.fn = $.prototype = jQuery.fn; 

Sono in grado di effettuare chiamate alla funzione jQuery() e il DOM della pagina verrà utilizzato come contesto. Tuttavia, non posso usare funzioni come jQuery.trim come quelle non definite.

ho pensato questa linea dalla soluzione

$.fn = $.prototype = jQuery.fn; 

lascerà il mio oggetto jQuery eredita tutte le proprietà prototipo di jQuery, ma a quanto pare non è così.

Fornire un oggetto jQuery vanilla, come ridefinirlo per utilizzare un determinato elemento come contesto di selezione, mantenendo tutte le funzioni jQuery?

+0

Spero che funziona per voi. Quando ho provato a usare jQuery in un'estensione e l'ho caricato in una sovrapposizione XUL, in qualche modo ha rotto gli overlay di altri plugin come la barra degli strumenti di Webdeveloper. Forse funziona meglio ora. Stai attento a questo! –

risposta

11

.trim(), .ajax() ecc. Sono metodi statici, ovvero sono associati al costruttore jQuery e non al suo prototipo.

jQuery.noConflict(); 
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); }; 
$.fn = $.prototype = jQuery.fn; 
jQuery.extend($, jQuery); // copy's trim, extend etc to $ 

Tuttavia un modo forse piacevole è quello di lasciare intatto e jQuery effettuare le seguenti operazioni:

var fromDoc = $(document); 
// and if you want to find stuff: 
fromDoc.find('div').doSomething(); 
fromDoc.find('.someClass').doSomethingElse(); 

Questa è anche un'ottimizzazione poiché il contesto Non deve essere impostato manualmente più con ogni query.

+0

Funziona come un fascino. Grazie! – pmc255

+0

Bello! Ho sofferto per ore e mi sono completamente dimenticato di '$ .extend'. Finisco per trovare un'altra soluzione. – BrunoLM

1

Un altro modo di farlo è prevalente il costruttore:

var initjQuery = jQuery.fn.init; 
$.fn.init = function(s,c,r) { 
    c = c || window.document; 
    return new initjQuery(s,c,r); 
}; 
+0

L'ultimo parametro "r" sta per "rootjQuery" e se non lo includi continuerai a ricevere errori dicendo "rootjQuery è indefinito". L'ho imparato nel modo più duro. I primi due parametri sono flessibili, quindi non c'è davvero un buon nome per loro. – Gerry

4
var jQueryInit = $.fn.init; 

$.fn.init = function(arg1, arg2, rootjQuery){ 
    arg2 = arg2 || window.document; 
    return new jQueryInit(arg1, arg2, rootjQuery); 
}; 
Problemi correlati