Is it possible to use jQuery to manipulate XUL elements?

Question

I know its possible to integrate jQuery within Firefox addons, but are we able to manipulate (animate, move, adjust transparency, etc) XUL elements themselves?

From

Answer 1

The answer right now is "mostly".

Basic stuff works, including selecting, deleting and finding. I use 1.5.2 pretty heavily both inside an extension and on content pages from the extension.

$.ready() also doesn't work because jQuery assumes and waits for a body. This is the commit that broke it.

Some stuff doesn't work because, as @Daniel describes, jQuery's doesn't properly detect what it can and can't do in XUL (more background below). From stepping through jQuery code I have have found you need at least the following lines in your own code.

// Workarounds for jQuery not properly testing support in XUL environment

// These are done at jQuery init
// This is actually critical, otherwise elements are not properly removed from the cache and you get a cache[id] is undefined
crowdmash.$.support.deleteExpando = true;

// These are done at ready(), but jQuery never fires ready in XUL
// XUL doesn't seem to support offsetWidth and offsetHeight (without this :hidden is broken which breaks fadeIn)
crowdmash.$.support.reliableHiddenOffsets = false;
crowdmash.$.support.opacity = true;

If you want to use jQuery on a content page from an extension, see my tips.

jquery-xul modifies 1.4.4 to better work with XUL. I have not tried it yet, but from looking at its changes it does look like fixes the ready issue. I don't know if it fixes the support issue .

As background on the $.support issue. The problem is that jQuery's feature detection creates a and then populates it using innerHTML. XUL divs do not support innerHTML, so the support code fails marking nothing as supported. There is actually a ticket on this that is open and being discussed for 1.7 - http://bugs.jquery.com/ticket/5206.