- Incorporating jQuery into an HTML page
- Selecting page elements
- Adding event handlers
- Applying effects
- Manipulating elements
To start, a lot of common functionality has been put into a separate library, called jQuery UI, short for User Interface. This library adds features like drag and drop, resizing, accordians, tabs, date pickers, progress bars, plus effects. Even though jQuery UI contains all that stuff, you can use the library’s download page to build your own custom version that only defines the features you need. See the jQuery UI demos page for examples and source code. The Getting Started page also includes some good, basic information. In time, you’ll likely want to check out the jQuery UI ThemeRoller, which helps create a custom, cohesive look for the effects to match the rest of your site.
If jQuery UI is missing a feature that you need, head to jQuery’s plug-ins page. There the plug-ins are organized by type, and there are listings of most popular and most recent releases. If you want someone else’s opinion as to which plug-ins are best, a quick search turns up many articles on the subject:
There are a couple of plug-ins that I personally recommend: Superfish and the jQuery Form Plugin. The former creates “suckerfish”-style navigation menus out of nested unordered links. These are animated, keyboard accessible menus that degrade well. See the examples page to look at this in action. The jQuery Form Plugin makes it easy to integrate Ajax functionality with forms (as form data is commonly used in Ajax interactions). If you look at the examples, you’ll see that it could hardly be easier to make an Ajax request using form data. Plus it has a cool feature where it automatically uses a hidden iframe to handle file uploads (which cannot be handled via Ajax).
So, what else? Date pickers are a popular tool and the jQuery UI includes a version. If you want something fancier, consider the Date Range Picker plug-in. There are also nice color pickers available, like this one. And there are a ton of different image manipulation plug-ins out there, as you can see in the links above and on jQuery’s plug-in page.