EC15 - jQuery Workshop
Duration2 Days (customisation)
Availability

Course Description

This course is designed for the developer looking to further their web application development skills with jQuery. This course teaches developers how to use jQuery to transform static HTML web pages into dynamic web pages that react to user input, and perform functions such as animation, 'client-side' HTML form validation, event handling and cookie manipulation.

Pre-requisites

A working knowledge of JavaScript is beneficial, but not essential. This can be gained by attending course EC13.

Objectives

Whilst covering the basics of jQuery, and how it is used, this course also aims to give an insight into jQuery syntax.

Issues such as HTML / DOM manipulation, FORM processing and amination are covered in detail.

On completion of this course the student will be able to:

  • determine when to use jQuery
  • download and install jQuery
  • use jQuery with CSS
  • use jQuery to manipulate HTML and the DOM
  • use jQuery to process FORM data
  • understand the jQuery event model
  • use jQuery animation techniques
  • use jQuery with AJAX
  • use jQuery plugins

Environment

Development will be performed using:

  • XHTML and JavaScript Source Editor
  • a text editor such as Notepad, WinEdit or TextPad

Testing Environment:

  • Internet Explorer or
  • Firefox or
  • Opera or
  • Chrome

Customisation

For on-site courses (i.e. at your premises), we are more than happy to tailor the course agenda to suit your exact requirements. In many cases, we are able to build your in-house standards and naming conventions into the delivered course.

Course Details

INTRODUCTION TO JQUERY
Why use jQuery?
jQuery basics
Advantages / disadvantages of jQuery
Downloading jQuery
Installing jQuery
The jQuery wrapper
DOM & CSS manipulation with jQuery
USING JQUERY WITH CASCADING STYLE SHEETS
CSS selectors and jQuery
Selecting elements with jQuery
Selecting elements by container
Selecting elements by child
Using attribute-based selections
Working with sets of selected elements
Determining set size
Iterating over selected elements
Obtaining subsets of wrapped elements
Leveraging DOM relationships
HTML & DOM MANIPULATION
Adding/Removing DOM elements
Replacing page content
Relocating DOM/HTML content
Removing and copying DOM elements
FORM MANIPULATION
Retrieving & manipulating form elements
Retrieving form data
Leveraging the form plugin
THE JQUERY EVENT MODEL
Adding (and removing) event handlers to DOM elements
Triggering event handlers with jQuery
Understanding & controlling event propagation
JQUERY ANIMATION TECHNIQUES
Using show(), hide(), and toggle()
Managing collapsible lists
Using fade and slide transition effects
Using the animate() wrapper for custom animations
JQUERY AND AJAX
Replacing XMLHttpRequest with jQuery methods
Using the jQuery load() function
Making GET and POST requests with jQuery
Using .ajax() for fine-grained control over AJAX queries
Understanding AJAX global functions
OTHER JQUERY PLUGINS
Live Query
Form
UI

Course Format

Practical sessions make up a large part of the course, allowing delegates to demonstrate and reinforce the lectures given. During these sessions the delegate will gain experience of embedding jQuery into HTML web pages containing features such as frames processing, animation, window manipulation, form validation and cookie processing.

Examples are used extensively, ranging from simple code snippets to full applications with complete ‘real world’ functionality. These are supplied at the start of the course and it is encouraged that the delegates execute and ‘experiment’ with these under the instructor’s guidance as they are introduced.

These examples are available to take away, along with the delegate’s own work.

The comprehensive Student Guide supplied is fully indexed serving as a useful reference tool long after the course has finished. Delegates will also be able to access a free help-line with technical questions relating to topics covered on the course.