jQuery Essentials

Intensive 1-day Web Design Course in Basic jQuery — JQUERY-01

jQuery Web Design TrainingCourse Overview

This jQuery course for beginners, is a shorter, more intensive alternative to our 2-day jQuery Fundamentals course.

It is primarily designed for programmers with no previous experience of JQuery or, possibly, of JavaScript, i.e. for students who already know the basic concepts of programming and who simply want to pick up and use jQuery as quickly as possible.

As a consequence, this chunk of JQuery training covers less ground than the ‘Fundamentals’ course and provides considerably less opportunity for practical work.

While the course is potentially 'do-able' by front-end web designers with little or no previous programming experience, we would tend to steer such students towards jQuery Fundamentals instead. Since the latter course has more time for both practical work and for developing a fuller understanding of what are likely to be unfamiliar concepts for non-programmers.

jQuery Web Design TrainingCourse Contents

Introduction and overview

  • jQuery? — what is it, and what's it for?
  • Alternatives to jQuery
  • Features, overview
  • Get started — downloading, installing and configuration
  • Exercises — a basic jQuery page

Selecting and extracting page content

  • Simple jQuery selectors
  • Form selection
  • Filtering selectors
  • Attribute filters
  • Content filters
  • Visibility filters
  • Page traversal
  • Chaining statements
  • Exercises

Content manipulation

  • Create new content
  • Insert new content
  • Find element attributes
  • Modify element attributes
  • Insertion — append-prepend, after-before, etc.
  • Remove content
  • Wrap content
  • Replace content
  • Cross-browser, dynamic, CSS styling
  • Exercises

Event Handling

  • The jQuery event object
  • The jQuery event model
  • Bind functions — connecting to elements
  • Unbind functions — disconnect from elements
  • Click, hover, and toggle functions
  • Other common functions for handling events
  • E.g. type, target, data, timestamp, pageX and pageY, result, etc.
  • A single-event to bind
  • Trigger and triggerHandler
  • Exercises

jQuery Animations and Effects

  • Show, hide, toggle
  • Fade in, out, and to
  • Slide up, down, toggle
  • The animate and stop functions
  • Exercises

jQuery Web Design TrainingFurther Details

Course Objectives

On completion of this jQuery training course, you should be able to:

  • Understand where jQuery fits in the web design toolset
  • Use jQuery to complement — rather than replace — HTML, CSS, JavaScript and server-side programming
  • Use jQuery to select, extract, manipulate and insert web content, markup and CSS
  • Use jQuery selectors, filters and functions appropriately
  • Handle user-driven and data-driven page events using jQuery
  • Create, control and customise jQuery animations

Target Audience

  • Experienced CSS-based web designers
  • Developers and programmers with some CSS and HTML experience

Training Pre-requisites

These 2 HTML and CSS training courses — or equivalent knowledge and experience:

Some experience of CSS3 and HTML5 would be nice, but is not, at all, required.

Training Style

This jQuery training course, is instructor-led and intensive. It contains hands-on practical exercises, but typically devotes less time to them than most of our other web design courses — certainly less than half of the contact time.

Relatively homogenous, and technically-minded, private groups can make more time for exercises, by progressing more quickly through the instructional elements of the course. But there is still only so much time in a day.