If you’ve already used jQuery (or followed the link to the documentation), you will already be familiar with the
$() syntax for specifying CSS queries to select DOM elements.
JQueryClass>>expression: exposes this same interface, but there are also a number of shortcut forms available to you. All the constructor methods return an instance of
Normally a jQuery instance is setup with a CSS selector. You can either use the long form (1) or take the shortcut (2). Of course, both forms are absolutely equivalent, in practice you will mostly encounter the shorter second form:
html jQuery expression: 'div.hint'. "(1)"
html jQuery: 'div.hint'. "(2)"
Often you want to create a query with an element ID. Again we have different possibilities to instantiate that query. (1) and (3) use a normal CSS selector for element IDs. (2) uses the
id: selector, and (4) uses a shortcut using a symbol. Note that the forth form only works for symbols, if you pass a string it will be interpreted as a CSS selector.
html jQuery expression: '#foo'. "(1)"
html jQuery id: 'foo'. "(2)"
html jQuery: '#foo'. "(3)"
html jQuery: #foo. "(4)"
The CSS selector to match all elements in the page is
*. Again you have several equivalent possibilities to achieve the same in jQuery. The first two use a CSS selector, while the last one uses a convenience method:
html jQuery expression: '*'.
html jQuery: '*'.
html jQuery all.
html jQuery this.
html jQuery new.
Note that the
new you call here is not the one implemented in the Smalltalk class
Behavior, but a custom one implemented on the instance side of
JQueryClass. Similar to all other constructor methods it returns an instance of
Furthermore, jQuery provides the possibility to create new HTML code on the fly, that inserted into an existing element. Again we have different equivalent possibilities to do this. The first one uses a raw HTML string, with Seaside we want to avoid this in most cases. The second and third variation uses a block with a new renderer that we can use with the normal Seaside rendering API.
html jQuery expression: '<div></div>'.
html jQuery html: [ :r | r div ].
html jQuery: [ :r | r div ].