jQuery Fundamentals

2-day Basic jQuery Course for Beginners — JQUERY-02

jQuery Web Design TrainingCourse Overview

This jQuery course for beginners, is designed to get non-programmers started with using jQuery to progressively enhance and gracefully degrade website and web application user interfaces (UIs).

Unlike a lot of jQuery training, this course gives as much attention to the issues of when and why to use jQuery, as it does to the mechanics of how to use jQuery. So, for example, when jQuery features overlap with those of CSS3, we'll show you how to use jQuery to support feature-incomplete browsers, without duplicating the built-in CSS3 functionality of advanced browsers.

This jQuery course is particularly suitable for front-end web designers taking their first steps into web programming — because:

  • jQuery builds directly upon your existing HTML and CSS knowledge
  • jQuery is narrowly scoped — i.e. web-specific, not general-purpose programming
  • The course devotes more time for incremental learning and practical exercises — than our intensive 1-day basic jQuery course

This course will not turn you into an expert web programmer overnight, but it will give you some very useful everyday design tools and provide a firm conceptual foundation for learning more generic programming skills in future.

jQuery Web Design TrainingCourse Contents

Introduction and overview

  • What is jQuery?
  • What are the alternatives?
  • Overview of jQuery features
  • Download, install and configure jQuery
  • Getting started — a simple jQuery enabled web page

Selecting and extracting page content

  • Basic jQuery selectors
  • Form selectors
  • Using filters with selectors
  • jQuery attribute filters
  • jQuery content filters
  • jQuery visibility filters
  • Traversing the page
  • Chaining jQuery statements
  • Bringing it all together

Content manipulation

  • Create and insert new content
  • Find and change element attributes
  • jQuery insert functions — append-prepend, after-before, etc.
  • Functions to remove, wrap or replace content
  • Cross-browser CSS styling with jQuery
  • Bringing it all together

Event Handling

  • Single (cross-browser) jQuery event object
  • jQuery event model — assign handlers to objects by selection
  • The on and off functions — to connect to / disconnect from elements
  • Click, hover, etc — handy event-related functions
  • Common functions on the jQuery event model
  • E.g. data, timeStamp, type, target, pageX and pageY, result, stopPropagation, etc.
  • Using the one method instead of on — for one-off events
  • Trigger and triggerHandler event functions
  • Bringing it all together

jQuery Animations and Effects

  • Show, hide and toggle matched elements
  • Fade matched elements in, out, and to
  • Slide matched elements up, down, toggle — to hide and reveal
  • Customised animations — using the animate and stop functions
  • Bringing it all together

jQuery UI

  • Overview — interactions, widgets and effects
  • Download, install and configure the jQuery UI plugin
  • Interactions — selectable, sortable, draggable, droppable, resizeable
  • Widgets — tabs, slider, progress, accordion, datepicker, dialog
  • Effects — show, hide, toggle, add class, remove class, toggle class, switch class, color animation
  • Using ThemeRoller — build widget themes from off-the-shelf and bespoke components
  • Bringing it all together

jQuery workshop

  • Website upgrade project
  • Use jQuery to enhance a pre-built CSS3 website
  • jQuery fallbacks for CSS3 animation in non-supporting browsers
  • Adding UI features that CSS3 does not provide
  • Collapseable sections, tooltips, thumbnailing, slideshow
  • Enhanced form design

jQuery Web Design TrainingCourse Schedule

jQuery Web Design TrainingFurther Details

Course Objectives

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

  • Understand the proper place of jQuery in web design
  • Use jQuery alongside HTML, CSS, JavaScript and back-end web programming
  • Select, extract, manipulate and insert web content with jQuery
  • Use jQuery selectors, filters and functions appropriately
  • Use the jQuery event object to handle user-driven and data-driven page events
  • Create and manipulate jQuery animations
  • Use the jQuery UI library to create and manage widgets, effects and interactions
  • Use jQuery and jQuery UI to enhance a pre-existing, non-dynamic, website

Target Audience

  • Experienced CSS-based web designers

Training Pre-requisites

The following 2-day WDA training courses — or equivalent knowledge and experience:

Additional knowledge of CSS3 and HTML5 would be helpful, but are not required.

Training Style

This jQuery training course, is instructor-led, but puts more emphasis than usual on hands-on, practical, exercises.

Hands-on practical work may comprise 60%, or more, of class time — depending on the characteristics of your particular training group.