Apr 24 2008

51+ Best of jQuery Tutorials and Examples

Advertisement

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

You might also be interested in the following articles:

About the Author

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.

Homepage

Comments and Discussions

  • Siddharth, 24 April 2008

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

    • d_bug, 16 December 2009

      yeah

    • oriza, 03 February 2011

      Thank U for Script very helpfull

    • vekta, 14 March 2011

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

  • Martin Sarsini, 24 April 2008

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

  • Amit, 24 April 2008

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

  • Gelay, 24 April 2008

    jQuery is da best

  • Adrian, 24 April 2008

    Well done. Handy post, Thanks.

  • komik, 25 April 2008

    thank you

  • Shreemani, 25 April 2008

    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, 27 April 2008

    thank you. great list

  • ?ark? Dinle, 09 June 2008

    thank you.

  • kikaha, 18 July 2008

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

  • ponytail, 20 July 2008

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

  • Ervin, 25 July 2008

    This is nice. Thanks for sharing it.

  • Szczecinianin, 13 August 2008

    Excellent job! Thank you for the inspiration!

  • Vlad Stratulat, 26 August 2008

    Thank you very much for this amazing post!!!

  • Bilard, 26 August 2008

    Nice tips! Good work. Thanks

  • Muhammad Faizan Ali, 15 September 2008

    Thanks for this ….

  • jollymoon, 22 September 2008

    I use JScript and JQuery all the time.

    I love this stuff

  • Jun, 30 September 2008

    very good, thanks

  • JSHAW, 05 November 2008

    a great list… love it

  • Doe, 17 October 2009

    Very nice assistant… thank you

  • Tola, 27 October 2009

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

  • tanto, 15 November 2009

    great, thanks

  • kshemendra Jangir, 18 November 2009

    truely a very good help..
    thanks

    • kshemendra, 31 July 2010

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

      thanks

  • Nayana Adassuriya, 22 November 2009

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

    thanks
    Nayana Adassuriya

  • Manimala, 24 November 2009

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

  • sana, 25 November 2009

    hey

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

    sarah

  • indialike, 04 December 2009

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

  • m a r c o, 10 December 2009

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

  • vijay, 02 January 2010

    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, 04 January 2010

    Hi Thnaks

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

    Thanks

  • M A Dhavan, 05 January 2010

    This is a very useful collection.

    Thanks for your effort.

  • Vijaya kumar S, 05 January 2010

    Well done dude, its very useful.

  • Indialike, 27 January 2010

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

  • suren, 01 February 2010

    wow!!! It is super…

  • Asim, 22 February 2010

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

  • Srinivas Gurajala, 24 February 2010

    Very very useful information.
    Thanks

  • broncha, 03 March 2010

    Thanks man ! nice writeup.

  • Black Card, 12 March 2010

    Please do update more, very helpful indeed :)

  • Digital Extreme Media Group, 14 March 2010

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

  • Jay patel, 18 March 2010

    Thanks for…teach a lot…..

  • chandan, 23 March 2010

    very nice informative list for jquery resources :)

  • ashish badhani, 24 March 2010

    nice but u have no Category type photo gallery..

    thanks
    ashish

  • Industrial Directory Of Gurgaon, 24 March 2010

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

  • Jorgen, 30 March 2010

    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, 07 April 2010

    Very good list :)

  • indra, 19 April 2010

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

  • Web Design, 22 April 2010

    nice set of tutorials thanks for the share

  • ahmed, 04 May 2010

    grt post:)

  • Chris Hill, 08 May 2010

    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, 21 May 2010

    5 Top jQuery Plugins to improve Your HTML
    http://blog.waleedmohamed.net/2010/05/5-top-jquery-plugins-to-improve-your.html

  • emcoach, 26 May 2010

    good post, thanks
    regrads
    Konsultan Bisnis Online

  • Ganesh, 29 May 2010

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

  • jqueryDotNet, 06 June 2010

    good post, thanks :)

  • web design, 06 June 2010

    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, 08 June 2010

    Great site! I really astonished, Thanks.

  • Mehmet Erbilgin, 09 June 2010

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

  • matt, 17 June 2010

    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, 21 June 2010

      Hi

      nice set of tutorials thanks for the share

  • satria danil, 27 June 2010

    thank you ….. :)

  • free wallpaper, 03 July 2010

    Thank you ;-)

  • web site rank, 07 July 2010

    nice set of tutorials thanks for the share

  • Alex Marcelo, 08 July 2010

    Tank You !!!

  • Adam, 08 July 2010

    excellent resources, ty ;)

  • Oyunlar, 21 July 2010

    Very nice examples, thank you for sharing..

  • kajal, 22 July 2010

    very good list
    thanks a lot….

  • blogregator, 24 July 2010

    it realy helpfull for me ……thnks……

  • Chullos, 30 July 2010

    Great examples, thank you.

  • Narco, 02 August 2010

    Nice Work!Good!!

  • Aman, 15 August 2010

    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, 22 August 2010

    nice

  • cihip, 04 September 2010

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

  • grinding mill, 09 September 2010

    good,thank your share. i am looking

  • Pradip, 14 September 2010

    Thanks lot

  • Mohamed, 18 September 2010

    really very nice

  • Todd Cary, 30 September 2010

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

    Todd

  • computer guru, 11 October 2010

    we provied good solution of computers ok

  • supachet, 14 October 2010

    Good list
    thank lot

  • zmenki, 25 October 2010

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

  • Who Knows, 31 October 2010

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

  • atsup09, 11 November 2010

    Nice… good job… i learn.

  • builder london, 29 November 2010

    Great collection of tutorials, many thanks ;)

  • Valikonen, 16 December 2010

    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, 30 December 2010

    Great post, it helps me thanks

  • jhon, 10 January 2011

    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, 18 January 2011

    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, 07 February 2011

    thank you for these articles.. Keep rocking

  • Danny, 08 February 2011

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

    Thanks, much appreciated.
    CHEERS :)

  • Widi Mawardi, 17 February 2011

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

  • gtagamer-boy, 18 February 2011

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

  • ketones, 20 February 2011

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

  • Resimleri, 26 February 2011

    Great collection. Thanks so much.

  • Danny Johnson, 13 March 2011

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

  • keyuri, 13 April 2011

    Amazing jQuery

    thanks

  • sushil pal, 22 April 2011

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

  • ?????, 26 April 2011

    thanks

  • kofi, 26 April 2011

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

    How do i go about it…

    Please Reply me..
    Thank You…

  • Brummie, 28 April 2011

    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, 07 May 2011

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

  • izrada sajta, 22 May 2011

    Thanks very nice and clear examples.

  • Kool, 26 May 2011

    Thanks ;))

  • Crowdfinch, 13 June 2011

    Wow! Tthese are great tips very useful indeed.

  • thameem, 21 July 2011

    Aweasome collections of jquery. thank you for share this

  • sujeet kumar dwivedi, 25 July 2011

    thanks a lot for support.great tips for me…………………………………..

  • Artesano, 27 July 2011

    Tkanks for sharing! Very Nice!!

  • shreshtt, 05 August 2011

    thanks for this tremendous collection

  • Om, 19 August 2011

    Great efforts…

  • jacob, 23 August 2011

    nice post, thanks for this tutorial

  • oyun, 08 September 2011

    Awsome tutorial.Tkanks for sharing.

  • Spirit of Hack, 18 October 2011

    WOOOOOOOWWWWWW!!!!! BEAUTIFUL

  • samir, 20 October 2011

    nice tutorial

  • Abhilash Sahoo, 21 October 2011

    Very well written. Thank you very much for sharing.

  • omer engin birim, 23 October 2011

    Great work! Thank you..

  • Patrick Goetz, 03 November 2011

    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.

  • Shekhar, 04 November 2011

    Thanks Alot ):

  • Rohit azad, 08 November 2011

    Nice tuturials

  • Zulhilmi Zainudin, 13 November 2011

    What a great collection you’ve. Thank you for this sharing. I’ll consider to use this as my guide.

  • matrus, 07 December 2011

    Thanks for sharing these links.

  • rhynix, 08 December 2011

    i love it

  • Way2Geeks, 10 December 2011

    nice collection..Thanks for sharing…

  • Sean Callahan, 16 December 2011

    Great links, thank you for compiling this list.

  • bas, 21 December 2011

    Cool stuff,, I have browsing around to see the best graphics to update my boring site, but some of this look promissing, thanx.

  • cheikh17, 30 December 2011

    Great work! Thank you..

  • Eda Can, 01 January 2012

    very nice. It will be useful for my next project

  • bao ho lao dong, 04 January 2012

    Thanks for sharing these links.

  • Joseph Buarao, 15 January 2012

    Great list of article, can’t wait for the part 2..

  • T.Johnson Miller, 27 February 2012

    Very nice tutorial.

  • babeltekno, 25 March 2012

    Thanks,, it useful … nice info :-)

  • Louis, 10 April 2012

    Thanx very much! Very interesting ;-)

  • masud, 18 April 2012

    too much awesome! thanx a lot man!this is very much inspiring for me..:)

  • vipul, 02 May 2012

    hi nice collection of jquery….

  • suresh, 21 May 2012

    Good collection of jquery files

  • Stand Fiyatlari, 24 May 2012

    Great effects.Thanks for your sharing.

  • bimawidyana, 09 July 2012

    Great job, another inspiration sources, thanks :)

  • pradeep, 27 August 2012

    Thanks lottttttttttt

  • Ahmed, 01 September 2012

    thanks for your effort

  • Nandni sharma, 04 September 2012

    gud efforts……….

  • srithar, 14 September 2012

    nice website design.i like design of the webpage.plz give some idea for creating this type of website

  • Linaka, 22 September 2012

    Hey, if you ever plan on doing a 2012 article here’s a jquery ui tutorial for wordpress that you might want to look at. http://www.gcostudios.com/2012/how-to-add-jquery-ui-tabs-into-wordpress/

  • usman rock, 26 September 2012

    bohat ala…… very nyce

  • sam angela, 28 September 2012

    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

  • kapil, 19 October 2012

    very good examples and tutorials for jquery plugin.

    thanks

  • Robet Sheva, 01 November 2012

    Nice. thanks for sharing :)

  • ilcode, 08 November 2012

    Thank you a lot !

  • Raghibsuleman, 14 November 2012

    Nice tutorials dear thanks for the share…

  • wecode, 05 February 2013

    Superb tutorial! Thanks a lot for sharing.

  • Amy Watson, 29 April 2013

    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!

Leave a Reply

Comments are moderated - and rel="nofollow" is in use. Please no link dropping, no keywords or domains as names; do not spam, and do not advertise!

comments form

search form
 
image description image description