jQuery is one of the most popular JavaScript frameworks, with powerful tools that can significantly improve the user’s interaction with Web applications. It has an additional advantage in that it allows developers to select elements on a page using CSS-like syntax which make it very easy to understand.

To help you improve your skills, We’ve collected 30 useful jQuery techniques and tutorials that have been created recently and that could make the development of your next website an easier and more interesting experience than the last.

1. Current Field Highlighting
   As a matter of usability and aesthetics, it is a good thing to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field. In this tutorial, we’ll improve our current field highlighting, using jQuery.
2. Accessible Charts & Graphs from Table Elements using HTML 5 Canvas and jQuery
   This technique provides a simple method for generating bar, line, area, and pie charts from an HTML table, and allows you to configure them in a variety of ways.
3. Moving Boxes Carousel with jQuery
   Many of the concepts presented in classic carousel tutorials are the same, so this tutorial will not throw a lot of source code at you. The big difference here is that there are buttons to change panels and the panels zoom in and out.
4. Sliding Boxes and Captions with jQuery
   All of these sliding box animations work on the same basic idea. There is a div tag that essentially acts as a window where two other items of your choosing “peek” through.
5. Make a Mega Drop-Down Menu with jQuery
   So how would we go about implementing Mega drop down menus? While it’d be great to do all of this in pure HTML and CSS, it’s impossible at the moment to get those nice half-second delays — and of course there’s a pesky problem with Internet Explorer 6, which only supports :hover on anchor elements. Instead, we’ve found whipped up a solution using jQuery and a very nifty plugin called hoverIntent.
6. A fancy Apple.com-style search suggestion
   “This example makes use of several techniques: MySQL (for the database), HTML/CSS for styling, PHP for retrieving the data and jQuery for the AJAX request. How about that for some nice way of combining powerful techniques to create something nice like this. You do need some basic knowledge about these techniques to fully understand this tutorial.”
7. Creating a Dynamic Poll with jQuery and PHP
   “When you combine some neat functionality courtesy of PHP with the cleverness of jQuery you can produce some pretty cool results. In this tutorial we’ll create a poll using PHP and XHTML, then make use of some jQuery Ajax effects to eliminate the need for a page refresh, and to give it a nice little bit of animation.”
8. jQuery Infinite Carousel
   This screen cast explains how you can create a simple and nice scrolling carousel and how you can also make it automatically loop round by itself. For the latter see also Automatic Infinite Carousel.
9. Creating a Filterable Portfolio with jQuery
   If you have worked in your field for a while, there is a pretty good chance that you have a rather extensive portfolio. To make it a little easier to navigate, you will probably be tempted to break them into different categories. In this tutorial, I will show you how to make “filtering by category” a little more interesting with just a little bit of jQuery.
10. De-Constructing Accordion and Hover Effects with jQuery
    This video tutorial explains how the hover and accordeon effects on Tim Van Damme’s site can be achieved using jQuery.
11. Better form submission feedback with jQuery
    Browsers fail to give users effective feedback when the user submits a form. Users respond by clicking the submit button over and over. The problem compounds when users find out they’ve been charged 5 times or when you receive 5 contact submissions. The solution is to replace the submit button with a friendly message letting the user know the form is working.
12. How to Make a Threadless Style T-Shirt Gallery
    There’s a thumbnail which is a full sized image in a container div, which is smaller than the full sized image. The image is centered within it, but doesn’t show entirely because overflow:hidden is turned on. When the mouse hovers over the thumbnail, overflow:hidden gets turned off, and the entire image is displayed.
13. Create a gallery by using z-index and jQuery
    In this tutorial you will learn to combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Also check out Enhancing the z-index Gallery with a Preloader.
14. Add a favicon near external links with jQuery
    External links should always be marked distinctly in order to make it easy for readers to see them easily. You cann add a CSS class to all outgoing links using the pseudo-class a[href^=http]. A more dynamic solution is using the favicon.ico of the external site, if it is available of course.
15. Automatically generate table of contents using jQuery
    “Some time ago, I was debating with my friends on the topic: is there any use of generating table of contents automatically. The conclusion was that it can be useful in cases when the reading material is long enough and table of contents (TOC) has a fixed position on the screen. This tutorial will show you how to create such TOC in just a few lines of code.”
16. Reddit-style Voting With PHP, MySQL And jQuery
    If you are a regular at Reddit, you must have noticed the way people vote there. You can either vote up or vote down. This tutorial will show you how to create such a voting system with jQuery, PHP and MySQL.
17. Making a Content Slider with jQuery UI
    In this tutorial we’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.
18. Scrollable Timelines
    Making use of the overflow and scrollLeft DOM property to scroll elements is a much more effective use of the CPU, over animating using CSS top/left. This tutorial demonstrates the same effect used in two completely different ways.
19. BBC Radio 1 Zoom Tabs
    This tutorial explains how to achieve the effect on the latest BBC Radio 1 website, where the mouse rolls over the image block, tabs slide up and the image zooms a little to reveal more of the picture.
20. Creating A Slick Ajaxed Add-To-Basket With jQuery And PHP
    This is a detailed tutorial which shows creating an unobtrusive Ajaxed shopping cart using jQuery & PHP and can guide you to Ajaxify any e-commerce software you may already be using or coding.
21. Create a Digg-style post sharing tool with jQuery
    We are going to make a digg-style post sharing toolbox. It’s all pretty straight forward and need a little bit of planning. The way it works is different with digg’s. If you view the html source code of Digg’s, it has the sharebox html code in every single post. But, in this tutorial we have only one sharebox, and all the links are sharing the same template.
22. Using jQuery to play Media Files (MP3,WMA,etc,etc)
    I’m going to show you the most productive way (I guess you could say that) of playing a MP3 ( You can also use WMA, and you file of choice) on your website.
23. Easy Retweet Button
    The script itself is completely standalone (no dependencies) and can be included in any page relatively painlessly. Additionally, since it’s just HTML, CSS, and JavaScript, it’s completely themeable and customizable to the style of your site.
24. Create an amazing music player using mouse gestures & hotkeys in jQuery
    We will create an amazing music player coded in xHTML & jQuery that made use of mouse gestures and hotkeys. You can Click & Drag with mouse to interact with interface’s music player or use directional keys & spacebar instead of mouse.
25. Creating a Virtual jQuery Keyboard
    This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.
26. Quick Tip: Resizing Images Based On Browser Window Size
    In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist pages.
27. Using Form Labels as Input Values with jQuery and CSS
    A nice little additive to web forms is to put the input labels inside of the inputs box as the starting value. By using jQuery to bring the label in as the value we can archive the desired effect without impacting accessibility, since the label elements are still there. Then we can take it a step further by dynamically adding a class to the input and use CSS to style the form only if JavaScript is enabled. The search box at the top of this page is an example of this technique.
28. A jQuery inline form validation, because validation is a mess Të Position Absolute
    When it comes to form validation, it’s hard to have a versatile solution that works with every form. Figuring out how to display errors is not a simple task.  When an error needs to be displayed, the script creates a div and positions it in the top right corner of the input. This way you don’t have to worry about your HTML form structure. The rounded corner and shadow are done with CSS3 and degrade well in non compliant browsers. There is no images needed.
29. jQuery File Tree
    jQuery File Tree is a configurable, AJAX file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code.
30. Using jQuery To Manipulate and Filter Data
    When a webpage is designed to display large tables of data, a great amount of consideration should be dedicated to allowing the user to sort through the data in a structured manner. In this article, it will go over four techniques: hover effects, zebra rows, filtering, and sorting.