• Choose a category
• All
• Classic-Fiction

By way of example, we’ll set up a small plugin that retrieves the elements that surround the selected element. The use case might be to highlight the next and previous items in a list of elements. Our plugin will also wrap around if the selected item is the first or last in the list:

jQuery.fn.surrounds = function() {

var prev = this.index() == 0 ?

this.siblings(':last') :

this.prev();

var next = this.index() == this.siblings().length ?

this.siblings(':first') :

this.next();

var newStack = prev.add(next);

return this.pushStack(newStack, 'surrounds', '');

};

The plugin retrieves the previous and next elements, and combines them into one selection with the add action. This new collection is returned via pushStack, which accepts the collection, a name for it, and a name for the selector string. The two name parameters will be readable by the selector property we looked at above. To use this plugin, we might apply it to an unordered list called categories, like so:

$('#categories li:first')

.surrounds()

.css('color', 'red')

.end()

.css('color', 'blue');

This will select the two elements that surround the first list item, then color them red. Because we’ve used pushStack, the jQuery chain remains intact; we can then use the end command to move back to the original selection (the first list item), and color it blue. You can use pushStack anytime you want to manipulate the chain like this.

The last trick we’ll look at in regard to the jQuery internal chain is the ability to access other steps in the chain. As you might remember, the end action takes you back up one level to the last command that modified the jQuery selection. If you look into the jQuery core, you’ll see that end is implemented using the prevObject property. Inside your plugin you can gain access to the previous jQuery object by using this.prevObject. If the previous object has a previous object, you can access this too!

Minification

You know there are two versions of jQuery, jQuery UI, and many jQuery plugins: an uncompressed version and a minified version. Why is this so?

Regardless of which one you choose, when you add them to your page you gain access to all the features of jQuery (or the plugin in question). The difference is, of course, that the file size of the “.min” version is markedly smaller. With jQuery 1.3.2 coming in at around 118KB and the minified version at 55.9KB, you save over half the file size in bandwidth.

And if the file is half as big, it’s delivered twice as fast. Faster downloads mean faster pageloads, so you may be wondering how to enjoy the benefit of minified files with your own script files, and—more importantly—your plugins.

There are a number of utilities you can use to compress your files, so we’ll go over a few of the more commonly used ones.

Douglas Crockford’s JSMin was first released in December of 2003, and currently comes in both the original executable version (along with the C source code), as well as a host of other language options: C#, Java, JavaScript, Perl, PHP, Python, OCaml, and Ruby.

Of a similar pedigree, but slightly more accessible to use, is Dean Edwards’ Packer. It’s primarily accessed via a web page interface, but it also has .NET, Perl, and PHP applications available for download.

Both solutions work by eliminating whitespace—line breaks and extraneous spaces—and by shortening variable and function names. The code becomes obfuscated by human standards, but the browser’s JavaScript engine has no trouble interpreting the code output. So, for example, this human-readable code:

$growl.animate({

border: "none",

height: 0,

marginBottom: 0,

marginTop: "-6px",

opacity : 0,

paddingBottom: 0,

paddingTop: 0,

queue: false

}

… would be shortened to this:

$growl.animate({border:"none",height:0,marginBottom:0,marginTop:

↵"-6px",opacity :0,paddingBottom:0,paddingTop:0,queue:false}

The second statement has the whitespace removed, and you can already see that it’s taking up less space to achieve the same results. You can also see how it’s become more difficult to read. Multiply