Karl Swedberg, who is the founder of LearningJQuery has reluctantly sold the website and so now the site will be getting fresh new content and will likely be updated several times per week.

Stay tuned for the continuation of useful JQuery tutorials and lessons on an on-going basis.  We hope to expand the content to news and other useful information as well as the site continues to evolve.  Stay tuned!


This post has been a long time in coming, and I’m sure it comes as no surprise to anyone who has been to the site in the past year and a half. But it’s time to make it official: the Learning jQuery blog has come to an end.

I started this blog seven years ago when I was just getting my feet wet with programming for the web as a way to record and help solidify all that I was learning about jQuery (hence the blog’s name, duh). Soon thereafter I started inviting others to write here as well in the hopes of having the site be a good destination for solid information about my favorite JavaScript library.

We had a good run with it, but after a while the frequency of posts started to drop. At the same time, but not merely coincidentally, other demands on my time were ratcheting up: family, day job, friends IRL, and so on. And although I spent far too much time over the last year or so feeling guilty about not writing here, that feeling never translated into another blog post. I still love jQuery, still use it, and still contribute when I can, but I’ve come to the conclusion that if twenty-some months and a whole lot of guilt aren’t going to motivate me, it’s time to accept the obvious and close up shop.


Besides, other sites have sprung up in the meantime that offer better and more up-to-date material on jQuery. In particular, I’d like to direct you to the official jQuery Learning Center. It’s awesome, and it’s community driven. You can even contribute to it yourself, if you’d like.


Before I end, I’d like to express my gratitude to everyone who has contributed to this site. Thanks to all the authors who were willing to write about their tips and techniques and deal with my nitpicky editing. Thanks to all the commenters who asked great questions or showed me a better way to do something than what I had detailed in a post. Thanks to John Resig (@jeresig) who created jQuery and encouraged me to start this blog and remained a friend and mentor throughout the years. Thanks to Dave Methvin (@davemethvin‎), who picked up the torch and is doing a fantastic job of keeping jQuery lean, clean, fast, and useful. And thanks to the people in the jQuery community, both past and present, who have taught me so much, including, in no particular order (and if I left anyone out, I’m sorry. Send me an email, and I’ll add you to the list.):

Clarification: The site will remain online for the foreseeable future. As time permits, I’ll update posts with updated information or links to other resources.

Using jQuery’s .pushStack() for reusable DOM traversing methods

The .pushStack() method has been in jQuery since before version 1.0, but it hasn’t received a whole lot of attention outside of core developers and plugin authors. While its usefulness may not be immediately apparent, it can come in really handy in some situations, so I’d like to take a quick look at what it does, how it works, and how we can use it.

pushStack Basics

At its most basic level, the .pushStack() method accepts an array of DOM elements and “pushes” it onto a “stack” so that later calls to methods like .end() and .andSelf() behave correctly. (Side note: As of jQuery 1.4.2, you can pass in a jQuery object instead of an array, but that isn’t documented and jQuery itself always uses an array, so that’s what we’ll stick to here.)

Internally, jQuery uses .pushStack() to keep track of the previous jQuery collections as you chain traversing methods such as .parents() and .filter(). This lets us traverse through the DOM, do some stuff, “back up” to previous collections within the same chain using .end(), and then do something else. Here is a somewhat contrived example:

Read the rest of this entry »

Using jQuery’s Data APIs

In the beginning (well, beginning with jQuery 1.2.3 in early 2008) there was the jQuery.data() API. It offers a way to associate JavaScript data — strings, numbers, or any object — with a DOM element. As long as you manipulate the DOM element with jQuery, the library ensures that when the DOM element goes away, the associated data goes away as well. This is especially important for older versions of IE that tend to leak memory when JavaScript data is mixed with DOM data.

Most jQuery code sets data values using the higher-level .data() API; for example, $("div").data("imaDiv", true) sets a boolean value on every div in the document. This API, in turn, calls down to jQuery.data() with each element to set the value. For completeness, there are also jQuery.removeData() and .removeData() to remove data elements, and jQuery.hasData() to determine if any data is currently set for an element.

Read the rest of this entry »

jQuery.map() in 1.6

Among all of the great fixes and additions to jQuery 1.6, I’m happy to say that jQuery.map() now supports objects! The previous map only supported arrays. With other libraries already offering object support for map, it was a nice addition.

Read the rest of this entry »

Merging jQuery Deferreds and .animate()

Editor’s Note: This article originally appeared on danheberden.com.

jQuery’s .animate() method, and the shorthand methods that use it, are fantastic tools to create animations. Creating animations that link together to achieve a particular effect, and do something specific at the end of the animation, can be a painful, messy task. Luckily, we have .queue() for mashing animations together.

But what happens when you want to bridge the gap between ajax requests and animating? When you want to queue a bunch of animations, get data from the server, and handle it all at once, without a crap-load of nested callbacks? That’s when jQuery.Deferred() puts on its cape, tightens its utility belt, and saves the day.

Read the rest of this entry »