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.
Objectives
- Learn to incorporate the most recent version of jQuery into Web pages.
- Learn to use jQuery in conjunction with other JavaScript libraries.
- Learn to perform DOM manipulations using jQuery selectors and wrapped set methods.
- Learn to initiate Ajax requests with jQuery and how to handle responses in plain text, HTML and XML formats.
- Learn to author plugins that extend jQuery's native functionality.
- Learn to incorporate the most recent version of jQuery UI into Web pages.
- Understand how jQuery UI extends a number of jQuery animation methods.
- Learn to make use of jQuery UI's additional animation effects.
- Learn to implement jQuery UI interaction helpers.
- Learn to create and configure jQuery UI user interface components.
- Understand the basics of the jQuery UI plugin architecture.
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
|