jQuery is the premier library for coding JavaScript page effects. Most popular content management packages run jQuery for both admin and frontend design effects. As a web developer jQuery can be a fun library to spend some time learning and offers tremendous design potential.
It seems there are so many references and guides out there it’s easy to get lost. Below we’ve compiled 19 unique jQuery tutorials to help develop your skills as a frontend developer.

Form validation from scratch

Develop a simple and powerful jQuery script for common HTML form validation.

Incredible jQuery Login Form

Learn how to code a structural jQuery login form with sliding animation. Hide your form out of a visitors view until clicked.

Creating a Digg Style Signup Form

Digg has been an innovator for web apps for years. Learn how to develop a dynamic registration form similar to their signup page.

Color jQuery & CSS3 Sliders

Here you are taught about using jQuery and the new transformation features brought by CSS3 to create a dynamic slider effect.

Working with Events – Part 1

Part 1 of a detailed series teaching about events in jQuery. Here you’ll learn the bare-bones of the jQuery library and how to use events to construct your own functions.

Ajax-based Form Submission

Here you’ll learn how to submit a web form and display the submission result with some fancy fadeOut or slideUp effects. You’ll utilize both jQuery effects and Ajax for form submission.

jQuery Fade-in Spoiler

Practice designing a spoiler system with a fade-in effect using jQuery. This can be helpful in hiding tips or potential plot spoilers in website comments.

Dynamic Page Content Replacement

Design a unique content replacement script with a fade effect. You can run small tabs or links on your page to switch betweet content settings.

Simplify Ajax development with jQuery

Here you’ll learn about the jQuery syntax, discover its features and functions, perform some common Ajax tasks, and find out how to extend jQuery with plug-ins.

Simple Toggle with CSS & jQuery

jQuery can be difficult when first learning about open and close states. This tutorial guides you through the basics of mastering the jQuery toggle states.

Create a unique Gallery with z-index

jQuery development can be combined with the CSS property z-index to create a unique photo gallery effect.

Design Skype-style buttons with jQuery

As a very powerful JS library jQuery can do almost anything these days. Here you’ll create some unique Skype buttons with only some basic jQuery and CSS.

Apple-style Slideshow Gallery

Using basic HTML/CSS and jQuery development we’ll create a simple Apple gallery slideshow effect. Beautiful to fit into any webpage.

From PHP & XML into jQuery

Getting back into PHP backend programming here you’ll learn how to connect data retrieved through the backend and place it into jQuery and Ajax effects.

Manipulating the DOM(code snippits)

Working with jQuery to manipulate the Document Object Model is a powerful skill to understand. Here there’s 10 fantastic code snippits in working with jQuery and the DOM.

Semantic Blockquotes with jQuery

In this tutorial we identify text needed as a quote and using the DOM insert it into any area content. This helps avoid duplicate content and works well with mobile browsers.

jQuery Basics with Google Maps

In this tutorial you’re guided through how to get started using jQuery inside the Google Maps environment. You can create amazing mashups and creative designs with a simple connecting to the Google Maps API.

Create a Live Updating List

Creating a dynamic list in jQuery is a simple effect which goes a long way for user interface. Here you’ll learn the basics of creating a dynamic jQuery powered list.

Flickr CSS Menu Design

Here you’ll learn a simple step-by-step way to implement an Flickr Horizontal Menu Demo in jQuery and CSS.

Sometimes using tabs just makes a lot of sense. For instance, if you have a limited amount of screen real estate, tabs can allow you to save room by giving the user a way to toggle between several items in a small space. And to take your tabs a step further, you can throw jQuery into the mix for some nice transition and animation effects. If you’ve yet to build a tab navigation with jQuery, here are 11 tutorials and plugins to help you get going.

Create A Tabbed Interface Using jQuery

A tutorial and plugin for creating an animated tabbed area.

Sweet AJAX Tabs With jQuery 1.4 & CSS3

In this tutorials you’ll learn how to create an AJAX-powered tab page with CSS3 and jQuery.

Building a Better Blogroll: Dynamic Fun with SimplePie and jQuery

This tutorials teaches you how to build a dynamic tabbed blogroll with some fun jQuery animations.

Create a Slick Tabbed Content Area using CSS & jQuery

This tutorials teaches you how to build a simple little tabbed information box in HTML, then make it function using some simple Javascript, and then finally we’ll achieve the same thing using the jQuery library.

Feature List

This jQuery plugin enables simple and easy creation of an interactive “Featured Items” widget.

Fancy Sliding Form with jQuery

This tutorial teaches you how to create a fancy sliding form that shows some validation feedback to the user after each step. This form saves a lot of space and is easy to access – it basically works like a slide show, just that we have fieldsets of a form instead of images.

Create A Tabbed Interface Using jQuery

This tutorial teaches you how to easily create a tabbed interface using the Tabs function in the jQuery UI library.

Tabify

This Jquery plugin lets you easily create tabbed content. All you need is an ul-element with some li-elements and a couple of related content-divs. The major difference between Tabify and it’s competitors is it’s size.

Accessible-Tabs

jQuery Plugin that generates a Tab Navigation from Markup that makes sense without Javascript. The generated Tabs are the only ones out there that work for Screenreader users without support for WAI ARIA.

idTabs

idTabs is a plugin for jQuery that makes adding tabs into a website super simple. But it can also open the door to endless possiblities.

jQuery Moving Tab and Sliding Content Tutorial

Learn how to build a lava lamp tab and sliding content all together with just simple jQuery code. This script is good for sidebar that display recent posts, comments and community news.

We all know and love jQuery for its flexibility and many uses. But some of the most impressive jQuery applications are those that involve images. It really can allow you to do some useful stuff and even add a “wow” factor to your project. So here we’ve rounded up 10 jQuery plugins to help you display images in your next project.

Slides

Slides is a crazy simple slideshow plugin for jQuery. With features like looping, auto play, fade or slide transition effects, crossfading, image preloading, and auto generated pagination.

Face Detection

Face Detection is an impressive plugin that does just what its name suggests. It detects faces in photos.

AviaSlider

AviaSlider is a jQuery slideshow plugin with unique transition effects.

Fullscreenr

So you want to have a background image on your website, which always fills the screen and maintains its aspect ratio? And it has to be centered, instead of focussing at the top left corner of the image? This plugin does that.

Slidy

jQuery Slidy is a plugin that generates a customizable transitions automatically.

MobilyNotes

MobilyNotes is lightweight (2KB) jQuery plugin that shows your images or other html content in a stacked format.

jQuery Easy Slides

Easy Slides is an extremely easy to use plugin for making slideshows. It also has the advantage of being fairly light weight, with both Javascript and CSS weighing in at just under 2.1kb.

Booklet

Booklet is a jQuery plugin for displaying images and more in a book format with a turning page effect.

MobilySelect

MobilySelect is jQuery plugin (2kB) that replaces one collection of items with another.

Pikachoose

Pikachoose is a lightweight Jquery plugin that allows easy presentation of photos with options for slideshows, navigation buttons, and auto play.

You’ve probably noticed that a lot of websites lately have a featured area with content that slides or changes in some way. This is a great technique to show several pieces of content in a limited amount of space and a good way to engage the user. If you’ve been wondering how this is accomplished, here are 13 very useful tutorials and scripts that will help you create these types of effects using jQuery.

jQuery Tools Scrollable

AnythingSlider jQuery Plugin

Sliding Boxes and Captions with jQuery

Making a Content Slider with jQuery UI

Creating a Slick Auto-Playing Featured Content Slider

Create Featured Content Slider Using jQuery UI

jQuery.ScrollTo

Moving Boxes

ImageSwitch

jCarousel

Using the Wonderful jFlow Plugin

Create Beautiful jQuery slider tutorial

Step By Step To Create Content Slider using jFlow