Leveraging the Power of JQuery

Please note: Before attending this class delegates must have a Microsoft account (signing up one is free). The instructions on how to set up a Microsoft account can be found here.

Module 1 - Introducing jQuery

• What is jQuery?
• Selecting elements with jQuery
• Manipulating properties with jQuery
• Events with jQuery

Module 2 - JavaScript and CSS for Developers

• The DOM
• CSS Selectors
• CSS Positioning
• JavaScript types
• JavaScript Functions
• Creating Custom Objects
• Javascript Object Notation (JSON)

Module 3 - Selectors and Events

Unleashing the power of selectors

• The $() factory function
• Basic selectors
• Child selectors
• Attribute selectors
• jQuery selectors

Modifying content

• Adding new elements
• Removing elements
• Modifying element values

Module 4 - Enhancing appearance

From HTML to DOM

• Understanding the DOM
• NodeList objects

The ready() function Manipulating CSS

• Reading CSS attributes
• Adding CSS attributes
• Removing CSS attributes

Controlling visibility

• The show() function
• The hide() function

Module 5 - Animation

Simple animation

• Fading in and out
• Toggling
• Hide, show and toggle effects
• Effect options

The animate function

• CSS attribute animation
• Animating colour
• Easing
• jQuery UI easing
• The animation queue

Module 6 - Scrolling and Resizing

Scaling

• The scroll event
• Creating a custom scroll box

Resizing

• Calculating position
• Dynamic layouts
• Resizing using jQuery UI

Module 7 - Menus and Tabs

• Building drop down menus
• Designing with a CSS fall back
• jQueryUI menus
• jQueryUI accordions
• jQueryUI tabs

Module 8 - Drag, drop and sorting

• jQueryUI draggable
• Draggable options, events and methods
• jQueryUI droppable
• Droppable options, events and methods
• Droppable tolerance
• jQueryUI sortable
• Sortable options, events and methods
• Sortable portlets

Module 9 - Forms

Form selectors

• Change, blur and focus events
• The submit event
• The validation plugin
• Autocomplete functions

jQuery UI controls

• Date pickers
• Sliders
• Dialog Boxes

Module 10 - AJAX

• What is Ajax?
• Ajax enabling technologies
• XMLHttpRequest object
• Remote HTML using .load()
• Handling future elements
• Getting JSON data
• Global Ajax event handlers
• The jqXHR object
• Defers and Promises
• Combining Promises

Module 11 - jQuery Plugins

• Stages for creating a plugin
• Creating the code and enabling Chaining
• jQuery $.extend
• Creating plugin options
• jQuery Widget Factory

Module 12 - jQuery Mobile Overview

• What is jQuery Mobile?
• How jQuery Mobile Works
• API's and Components
• Basic Page Template
• Links and Dialogs
• Navigation, Tabs and Buttons
• Forms and Listviews
• Popups
• Transitions and Ajax
• Responsive design

Module 13 - jQuery Mobile Theming

Theming

• The Default Theme
• Applying a Theme
• Icons
• Styling Forms
• Styling Selects
• Styling ListViews

Positioning and Layout

• Headers and Footers
• Multi-Column Layouts
• Collapsible Content