jQuery Fundamentals
Private Training
jQuery is fast becoming a must-have skill for front-end developers. The purpose of this 3-day jQuery training course is to provide an overview of the jQuery JavaScript library. When you complete this training course, you will be able to complete basic tasks using jQuery, and you will have a solid basis from which to continue your learning.
Audience
Front-end developers.
Course Length
3 Days
Prerequisites
Experience in HTML and JavaScript, and experience in CSS would be beneficial.
Objectives
Learn to work with jQuery Core.
Learn to handle events with jQuery.
Learn to create cool effects with jQuery.
Learn to build Ajax applications with jQuery.
Learn to write and use jQuery plugins
Learn to write high-performing jQuery applications.
Detailed Outline
- jQuery Introduction
- How jQuery Works
- A First Example
- JavaScript Basics
- Syntax Basics
- Reserved Words
- Operators
- Operations on Numbers and Strings
- Logical Operators
- Comparison Operators
- Conditional Code
- Conditional Variable Assignment with the Ternary Operator
- Switch Statements
- Loops
- Arrays
- Objects
- Functions
- Testing Type
- Scope
- Closures
- jQuery Basic Concepts
- Basic Flow of a jQuery Application
- Using $(document)ready()
- Selecting Elements
- Operating on Selections
- Working with Selections
- CSS, Styling, and Dimensions
- Traversing
- Manipulating the DOM
- jQuery Core
- $ vs jQuery
- $ vs $()
- Utility Methods
- Checking Types
- Storing and Retrieving Data Related to an Element
- DOM-Related Utilities
- Feature and Browser Detection
- Avoiding Conflicts with Other Libraries
- Events and Event Handlers
- Connecting Events to Elements
- Removing Event Handlers
- Namespacing Events
- Inside the Event Handling Function
- Triggering Event Handlers
- Increasing Performance with Event Delegation
- Removing Delegated Event Handlers
- Event Helpers
- Effects
- Built-in Effects
- Changing the Duration of Built-in Effects
- jQueryfxspeeds
- Limitations on Effects
- Queuing of Effects with Other Operations
- Callbacks – Doing Something When an Effect is Done
- Running Code When an Effect is Complete
- Custom Effects with $.fn.animate
- Easing
- Managing Effects
- jQuery.fx.off
- AJAX
- Key Concepts
- GET vs POST
- The Same Origin Policy
- Data Types
- A is for Asynchronous
- Same-Origin Policy and JSONP
- Ajax and Firebug
- jQuery’s Ajax-Related Methods
- Convenience Methods
- $.ajax
- Convenience Methods
- $.fn.load
- Ajax and Forms
- Working with JSONP
- Ajax Events
- Plugins
- How to Create a Basic Plugin
- Testing Our Plugin
- Finding and Evaluating Plugins
- Best Practices
- JavaScript Best Practices
- Namespacing Variables
- Cache Frequently Used Values
- Beware Anonymous Functions
- jQuery Best Practices
- Optimize Selectors
- Use “Safe” Selectors
- Use Event Delegation
- Detach Elements to Work with Them
- Use Stylesheets for Changing CSS on Many Elements
- Use $.data Instead of $.fn.data
- Code Organization
- Key Concepts
- Don’t Treat jQuery as a Black Box
- Custom Events
- About Custom Events
- Recap: $.fn.on, $.fn.trigger, and $.fn.triggerHandler
- Summary
- jQuery Mobile jQuery UI
- jQuery UI
- jQuery Mobile