Note
Please note that the features described here are still experimental, so the API may change in the future.
This article may be a good transition guide for experienced jQuery developers to work with qooxdoo. qooxdoo 0.8.2 and beyond supports a selector engine and an experimental collection handling, which is comparable to the feature set of jQuery 1.3.2 and after.
For more info also see the following information:
jQuery's main method $() behaves different depending on the parameters supplied:
$(domNode).doSomething();
$("expression").doSomething();
$("HTML <b>string</b>");
$(initFunction);
The resulting jQuery object is an instance of qx.bom.Collection (or short a "collection") on the qooxdoo side. In general qooxdoo is intentionally a bit more verbose in terms of API, since it often is disadvantageous to use all too much implicit magic (a lesson learned from early qooxdoo).
You create a collection in qooxdoo by invoking the static method qx.bom.Collection.create with an existing DOM node:
var coll = qx.bom.Collection.create(li); // qooxdoo
This is basically the same as the following jQuery code:
var coll = $(li); // jQuery
Like jQuery, qooxdoo's collection supports an array as first argument, where each element of the array is an existing DOM node:
var coll = qx.bom.Collection.create([li1, li2, li3]); // qooxdoo
It is also possible to select DOM elements by a CSS selector. qooxdoo uses exactly the same powerful Sizzle engine as jQuery. So the feature set is almost identical.
In jQuery you may select all h2 and h3 headers by doing this:
var headers = $("h2,h3"); // jQuery
In qooxdoo you use the static method qx.bom.Collection.query, which expects a CSS like selector. This is how the code in qooxdoo to query the document for h2 and h3 headers looks like:
var headers = qx.bom.Collection.query("h2,h3"); // qooxdoo
In jQuery it is possible to reuse existing HTML. The result may be further processed by the methods on the jQuery object.
var obj = $("<b>Some HTML</b>"); // jQuery
In qooxdoo the same is achieved by having the collection parse HTML:
var obj = qx.bom.Collection.create("<b>Some HTML</b>"); // qooxdoo
A more explicit way to parse HTML is to use the static method qx.bom.Collection.html, so you could also say:
var obj = qx.bom.Collection.html("<b>Some HTML</b>"); // qooxdoo
Internally, create uses html when the first parameter is a valid HTML string.
To attach load events simply use qooxdoo's regular event registration. There is no convenience handling for this on the selector or collection classes. First the code for jQuery:
// jQuery (Variant 1)
$(function() {
alert("executed at load");
});
As this is also a shorthand in jQuery, here the same code when using the classical variant:
// jQuery (Variant 2)
$(window).ready(function() {
alert("executed at load");
});
In qooxdoo you do it the familiar way:
// qooxdoo
qx.event.Registration.addListener(window, "ready", function() {
alert("executed at load");
});
// Every listed qooxdoo method is a method of qx.bom.Collection
// Look below for some short examples
var allDivElements = qx.bom.Collection.query("div");
var howMany = allDivElements.length;
var indexOfElement = allDivElements.indexOf(aDivElement);
| Description | jQuery | qooxdoo |
|---|---|---|
| Detect the length of a collection | size() / length | length |
| Get an element by index | get(0) | [0] |
| Get elements as array | get() | toArray() |
| Iterate over items | each(callback) | forEach(callback, context) |
| Get the index of an element | index(elem) | indexOf(elem) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Read an attribute | attr(name) | getAttribute(name) |
| Set an attribute | attr(name, value) | setAttribute(name, value) |
| Set an attribute to a computed value | attr(name, function) | Not supported |
| Set attributes | attr(map) | setAttributes(map) |
| Remove an attribute | removeAttr(name) | resetAttribute(name) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Get the HTML content | html() | getAttribute("html") |
| Set the HTML content | html(value) | setAttribute("html", value) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Get the textual content | text() | getAttribute("text") |
| Set the textual content | text(value) | setAttribute("text", value) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Add a class | addClass(classname) | addClass(classname) |
| Check for a class | hasClass(classname) | hasClass(classname) |
| Remove class | removeClass(classname) | removeClass(classname) |
| Toggle class | toggleClass(classname) | toggleClass(classname) |
| Toggle class based on switch | toggleClass(classname, toggle) | toggleClass(classname, toggle) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Read a value | val() | getValue() |
| Set a value | val(value) | setValue(value) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Reading a style | css(name) | getStyle(name) |
| Setting a style | css(name, value) | setStyle(name, value) |
| Setting styles | css(map) | setStyles(map) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Get absolute position to document | offset() | getOffset() |
| Get the offset parent | offsetParent() | getOffsetParent() |
| Get position in relation to offset parent | position() | getPosition() |
| Get vertical scroll position | scrollTop() | getScrollTop() |
| Set vertical scroll position | scrollTop(value) | setScrollTop(value) |
| Get horizontal scroll position | scrollLeft() | getScrollLeft() |
| Set horizontal scroll position | scrollLeft(value) | setScrollLeft(value) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Returns the rendered width | width() | getContentWidth() |
| Configures the width | width(value) | setStyle("width", value+"px") |
| Returns the rendered height | height() | getContentHeight() |
| Configures the height | height(value) | setStyle("height", value+"px") |
| Returns the inner width | innerWidth() | see notes |
| Returns the inner width | innerHeight() | see notes |
| Returns the outer width | outerWidth() | getWidth() |
| Returns the inner width | outerHeight() | getHeight() |
Collection modifiers are available to extend or filter the current collection and to create a new collection to be returned. The method end() exits the last extension or filter and returns the previous collection. This is especially useful when working with chaining.
| Description | jQuery | qooxdoo |
|---|---|---|
| Filter by index | eq(index) | eq(index) |
| Filter by selector | filter(selector) | filter(selector) |
| Filter by function | filter(function) | filter(function) |
| Whether content matches expression | is(selector) | is(selector) |
| Translate one collection into another | map(function) | map(function, context?) |
| Remove elements matching the expression | not(selector) | not(selector) |
| Select a subset of the collection | slice(start, end) | slice(start, end) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Add elements | add(selector) | add(selector) |
| Get children matching the selector | children(selector) | children(selector) |
| Closest parent that matches | closest(selector) | closest(selector) |
| Get all child nodes (non-recursive) | contents() | contents() |
| Replace with matched children | find(selector) | find(selector) |
| Replace with matched children | find(function) | Not supported |
| Get next element | next(selector) | next(selector) |
| Get all next elements | nextAll(selector) | nextAll(selector) |
| Get all next elements up to a limit | nextUntil(selector) | Not supported |
| Get parent element | parent(selector) | parent(selector) |
| Get all parent elements | parents(selector) | parents(selector) |
| Get all parent elements up to a limit | parentsUntil(selector) | Not supported |
| Get previous element | prev(selector) | prev(selector) |
| Get all previous elements | prevAll(selector) | prevAll(selector) |
| Get all previous elements up to a limit | prevUntil(selector) | Not supported |
| Get siblings | siblings(selector) | siblings(selector) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Append content to the inside | append(content) | append(content) |
| Prepend content to the inside | prepend(content) | prepend(content) |
| Append collection to given selector | appendTo(selector) | appendTo(selector) |
| Prepend collection to given selector | prependTo(selector) | prependTo(selector) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Insert content after | after(content) | after(content) |
| Insert content before | before(content) | before(content) |
| Insert collection after selector | insertAfter(selector) | insertAfter(selector) |
| Insert collection before selector | insertBefore(selector) | insertBefore(selector) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Wrap content around selected elements | wrap(content) | wrap(content) |
| Combine and wrap selected elements | wrapAll(content) | wrapAll(content) |
| Wrap inner of each element | wrapInner(content) | wrapInner(content) |
| Replace selected elements' parents within the document | unwrap() | Not supported |
| Description | jQuery | qooxdoo |
|---|---|---|
| Replace collection with given content | replaceWith(content) | replaceWith(content) |
| Replace given selector result with collection | replaceAll(selector) | replaceAll(selector) |
| Description | jQuery | qooxdoo |
|---|---|---|
| Remove collection from parent node(s) | detach(selector) | remove(selector) |
| Destroy collection from parent node(s) | remove(selector) | destroy(selector) |
| Clear content of collection | empty() | empty() |
The effects module in jQuery and qooxdoo are not so similar, so a comparison method for method is not the best way to describe them. The main function in jQuery to handle effects is animate(). Here are the arguments that you can pass to it:
In qooxdoo, we have qx.fx.Base class which all effects extend, and if you want something custom, this is the one to build upon. Both have handy functions/classes for widely used effects: hide(), show(), toggle(), fadeIn(), fadeOut(), fadeTo()
An easy translation between the 2 fx modules is listed below:
jQuery has a way to terminate all animations by setting jQuery.fx.off = true, also it has a way to specify the speed of the animations by jQuery.fx.interval, which unfortunately is a global one - the corresponding property in qooxdoo is fps and can be set per effect.
stop() is the jQuery function to terminate animation, end() is the method for qooxdoo. You can get all elements being animated by using :animated selector in jQuery only. qooxdoo has no such selector, one would have to manually keep a collection of these elements.
Both libraries have some useful functions that come in handy.
jQuery.support has some properties to check for the existence of some browser featues/bugs. This was added in 1.3 replacing properties like jQuery.boxModel with jQuery.support.boxModel
There is also a browser property named jQuery.browser which can be replaced by qooydoos environment class.
| Description | jQuery | qooxdoo |
|---|---|---|
| Checks if the object is Array | jQuery.isArray() | qx.lang.Type.isArray() |
| Checks if object has no keys | jQuery.isEmptyObject() | qx.lang.Object.isEmpty() |
| Checks if the object is a Function | jQuery.isFunction() | qx.lang.Type.isFunction() |
| Cheks if the Object is a pure js object [ex: {}] | jQuery.isPlainObject() | qx.lang.Type.isObject() |
| Checks to see if the argument is a window | jQuery.isWindow() | Not supported |
| Checks to see if a DOM node is within an XML document (or is an XML document) | jQuery.isXMLDoc() | Not supported |
| Checks to see if the object is a Boolean | Not supported | qx.lang.Type.isBoolean() |
| Checks to see if the object is a Date | Not supported | qx.lang.Type.isDate() |
| Checks to see if the object is an Error | Not supported | qx.lang.Type.isError() |
| Checks to see if the object is a Number | Not supported | qx.lang.Type.isNumber() |
| Checks to see if the object is a String | Not supported | qx.lang.Type.isString() |
| Checks to see if the object is a RegExp | Not supported | qx.lang.Type.isRegExp() |
| Description | jQuery | qooxdoo |
|---|---|---|
| Checks if a node is within another node | jQuery.contains() | qx.dom.Hierarchy.contains |
| Merge 2 objects into the first | jQuery.extend() | qx.lang.Object.merge |
| Merge 2 arrays into the first | jQuery.merge() | qx.lang.Array.append |
| Execute some JavaScript code globally | jQuery.globalEval() | Not supported |
| Filters an array | jQuery.grep() | qx.type.BaseArray.filter |
| Converts an array-like object to a true JS array | jQuery.makeArray() | qx.lang.Array.toArray |
| Translate all items of an array to another array of items | jQuery.map() | qx.type.BaseArray.map |
| Serializes an array/object into a query string | jQuery.param() | qx.util.Serializer.toUriParameter |
| Parses a JSON object | jQuery.parseJSON() | qx.lang.Json.parse() |
| Removes duplicates from array | jQuery.unique() | qx.lang.Array.unique() |
| Trims a string | jQuery.trim() | qx.lang.String.trim |
| Returns the internal JavaScript Class of an object | jQuery.type() | qx.lang.Type.getClass() |
In jQuery there are 2 functions to serialize form data: .serialize(), which makes a string suited for submission out of the elements and their values, and .serializeArray() which makes an array out of them. The equivalent in qooxdoo is the model of the qx.data.controller.Form.
Last 2 functions in utilities are noop() - the function that does nothing and sub() which duplicates jQuery global variable in order to extend it without affecting the original jQuery object. No qooxdoo equivalent for these 2.
Event module in the 2 libraries are similar, with few differences shown below: * in jQuery there is a concept of adding an event to a collection in a "live" fashion - that means if the collection adds more elements to itself they automatically get the event handlers, no need for a new call to bind(). this is represented by live(), die() functions.
| Description | jQuery | qooxdoo |
|---|---|---|
| Attaches a handler for an event | jQuery.bind() | addListener |
| Fires an event | jQuery.trigger() | qx.event.Registration.fireEvent |
| Fires an event without fireing the native event | jQuery.triggerlHandler() | Not supported |
| Attaches a handler once, then removes itself | .one() | addListenerOnce() |
| Removes a handler | .unbind() | removeListener() |
| Namespace of the event when it was fired | event.namespace | can be obtained through the context(this) |
| Data to add to an event | event.data | Not supported |
| Time when the event was fired | event.timeStamp | qx.event.type.Event.getTimeStamp() |
| Global error handler | .error() | qx.event.GlobalError.setErrorHandler |
jQuery has 2 method data() and removeData() to handle storage of arbitrary data associated with the matched elements. As of jQuery 1.4.3 HTML 5 data - attributes will be automatically pulled in to jQuery's data object that acts as the storage. no qooxdoo API for it yet.