rich:jQuery integrates jQuery javascript framework into the JavaServer Faces application. The component allows to apply the styles and behavior to the DOM elements dynamically, including the result of JSF components rendering.

The selector attribute defines an object or list of objects, the query defined with the query attribute will be applied to. And query attribute should be defined with valid JavaScript statements or jQuery api calls

rich:jQuery can be used in next major modes:

- as a once time query applied immediately or on document ready event
- definition of event handler which bound to elements returned by selector on some event.
- as a javascript function that can be invoked from the custom javascript

The modes chosen with timing, name and event attributes that can have the following options:

Timing

- immediate - applying the query immediately
- domready - applying the query when the document is loaded.

event and attachType defined allows to bind the query to some event of elements which returned by selector. "attachType" could be "live", "bind" and "one".

Defining name attribute - causes timing too be ignored and just named function to call from js to be created.

This demo shows how to attach the mouseover/mouseout events to the DOM objects. However the images below show how to make them enlarged.