JQuery Essential

  • Print

 

Course Overview

jQuery is a popular JavaScript library that simplifies event handling, animating, and Ajax interactions for rapid web development. This course teaches you how to tap into the power of jQuery to build extremely rich, yet elegant web UIs using one of the most simple and popular cross-browser JavaScript libraries out there.

 

Download Brochurepdf-logo 
 

Objectives

 

Pre-requisites

Experience in Java Script and HTML

 

JQuery - Schedule

Day 1

09.00am – 10.00am

Essential jQuery

  • About jQuery
  • Getting Started with jQuery
  • Selecting Page Elements by ID
  • Selecting a Set of Elements
10.00am – 10.30am

Breakfast

10.30am – 12.45pm

  • Selecting Elements by Style
  • Running Code When a Page Is Ready
  • Selecting the First of a Set of Elements
  • Showing and Hiding Page Elements
  • Selecting One of a Set of Elements
  • Specifying Elements in a Hierarchy
  • Creating Visual Effects
  • Creating New HTML Elements

12.45pm – 02.15pm

Lunch

02.15pm – 05.00pm

Selecting Elements the jQuery Way

  • Selector Examples
  • Meeting the Selectors
  • Selecting Direct Descendants
  • Selecting First and Last Children
  • Selecting the Nth Child
  • Selecting Elements with Specific Text
  • Selecting Elements by Attribute
  • Selecting Elements by Attribute Value
  • Checking the Type of Matched Elements
  • Selecting Elements by Position
  • Examining Checked Boxes and Radio Buttons
  • Examining Elements That the User Selected

Day 2

09.00am – 10.00am

Working with Elements the jQuery Way

  • Function Examples
  • Looping over Elements in a Wrapped Set
  • Reading Attribute Values

10.00am – 10.30am

Breakfast

10.30am – 12.45pm

  • Setting Attribute Values
  • Rewriting Elements’ HTML
  • Rewriting Elements’ Text
  • Appending Content to Elements
  • Moving Page Elements
  • Setting Element Width and Height
  • Wrapping Elements
  • Inserting Elements
  • Editing the value Attribute

12.45pm – 02.15pm

Lunch

02.15pm – 05.00pm

Working with Events

  • Event Handling in JavaScript and jQuery
  • Binding an Event Handler to an Event
  • Binding Multiple Event Handlers
  • Binding Event Handlers Using Shortcuts

Getting Started with jQuery UI

  • Calling Event Handlers Only Once
  • Unbinding Event Handlers
  • Using the Event Object
  • Getting the Event Type
  • Capturing Keystrokes
  • Capturing Hover Events
  • Getting Mouse Coordinates
  • Getting Event Targets

                                                                        Day 3

09.00am – 10.00am

Visual Effects and Animation

  • jQuery Visual Effects Overview
  • Showing and Hiding Page Elements
  • Showing and Hiding Elements with Duration
  • Toggling Element Visibility
  • Toggling Element Visibility with Duration

10.00am – 10.30am

Breakfast

10.30am – 12.45pm

  • Fading Elements Out
  • Fading Elements In
  • Sliding Elements Up
  • Sliding Elements Down
  • Toggling Sliding Operations
  • Partially Fading Elements
  • Creating Custom Animation

The jQuery Utility Functions

  • Examples of jQuery Utility Functions
  • Looping over Object Members with $.each( )
  • Determining Browser Type with $.browser
  • Customizing HTML by Browser Type

12.45pm – 02.15pm

Lunch

02.15pm – 05.00pm

  • Checking Browser Support for Specific Features
  • Creating Arrays
  • Searching an Array
  • Filtering an Array
  • Eliminating Duplicate Elements from Arrays
  • Checking Whether Data Is an Array
  • Mapping an Array
  • Trimming Text
  • Passing Data to the Server
  • Passing Form Data to the Server
  • Using $.post( ) to Send Data to the Server
  • Using the jQuery $.get( ) Function
  • Using $.get( ) to Send Data to the Server

                                                                        Day 4

09.00am – 10.00am

Using the Full Power of Ajax

  • About $.ajax( )
  • Using $.ajax( )

10.00am – 10.30am

Breakfast

10.30am – 12.45pm

  • Using $.ajax( ) to Post Data to the Server
  • Using $.ajax( ) to Get Data from the Server
  • Handling Ajax Errors
  • Handling Ajax Timeouts
  • Handling XML
  • Handling Ajax Events Globally

12.45pm – 02.15pm

Lunch

02.15pm – 05.00pm

Using the jQuery Widgets

  • About Working with Widgets
  • Creating Accordion Widgets
  • Creating Datepicker Widgets
  • Creating Dialog Widgets
  • Getting Data from Dialog Widgets
  • Creating a Progressbar Widget
  • Creating a Slider Widget
  • Creating a Tab Widget
  • Adding Tabs to a Tabs Widget