Dynamic Web Development with Seaside

21.2jQuery Basics

jQuery has a simple but powerful model for its interactions. It always follows the same pattern depicted in Figure 145.

jQuery Lifecycle in Smalltalk

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.

Creating Queries
Getting Ready
This is a draft chapter.

Copyright © 22 April 2024 Stéphane Ducasse, Lukas Renggli, C. David Shaffer, Rick Zaccone
This book is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 license.

This book is published using Seaside, Magritte and the Pier book publishing engine.