Consulting Training Blog Careers About Us Contact Us

Complete jQuery Training

Course ID: WAS1935
Duration: 2 Days

Upcoming Classes

Sorry, nothing scheduled right now. Click the Get Notified button below to be alerted when a class is scheduled.

Get Notified

On Site/Private

Can't find a class that fits right for you? Contact us to inquire about scheduling your own private class

Contact Us

Description

jQuery is a JavaScript toolkit that significantly simplifies rich web based application development. This course teaches a developer all aspects of jQuery based application development. The class is not specific to any vendor's platform and it equally applies to Java, .NET, PHP etc. All labs are done using plain web server and editor.

Bring This Course To You

For groups of 5 or more, let Intertech bring this course to your location. Customized versions tailored towards your objectives are also available.

Learn More

Learning Objectives

  • jQuery basics and functions
  • Using selectors with jQuery
  • Manipulating page elements with jQuery
  • jQuery event model
  • jQuery and Ajax
  • jQuery animation and advanced effects
  • jQuery plugins

Audience

This class is intended for developers responsible for designing the web front end GUI using jQuery.

Prerequisites

Good knowledge of JavaScript and DOM API is required.

Course Outline

jQuery Overview

  • Target Background
  • References
  • Unit Topics
  • What Is jQuery?
  • Benefits of Using a JavaScript Library
  • jQuery Example
  • CSS Selectors
  • How to Use jQuery
  • Practical Usage Notes
  • Background – DOM
  • Background - DOM Ready Events
  • Background - JavaScript Functions
  • The jQuery Function Object
  • What Does the $() Function Take as Argument?
  • What Does the $() Function do?
  • The jQuery Wrapper
  • The jQuery Wrapper as an Array-Like Object
  • Note: innerHTML() vs. .html()
  • jQuery Wrapper Chaining
  • API Function Notation
  • Handling DOM Ready Event
  • xhtml Note

Selectors

  • Background: The Sizzle Selector Engine
  • Selecting Elements by Attribute
  • Pseudo-Selectors
  • Form Pseudo-Selectors 
  • Faster Selection
  • Selecting Elements Using Relationships
  • Selecting Elements Using Filters
  • More on Chaining: .end()
  • Testing Elements
  • Is the Selection Empty?
  • Saving Selections
  • Iterating Through Selected Elements Using .each()
  • JavaScript Methods
  • JavaScript "this"
  • Function Context 
  • The Function call() Method
  • .each() Revisited

Style Class Manipulation

  • Two Options
  • Specifying Style Properties
  • Setting Style Properties
  • .addClass() / .removeClass()
  • Defining a Stylesheet
  • Setting & Getting Dimensions
  • Attributes

DOM Manipulation

  • The $ Function Revisited 
  • Getters and Setters
  • The text() Element Method
  • Appending DOM Elements
  • Removing DOM Elements
  • Performance 

Events

  • Event Overview
  • Old School: Event Handling Using HTML Element Attributes
  • Unobtrusive JavaScript
  • Unobtrusive JavaScript Example
  • Multiple Handlers
  • Using jQuery Wrapper Event Registration Methods
  • The .bind() Method
  • Event Propagation
  • Handlers for Elements Before They Exist!
  • The Event Object
  • Triggering Events

Utility Functions

  • The jQuery Object Revisited
  • Functions May Have Methods
  • A jQuery Utility Function: $.trim()
  • $.each()
  • Example jQuery Utility Functions 

Ajax

  • Ajax Overview
  • The Browser & the Server
  • The Ajax Request
  • The Ajax Response
  • Sending an Ajax Request With jQuery - The General Case
  • When this code is executed…
  • Sending an Ajax Request With jQuery - Simpler, Typical Case
  • Data Types
  • The .data() method

Advanced Ajax

  • A Form Example
  • An Ajax Form Example
  • Serialize()
  • Get vs. Post
  • More on Query Strings
  • ajaxStart() and ajaxError()

Animations and Effects with jQuery and jQuery UI

  • What is jQuery UI?
  • Can I do Animations and Effects using jQuery only?
  • Hiding Elements with jQuery
  • Using .hide() and .show() in jQuery
  • Alternating an Element's Visibility in jQuery
  • Adjusting the Speed in jQuery
  • Providing a Handler in jQuery
  • Using .slideUp() / .slideDown() methods in jQuery
  • jQuery UI Categories
  • jQuery UI Interactions: Droppable and Draggable
  • Droppable and Draggable More Complete Example
  • jQuery UI Widgets: Datepicker
  • jQuery UI Widgets: Autocomplete

Parsing JSON

  • JSON
  • Reading JSON from the Server Using Ajax
  • Example file contents
  • Using the Results
  • Optimized Version
  • Getting More From the Response
  • jqXHR Methods
  • POST vs. GET
  • Invalid JSON
  • Using $.ajaxSetup() 

Plugins

  • What is a plugin?
  • Goal
  • Self-Executing Anonymous Functions
  • Meeting Our Goal
  • Prototype Objects
  • The jQuery Wrapper Class Revisited
  • Example Plugin
  • Using the Plugin

Free Resources from Intertech

Complete Guide to Becoming a Full Stack Developer

Free eBook: Top Freeware Picks for Developers

Free Guide: Tips For A Virtual Development Environment

X