There’s stuff all over the Web about jQuery, but finding the best tutorials to get you started can be tough. Here are Examples and tutorials from jQuery masters to keep you on the right track.
We will start with jQuery masters and feature some of their best tutorials, then we will move on to more categorized tutorials, cheat sheets and hacks.
Pro Tip
Sign up for a free Jotform account to create powerful online forms in minutes — with no coding required.
You can also take a look at other article in this series :
John Resig
John Resig, creator of the JQuery JavaScript library and author of Pro JavaScript Techniques, is a Mozilla technologist focused on the relationship between Mozilla and the world of JavaScript libraries.
Featured Tutorials of John Resig
- How jQuery Works – This is a basic tutorial, designed to help you get started using jQuery.
- Expandable Sidebar Menu ()– (jQuery Online Movie Tutorial) A basic introduction to jQuery and the concepts that you need to know to use it. Live Demo is here.
15 Days Of jQuery
15 Days Of jQuery – Fantastic tutorials and example code that takes you from zero to hero in no time flat.
Featured Tutorials of 15 Days Of jQuery
- jQuery Online Movie Tutorial by John Resig– Pretty basic stuff… but a good intro to jQuery if you’re new to this.
- Draggable, Droppables, Selectables… Oh My!
- Multiple File Upload Magic With Unobtrusive Javascript
- Rounded Corners with Javascript (jQuery)
Learning jQuery
Learning jQuery– Getting to know the library of choice for unobtrusive JavaScript.
Featured Tutorials on LearningjQuery.com
- Working with Events, part 1
- Animated Scrolling with jQuery 1.2
- Automatic Page Contents
- More Showing, More Hiding
Bassistance
Bassistance– Goes through the basics of jQuery, all the way up to building plugins.
Featured Tutorials on Bassistance
- Getting Started with jQuery– This guide is an introduction to the jQuery library. 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.
Cody Lindley
Cody Lindley– Who created the ThickBox and jTip plugins.
Featured Tutorials on Cody Lindley
- JQuery To The Rescue– An interactive demonstration of the basics behind jQuery.
Remy sharp’s Blog
Remy sharp– Written many useful tutorials and plugins on his own blog, also he is the man behind the very useful jQueryForDesigners website which have many useful tutorials requested by his own readers.
Featured Tutorials on Remy sharp’s Blog
- Text box hints– You will see a lot of web sites with search boxes have text already populated inside of the field and when you select the input text box it disappears and reappears when it’s not selected. This tutorial will show you how can add a small amount of jQuery to add this feature to any of your web sites.
- Auto-populating Select Boxes using jQuery & AJAX– Allow the user to select a top level category from one select box and to automatically populate the sub-category using jQuery and Ajax.
Featured Tutorials on jQueryForDesigners
- Using Ajax to Validate Forms– With this tutorial you will be able to have your first forms that do the following: 1) Live username checking, 2) Password confirmation and strength, 3) Checking if an email address is already registered, 4) URL validation
- Image Cross Fade Transition– How to fade one image in to another?
Web Designer Wall
- jQuery Tutorials for Designers– This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. Effects include: Simple slide panel, Simple disappearing effect, Chain-able transition effects, Accordion, Animated hover effect, Entire block clickable, Collapsible panels.
CSS-Tricks
CSS-Tricks is a home for examples, tutorials, tips, tricks, and news regarding Cascading Style Sheets. Chris Coyer is getting into jQuery lately and posting interesting jQuery tutorials in his journey to learn jQuery.
Featured Tutorials on CSS-Tricks
- Fading Menu – Replacing Content– Chris Coyer shows us a nice menu effect emphasizing the designer’s perspective: “When I do this, make the CSS do this”.
- Improved Current Field Highlighting in Forms– How to add some kind of visual feedback on web forms to indicate the currently active (or “focused“) field.
- Fade-in Spoiler Revealer– Exploiting some of the “fading in” and “fading out” different page elements functions for a really simple Spoiler Revealer.
Getting started with jQuery
- The jSkinny on jQuery– A tutorial on the jQuery javascript library (from a Ruby/Rails perspective).
- How to Get Anything You Want– An introduction to jQuery selectors and traversal methods, and their use in navigating the DOM.
- It’s all about CSS– If you’ve got a good understand of CSS selectors, then you’re already familiar with how to query the DOM.
- jQuery Crash Course– For those who’d like to learn more about jQuery, one of the more popular libraries, here’s a crash course written with code-savvy web designers in mind.
- jQuery in 15 minutes– A short introduction to jQuery.
- jQuery Basics– This section covers basic usage of jQuery from getting started to finding elements and working with CSS.
- Easy JavaScript for Designers– A nice little writeup for the jQuery Java Script Library. Designers need all of the coding shortcuts they can and jQuery seems to deliver.
jQuery Cheat Sheets
- jQuery Cheatsheet– The cheat sheet comes in two flavors: 1) Made for iPhone and iPod Touch, and any other mobile device with internet access. 2) Old-school printable A4 cheat sheet
Building jQuery Plugins
- A Plugin Development Pattern– This article is meant to share a useful pattern for plugin authoring.
- Developing a jQuery Plugin– Sometimes the most difficult part is just taking the first step!
- Building Your First jQuery Plugin– This tutorial will take you step by step through creating your very own truncation plugin.
jQuery Effects and Techniques
- JQuery Pop-up Menu Tutorial– Pop-up link menu (mouse over menu)
- jQuery For Designers– Examples of writing Unobtrusive JavaScript to add simple behavior to a web page.
- AutoCompleter Tutorial – jQuery(Ajax)/PHP/MySQL
- LavaLamp for jQuery lovers!– A step by step tutorial to create a LavaLamp menu packaged as a plugin for the amazing jQuery javascript library.
- Auto-Complete Field with jQuery – Code Explained– An explanation of the code behind the auto-complete field in this post.
- Photo Slider Tutorial– It’s worth noting that you can easily use the photo slider to query a server script to load the images.
- Ajax will_paginate, jq-style– Using jQuery, to easily rock some gracefully degrading Ajax pagination.
- Rounded Corners– Adding rounded corners to an element, using no extra markup.
- Efficient Tag Cloud Algorithm– A post about a tag cloud algorithm , very useful.
- AutoCompleter Tutorial– This tutorial because will tell you how and why AutoCompleter works, knowing about this enables you to customise it a lot more.
- Creating a fading header– A tutorial explaining how to create the fading header graphic for Bits and Pixels.
Ajax development with jQuery
- Easy Ajax with jQuery– Akash Mehta will show us how to simplify the process of adding Ajax to the application even further with the help of jQuery, a popular JavaScript library.
- Simplify Ajax development with jQuery– Discover how easy Ajax and DOM scripting can be
- Quick and Dirty AJAX– A walk through tutorial showing some of the basic ways you could use jQuery to add AJAX functionality to your site.
- A Quick Code Igniter and JQuery Ajax Tutorial– A step-by-step tutorial will show you how to combine the power of jQuery with Code Igniter (a PHP framework based on the MVC design pattern) to quickly and painlessly pass a record ID through the javascript and over to the server, where it will be passed to a mysql database, used to retrieve some data, and sent back to the page for display.
jQuery Fixing common Browser Issues
- Fixing IE overflow problem– IE has a different implementation of overflow compared to Firefox or Safari. This is a detailed account of the problem, and it’s fix.
- Using jQuery to align column heights– This tutorial will show you how to use the popular jQuery library to match the height of 2 columns in your layout.
- Hacking transparent PNG support into IE6 with IE PNG Fix, CSS and jQuery– How to enable transparent PNG support in IE6
Banner Photo by Pankaj Patel on Unsplash
Send Comment:
138 Comments:
More than a year ago
Thanks you... Sweetheart
More than a year ago
The tutorial links for jQuery provided by you are awesome. These are quite great and famous tutorials and from that any novice learner can learn what things we can do with jQuery. Really appreciable post!
More than a year ago
Superb tutorial! Thanks a lot for sharing.
More than a year ago
Nice tutorials dear thanks for the share...
More than a year ago
Thank you a lot !
More than a year ago
Nice. thanks for sharing :)
More than a year ago
very good examples and tutorials for jquery plugin.
thanks
More than a year ago
I feel this is one of the so much significant information for me. And i am glad studying your article. However wanna observation on few general issues, The site style is perfect, the articles is truly nice : D. Excellent process, cheers
More than a year ago
bohat ala...... very nyce
More than a year ago
nice website design.i like design of the webpage.plz give some idea for creating this type of website
More than a year ago
gud efforts..........
More than a year ago
thanks for your effort
More than a year ago
Thanks lottttttttttt
More than a year ago
Great job, another inspiration sources, thanks :)
More than a year ago
Great effects.Thanks for your sharing.
More than a year ago
Good collection of jquery files
More than a year ago
hi nice collection of jquery....
More than a year ago
too much awesome! thanx a lot man!this is very much inspiring for me..:)
More than a year ago
Thanx very much! Very interesting ;-)
More than a year ago
Thanks,, it useful ... nice info :-)
More than a year ago
Very nice tutorial.
More than a year ago
Great list of article, can't wait for the part 2..
More than a year ago
Thanks for sharing these links.
More than a year ago
very nice. It will be useful for my next project
More than a year ago
Great work! Thank you..
More than a year ago
Cool stuff,, I have browsing around to see the best graphics to update my boring site, but some of this look promissing, thanx.
More than a year ago
Great links, thank you for compiling this list.
More than a year ago
nice collection..Thanks for sharing...
More than a year ago
i love it
More than a year ago
Thanks for sharing these links.
More than a year ago
What a great collection you've. Thank you for this sharing. I'll consider to use this as my guide.
More than a year ago
Nice tuturials
More than a year ago
Thanks Alot ):
More than a year ago
Most of the links in " 50+ Amazing Jquery Examples" appear to be dead -- or pointing to contact other than what is advertised. I stopped looking after the first 15 or so.
More than a year ago
Great work! Thank you..
More than a year ago
Very well written. Thank you very much for sharing.
More than a year ago
nice tutorial
More than a year ago
WOOOOOOOWWWWWW!!!!! BEAUTIFUL
More than a year ago
Awsome tutorial.Tkanks for sharing.
More than a year ago
nice post, thanks for this tutorial
More than a year ago
Great efforts...
More than a year ago
thanks for this tremendous collection
More than a year ago
Tkanks for sharing! Very Nice!!
More than a year ago
thanks a lot for support.great tips for me.........................................
More than a year ago
Aweasome collections of jquery. thank you for share this
More than a year ago
Wow! Tthese are great tips very useful indeed.
More than a year ago
Thanks ;))
More than a year ago
Thanks very nice and clear examples.
More than a year ago
Gracias por todos los aportes que nos ofrecen. Probé tres tutoriales y realmente son excelentes.
More than a year ago
Great information! It really gives me help. This blog is the answer to many of my questions about jquery. Thanks for sharing this very informative blog to us ?.@tola: You are definitely and absolutely right I so like it!
More than a year ago
Trying to do something of this sort (gloworld.com/gloambassadors.asp)
How do i go about it...
Please Reply me..
Thank You...
More than a year ago
I love this site this site very help me For Design Site
More than a year ago
Amazing jQuery
thanks
More than a year ago
I agree, very useful list. It’s really nice to see such a wide variety of uses for jQuery.
More than a year ago
Great resource. Still very useful. You've saved me a lot of time.
More than a year ago
Great collection. Thanks so much.
More than a year ago
If there is a like button I would press it
This is really informative and I would like to share with my friends
More than a year ago
Whoa! Jquery such a brainstorming programming, anyway great post.
More than a year ago
Good links to start learning jQuery, they'll be sure usefull
More than a year ago
WOW! I'm in love...great links. So that's the secret behind those image effects 'JQUERY'.
Thanks, much appreciated.
CHEERS :)
More than a year ago
thank you for these articles.. Keep rocking
More than a year ago
Thank U for Script very helpfull
More than a year ago
Thanks for sharing the link, but unfortunately it seems to be down… Does anybody have a mirror or another source? Please answer to my post if you do!
More than a year ago
I am searching all over the net like this post, thanks for this.
another great jQuery tutorials
jQuery Duplicate Fields Form Submit with PHP
More than a year ago
Great post, it helps me thanks
More than a year ago
Very cool collection, thanks. If you want to see menus, web site trends, galleries etc, visit 1artmedia.com , you have online demo and free download. Bye!
More than a year ago
Great collection of tutorials, many thanks ;)
More than a year ago
Nice... good job... i learn.
More than a year ago
This is really helpful as a reference and for people who want to see the possibilities of jQuery, so thanks and keep posting! :)
More than a year ago
thank you for these examples. It helps building my project.
More than a year ago
Good list
thank lot
More than a year ago
we provied good solution of computers ok
More than a year ago
Great list! Very useful. What would be helpful is a reference to a forum where one can ask Jquery questions.
Todd
More than a year ago
really very nice
More than a year ago
Thanks lot
More than a year ago
good,thank your share. i am looking
More than a year ago
51+ Best of jQuery Tutorials and Examples post for thanx.
More than a year ago
Nice Work!Good!!
More than a year ago
hi we r same in the name or spell nice to meet u on net
thanks
More than a year ago
Great examples, thank you.
More than a year ago
it realy helpfull for me ……thnks……
More than a year ago
very good list
thanks a lot....
More than a year ago
Very nice examples, thank you for sharing..
More than a year ago
excellent resources, ty ;)
More than a year ago
nice set of tutorials thanks for the share
More than a year ago
thank you ..... :)
More than a year ago
Hi
nice set of tutorials thanks for the share
More than a year ago
at last i see this site......
i am looking for this jquery site....
ths is very nice thank you, this realy helps me.....
matt
More than a year ago
This is very nice. Thanks for sharing it.
I love jQuery...
More than a year ago
Great site! I really astonished, Thanks.
More than a year ago
Hey that was an interesting article for sure. Thank you ver much for putting so much effort in this blog. It really means a lot to me.
More than a year ago
good post, thanks :)
More than a year ago
Simply superb to improve knowledge. hats of you sir.....
More than a year ago
good post, thanks
regrads
Konsultan Bisnis Online
More than a year ago
This article is very useful and would recommend to friends to give it a look over as there is something here for everyone in the design community.
More than a year ago
grt post:)
More than a year ago
nice set of tutorials thanks for the share
More than a year ago
Thank, its very usefull. Im a nubi in jquery framework
More than a year ago
Very good list :)
More than a year ago
nice but u have no Category type photo gallery..
thanks
ashish
More than a year ago
very nice informative list for jquery resources :)
More than a year ago
Thanks for...teach a lot.....
More than a year ago
Thanks great examples. I want to use some of them on my next design.
More than a year ago
Please do update more, very helpful indeed :)
More than a year ago
Thanks man ! nice writeup.
More than a year ago
Very very useful information.
Thanks
More than a year ago
Its really very helpful. Its a perfect tutorial which is so impressive.
More than a year ago
wow!!! It is super...
More than a year ago
Very nice and useful tutorials for web designers,
Thanks for posting.
More than a year ago
Well done dude, its very useful.
More than a year ago
This is a very useful collection.
Thanks for your effort.
More than a year ago
Hi Thnaks
It,s realy very helpful.And u r the best
Thanks
More than a year ago
Rounded Corners jquery is excellent .But it is not working in IE and it is working in safary and google crome but the corners are shaded black.
More than a year ago
A plethora of resources! Thank you very much, this is very useful indeed...
More than a year ago
Very nice and useful tutorials to web designers,
Thanks for posting.
More than a year ago
hey
This is a great introduction into jquery with simple but useful demos. Thanks for sharing it!
sarah
More than a year ago
Yeap..I love Jquery....Good reference also...
More than a year ago
Are they already consider the Google chroma browser with j query?
thanks
Nayana Adassuriya
More than a year ago
truely a very good help..
thanks
More than a year ago
great, thanks
More than a year ago
I love this site! and I must say that Jquery is a tool for our time.
More than a year ago
Very nice assistant... thank you
More than a year ago
a great list... love it
More than a year ago
very good, thanks
More than a year ago
I use JScript and JQuery all the time.
I love this stuff
More than a year ago
Nice tips! Good work. Thanks
More than a year ago
Thank you very much for this amazing post!!!
More than a year ago
Excellent job! Thank you for the inspiration!
More than a year ago
This is nice. Thanks for sharing it.
More than a year ago
Jquery is really wonderful!I am entranced with it recently,3Q for the job~
More than a year ago
Great job, thank you! Can i translate it into russian and re-post to my blog?
More than a year ago
thank you. great list
More than a year ago
jQuery is a super cool tool now being used increasingly in website and web-based applications. These tutorials did a lot of help thanks.
More than a year ago
Well done. Handy post, Thanks.
More than a year ago
jQuery is da best
More than a year ago
i had started searching for jquery articles using google, but this list ensured that i don't need to search any more.
More than a year ago
Woooow! Just what I needed to improve my knowledge of JQuery
More than a year ago
Good links here, they will be sure usefull! :-D