Learning jQuery

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 »

Half-baked tutorials and plugins have been stacking up for months in my virtual kitchen, waiting for me to fire up the oven, finish the cooking, and spread them out on the table. For some reason, though, I’ve become less and less sure about whether I’ve put all the right ingredients into the mix. It’s irritating, to be sure, but I’m tired of fretting about it. I’m going to consider this the first of what I hope to be many “taste tests” — experiments in various degrees of completion thrown against the wall to see what, if anything, sticks.

As some of you may know, the online jQuery documentation went through a major overhaul in January of this year, coinciding with the release of jQuery 1.4. Packt Publishing “open sourced” the jQuery 1.4 Reference Guide that Jonathan Chaffer and I had been writing, allowing us to put its entire contents (and more) on api.jquery.com. Some of you may also know that the raw XML content of the site is available as a single file, which has allowed other sites such as jqapi.com and idocs.brandonaaron.net to provide alternative views of that content. But what most of you probably do not know is that the jQuery API has been available for quite some time as a searchable API that returns the results in JSON format.

Read the rest of this entry »

Before we begin, please accept my apologies for not posting this tutorial sooner. I know at least two or three people were beginning to wonder if I’d ever finish what I started with this tooltip series. Please also forgive me if the phrase “flip your tip” has a double meaning in some ultra-hip corner of the universe. If it does, I can assure you that I am unaware of it—ignorant and unhip, to be sure, but more important, innocent. Now, on with the show.

Quick Review

In my last three tutorials, I discussed how to put together a very simple tooltip, and I introduced a different feature or concept in each one. In an effort to continue in the spirit of simplicity, I will refrain from repeating the explanations of previous posts and instead simply direct your attention to them before we begin:

• Simple Tooltip for Huge Number of Elements
• Binding Multiple Events to Reduce Redundancy with Event Delegation Tooltips
• Using setTimeout to Delay Showing Event Delegation Tooltips

Read the rest of this entry »

Since the fall of 2007, jQuery developers around the world have been making an annual pilgrimage to Boston, Massachusetts, to meet jQuery team members, JavaScript luminaries, and other jQuery developers at the official jQuery Conference. This spring, in response to growing demand, the jQuery Project is offering its first-ever official jQuery conference on the U.S west coast. The conference will take place April 24–25 in Mountain View, California, and will include top-notch presentations from the jQuery team, as well as other web development and performance experts. Additionally, the conference will be preceded by a one-day intensive jQuery training course in downtown San Francisco, led by appendTo a leading jQuery training and consulting company.

Read the rest of this entry »

In my Jan Aagaard asked how we might go about enhancing the script by adding a small delay before showing a tooltip. The answer lies with two JavaScript functions, setTimeout() and clearTimeout().

Read the rest of this entry »

Last time I showed how to use event delegation to create a simple tooltip for a huge number of elements without running into the problem of binding an event handler to all of those elements. In this tutorial, I’m going to refine that tooltip script a bit, avoiding some code repetition and fixing a bug that someone pointed out in a comment.

Read the rest of this entry »