jQuery Function Builder

Please note that this page requires JavaScript for it to function.

This tool is still loading. If this message does not disappear, your JavaScript has not worked/loaded properly and this tool will not function.

Select trigger item(s) and the event handler
What should happen next
... on element(s) specified in your selector field
'Document ready' syntax:

Copy/paste these into your jQuerys scripts file (not into the jQuery library itself!)

This links to the Google-hosted jQuery file (which means that there's a good chance that the user will already have a cached version of this file, offering a speed bonus). You may replace with a link to your local version, if you prefer to do this.

This reference to your own scripts file (containing the generated code above) should appear after the reference to the jQuery file in the source order. [See an example of where to place it here]

You should place the script files - both the jQuery library and your scripts that will use the library - at the end of your document, so as not to hold up page load (as recommended by professional web front end engineers).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>Example document</title>
</head>
<body>
 <div>
 <script type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript"
  src="/path/to/your/script.js"></script>
 </div>
</body>
</html>

Confused by jQuery syntax? Never sure when/where to place your parentheses, curly brackets and so-on? Use this tool to quickly build up a collection of functions that will be called when the page has loaded/is ready.

Using jQuery for scripting encourages good coding practices as it means that behaviour is layered over the top of a basic document which is more likely to be usable even if JavaScript is disabled (although this is not guaranteed - it still depends on the knowledge of the person coding!).