Tutorials:Getting Started with jQuery

Tutorials:Getting Started with jQuery From jQuery JavaScript Library Jump to: navigation, search Goes through the basics of jQuery, all the way up to building plugins. Original: http://jquery.bassistance.de/jquery-getting-started.html Author: Jörn Zaefferer Similar Tutorials: jQuery Core, Selectors, Attributes, Traversing, Manipulation, Events, Effects, Ajax, Plugins This guide is an introduction to the jQuery library. Basic knowledge of JavaScript and the document object model (DOM) is required. It starts from ground up and tries to explain details where necessary. It covers a simple hello world example, selector and event basics, AJAX, FX and usage and authoring of plugins. This guide contains no "click me" examples. The intention of providing only "copy me" code is to invite you to try it for yourself. Copy an example, see what it does, and modify it. Contents 1 Setup 2 Hello jQuery 3 Find me: Using selectors and events 4 Rate me: Using Ajax 5 Animate me: Using Effects 6 Sort me: Using the tablesorter plugin 7 Plug me: Writing your own plugins 8 Next steps Setup To start, we need a copy of the jQuery library, which we can get from the main download page. The jQuery Starterkit provides some markup and CSS to work with. After downloading and extracting its content we put jquery.js into the same directory and open starterkit.html and custom.js with your favorite editor and starterkit.html with a browser. Now we have everything to start with the notorious "Hello world" example. Interesting links for this section: jQuery Starterkit Downloading jQuery Hello jQuery We start with an empty html page: After including the plugin, you can call it like this: $(document).ready(function(){ $("#large").tablesorter(); }); Try clicking the headers of the table and see how it is sorted ascending on first click and descending on second. The table could use some row highlighting, we can add those by passing some options: $(document).ready(function() { $("#large").tablesorter({ // striping looking widgets: ['zebra'] }); }); There are more examples and documentation about the available options at the tablesorter homepage. Most plugins can be used like this: Include the plugin file and call the plugin method on some elements, passing some optional settings to customize the plugin. A up-to-date list of available plugins can be found on the jQuery Plugin site. When you are using jQuery more often, you may find it useful to package your own code as a plugin, either to reuse it for yourself or your company, or to share it with the community. The next chapter gives some hints on how to structure a plugin. Interesting links for this chapter: Plugins for jQuery Tablesorter Plugin Plug me: Writing your own plugins Writing your own plugins for jQuery is quite easy. If you stick to the following rules, it is easy for others to integrate your plugin, too. Plugin Naming Find a name for your plugin, lets call our example "foobar". Create a file named jquery.[yourpluginname].js, eg. jquery.foobar.js Adding a Custom Method Create one or more plugin methods by extending the jQuery object, eg.: jQuery.fn.foobar = function() { // do something }; Which will then be accessible by performing: $(...).foobar(); Default Settings: Create default settings that can be changed by the user, eg.: jQuery.fn.foobar = function(options) { var settings = jQuery.extend({ value: 5, name: "pete", bar: 655 }, options); }; You can then call the plugin without options, using the defaults: $("...").foobar(); Or with some options: $("...").foobar({ value: 123, bar: 9 }); Documentation If you release your plugin, you should provide some examples and documentation, too. There are lots of plugins available as a great reference. Now you should have the basic idea of plugin writing. Lets use this knowledge and write one of our own. Checkbox Plugin Something lots of people, trying to manipulate forms with jQuery, ask for, is checking and unchecking of radio buttons or checkboxes. They end up with code like this: $(":checkbox").each(function() { this.checked = true; this.checked = false; // or, to uncheck this.checked = !this.checked; // or, to toggle }); Whenever you have an each in your code, you might want to rewrite that as a plugin, pretty straightforward: jQuery.fn.check = function() { return this.each(function() { this.checked = true; }); }; This plugin can now be used: $(":checkbox").check(); Now you could write plugins for both uncheck() and toggleCheck(), too. But instead we extend our plugin to accept some options. jQuery.fn.check = function(mode) { // if mode is undefined, use 'on' as default var mode = mode || 'on'; return this.each(function() { switch(mode) { case 'on': this.checked = true; break; case 'off': this.checked = false; break; case 'toggle': this.checked = !this.checked; break; } }); }; By providing a default for the option, the user can omit the option or pass one of "on", "off", and "toggle", eg.: $(":checkbox").check(); $(":checkbox").check('on'); $(":checkbox").check('off'); $(":checkbox").check('toggle'); Optional Settings With more than one optional setting, this approach gets complicated, because the user must pass null values if he wants to omit the first parameter and only use the second. The use of the tablesorter in the last chapter demonstrates the use of an object literal to solve this problem. The user can omit all parameters or pass an object with a key/value pair for every setting he wants to override. For an exercise, you could try to rewrite the Voting code from the fourth section as a plugin. The plugin skeleton should look like this: jQuery.fn.rateMe = function(options) { // instead of selecting a static container with // $("#rating"), we now use the jQuery context var container = this; var settings = jQuery.extend({ url: "rate.php" // put more defaults here }, options); // ... rest of the code ... // if possible, return "this" to not break the chain return this; }); And allowing you to run the plugin like so: $(...).rateMe({ url: "test.php" }); Next steps If you plan to develop more JavaScript, you should consider the Firefox extension called FireBug. It provides a console (nice to replace alerts), a debugger and other useful stuff for the daily JavaScript development. If you have problems you can't solve, ideas you want to share or just the need to express your opinion on jQuery, feel free to post to the jQuery mailing list. For anything related to this guide post a comment on my blog or contact me directly. Whats left... Thanks a lot to John Resig for this great library! Thanks to the jQuery community for providing John with enough coffee and everything else! Retrieved from "http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery" Categories: JQuery Core | Selectors | Attributes | Traversing | Manipulation | Events | Effects | Ajax | Plugins | Tutorials