21.2jQuery Basics
jQuery has a simple but powerful model for its interactions. It always follows the same pattern depicted in Figure 145.
To instantiate a JQueryClass
you ask a factory object for a new instance by sending the message jQuery
. In most cases the factory object is your WAHtmlCanvas
, but it can also be a JSScript
.
html jQuery
While the JQueryClass
is conceptually a Javascript class, it is implemented as a Smalltalk instance. html jQuery
returns an instance of JQueryClass
.
1. Creating Queries
To create a JQueryInstance
we specify a CSS selector that queries for certain DOM elements on the your web-page. For example, to select all HTML div tags with the CSS class special
one would write:
html jQuery expression: 'div.special'
This expression returns a JQueryInstance
object that represents all HTML tags matching the given CSS query div.special
. There is also a slightly shorter form that does exactly the same:
html jQuery: 'div.special'
You find more details on creating queries in Section 21.2.1.
2. Refining Queries
If you browse the class JQueryInstance
, you will see that you can add more elements or filter out elements before applying the jQuery action. For example, to select the siblings of the currently selected elements you would write:
(html jQuery: 'div.special') siblings
You find more details on refining queries in Section 21.2.2.
3. Performing Actions
Once you have identified the elements, you can specify the actions you wish to perform. These actions can delete, move, transform, animate or change the contents of the element. For example, to remove the elements we selected earlier we write:
(html jQuery: 'div.special') siblings; remove
There are over 180 actions provided by jQuery; these can be investigated by browsing the JQueryInstance
class in Smalltalk, and by visiting the jQuery documentation at http://api.jquery.com/.
You find more details on performing actions in Section 21.2.3.