Beginning jQuery

Course Description

jQuery is a cross-browser JavaScript library used to create dynamic web pages. It was written to make DOM manipulation (moving things around a web page) easier for developers. It uses JavaScript to assign HTML elements these attributes. Because it is a library of predefined functions, all you need to start using jQuery is a working knowledge of the syntax and a reference for the functions available to you.

jQuery has numerous advantages over other JavaScript libraries; some of them being that it is easy to start with, is cross browser-friendly, uses shorter code, has a considerable number of available plugins, and most of all, is easy to use with Ajax.

This means there is a considerable market of developers wanting to get into the world of jQuery.

Overview

This course will show how you can integrate jQuery 3.0 into your web pages, avoid complex JavaScript code, create brilliant animation effects for your web applications, and create a flawless app.

Begin with configuring and customizing the jQuery environment and get hands-on with DOM manipulation. Learn to integrate jQuery with your favorite backend framework. Learn how the ECMAScript 6 features affect web development with jQuery. Discover how to use the newly introduced JavaScript promises and the new animation API in jQuery 3.0, along with sample code and examples.

By the end of the course, you will be able to successfully create a fully-featured and efficient single-page web application and leverage all the new features of jQuery 3.0 effectively.

Course Length

4 days

Scope

The scope of this course extends from covering the basics of the jQuery library and discussing the latest features introduced in its newest version, jQuery 3, to implementing advanced effects, events, DOM manipulation, and Ajax.

Target Audience

This course is ideal for client-side JavaScript developers. You do not need to have any previous experience with jQuery.

You do not need to have any previous experience with jQuery, although basic JavaScript programming knowledge is necessary. You should know the basics of JavaScript, including variables, functions, and selecting DOM elements. You should also have a basic knowledge of HTML5 and CSS3 syntax.

Technical Requirements

Hardware

This course will require a computer system for the instructor and one for each student. The minimum hardware requirements are as follows:

• Processor: i3
• Memory: 2 GB RAM
• Hard disk: 10 GB
• Internet connection

Software

For this course, we will use the following software:

• 64-bit Windows 8
• Atom
• The latest versions of Google Chrome and Mozilla Firefox
• Node.js (8.3.x-see https://nodejs.org/en/)
• Yarn (0.27.5-see https://github.com/yarnpkg/yarn/releases/tag/v0.27.5)

Installation and Setup

• Download and install Atom from: https://atom.io/

Course Outline

Lesson 1: Beginning with jQuery 3

• Making our First jQuery-Powered Web Page
• Using jQuery with Developer Tools

Lesson 2: Selecting Elements

• Understanding the DOM
• Exploring CSS Selectors
• DOM Traversal Methods

Lesson 3: Handling Events

• Performing Tasks on Page Load
• Handling Simple Events
• Event Propagation
• Altering the Journey – The Event Object

Lesson 4: Styling and Animating

• Modifying CSS with Inline Properties
• Built-in Animation Effects
• Creating Custom Animations
• Simultaneous Versus Queued Effects

Lesson 5: Manipulating the DOM

• Manipulating Attributes and Properties
• DOM Tree Manipulation

Lesson 6: Working with Ajax

• Loading Data on Demand
• Passing Data to the Server
• Deferreds and Promises

Lesson 7 jQuery Plugins

• Using a Plugin
• jQuery UI
• jQuery Mobile

Lesson 8: Advanced Selectors, Traversing, and DOM Manipulation

• Selecting and Traversing Revisited
• Writing a Custom Selector Plugin
• Using HTML5 Data Attributes
• Revisiting Attribute Manipulation

Lesson 9: Advanced Events and Effects

• Event Delegation
• Defining Custom Events
• Interrupting Animations
• Multi-property Easing and Deferred Objects

Lesson 10: Advanced Ajax

• Fetching Data with CORS
• Using the jqXHR Object
• Extending Ajax Capabilities