Web Development // JQ200

jQuery Web Development

Integrating Asynchronous JavaScript and XML (AJAX) techniques into applications is quite common in today's rapidly moving world of Web development.

Course Description

In this course, students will learn how to enhance their Web applications using the jQuery script library and significantly boost their productivity. Topics covered include using jQuery selectors, handling events, manipulating the DOM and calling different types of services to retrieve data. Additional information about enhancing pages with jQuery animations will also be covered.

Audience

This course is valuable for developers who are interested in enhancing their web applications using jQuery

Prerequisites

Experience building applications that use HTML and CSS. Existing knowledge of JavaScript is required.
Students should also have successfully completed the following courses or have the equivalent experience:
WEB240: XHTML and CSS In-Depth​

What You Will Learn

After completing this course, you will understand:
  • How jQuery can enhance productivity
  • What the jQuery is and why it's so popular
  • Selecting DOM objects using jQuery selectors
  • The role of jQuery event handlers
  • How to chain jQuery functions
  • DOM manipulation techniques including adding and removing nodes
  • How to send and receive data from Web Services
  • jQuery animation techniques
  • jQuery UI Features
  • How to use jQuery Plugins
  • Creating custom plugins
  • jQuery Templates
  • Client-side Data binding techniques​

Course Outline

1. Getting Started with jQuery

  • Getting Started with jQuery
  • Introduction to Selectors
  • Understanding Control Chaining
  • Detecting When a Page has Loaded

2. The jQuery Event Model

  • jQuery Event Model Benefits
  • Handling Click Events
  • Using bind() and unbind()
  • Handling Hover Events
  • Accessing Event properties

3. Manipulating the DOM with jQuery

  • Using the each() command
  • Modifying Object Properties
  • Modifying Attributes
  • Adding and Removing Nodes
  • Modifying Styles and CSS Classes
  • Reading and Modifying Element
  • Text with the html() command
  • Extracting text with the text() command
  • Using the wrap() command

4. jQuery AJAX Features

  • jQuery AJAX Functions
  • Loading HTML Content from the Server
  • Making GET Requests
  • Making POST Requests
  • Using the ajax() Function
  • Using the serialize() Function

5. jQuery Animations and Effects

  • Showing and Hiding elements
  • Toggling elements with the toggle() function
  • Fading in and out
  • Sliding up and down
  • Custom Animations

6. jQuery Plugins

  • Introduction to jQuery Plugins
  • Working with Data Plugins
  • Creating custom plugins

7. jQuery UI

  • Introduction to jQuery UI
  • Dialog Widget
  • Datepicker Widget
  • Tabs Widget
  • jQuery UI Interactions

8. jQuery Templates

  • Why use client-side templates?
  • Template Tokens
  • Binding JSON Data
  • Working with Conditionals and Loops
  • Nesting Templates
  • jQuery Template Examples