jQuery Advanced Topics

A deep look at several advanced concepts in jQuery from performance to plugins to promises
Course info
Rating
(600)
Level
Advanced
Updated
Jan 30, 2012
Duration
3h 3m
Table of contents
Description
Course info
Rating
(600)
Level
Advanced
Updated
Jan 30, 2012
Duration
3h 3m
Description

This course dives into several advanced topics in jQuery. Learn to leverage jQuery to move beyond simply selecting and manipulating DOM nodes. Some of the many topics covered include: authoring plugins for internal projects and for publication, improving performance of DOM node selection and insertion, customizing jQuery to add more defaults and named constants, using the data method to store and retrieve arbitrary data associated with DOM nodes, manipulating arrays and collections with jQuery's built-in utility methods, and handling events correctly even for dynamically created DOM nodes. This course also includes a comprehensive coverage of deferred objects and promises based on CommonJS. Code examples are given for most of the covered concepts.

About the author
About the author

Joe has been a web developer for the last 13 of his 16+ years as a professional developer. He has specialized in front end and middle tier development . Although his greatest love is writing code, he also enjoys teaching and speaking about code.

More from the author
Angular Crash Course
Intermediate
58m
Nov 1, 2018
Unit Testing in Angular
Beginner
3h 20m
Sep 6, 2018
More courses by Joe Eames
Section Introduction Transcripts
Section Introduction Transcripts

jQuery Advanced Topics Course Introduction
Joe Eames: Hello and welcome to Pluralsight's jQuery Advanced Topics course. My name is Joe Eames and I'll be guiding you through this course as we learn about some advanced topics in the jQuery library. jQuery has grown rapidly in adoption across the internet as the defacto baseline library for any Javascript work in the browser. jQuery has many advantages you can benefit from but perhaps the bet one is that jQuery really turns web programming from a chore into a joy. By hiding browser inconsistencies and providing a simple interface to working with the browser and the HTML DOM, jQuery really enables us as developers. And it does so while not hiding Javascript from us. So we still get to learn Javascript while we learn jQuery. The topics in this course have been grouped into six areas. First is the utility methods in jQuery. Many people learn jQuery's DOM selecting and manipulation capabilities but never look at the utility functionality that jQuery provides. So that will be our first topic. Our second topic will be customizing jQuery. In that section, we'll go deeper into the internals of jQuery than we will with any other module. The third module will be on authoring plug-ins which is a skill everyone should know if they work with jQuery. Module 4 is on performance tuning jQuery. This module will dig into selecting and inserting DOM notes in the fastest ways possible. Module 5 is about jQuery's data and Module 6, our last module, is on some advanced topics and events including how events have changed in jQuery one dot seven and deferred objects and promises. It's important to note that the Javascript we use won't be trivial and this is not an end to end covering of jQuery but if you want to really take advantage of the serious power that jQuery has then this is the course for you.

Customizing jQuery
Welcome to module 2 of the Pluralsight advanced jQuery course. My name is Joe Eames, and in this module we'll be taking a look at how to customize jQuery. jQuery is an incredibly powerful and useful JavaScript library, and without any customization at all, it will greatly improve any JavaScript coding you do, but knowing how and when to customize jQuery will improve your ability to not only utilize jQuery, but it will help you to write more expressive JavaScript. Now, when most people hear the phrase customized jQuery, what comes to mind is plugins, but in this module, we won't be discussing authoring our own plugins. That comes in a later module. Instead, we'll be focusing on some specific extensibility points in jQuery, and also in creating some of our own extensibility points. So, let's go over the agenda. We're going to start with something very simple. We'll be looking at how to add our own custom speeds for use of animations. This is a built-in extensibility point in jQuery that lets us add to the two existing speeds, fast and slow. After that, we'll look at adding our own utility methods to jQuery. This technique lets us attach our own utility functionality onto the jQuery object. If you have some awesome idea for a convenience method for the ajax function like the load method, but even better, then this is the place to implement that. And the last technique we'll learn is how to take one of the built-in functions and either extend or replace its functionality with their own enhancements. Of the methods we'll cover, this is the one that's most dangerous, and not necessarily an extension point by design, but the dynamic nature of JavaScript gives us this ability. So, while we are learning to override functions, we'll be talking a lot about the dangers and pitfalls of doing so. So, these are the customization techniques that we're going to learn in this module.

Performance
( Silence ) Joe Eames: Hello. And welcome to Module Four of Pluralsight's Advanced jQuery course. My name is Joe Eames. Performance is one of those great ubiquitous concepts in programming that every programmer knows is important. When programming in JavaScript and jQuery, there is no difference. Performance is important. This module will be all about making our jQuery code perform faster. Let's look at the outline of this module. The first thing we will discuss is how to identify and diagnose performance problems. We'll discuss some of the tools available to us to find where our code is slow and learn how to use those tools. Then we'll look at some general performance tips and tricks. Some of these will be very specific to jQuery, and some of them will be generic programming in JavaScript techniques. And then we'll look at selectors. We'll see what kind of selectors are fast and what kinds are slow and how to speed up slow ones. Lastly, we'll get into DOM Manipulation and how to speed up inserting new elements. Performance optimization in JavaScript and jQuery is no different than performance optimization in any other situation. As Donald Knuth put it, premature optimization is the real volule. So there's one main consideration we must make when we tune our jQuery performance. Most of the strategies that we discuss shouldn't be used until we know that they are addressing unacceptable performance. The reason for that is that most performance improvements will result in less maintainable code; so only use them when they are actually required.

Data Method
Hello and welcome to Module 5 of Pluralsight's Advanced jQuery course. My name is Joe Eames. When writing plug-ins or writing client side code, we often need to store extra pieces of data that are associated with the specific download. In the past, a typical way to do this was to add some additional attributes to the download which has a problem that the data must be serialized as a string and it also dirties up the HTML of the DOM which we may not want. Thankfully, jQuery has a mechanism for handling this exact scenario, the data method. Internally, the data we add using the data method is stored in the cache object inside the jQuery object so it doesn't mess with our DOM at all. So let's look at what we're going to cover in this module. We'll talk about basic usage of the data method and then move on to advanced scenario symbol storage and retrieval. We'll cover the reserved keys that we need to avoid as well as events on the data cache. How to set data on plain JavaScript objects, how to read HTML5 data attributes, and how to remove data when it's no longer needed. Lastly, we'll review a couple plug-ins that come in handy when dealing with the data method. So, let's jump right in.

Advanced jQuery Event Handling
Hello and welcome to Module 6 of Pluralsight's jQuery Advanced Topics Course. My name is Joe Eames. In this module we will be covering events in jQuery, specifically some of the more advanced areas of events. Understanding events is important in programming in Java Script not only because events are how your code receives actions from the user but also because events support creating loosely coupled code. In addition, events and asynchronous operations are closely related concepts and many of the important operations in Java script are asynchronous so being able to really take advantage of the eventing mechanisms in jQuery will give you some additional tools for creating clean, maintainable code. Now let's take a glance at our outline. We'll start by covering the on method which is new in 1. 7 and replaces all your event binding code from previous versions. Then we'll go on to creating custom events, then we'll begin digging into deferred objects with some conceptual overview and then we'll look at how to create and work with deferred objects in code. Then we'll talk about promises and their relationship to deferred objects. After that we'll have a quick discussion on parameters and late callbacks to deferred objects, then we'll finish up with a discussion of the when method followed by a summarization of the module.