我正在尝试在Firefox扩展中使用jQuery,并且实际上想要使用jQuery来操作当前页面的DOM,而不是XUL文件的上下文。因此,我在我的XUL文件中加载jQuery,并将其传递给沙盒中的一些脚本(使用Greasemonkey扩展编译器http://arantius.com/misc/greasemonkey/script-compiler)。由于jQuery没有加载页面DOM,我想将其选择器上下文设置为页面DOM,而不是总是将其传递给jQuery调用。
我按照How to use jQuery in Firefox Extension处的解决方案,几乎达到了我想要的效果。
jQuery.noConflict();
$ = function(selector,context){ return new jQuery.fn.init(selector,context||example.doc); };
$.fn = $.prototype = jQuery.fn;
我可以调用jQuery()函数,页面DOM将用作上下文。但是,我不能使用像jQuery.trim这样的函数,因为它们没有定义。
我从解决方案中想到了这一行
$.fn = $.prototype = jQuery.fn;
会让我自己的jQuery对象继承所有jQuery原型属性,但显然不会。
给一个vanilla jQuery对象,如何重新定义它以使用某个元素作为选择器上下文,同时保留所有jQuery函数?
答案 0 :(得分:11)
.trim(),. ajax()等是静态方法,这意味着它们绑定到jQuery构造函数而不是它的原型。
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 $
然而,一个可能很好的方法是保持jQuery不变并执行以下操作:
var fromDoc = $(document);
// and if you want to find stuff:
fromDoc.find('div').doSomething();
fromDoc.find('.someClass').doSomethingElse();
这也是一种优化,因为不必为每个查询手动设置上下文。
答案 1 :(得分:4)
var jQueryInit = $.fn.init;
$.fn.init = function(arg1, arg2, rootjQuery){
arg2 = arg2 || window.document;
return new jQueryInit(arg1, arg2, rootjQuery);
};
答案 2 :(得分:1)
另一种方法是覆盖构造函数:
var initjQuery = jQuery.fn.init;
$.fn.init = function(s,c,r) {
c = c || window.document;
return new initjQuery(s,c,r);
};