There is a wide variety of actions that come supported with jQuery. jQuery UI and thousands of other plugins add even more. In this section we present some of the most common actions provided by the core framework.
The following examples add, remove or toggle the CSS class
important given as the first argument. These methods are commonly used to change the appearance of one or more HTML elements for example to visualize a state change in the application.
aQuery addClass: 'important'.
aQuery removeClass: 'important'.
aQuery toggleClass: 'important'.
Also you can query if a particular class is set:
aQuery hasClass: 'important'.
Similarly you can change the style of one or more HTML elements. By providing a dictionary you can change multiple CSS styles at once:
aQuery css: aDictionary.
Alternatively you can use a dictionary-like protocol to read and write specific style properties:
aQuery cssAt: 'color'.
aQuery cssAt: 'color' put: '#ff0'.
Note that in most cases it is preferred to use CSS classes instead of hardcoding your style settings into the application code.
While the above methods change the
style attribute of one or more DOM elements, there are also accessor methods to change arbitrary HTML attributes. By providing a dictionary of key-value pairs you can change multiple attributes at once:
aQuery attributes: aDictionary.
Alternatively you can use a dictionary-like protocol to read and write attributes:
aQuery attributeAt: 'href'.
aQuery attributeAt: 'href' put: 'http://www.seaside.st/'.
A common operation on DOM elements is to change their contents, for example to update a view or to display additional information. To set the HTML contents of matched elements you can use the following construct that will replace the contents with
aQuery html: [ :r | r div ].
Alternatively you can set the text contents of each element in the set of matched elements:
aQuery text: 'some text'.
Last but not least you can set the value. This is especially useful for form fields, that require different ways to set the current contents (input fields require you to change the attribute value, text areas require you to change the contents). The following code takes care of the details automatically:
aQuery value: 'some value'.
Alternatively to replacing the contents you can append new contents.
before: inserts content before each element in the set of matched elements;
prepend: inserts content to the beginning of each element in the set of matched elements;
append: inserts content to the end of each element in the set of matched elements; and
after: inserts content after each element in the set of matched elements.
aQuery before: [ :r | r div ].
aQuery prepend: [ :r | r div ].
aQuery append: [ :r | r div ].
aQuery after: [ :r | r div ].
Note that, as with
html:, the argument can be any renderable object: a string, a Seaside component, or a render block as in the given examples.
Showing or hiding DOM elements is one of the most common operations. While this is typically done by adding or removing a CSS class, jQuery provides a simpler way. The action
show makes sure that the matching DOM elements are visible. If a duration is given as a first parameter, the elements are faded-in:
aQuery show: 1 second.
The same functionality is available to hide one or more DOM elements with
aQuery hide: 1 second.