21.2.3Performing Actions
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.
Classes
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'.
Styles
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.
Attributes
While the above methods change the class
and 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/'.
Replace Content
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 <div></div>
:
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'.
Insert Content
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.
Animations
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.
aQuery show: 1 second.
The same functionality is available to hide one or more DOM elements with hide
:
aQuery hide.
aQuery hide: 1 second.