Week 12 — jQuery

Final exam

• JavaScript programming short answer generic questions, and function programming questions.
• DOM — know what the DOM model is, and be able to draw a diagram for an HTML file — DOM topics
• JavaScript — be able to modify a DOM model using the DOM JavaScript functions. You only need to be familiar with the functions on the exam reference sheet.
• Regular expressions — be familiar with the examples
  • In regular expression topics
  • At developer.mozilla.org the developer of Firefox
  • You only need to be familiar with the symbols on the exam reference sheet
  • Try the regular expression practice program

jQuery library

jQuery topics

To use jQuery you need to download a library of JavaScript routines. A popular one is www.jquery.com.

Examples

• Drop down menu with jQuery control is here. Example from Chapter 7 of JavaScript & jQuery: the Missing Manual
• Drop down menu with jQuery control is here. A variation of the previous example with different styling that moves to different page locations depending upon the menu choice
• Slide-in dashboard is here.
• Image fadein/fadeout transition here.
• Working Multilevel push menu is here. A variation of the previous menu, where the menu items now change the content of the main panel in are demonstrated similar mouse events to the examples given previously, the basic claculator demonstrated earlier, and a canvas drawings of lines or circles can be done.

jQuery script wrapper

      <script src="_jsLibrary/jquery.min.js">
        // The jQuery library should be the first script element on the page
      </script>
      
      <script>
      $(document).ready(function() {
      // Your program text goes here
      }); // end ready
      </script>

jQuery steps

Step 1

Select the collection of HTML elements on which to operate using the Document Object Model.

Step 2

Operate on the selected elements: extract information; add and remove content; add, remove and modify element attributes.

Selectors

jQuery expressions begin with phrase that selects the DOM elements on which to operate. The selectors are based on tag names, tag attributes, CSS style selectors, and a bit of regular expressions.

A list of jQuery selectors can be found here.

Filters

Once an initial section phrase is determined, then a filter (in jQuery to filter means choosing what to keep, not what to reject) can be applied. For example select rows in a table, then keep the even rows, or keep list elements that have an address within them.

Functions

Functions are applied to filtered selections to modify the corresponding HTML elements. For example, to hide them, show them, change their color, size, and move them.

jQuery & DOM

Selecting elements with jQuery does not give a list of DOM nodes. As a consequence, you do not operate on selections as you would with JavaScript statements after using getElementByTagName. The same concepts apply but you use a different but equivalent set of jQuery statements.