JQuery

This course is for developers and professionals who wish to make highly interactive websites with minimum code

· Basic Knowledge about HTML scripting.

· Basic knowledge and skill in JavaScript.

This program will be conducted with interactive lectures, PowerPoint presentation, discussions and practical exercise

Upon completion of this program, participants should be able to:

· How to use the jQuery framework

· The basics of Cascading Style Sheets (CSS) and how they apply to jQuery and its functions

· Fundamentals like selectors, the DOM, and event handling with running code recipes

· How to make your web sites more dynamic using rich code templates

· How to apply animation effects to your web sites using jQuery code recipes

· How to develop Ajax applications using jQuery

· How to use jQuery utility functions

· How to extend jQuery with plug-ins and their types

· Displaying Names in a List Using Arrays

· Manipulating Array Elements

· Filtering Arrays to Show Desired Data Only

· Exercise: Displaying Customer Info

· Sorting String and Numerical Arrays

· Splitting an Array

· Combining Two Arrays

· Converting a Numerical Array into a String and Finding its Substring

· Creating an Array of Objects

· Sorting an Array of Objects

· Exercise: Bubble Sort

· Finding Out Which Button Is Clicked

· Triggering Events Automatically

· Disabling a Button After It Is Clicked Once

· Handling Mouse Events

· Finding Out Which Mouse Button Is Pressed

· Finding the Screen Coordinates of a Mouse-Button Press

· Highlighting Text Dynamically

· Making an Image Bright and Blurred with Mouse Movements

· Finding When an Element Gains and Loses Focus

· Applying Hover Effects on Buttons

· Exercise: User Entry Form

· Toggling the Application of a CSS Class

· Creating Image-Based Rollovers

· Adding and Removing Text in Response to Events

· Applying Styles in Response to Events

· Displaying Word Balloons

· Creating “Return to Top” Links

· Offering “Read More...” links

· Displaying Text with an Animation Effect

· Replacing Text with a Sliding Effect

· Making an Image Scroll

· Determining Which Key Was Pressed

· Preventing Event Bubbling

· Chaining Multiple Activities

· Exercise: Enhance User Entry Form

· Confirming a Required Field Is Not Left Blank

· Validating a Numerical Field

· Validating Phone Numbers

· Validating a User ID

· Validating a Date

· Validating an Email Address

· Exercise: Perform user validation 1

· Checking Whether a Checkbox Is Checked

· Checking Whether a Radio Button Is Selected

· Applying Styles to Options and a Form Button

· Checking and Unchecking All Checkboxes Together

· Validating Two Fields

· Matching the Password and Confirm Password Fields

· Disabling Certain Fields

· Validating a Complete Form

· Serializing Form Data

· Exercise: Perform user validation 2

· Writing a Breadcrumb Menu

· Adding a Hover Effect to Menu Items

· Creating a Contextual Menu

· Creating a Navigation Menu with Access Keys

· Creating a Context Menu on Right-Click

· Creating Two Menus with Separate Menu Items

· Creating Two Menus with Submenu Items

· Making an Accordion Menu

· Making a Dynamic Visual Menu

· Exercise: Create Menu

· Displaying Images Horizontally and Vertically.

· Creating a Horizontal Image Slider

· Displaying an Image that Scrolls Left and Becomes Invisible When Clicked

· Creating an Image that Scrolls Left, Disappears, and Reappears at the Right

· Scrolling an Image at the Center of the Browser Window

· Showing Images One After the Other on Hover

· Scrolling an Image Vertically

· Scrolling an Image Horizontally

· Making a News Scroller

· Displaying an Enlarged Image on Mouseover

· Showing Images Pagewise

· Shuffling Images in Either Direction

· Writing a Pendulum Scroller

· Scrolling Images Using Arrays

· Exercise: Develop product catalog

· Highlighting a Table Row on Hover

· Highlighting Alternate Columns

· Filtering Rows

· Hiding the Selected Column

· Paginating a Table

· Expanding and Collapsing List Items

· Expanding and Collapsing Table Rows

· Sorting List Items

· Sorting a Table

· Filtering Rows from a Table

· Exercise: Arrange data in table

· Displaying a Welcome Message

· Performing Authentication

· Validating a User Name

· Validating an Email Address

· Using Auto complete

· Importing HTML

· Getting JSON Data

· Getting XML data

· Paginating tables

· Exercise: Improve interactivity using AJAX

· Filtering on any column of a table with a limit on rows

· Annotating an image with comments

· Dragging and dropping table rows

· Getting, serializing and clearing form controls

· Submitting the Form via Ajax

· Finding the exact position and dimension of an element

· Displaying images in a carousel

· Selecting a Date with a Datepicker

· Sorting tables

· Exercise: Using Plugin

· Distinguishing HTML Elements

· Applying Styles to an Element Nested Inside another Element

· Indenting Paragraphs

· Applying an Initial Cap to a Paragraph

· Removing the Gap between Heading and Paragraph

· Applying Styles to Heading Text

· Indenting the First Line of Multiple Paragraphs

· Creating Paragraphs with Hanging Indents

· Creating a Bordered Pull Quote

· Creating a Pull Quote with Images

· Applying List Properties to List Items

· Applying Styles to Only Selected List Items

· Placing Dividers between List Items

· Applying Image Markers to the List

· Creating Inline Lists

· Applying Styles to Hyperlinks

· Assigning Different Dimensions to HTML Elements

· Placing HTML Elements

· Creating a Multicolumn Layout

· Wrapping Text around Images

· Placing a Drop Shadow behind an Image

· Changing the Cursor When the Mouse Moves over a Link

· Displaying a Long Piece of Text within a Specific Area

· Making a Rounded-Corner Column

· Applying Text Decorations

· Scaling Images

· Setting a Background Image

· Centering a Background Image in the Browser

· Making the Background Image Stationary

· Exercise: Customizing page layout by customer