JQuery Essentials

JQuery is becoming a must-have skill for web developers. Widely used across the web (at Google, Amazon, Twitter, Microsoft and many more), its simplicity, power and flexibility have made it incredibly popular. It revolutionises JavaScript programming for HTML.

This 1-day Essentials course enables you to add features including dynamic content, sophisticated effects and stunning animations to give your web project the user interface it deserves

Objectives

On completion of this course, delegates will:

Approach

This course is part lecture, part hands-on.

Prerequisites

Delegates must have experience in creating HTML pages and a basic understanding of CSS and JavaScript.

Duration

1 day

Course Outline

Why jQuery?

  • What's jQuery?
  • Why are people using it?
  • Example Sites
  • Feature Overview
  • Browser Compatibility
  • jQuery UI and Plugins

First Steps & Some Fun Stuff - Animation

  • Adding jQuery to a Page
  • Download or CDN
  • Developer (compressed) or Production (compressed)
  • Selecting Page Elements
  • Animating an element
  • Debugging jQuery

Basics - Calling jQuery

  • The jQuery Function & jQuery Object
  • The $() alias
  • Method Chaining

Basics - Selectors

  • Selectors Overview
  • CSS Selectors
  • Attribute Selectors
  • jQuery Additions
  • Multiple Item Selectors
  • Regular Expressions
  • Unicode & Escaped Selectors
  • 'not' Selectors
  • Position Selectors
  • Easy Form Selectors

Basics - Manipulating the HTML Page (DOM)

  • Manipulating Attributes
  • Changing Styles
  • Modifying Content
  • Traversing the DOM

Basics - Filters

  • Filters
    • Predefined Filters
    • Custom Filters

Handling Events

  • Examples of Events
  • Adding and Removing Event Handlers
  • Event Types
  • Getting Information about the Event - The Event Object
  • Manipulating Events

Core Effects

  • Basic Effects
  • Fading
  • Sliding
  • Making custom effects

Effects Building with jQuery

  • Scrolling Effects
  • Resizing Effects
  • Rotating a Headline

Using Ajax with jQuery

  • Basic AJAX concepts
  • Loading HTML on demand
  • Choosing a Data Format
  • A Simple Ajax Example

Forms

  • Enhancing Forms with jQuery
  • Client-side Form Validation
  • Manipulating Form Elements

jQuery Properties

  • Global Properties
  • jQuery Object Properties

Using Plugins

  • Finding Plugins
  • How to Use a Plugin
  • Example Plugins
    • Forms
    • Tables
    • Images & Carousels
    • Lightboxes

jQuery UI

  • Overview of jQuery UI
  • Incorporating Widgets
    • Accordion
    • Datepicker
    • Autocomplete
  • Further jQuery UI features

Wrap-Up