jQuery Topics

Inspector tool

• Firefox — Tools --> Web Developer --> Inspector that opens a panel at the bottom of the browser window.
• Chrome — View --> Developer --> Developer Tools, and click the Elements tab in the panel at the bottom of the broser window.
• Internet Explorer — F12 key gets the Developer Tools, then select the HTML tab; use refresh to see the script related changes.
• Safari — Develop --> Show Web Inspector. You may need to turn on the Developer menu, in which case, Safari --> Preferences, click the Advanced button, and turn on the "Show Develop menu in menu bar" checkbox.
• Opera — Tools --> Advanced --> Opera DragonFly — DragonFly is the name of Opera's set of developer's tools. In the panel at the bottom of the brwoser window, select the Documents tab.

jQuery library

• Small file size
• Doesn't assume you are an expert
• Used on millions of sites with a large developer community
• Lets programmers add plugins to easily extend jQuery
• Best of all its free

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.

HTML tag selector

var theList = $('li');

ID selector

var theList = $('#id');

Class selector

var theList = $('.className');

Attribute selector

var theList = $('img[alt]');
var theList = $('input[type="text"]';

And use regular expression symbols
var theList = $('a[href^="http://"]'; // address starts with "http://"
var theList = $('a[href$=".pdf"]'; // address ends with ".pdf"
var theList = $('a[href*=".com"]'; // address contains ".com"

Child selector

var theList = $('h2 > p'); Example using CSS selector ">" — all p elements that have an h2 element as a parent

.

Adjacent sibling selector

var theList = $('h2 + div'); Example using CSS selector "+" — all div elements that

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.

Use CSS filters

var theList = $('p:even'; // Even paragraphs
var theList = $('tr:odd'; // Odd rows
var theList = $('.table3 tr:even'; // Odd rows in a table with "class=table3"

Other filters

var theList = $('a:not([href^="http://"])'; // Address does not start with "http://"
var theList = $('li:has(a)'); // List elements that contain an address
var theList = $('a:contains(Select)'); // Address that contains the text "Select"

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.

Functions

$('#popUp').height(200); // Element with ID popUp set height to 200
$('#popUp').width(400); // Element with ID popUp set width to 400
$('#popUp').hide(); // Hide element with ID popUp

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.

Automatic loops

Chaining functions

      $('#fade_in').text('text to display')
      .height(100)
      .width(300)
      .fadeOut(2000)
      .fadeIn(2000);
    

Adding content to a page

The following functions are the most commonly used, although there are many other function.

.html()

Used to both read the contents of an element and to write new contents. The contents can contain HTML tags.

.text() .text(newContent)

Used to replace text within a tag. If the text includes HTML tags, they are not rendered but displayed as is. Useful for showing exactly what one would type.

.append()

Adds the HTML as the last child element of the selected element.

.prepend()

Adds the HTML as the first child element of the selected element.

.before()

Add the HTML just before the opening tag of the selected element.

.after()

Add the HTML just after the closing tag of the selected element.

.remove()

Remove all the selected elements from the page.

.replaceWith()

The HTML replaces selected element.

Playing with CSS properties

.addClass('className'), .removeClass('className')

The named class in the style sheet is added or removed as an attribute of the selected elements.

.toggle('className')

If the class exists as an attribute, then remove the class, otherwise add the class attribute.

.css('propertyName')

Returns the value of the named property in the selected element.

.css('propertyName', value), .css({"propertyname":"value","propertyname":"value",...})

Adds the style "propertyName:value" to the selected element. To set multiple properties at once, use an object literal as the argument.

Playing with HTML attributes

.attr('attrName')

The value of named attribute in the selected element is returned.

.attr('attrName', value)

The value of named attribute in the selected element is set to the value of the second argument.

.removeAttr('attrName')

Removes the named attribute from the selected element.

Applying a function to each item in a selection

.each(anonymousFuncion)

The passed function is applied to each element in the selected elements.

An anonymous function is one without a name; hence anonymous. The following is a template.

      $('selector').each(function() {
      // Your program text goes here
      });
    

To refer to each element in the selection you use the name $(this). For example in the following the value of $(this) takes on the value of the href attribute of each selected element in turn.

      $('a[href^=://]').each(function() {
      var theURL = $(this).attr('href);
      // Do something with theURL for the current element
      });