jQuery Training Course

Course Summary

Our Web Development with jQuery 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.

Not only will you learn by doing, but you'll have a lot of fun along the way because jQuery is all about instant gratification!


Duration [top]

3 days.

Objectives [top]

By attending this course you will:

  • Understand what's so good about jQuery - Google, IBM, Netflix, and even Microsoft are all using it!
  • Be able to add support for jQuery into your own UIs - and let Google host it for you
  • Get how jQuery works: DOM selection, decoration, enchancing
  • Be able to use jQuery's effects, animation, scrolling, and resizing capabilities
  • Build lightboxes, slideshows, and manipulate images - all in JavaScript!
  • Be able to render pro-looking panels, menus (including drop-down), accordions, tabs, tooltips UI widgets in your apps
  • Learn about jQuery's AJAX facilities and create amazing interactive applications
  • Be able to enhance your forms with hints, autosuggestions, client-side validation, star ratings, and more!
  • Learn about jQuery's controls, including date pickers, sliders, progress bar, sorting, and drag'n'drop
  • Be able to create/manage lists, trees, and tables - again all in JavaScript
  • Understand jQuery's plugins, themes, and other advanced concepts, including best-practices

Audience [top]

Web Development with jQuery training course is for you if you are a web developer who wants to build best-of-breed web UIs with the simplicity and elegance of jQuery.

Prerequisites [top]

To get the most benefit from this training you absolutely need to be comfortable with basic JavaScript, HTML, and CSS. Don't worry, you don't need to be a guru (but you will be after this course!) to take your client-side programming skills to the next level.

Familiarity with XML, and basic server-side programming (e.g. PHP, Java, Perl, Python) is recommended, but not required.

Instructors [top]

James Lafferty has been a web developer for eight years, specializing in PHP, JavaScript and CSS. Previously, he has done development work for Nikon, IDG and Safeway, as well as many other clients. He has taught at Yahoo!, eBay and Stanford University, and currently works at Endicia, a Newell Rubbermaid Brand specializing in postage technologies. At Endicia, James places a strong emphasis on communicating best practices to junior developers, Agile methodologies and producing high quality JavaScript, HTML and CSS code.

More about James Lafferty...

Outline [top]

Overview of jQuery

  • What's jQuery and what's so good about it?
  • Who is usng it?
  • Cross-browser compatibility
  • jQuery UI and Plugins

Getting Started with jQuery

  • Downloading and including jQuery
  • Google and Microsoft CDN
  • Developer vs. Production versions (compressed vs uncompressed)
  • jQuery namespace and jQuery '$' alias
  • Revisiting HTML DOM
  • Debugging jQuery problems
  • Accessibility concerns

Using jQuery

  • Making sure that the page is ready
  • Selections using CSS3
    • Filters
    • Multiple item selectors
    • Best practices
  • Decorating with CSS
    • Changing styles
    • Adding/removing classes
  • Effects with jQuery (e.g. hiding, revealing, and toggling elements)
    • Basic Animations
    • Callback functions
  • Event handlers
  • Adding and removing HTML elements
  • Modifying content

Advanced Animations

  • Animating with CSS
  • Color animation
  • Easing
  • Bouncy Content Panes
  • Animation Queues
  • Chaining Actions
  • Animating Navigation
  • jQuery User Interface (UI) Library

Handling User Scolling

  • The scroll event
  • Floating navigation
  • Scrolling the document
  • Customizing scroll bars

Handling Resizing

  • The resize event
  • Layout switcher
  • Resizable elements (textarea, plane splitter)

Images and Slideshows

  • Building our own lightbox
  • Using ColorBox plugin
  • Cropping images with jCrop plugin
  • Slideshows
    • Faders (cross, rollover)
    • Timers
    • Using Cycle plugin
    • Scrolling
    • Thumbnails
    • Customizing events that trigger scrolling


  • Expandable and collapsible menus
  • Open-closed indicators
  • Expand on hover
    • Hover intents
  • Drop-down menus
  • Accordion menus
    • Simple
    • Multi-level
    • jQuery UI Accordion


  • Basic tabs
  • jQuery UI tabs
  • Tab options and controls

Panels and Panes

  • Slide-downs
  • Sliding overlay


  • Simple
  • Advanced (using sprites)

Ajax with jQuery

  • Overview of Ajax
  • Loading content asynchronously
  • Fetching JSON data
  • jQuery's .ajax facilities
    • Common settings
    • GET and POST requests
    • Ajax Events
    • Consuming XML
    • Sending HTML form data
  • Loading external scripts dynamically
  • Interactive Ajax
  • Spinners and progress indicators
  • Endless scrolling


  • Simple form validation
  • The submit event
  • Validation plugin
  • Form hints
  • Checkbox checker
  • Inline editing
  • Autocomplete
  • Star rating input


  • Date picker
    • Date validation
  • Sliders
  • Drag and drop
  • Sorting with jQuery UI's sortable
  • Progress bar

Dialogs and Notifications

  • Simple modal dialog
  • jQuery UI dialog
  • Growl-style notifications
  • 1-up notification

jQuery Widgets

  • Lists
    • jQuery UI selectables
    • Sorting
    • Swapping list elements
    • Searching
    • Selecting
  • Trees
    • Expandable/collapsable trees
    • Event delegation
  • Tables
    • Fixed headers
    • Repeating headers
    • Data grids
    • Pagination
    • Row editing
    • DataTables plugin
    • Selecting rows and columns

Advanced Concepts

  • Best Practices
    • Clean code
    • Comments
    • Map objects
    • Namespacing
    • Scoping
    • Client-side templating
    • Why browser-sniffing should be avoided
    • Feature detection
  • Plugins
  • Extending jQuery
  • Creating your own selectors
  • Events
  • The special event
  • Coexisting with other JavaScript libraries (like prototype.js)
  • Queing and dequeuing animations
  • Themes
  • Parting thoughts

Student Testimonials [top]

I went in with some experience with jQuery, but most of my understanding hodge-podge and rough around the edges. This course helped me to cement the foundations and taught me stuff I didn't know I didn't know.

Shamyl - APCO Worldwide

Training was a great experience. Laurent really knew his stuff, but admitted that he didn't know everything (Very refreshing & reassuring). All in all, i came away with quite a few things that will help me in the future. Thanks!!!

Valmon - Publishers Clearing House

I thought the initial javascript training was very helpful.

Wayne - Network Solutions LLC

Laurent was an excellent instructor. There is a difference between someone who is an expert on a particular subject and someone who can help people learn and grasp the concepts. Fortunately, Laurent is both! Great instructor and great class. Learned a lot and feel like I am ready to tackle jquery.

Scott - Pasco School District

I was REALLY impressed that Ken Jones, the instructor is really an industry veteran--not just a kid who has been doing this for a few years. He can do this stuff in his sleep! Not only that, but he is really skilled at teaching and is personable. I felt that I got personalized attention when I needed it, and left feeling like I was armed with a new skill set!

Mary - Self Employed

Joe Alman is very knowledgeable; well presented the course; maintained the course at optimum pace. Well prepared and provided useful course material.

Shyam - Network Solutions, LLC

All great!!! You ROCK!!!

Ricardo - Samtec