覆盖默认的jQuery选择器上下文 [英] Override default jQuery selector context

问题描述

我试图在Firefox扩展中使用jQuery，实际上想使用jQuery来处理当前页面的DOM，而不是XUL文件的上下文。因此，我在我的XUL文件中加载jQuery，并将其传递给沙盒中的一些脚本（使用Greasemonkey扩展编译器 http://arantius.com/misc/greasemonkey/script-compiler ）。由于jQuery没有加载页面DOM，我想将其选择器上下文设置为页面DOM，而不是始终将其传递到jQuery调用。

我按照解决方案如何在Firefox扩展中使用jQuery，几乎可以实现我想要的。

  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原型属性，但它显然不会。

给一个香草jQuery对象，如何重新定义它以使用某个元素作为选择器上下文，同时保留所有的jQuery函数？

解决方案

.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的修剪，扩展等到$ 
  

然而，一个或许很好的方法是保持jQuery完好无损以下：

  var fromDoc = $（document）; 
 //，如果你想找到东西：
 fromDoc.find（'div'）。doSomething（）; 
 fromDoc.find（'。someClass'）。doSomethingElse（）; 
  

这也是一个优化，因为上下文不必每个查询手动设置。 p>

I'm trying to use jQuery inside a Firefox extension, and actually want to use jQuery to manipulate the DOM of the current page, as opposed to the context of the XUL file. Thus, I load jQuery in my XUL file, and pass it to some of my scripts in a sandbox (using the Greasemonkey extension compiler http://arantius.com/misc/greasemonkey/script-compiler). Since jQuery was not loaded with the page DOM, I want to set its selector context to the page DOM instead of always passing it into jQuery calls.

I followed the solution at How to use jQuery in Firefox Extension and it almost achieves what I want.

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

I'm able to make calls to the jQuery() function, and the page DOM will be used as the context. However, I can't use functions like jQuery.trim as those are not defined.

I thought this line from the solution

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

will let my own jQuery object inherit all of the jQuery prototype properties, but it apparently doesn't.

Give a vanilla jQuery object, how do I redefine it to use a certain element as the selector context, while preserving all jQuery functions?

解决方案

.trim(), .ajax() etc are static methods, meaning they are bound to the jQuery constructor and not it's prototype.

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 $

However a perhaps nice way is to leave jQuery intact and do the following:

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

This is also an optimisation since the context doesnt have to be manually set anymore with each query.

这篇关于覆盖默认的jQuery选择器上下文的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！