Introduction to jQuery

Course Objectives

This course provides indoctrination in the practical use of the umbrella of technologies that are on the leading edge of web development.

Working within in a dynamic, hands-on learning environment, guided by our expert team, attendees will:

• Learn what jQuery is and how to add it to your applications
• Use jQuery to select complex sets of elements from the DOM
• Develop rich web pages that respond to user interaction
• Interact with your server-side code using Ajax
• Explore a wide variety of plugins and learn how to write your own

Students will understand:

• What is jQuery and why should you use it?
• How does jQuery reduce the amount of code that you have to write to add rich functionality to both existing and new web pages?
• How does jQuery make Ajax programming easier?
• What best practices are there for using jQuery so that it works unobtrusively and performs well?
• What plugins and extensions are available to enhance your applications even more than the core jQuery library can provide?

This course is “skills-focused”, designed to train attendees in robust web development and design skills, coupling the most current, effective techniques with the soundest development and design practices. Throughout the course, students will be led through a series of progressively advanced topics, where each topic consists of lecture, group discussion, comprehensive hands-on lab exercises, and lab review.

Course Prerequisites

This is an introductory and beyond-level web development course, designed for experienced JavaScript / web developers who need to extend their knowledge of web design and development.

This is a hands-on programming class. Attendees should have previous experience or working knowledge of developing software applications. Real world programming experience is a must.

Course Agenda

Session: jQuery

Lesson: Why jQuery?

• JavaScript Evolution
• Why jQuery?
• jQuery Usage
• Downloading jQuery
•  

Lesson: Basic jQuery

• jQuery: Operational Overview 
• jQuery Capability Overview      
• Basic Selectors            
• Multiple Selector        
• Selecting by Order                    

Lesson: Manipulating the DOM

• Attributes vs. Properties           
• CSS Box Model Properties        
• Element Content         
• Manipulating Children
• Wrapping and Unwrapping       
• Effects (Basic Animation)           
• Effects Queues            

Lesson: More On Element Selection              

• Hierarchical Selectors (Combinators)
• Attribute Selectors     
• Basic vs. Child Filters  
• Filtering Methods       
• Traversing Methods                  

Lesson: More on Attributes!           

• Selecting From Forms
• Selecting Parent and Children  
• Automatic DOM Traversal
• Manipulating DOM Elements    
• Getting and Setting Attribute Values
• Removing Attributes  

Lesson: More jQuery!        

• The jQuery Function  
• The jQuery Object      
• Some jQuery “Static” Methods 
• Utility Methods            

Lesson: Event Handling     

• Binding Multiple Events to Same Handler              
• Multiple Events to Different Handlers
• Event Targets               
• Triggering Events        
• Custom Events             
• Live Events                    

Lesson: More On Elements!             

• Changing HTML Content            
• Changing Text Content               
• Managing Elements    
• Introduction to Animations       

Lesson: Ajax         

• Posting Data 
• Global Ajax Handlers  
• JSONP            
• Serialization 
• Deferred Objects        
• Promises and Piping   
• Chaining Tasks             

Lesson: jQuery Plugins      

• jQuery Validation Plugin            
• jQuery Form plugin    
• jQuery BBQ (Back Button & Query) Plugin             
• jQuery Hotkeys Plugin
• jQuery Color Plugin    

Lesson: jQuery UI                              

• jQuery UI Effects         
• Advanced Easing         
• Interactions  
• Position Utility             
• Widgets        
• Icons              
•  

Lesson: Templates                            

Micro Templates

Course Materials

Our robust course materials include much more than a simple slideshow presentation handout.  Student materials include a comprehensive hard-copy course manual, complete with detailed course notes, detailed lab manuals and workbooks, code samples, software tutorials, diagrams and current reference materials, all directly related to the course at hand, indexed for ease of use. Step-by-step lab instructions, software tutorials and project descriptions are clearly illustrated and commented for maximum learning.