Course 486:
jQuery and JavaScript Web Development

(3 days)


Course Description

Integrating Asynchronous JavaScript and XML (AJAX) techniques into applications is quite common in today’s rapidly moving world of Web development. 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, client-side binding with templates, jQuery plugins, and jQuery UI will also be covered. A bonus chapter on getting started with jQuery Mobile is also included in the course manual.

Learning Objectives

  • 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


Experience building applications that use HTML, CSS, and JavaScript. To get the most out of this course, students should have existing experience with JavaScript.

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. Client-Side Templating

  • Why Use Client-Side Templates?
  • Template Tokens
  • Binding JSON Data
  • Working with Conditionals and Loops
  • Nesting Templates
  • jQuery Template Examples

9. jQuery Mobile Fundamentals (Bonus)

  • What is jQuery Mobile?
  • Creating a Page Template
  • Using Form Controls
  • Creating a ListView
  • Page Navigation

Please Contact Your ROI Representative to Discuss Course Tailoring!