The JavaScript Programming Language
jQuery is a JavaScript library so having a solid understanding of the JavaScript programming language is necessary to use the library. This introductory module acts as either a prefresher for those new to JavaScript or a refresher for those who’ve been using it for a while. Common gotchas, patterns, and idioms will be shared along with brief coverage of some of JavaScript’s more advanced features like closures and prototypes.
Introduction to jQuery
This module will answer the following questions: What is jQuery? What can it do? Where can it be downloaded? Where is the documentation? And how can it be installed into both new and existing projects? We’ll introduce the famous $ function and do some simple selections with it, modifying the DOM, and handling some events. This introduction will be light enough to get started using jQuery quickly, but show enough of what it’s capable of so that we have some context in the modules that follow.
Selecting Elements
jQuery gets its name for its ability to query the DOM for elements in an amazing variety of ways. This module will cover the many different selectors that jQuery supports, but also the methods the jQuery object supports that allow you to refine and extend the results of your queries. The style of method chaining that jQuery made popular will be covered, allowing you to truly write less, but do more.
Manipulating the DOM
You’ve selected the correct elements, what’s next? This module demonstrates how easy jQuery makes it to manipulate the DOM by creating new elements and updating existing ones. You’ll see how jQuery makes programmatic CSS manipulation a breeze. You’ll also get to explore jQuery’s support for “animating” the properties of your elements in order to create impressive visual and functional effects for when the user is interacting with your pages.
Event Handling
Users do stuff with your pages. jQuery makes handling events in a cross-browser manner so easy that you’ll want to do all of your development in JavaScript. You’ll see how to bind and unbind handlers to events (both DOM and custom) and the gotchas you need to keep in mind managing the event context properly. You’ll also see how to use “live” events which automatically detect when new elements are added to the DOM and handle events for them.
Ajax
No JavaScript library would be complete without some sort of support for making requests from the client to the server. jQuery makes it trivial to download and inject HTML into an existing DOM. It’s just as easy to send data to and receive data from “web services” located on the server, allowing complex logic to be authored in JavaScript and run on the client. jQuery’s Deferred objects will also be covered, greatly easing the burden of working with asynchronous data sources.
Plugins
Even if “core” jQuery were all you could use, it would still be worth it. Fortunately, the jQuery community has written hundreds, if not thousands, of plugins (mostly free) that can take your applications to the next level with barely any code to write on your part. This module will cover some of the more popular plugins (color, validation, form, and more) and demonstrate how to write your own (this is often useful even if you don’t plan on sharing your plugins with anybody else).
jQuery UI
The jQuery UI project is a standard set of widgets and effects, put together by the jQuery team by selecting from and improving upon some of the most popular plugins developed by the community. These feature-rich widgets (autocomplete, datepicker, dialog, tabs, and more) can make your web pages seem as rich as traditional applications. You’ll also learn how to use the jQuery UI CSS Framework.
Bootstrap
Bootstrap is mostly a CSS framework, but it also comes with a library of jQuery plugins for common tasks that auto-initialize themselves to help avoid writing any JavaScript at all. This module will cover some of those plugins (there are too many to fully cover, but you’ll learn enough to be familiar with their style and how to learn the rest), but also the core CSS framework. You want your projects to look as good as they function, don’t you?
