• jQuery
• Scriptaculous
• Tiny MCE
• Thickbox

Want to use jQuery in your theme, for a tabbed box, an AJAX something, or some sort of DHTML effect? You can add it in with a single template tag in your header.

<?php wp_enqueue_script('jquery'); ?>

That was easy, wasn’t it? The wp_enqueue_script function can be used in plugins as well, so plugin authors, pleasestop bundling jQuery and Scriptaculous with your plugins. It’s not necessary.

The function can also be used to add your own scripts to a blog (whether you’re doing so from a them or plugin). The syntax is

<?php wp_enqueue_script('handle', 'src', 'dependencies'); ?>

“Handle” is a unique name you give to the script, “src” is the the script’s URL, and the optional last argument allows you to specify dependencies (i.e. scripts that must be loaded before the current one). For example, to load the jQuery UI Tabs package, which naturally requires jQuery, you would use something like this:

<?php wp_enqueue_script('jquery-ui', 'http://example.org/wp-content/themes/my_theme/jquery/jquery-ui-tabs.js', 'jquery'); ?>

The function will also ensure that the same script will not be loaded twice, if I’m not mistaken. Which means if you include jQuery in your theme, and you install a plugin that tries to load jQuery, it will only be loaded once.

Enough of my personal experiences, here are the hard facts:

jQuery

File Size: 21KB

Code Required to Toggle a DIV:

<script type="text/javascript">
$('#mydivtrigger').click(function() {
$('#mydiv').toggle(400);
return false;
});
</script>
<a href="#" id="mydivtrigger">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>

Prototype

File Size: 63.3kb + 126kb for Script.aculo.us

Code Required to Toggle a DIV (requires Script.aculo.us):

<script type="text/javascript">
function toggleMyDiv() {
Effect.toggle('mydiv','slide');
return false;
}
</script>
<a href="#" id="mydivtrigger" onClick="toggleMyDiv()">Toggle!</a>
<div id="mydiv">
Lorem ipsum.
</div>

The amount of code is similar, though Prototype + Script.aculo.us requires an onClick event handler. Not too big of a deal, though it’s kind of annoying. The biggest problem is file size. Do you honestly want to load 189.3KB…just for your JavaScript framework? That’s 27 seconds at 56 kilobits per second.

jQuery can do pretty much everything Prototype can do, and there’s even a Script.aculo.us equivalent: jQuery UI. It’s pretty big, but you can hand-pick the parts you want, and save a lot of kilobytes.