Development

51+ Best of jQuery Tutorials and Examples

April 24th, 2008

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.


You can also take a look at other 3 articles in this series :


So let’s get started and don’t forget to subscribe to our RSS-Feed to keep track on our next post 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

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

Learning jQuery

Learning jQuery– Getting to know the library of choice for unobtrusive JavaScript.

Featured Tutorials on LearningjQuery.com

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

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

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



  • jQuery 1.2 Cheat Sheet

Building jQuery Plugins


jQuery Effects and Techniques


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


The jungle is alive: Be it a collaboration between two or more authors or an article by an author not contributing regularly. In these cases you find the Noupe Editorial Team as the ones who made it. Guest authors get their own little bio boxes below the article, so watch out for these.

Tags: , ,

Sort by:   newest | oldest | most voted
Siddharth
Guest
8 years 2 months ago

Good links here, they will be sure usefull! :-D

d_bug
Guest
d_bug
6 years 7 months ago

yeah

oriza
Guest
5 years 5 months ago

Thank U for Script very helpfull

vekta
Guest
5 years 4 months ago

I agree, very useful list. It’s really nice to see such a wide variety of uses for jQuery.

Martin Sarsini
Guest
8 years 2 months ago

Woooow! Just what I needed to improve my knowledge of JQuery

Amit
Guest
8 years 2 months ago

i had started searching for jquery articles using google, but this list ensured that i don’t need to search any more.

Gelay
Guest
8 years 2 months ago

jQuery is da best

Adrian
Guest
8 years 2 months ago

Well done. Handy post, Thanks.

komik
Guest
8 years 2 months ago

thank you

Shreemani
Guest
8 years 2 months 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.

Panda
Guest
8 years 2 months ago

thank you. great list

?ark? Dinle
Guest
8 years 1 month ago

thank you.

kikaha
Guest
8 years 5 days ago

Great job, thank you! Can i translate it into russian and re-post to my blog?

ponytail
Guest
8 years 3 days ago

Jquery is really wonderful!I am entranced with it recently,3Q for the job~

Ervin
Guest
7 years 11 months ago

This is nice. Thanks for sharing it.

Szczecinianin
Guest
7 years 11 months ago

Excellent job! Thank you for the inspiration!

Vlad Stratulat
Guest
7 years 10 months ago

Thank you very much for this amazing post!!!

Bilard
Guest
7 years 10 months ago

Nice tips! Good work. Thanks

Muhammad Faizan Ali
Guest
Muhammad Faizan Ali
7 years 10 months ago

Thanks for this ….

jollymoon
Guest
7 years 10 months ago

I use JScript and JQuery all the time.

I love this stuff

Jun
Guest
7 years 9 months ago

very good, thanks

JSHAW
Guest
7 years 8 months ago

a great list… love it

Doe
Guest
6 years 9 months ago

Very nice assistant… thank you

Tola
Guest
Tola
6 years 8 months ago

I love this site! and I must say that Jquery is a tool for our time.

tanto
Guest
tanto
6 years 8 months ago

great, thanks

kshemendra Jangir
Guest
6 years 8 months ago

truely a very good help..
thanks

kshemendra
Guest
kshemendra
5 years 11 months ago

hi we r same in the name or spell nice to meet u on net

thanks

Nayana Adassuriya
Guest
6 years 8 months ago

Are they already consider the Google chroma browser with j query?

thanks
Nayana Adassuriya

Manimala
Guest
6 years 7 months ago

Yeap..I love Jquery….Good reference also…

sana
Guest
6 years 7 months ago

hey

This is a great introduction into jquery with simple but useful demos. Thanks for sharing it!

sarah

indialike
Guest
6 years 7 months ago

Very nice and useful tutorials to web designers,
Thanks for posting.

m a r c o
Guest
6 years 7 months ago

A plethora of resources! Thank you very much, this is very useful indeed…

vijay
Guest
vijay
6 years 6 months 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.

Vishal
Guest
Vishal
6 years 6 months ago

Hi Thnaks

It,s realy very helpful.And u r the best

Thanks

M A Dhavan
Guest
6 years 6 months ago

This is a very useful collection.

Thanks for your effort.

Vijaya kumar S
Guest
6 years 6 months ago

Well done dude, its very useful.

Indialike
Guest
6 years 5 months ago

Very nice and useful tutorials for web designers,
Thanks for posting.

suren
Guest
6 years 5 months ago

wow!!! It is super…

Asim
Guest
6 years 5 months ago

Its really very helpful. Its a perfect tutorial which is so impressive.

Srinivas Gurajala
Guest
Srinivas Gurajala
6 years 4 months ago

Very very useful information.
Thanks

broncha
Guest
6 years 4 months ago

Thanks man ! nice writeup.

Black Card
Guest
6 years 4 months ago

Please do update more, very helpful indeed :)

Digital Extreme Media Group
Guest
6 years 4 months ago

Thanks great examples. I want to use some of them on my next design.

Jay patel
Guest
6 years 4 months ago

Thanks for…teach a lot…..

chandan
Guest
6 years 4 months ago

very nice informative list for jquery resources :)

ashish badhani
Guest
6 years 4 months ago

nice but u have no Category type photo gallery..

thanks
ashish

Industrial Directory Of Gurgaon
Guest

gurgaonindustry.com:-First Industrial Directory of Gurgaon |Industries in Gurgaon

Jorgen
Guest
6 years 3 months ago

Great collection of jQuery tutorials and articles. If you’re interested in seeing some of the newest jQuery plugins, you can find a list here:
http://tips4php.net/2010/03/new-great-jquery-plugins-for-your-page/

Meble
Guest
6 years 3 months ago

Very good list :)

indra
Guest
6 years 3 months ago

Thank, its very usefull. Im a nubi in jquery framework

Web Design
Guest
6 years 3 months ago

nice set of tutorials thanks for the share

ahmed
Guest
6 years 2 months ago

grt post:)

Chris Hill
Guest
6 years 2 months 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.

Waleed
Guest
6 years 2 months ago
emcoach
Guest
6 years 1 month ago

good post, thanks
regrads
Konsultan Bisnis Online

Ganesh
Guest
Ganesh
6 years 1 month ago

Simply superb to improve knowledge. hats of you sir…..

jqueryDotNet
Guest
6 years 1 month ago

good post, thanks :)

web design
Guest
6 years 1 month 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.

Philippine Franchise
Guest
6 years 1 month ago

Great site! I really astonished, Thanks.

Mehmet Erbilgin
Guest
6 years 1 month ago

This is very nice. Thanks for sharing it.
I love jQuery…

matt
Guest
matt
6 years 1 month 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

Zakr
Guest
Zakr
6 years 1 month ago

Hi

nice set of tutorials thanks for the share

satria danil
Guest
6 years 26 days ago

thank you ….. :)

free wallpaper
Guest
6 years 21 days ago

Thank you ;-)

web site rank
Guest
6 years 17 days ago

nice set of tutorials thanks for the share

Alex Marcelo
Guest
6 years 15 days ago

Tank You !!!

Adam
Guest
6 years 15 days ago

excellent resources, ty ;)

Oyunlar
Guest
6 years 2 days ago

Very nice examples, thank you for sharing..

kajal
Guest
kajal
6 years 1 day ago

very good list
thanks a lot….

blogregator
Guest
5 years 11 months ago

it realy helpfull for me ……thnks……

Chullos
Guest
5 years 11 months ago

Great examples, thank you.

Narco
Guest
5 years 11 months ago

Nice Work!Good!!

Aman
Guest
5 years 11 months ago

hi

Really helpful tutorials.i have also some list of tutorials list please see here:-

http://jquery13.blogspot.com/2010/08/55-jquery-tutorials-resources-tips-and.html

Thanks
Aman

Alex Marcelo
Guest
5 years 11 months ago

nice

cihip
Guest
5 years 10 months ago

51+ Best of jQuery Tutorials and Examples post for thanx.

grinding mill
Guest
5 years 10 months ago

good,thank your share. i am looking

Pradip
Guest
Pradip
5 years 10 months ago

Thanks lot

Mohamed
Guest
5 years 10 months ago

really very nice

Todd Cary
Guest
5 years 9 months ago

Great list! Very useful. What would be helpful is a reference to a forum where one can ask Jquery questions.

Todd

computer guru
Guest
5 years 9 months ago

we provied good solution of computers ok

supachet
Guest
5 years 9 months ago

Good list
thank lot

zmenki
Guest
5 years 8 months ago

thank you for these examples. It helps building my project.

Who Knows
Guest
5 years 8 months ago

This is really helpful as a reference and for people who want to see the possibilities of jQuery, so thanks and keep posting! :)

atsup09
Guest
atsup09
5 years 8 months ago

Nice… good job… i learn.

builder london
Guest
5 years 7 months ago

Great collection of tutorials, many thanks ;)

Valikonen
Guest
5 years 7 months 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!

Silvi Anggraini
Guest
5 years 6 months ago

Great post, it helps me thanks

jhon
Guest
5 years 6 months 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

Marilyn Kneisel
Guest
5 years 6 months 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!

Rahul R
Guest
5 years 5 months ago

thank you for these articles.. Keep rocking

Danny
Guest
5 years 5 months ago

WOW! I’m in love…great links. So that’s the secret behind those image effects ‘JQUERY’.

Thanks, much appreciated.
CHEERS :)

Widi Mawardi
Guest
5 years 5 months ago

Good links to start learning jQuery, they’ll be sure usefull

gtagamer-boy
Guest
5 years 5 months ago

Whoa! Jquery such a brainstorming programming, anyway great post.

ketones
Guest
5 years 5 months ago

If there is a like button I would press it
This is really informative and I would like to share with my friends

Resimleri
Guest
5 years 4 months ago

Great collection. Thanks so much.

Danny Johnson
Guest
5 years 4 months ago

Great resource. Still very useful. You’ve saved me a lot of time.

keyuri
Guest
5 years 3 months ago

Amazing jQuery

thanks

sushil pal
Guest
5 years 3 months ago

I love this site this site very help me For Design Site

?????
Guest
?????
5 years 2 months ago

thanks

kofi
Guest
5 years 2 months ago

Trying to do something of this sort (gloworld.com/gloambassadors.asp)

How do i go about it…

Please Reply me..
Thank You…

Brummie
Guest
5 years 2 months 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!

Gabriela - Punta del Este
Guest
5 years 2 months ago

Gracias por todos los aportes que nos ofrecen. Probé tres tutoriales y realmente son excelentes.

izrada sajta
Guest
5 years 2 months ago

Thanks very nice and clear examples.

Kool
Guest
Kool
5 years 1 month ago

Thanks ;))

Crowdfinch
Guest
5 years 1 month ago

Wow! Tthese are great tips very useful indeed.

wpDiscuz