Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Override default jQuery selector context

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?

like image 267
pmc255 Avatar asked Sep 11 '10 09:09

pmc255


People also ask

How to reset selected value to default using jQuery?

How to reset selected value to default using jQuery ? The task is to reset the value of the select element to its default value with the help of jQuery. There are two approaches that are discussed below: Approach 1: First select the options using jQuery selectors then use prop () method to get access to its properties.

How to override the position of the context menu in menujquery?

Callback to override the position of the context menu. The function is executed in the context of the trigger object. The first argument is the $menujQuery object, which is the menu element. The second and third arguments are xand ycoordinates provided by the showevent.

Is it possible to change the default behavior of jQuery function?

Many times, in our project, we believe if we can change the default behavior of jQuery function, we can achieve our objective and complete our project easily with a good standard of code. Well, it's possible. Let's see how to do that with an example.

How do I get the value of a selected property in jQuery?

Approach 1: First select the options using jQuery selectors then use prop () method to get access to its properties. If the property is selected then return the default value by using defaultSelected property . Approach 2: First, select the options using jQuery selectors then use each () method to get access to its properties.


2 Answers

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

like image 79
BGerrissen Avatar answered Oct 30 '22 06:10

BGerrissen


var jQueryInit = $.fn.init;

$.fn.init = function(arg1, arg2, rootjQuery){
    arg2 = arg2 || window.document;
    return new jQueryInit(arg1, arg2, rootjQuery);
};
like image 22
Gerry Avatar answered Oct 30 '22 04:10

Gerry