Class 11 —jQuery and the Domain Object Model

jQuery topics

jQuery library

jQuery script wrapper

      <script>src="_jsLibrary/jquery.min.js">
        // Load 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 Domain 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 statemetns after using getElementByTagName. The same concepts apply but you use a different but equivalent set of jQuery statements.