jQuery is a cross-browser JavaScript library with built-in functions useful for, among other things: We will use jQuery so that our problem chooser works as shown below.

Note the effects produced when the problem is changed or solved.

Library Access Launching Code Selecting Creating Methods Events Effects Problem Solver jQuery Home Page jQuery W3C Tutorial
W3 Schools produces this useful jQuery Tutorial (new window)
Until now we have launched code when a webpage loads using an onload function: This method suffers from the fact that code is not run until all page elements, including images and multimedia, are loaded.

With jQuery, we can run code in response to a ready event: This has the advantage of running the code as soon as the document is ready to be manipulated, possibly before all images and multimedia have loaded.

The "$(document)" and "$("body")" constructions are examples of jQuery selectors.

The most basic concept of jQuery is to "select some elements and do something with them."

This section describes some of the jQuery selection expressions.

Each expression looks like "$("...")" where the "..." matches something in the document being rendered.

jQuery selectors are similar to CSS (Cascading Style Sheet) selectors, which are used to select parts of a web page for styling.

By Id By Element Name Other
With regular JavaScript, getting the DOM object associated with a particular element's id is accomplished with the getElementById method associated with the document object.

For example, when testing our FWGC and water jug objects, we used: With jQuery, use $("#myId"): It is important to note, however, that the objects returned by document.getElementById("myId") and $("#myId") are not interoperable; the former returns a DOM object while the latter returns a jQuery object.

To select all elements of the same type from a document, for example, all HTML ul (unordered list) elements, use $("name"), where name names the element. Example: returns an array of all ul elements in a document.

You can also select child elements of an element: selects all li (list item) elements from all unordered lists in a document.

You can also select children specifically from an element given by id. selects all list items of the list whose id is moveList.

Here are a few of the other kinds of jQuery selectors:
Here is how our Chooser object creates the HTML elements that allow the user to choose a problem: With regular JavaScript, creating a new element for adding to the DOM is accomplished with the createElement method associated with the document object, as shown to the right.

With jQuery, elements can be created directly: Note:

This section describes just a few of the useful jQuery methods. For a complete listing, see the W3 Schools jQuery Tutorial.
append remove -- addClass text More Methods
The append method is one of several jQuery methods for manipulating and traversing the DOM.

append() inserts content at the end of the selected HTML element. For example, to continue the previous example, This replaces the regular JavaScript, shown to the right, that uses the DOM's appendChild method.

It's important to remember that, in the regular JavaScript code, the variables headerDiv and selector refer to DOM objects, while the jQuery counterparts do not.

The adding and removal of DOM elements are both performed in the updateState method written for regular JavaScript to the right.

While regular JavaScript uses removeChild to remove elements, jQuery provides a remove method as shown below.

Note:

The jQuery text() method sets or returns the text content of selected elements.

With no arguments, text() acts as a getter; with an argument, it acts as a setter.

Below is an example of its use as a setter. The addOption function is used to add options to the problem selector. Compare this with how it is done in regular JavaScript as shown to the right.

The jQuery addClass() method adds a specified CSS class to selected elements.

Below is an example of styling the selector and headerDiv in the previous example with the CSS classes largeBold and header, respectively. (See the menu for the styles.css file.) Compare this with how it is done in regular JavaScript as shown to the right.

styles.css
In the regular JavaScript example to the right, the DOM properties type, value, and style were used to create the move buttons.

In jQuery we accomplish the same thing with the attr, val, and css methods as shown below.

Form fields are HTML elements used in web pages to allow users to give information that can be sent to a server as form values.

Our problem solver web page does not send information to a server, but it does use form fields to display information and to respond to user events.

The jQuery val() method sets or gets the value of form fields.

With no arguments, val() acts as a getter; with an argument, it acts as a setter.

Here is another example of its use as a setter when the problem solver needs to update the current state: Compare this with how it is done in regular JavaScript with the value property attached to the DOM's Textarea object:

In the problem solver web page, the current state is displayed in a textarea element.

The size of the text area is controlled by its rows and cols attributes, which could be given directly, as in: However, the number of rows and columns in the current state display changes depending on the problem, so in our regular JavaScript approach we used the rows and cols properties provided with the DOM's Textarea object: With jQuery, we use the attr() method, which is used to get and set attribute values for jQuery-selected objects.

Here is how the rows and cols attributes of the textarea element are changed using the setter form: Note that using attr with one argument (e.g. attr("rows")) gets the value of the named attribute for the selected element.

CSS (Cascading Style Sheets) are used to control the style and layout of web pages.

For details, see the W3 Schools CSS Tutorial and the CSS discussion below.

One way CSS styles are added to web pages is with HTML's global style attribute, which assigns values to various CSS properties such as width, height, margin, etc.

Here are examples from solve.html: Sometimes CSS properties cannot be directly coded in web pages and must be specified under program control. This section gives an example.

Using css()
One bit of styling that cannot be coded in solve.html is the common width of the move buttons, which is computed in JavaScript with: In regular JavaScript, bSize can be used along with the DOM's style object and associated properties to change the width of a button: In jQuery, the css() method is used to get or set the style attribute of a selected element. Here is a use of the setter: Note that using css with one argument (e.g. css("width")) gets the value of the named CSS property for the selected element.
We already saw an example of a jQuery event handler: The ready() method specifies the function to run when a ready event occurs.

Ready events are only defined for the current document and are fired when the document is loaded.

jQuery provides ways of handling a variety of events including mouse, keyboard, and form events.

This section gives two examples of writing event handlers in jQuery.

Click Events Change Events
As shown to the right, we added behavior to move buttons in regular JavaScript by setting the onclick property of DOM objects.

In jQuery, assuming button has been jQuery-selected, the same is accomplished as shown below, using the jQuery click method.

The drop-down menu displaying problem options in our problem solver reacts to a change by displaying a different problem.

As shown to the right, we reacted to selection changes in regular JavaScript by setting the onchange property of DOM objects.

In jQuery, we use the jQuery change method as shown below. Note:

Here is how solve.html is displayed in the browser with all element handling performed by jQuery:

The HTML The JavaScript
Here is the new source of solve.html:

Here is the new version of solve.js:

jQuery provides special screen effects including (the following links display jQuery tutorial pages in a new window):
Slide Effect Animation Effect Fade Effects
As shown to the right, our current selector change behavior uses jQuery show and hide effects.

To get the sliding effect, we use the jQuery slideUp and slideDown methods as shown here:

Note:

When the user solves a problem, the congratulatory message starts small and grows to a larger normal size. The font color changes as well.

The message display is represented by an HTML p (paragraph) element. The new function animateCongrats, shown below, uses the jQuery methods css and animate to size, color, and animate the element.

As shown to the right, a call to animateCongrats is added to each button action in the event the problem is solved.

The size and color of the message display element need to be restored when the message is cleared, as shown below.

When the congratulatory message is displayed, the move buttons need to be disabled until the problem is reset.

We could do this using the disabled attribute for HTML form elements, but here we use jQuery methods to fadeOut the ul element holding the move buttons when the problem is solved (see at right), and then fadeIn that element when the reset button is clicked (see below).

Note that this requires that the jQuery variable movesUL be defined at the top level of the ProblemPanel constructor, so that it is available to the various button actions.

Some facts:
Recall that the original version of the problem solver used an HTML table to lay out the GUI components.

With the availability of CSS, the table method has become obsolete.

Also, the jQuery sliding effect does not work well with tables.

So, this section describes changes to the problem solver that make more effective use of CSS and jQuery.

The Table Way The CSS Way
In the original version the problem solver interface was implemented through a 7 x 2 table with some rows spanning two columns.

The only use of CSS was through explicit style attributes that set margins, padding, alignment, color, etc.

Table Layout Table HTML
Note the use of the problemTable element for the overall arrangement and the moveTable element for the move buttons.
The CSS approach uses primarily div, span, p (paragraph), and ul (unordered list) elements with CSS classes to achieve the layout — no tables.
CSS Layout CSS Rules The HTML The JavaScript
Below is the new source of solve.html.

Note the use of two top-level elements:

Also, the move buttons are no longer arranged in an HTML table, but an unordered list — a ul element with the same "moveTable" id — which works better with the jQuery sliding effect.
The JavaScript code is changed in order to:
Slide Effect Move Buttons solve.js
The slide effect is called on the problemPanel.

Note that displayProblem is renamed to changeProblem to accurately reflect what is occurring.

We rename the table variable to moveList to refer to the ul element that contains the buttons.

When the problem is changed, instead of appending a new row to a table, we append a new item to the list:

CSS Tutorial from W3 Schools (new window)
To use jQuery in the JavaScript problem solver, only the ProblemPanel and Chooser constructor functions are modified.

Their redefinitions are contained in the files ProblemPanelJQ.js and ChooserJQ.js, seen in the menu at left. They need to be added to the js/framework/gui folder.

To launch the problem solver in the browser, run the solveJQ.html file, also shown at left. It needs to be added to the top-level folder.

ProblemPanelJQ.js ChooserJQ.js solveJQ.html