jQuery is a cross-browser JavaScript library for manipulating HTML documents.

This presentation introduces jQuery by showing how it replaces the DOM manipulation features of ordinary JavaScript used in the problem solver application developed in the JavaScript Lecture.

From the jQuery.com home page:

Library Access Launching Code Selecting Creating Methods Events Problem Solver Effects CSS Problem Solver Revisited
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, 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 have loaded.

The "$(document)" construction is an example of a jQuery selector.

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. E.g., 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 table elements, use $("name"), where name names the element. Example: returns an array of all table elements in a document.

You can also select child elements of a given element: selects all tr (table row) elements from all tables in a document.

You can also select children specifically from an element given by id. selects all rows of the table whose id is moveTable.

Here are a few of the other kinds of jQuery selectors:
With regular JavaScript, creating a new element for adding to the DOM is accomplished with the createElement method associated with the document object.

Here a button is being added to an HTML table element using the appendChild method provided by the DOM: With jQuery, elements can be created directly: Note that the element creation syntax follows that of other jQuery selectors. Here, the button is added to the table element through jQuery's append method, which inserts content into the element it is called on.

The append method is one of several jQuery methods for manipulating and traversing the DOM.

This section describes a few of the useful jQuery methods. For a complete listing, see the W3 Schools jQuery Tutorial.
append text val remove attr css
The jQuery append() method inserts content at the end of the selected HTML elements. For example, Here the option element for a select element is created and given content (the option's text) on one line. This replaces the regular JavaScript: Note the use of "text".
The 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.

Here is another example of its use as a setter: Compare this with how it is done in regular JavaScript with the innerHTML property attached to the DOM's Element object:

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:

Recall removing elements from the table of move buttons using regular JavaScript: A similar loop could be written using jQuery's remove() method. In this case, however, it is easier to use jQuery's empty() method:
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
In the original version of the problem solver web page, the onclick attribute of the input element was used to embed the JavaScript handler code for the RESET button directly in the page: In jQuery, we instead remove the code from the page element and give the element an id: Now the id is used to create a jQuery object to which we attach a button click handler: Note that the event method in jQuery is "click" rather than "onclick".
Another Example
Here is another example of assigning a button click handler, using regular JavaScript on a DOM button object: In jQuery, assuming button has been jQuery-selected, the same is accomplished with:
The drop-down menu displaying problem options in our problem solver reacts to a change by displaying a different problem.

In the original solve.html, the menu is given a change handler directly in the web page: With jQuery, we again remove the code from the page element: Now the jQuery-selected object is given a change handler when the document is loaded: Note that the event method in jQuery is "change" rather than "onchange".

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:
Slide Example jQuery and CSS
Some facts: Therefore, we'll turn to a description of CSS.
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: