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: , ,

150 comments for „51+ Best of jQuery Tutorials and Examples
  1. Siddharth on April 24th, 2008 at 7:17 am

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

    • d_bug on December 16th, 2009 at 10:21 am

      yeah

    • oriza on February 3rd, 2011 at 6:37 pm

      Thank U for Script very helpfull

    • vekta on March 14th, 2011 at 8:17 pm

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

  2. Martin Sarsini on April 24th, 2008 at 8:28 am

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

  3. Amit on April 24th, 2008 at 8:42 am

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

  4. Gelay on April 24th, 2008 at 9:49 am

    jQuery is da best

  5. Adrian on April 24th, 2008 at 8:00 pm

    Well done. Handy post, Thanks.

  6. komik on April 25th, 2008 at 7:41 am

    thank you

  7. Shreemani on April 25th, 2008 at 11:32 pm

    jQuery is a super cool tool now being used increasingly in website and web-based applications. These tutorials did a lot of help thanks.

  8. Panda on April 27th, 2008 at 4:25 am

    thank you. great list

  9. ?ark? Dinle on June 9th, 2008 at 5:56 am

    thank you.

  10. kikaha on July 18th, 2008 at 4:29 pm

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

  11. ponytail on July 20th, 2008 at 8:25 pm

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

  12. Ervin on July 25th, 2008 at 6:41 pm

    This is nice. Thanks for sharing it.

  13. Szczecinianin on August 13th, 2008 at 5:40 am

    Excellent job! Thank you for the inspiration!

  14. Vlad Stratulat on August 26th, 2008 at 7:00 am

    Thank you very much for this amazing post!!!

  15. Bilard on August 26th, 2008 at 3:29 pm

    Nice tips! Good work. Thanks

  16. Muhammad Faizan Ali on September 15th, 2008 at 5:09 am

    Thanks for this ….

  17. jollymoon on September 22nd, 2008 at 2:07 pm

    I use JScript and JQuery all the time.

    I love this stuff

  18. Jun on September 30th, 2008 at 8:36 pm

    very good, thanks

  19. JSHAW on November 5th, 2008 at 10:29 am

    a great list… love it

  20. Doe on October 17th, 2009 at 8:35 am

    Very nice assistant… thank you

  21. Tola on October 27th, 2009 at 4:56 am

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

  22. tanto on November 15th, 2009 at 7:11 pm

    great, thanks

  23. kshemendra Jangir on November 18th, 2009 at 5:42 am

    truely a very good help..
    thanks

    • kshemendra on July 31st, 2010 at 8:22 am

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

      thanks

  24. Nayana Adassuriya on November 22nd, 2009 at 9:42 pm

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

    thanks
    Nayana Adassuriya

  25. Manimala on November 24th, 2009 at 10:43 pm

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

  26. sana on November 25th, 2009 at 6:19 am

    hey

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

    sarah

  27. indialike on December 4th, 2009 at 8:53 pm

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

  28. m a r c o on December 10th, 2009 at 6:52 pm

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

  29. vijay on January 2nd, 2010 at 4:24 am

    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.

  30. Vishal on January 4th, 2010 at 4:01 am

    Hi Thnaks

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

    Thanks

  31. M A Dhavan on January 5th, 2010 at 8:33 am

    This is a very useful collection.

    Thanks for your effort.

  32. Vijaya kumar S on January 5th, 2010 at 10:18 pm

    Well done dude, its very useful.

  33. Indialike on January 27th, 2010 at 9:42 pm

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

  34. suren on February 1st, 2010 at 8:36 pm

    wow!!! It is super…

  35. Asim on February 22nd, 2010 at 11:37 pm

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

  36. Srinivas Gurajala on February 24th, 2010 at 10:49 pm

    Very very useful information.
    Thanks

  37. broncha on March 3rd, 2010 at 2:36 pm

    Thanks man ! nice writeup.

  38. Black Card on March 12th, 2010 at 11:18 pm

    Please do update more, very helpful indeed :)

  39. Digital Extreme Media Group on March 14th, 2010 at 3:24 pm

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

  40. Jay patel on March 18th, 2010 at 7:22 am

    Thanks for…teach a lot…..

  41. chandan on March 23rd, 2010 at 11:27 pm

    very nice informative list for jquery resources :)

  42. ashish badhani on March 24th, 2010 at 3:34 am

    nice but u have no Category type photo gallery..

    thanks
    ashish

  43. Industrial Directory Of Gurgaon on March 24th, 2010 at 5:26 am

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

  44. Jorgen on March 30th, 2010 at 11:57 am

    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/

  45. Meble on April 7th, 2010 at 11:39 am

    Very good list :)

  46. indra on April 19th, 2010 at 9:19 pm

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

  47. Web Design on April 22nd, 2010 at 3:24 pm

    nice set of tutorials thanks for the share

  48. ahmed on May 4th, 2010 at 9:12 am

    grt post:)

  49. Chris Hill on May 8th, 2010 at 3:33 pm

    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.

  50. Waleed on May 21st, 2010 at 10:30 pm
  51. emcoach on May 26th, 2010 at 7:47 pm

    good post, thanks
    regrads
    Konsultan Bisnis Online

  52. Ganesh on May 29th, 2010 at 9:11 am

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

  53. jqueryDotNet on June 6th, 2010 at 4:23 am

    good post, thanks :)

  54. web design on June 6th, 2010 at 6:22 pm

    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.

  55. Philippine Franchise on June 8th, 2010 at 3:18 pm

    Great site! I really astonished, Thanks.

  56. Mehmet Erbilgin on June 9th, 2010 at 1:12 pm

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

  57. matt on June 17th, 2010 at 10:49 pm

    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 on June 21st, 2010 at 10:01 pm

      Hi

      nice set of tutorials thanks for the share

  58. satria danil on June 27th, 2010 at 9:50 pm

    thank you ….. :)

  59. free wallpaper on July 3rd, 2010 at 1:51 am

    Thank you ;-)

  60. web site rank on July 7th, 2010 at 3:04 am

    nice set of tutorials thanks for the share

  61. Alex Marcelo on July 8th, 2010 at 3:32 pm

    Tank You !!!

  62. Adam on July 8th, 2010 at 4:11 pm

    excellent resources, ty ;)

  63. Oyunlar on July 21st, 2010 at 7:49 am

    Very nice examples, thank you for sharing..

  64. kajal on July 22nd, 2010 at 8:05 pm

    very good list
    thanks a lot….

  65. blogregator on July 24th, 2010 at 6:26 am

    it realy helpfull for me ……thnks……

  66. Chullos on July 30th, 2010 at 8:45 am

    Great examples, thank you.

  67. Narco on August 2nd, 2010 at 1:37 am

    Nice Work!Good!!

  68. Aman on August 15th, 2010 at 7:37 am

    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

  69. Alex Marcelo on August 22nd, 2010 at 9:38 pm

    nice

  70. cihip on September 4th, 2010 at 8:48 pm

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

  71. grinding mill on September 9th, 2010 at 4:43 am

    good,thank your share. i am looking

  72. Pradip on September 14th, 2010 at 2:42 am

    Thanks lot

  73. Mohamed on September 18th, 2010 at 2:53 pm

    really very nice

  74. Todd Cary on September 30th, 2010 at 8:13 pm

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

    Todd

  75. computer guru on October 11th, 2010 at 8:41 am

    we provied good solution of computers ok

  76. supachet on October 14th, 2010 at 8:52 am

    Good list
    thank lot

  77. zmenki on October 25th, 2010 at 9:48 pm

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

  78. Who Knows on October 31st, 2010 at 1:14 pm

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

  79. atsup09 on November 11th, 2010 at 8:12 pm

    Nice… good job… i learn.

  80. builder london on November 29th, 2010 at 6:04 pm

    Great collection of tutorials, many thanks ;)

  81. Valikonen on December 16th, 2010 at 12:10 pm

    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!

  82. Silvi Anggraini on December 30th, 2010 at 7:32 am

    Great post, it helps me thanks

  83. jhon on January 10th, 2011 at 4:44 pm

    I am searching all over the net like this post, thanks for this.

    another great jQuery tutorials
    jQuery Duplicate Fields Form Submit with PHP

  84. Marilyn Kneisel on January 18th, 2011 at 8:17 am

    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!

  85. Rahul R on February 7th, 2011 at 10:31 am

    thank you for these articles.. Keep rocking

  86. Danny on February 8th, 2011 at 12:10 pm

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

    Thanks, much appreciated.
    CHEERS :)

  87. Widi Mawardi on February 17th, 2011 at 8:35 am

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

  88. gtagamer-boy on February 18th, 2011 at 10:53 pm

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

  89. ketones on February 20th, 2011 at 9:26 am

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

  90. Resimleri on February 26th, 2011 at 11:01 am

    Great collection. Thanks so much.

  91. Danny Johnson on March 13th, 2011 at 5:24 am

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

  92. keyuri on April 13th, 2011 at 8:59 am

    Amazing jQuery

    thanks

  93. sushil pal on April 22nd, 2011 at 6:36 am

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

  94. ????? on April 26th, 2011 at 1:26 pm

    thanks

  95. kofi on April 26th, 2011 at 4:36 pm

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

    How do i go about it…

    Please Reply me..
    Thank You…

  96. Brummie on April 28th, 2011 at 2:44 pm

    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!

  97. Gabriela - Punta del Este on May 7th, 2011 at 2:51 am

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

  98. izrada sajta on May 22nd, 2011 at 1:46 pm

    Thanks very nice and clear examples.

  99. Kool on May 26th, 2011 at 5:07 pm

    Thanks ;))

  100. Crowdfinch on June 13th, 2011 at 6:58 am

    Wow! Tthese are great tips very useful indeed.

  101. thameem on July 21st, 2011 at 8:52 am

    Aweasome collections of jquery. thank you for share this

  102. sujeet kumar dwivedi on July 25th, 2011 at 9:48 am

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

  103. Artesano on July 27th, 2011 at 1:56 am

    Tkanks for sharing! Very Nice!!

  104. shreshtt on August 5th, 2011 at 12:31 pm

    thanks for this tremendous collection

  105. Om on August 19th, 2011 at 1:19 pm

    Great efforts…

  106. jacob on August 23rd, 2011 at 6:24 am

    nice post, thanks for this tutorial

  107. oyun on September 8th, 2011 at 11:31 pm

    Awsome tutorial.Tkanks for sharing.

  108. Spirit of Hack on October 18th, 2011 at 8:33 pm

    WOOOOOOOWWWWWW!!!!! BEAUTIFUL

  109. samir on October 20th, 2011 at 4:41 pm

    nice tutorial

  110. Abhilash Sahoo on October 21st, 2011 at 11:14 am

    Very well written. Thank you very much for sharing.

  111. omer engin birim on October 23rd, 2011 at 11:07 pm

    Great work! Thank you..

  112. Patrick Goetz on November 3rd, 2011 at 9:58 pm

    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.

  113. Shekhar on November 4th, 2011 at 7:11 am

    Thanks Alot ):

  114. Rohit azad on November 8th, 2011 at 7:12 am

    Nice tuturials

  115. Zulhilmi Zainudin on November 13th, 2011 at 11:04 am

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

  116. matrus on December 7th, 2011 at 11:18 pm

    Thanks for sharing these links.

  117. rhynix on December 8th, 2011 at 7:10 am

    i love it

  118. Way2Geeks on December 10th, 2011 at 7:30 pm

    nice collection..Thanks for sharing…

  119. Sean Callahan on December 16th, 2011 at 10:11 pm

    Great links, thank you for compiling this list.

  120. bas on December 21st, 2011 at 12:38 am

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

  121. cheikh17 on December 30th, 2011 at 11:35 pm

    Great work! Thank you..

  122. Eda Can on January 1st, 2012 at 2:11 pm

    very nice. It will be useful for my next project

  123. bao ho lao dong on January 4th, 2012 at 9:47 am

    Thanks for sharing these links.

  124. Joseph Buarao on January 15th, 2012 at 7:27 am

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

  125. T.Johnson Miller on February 27th, 2012 at 10:40 am

    Very nice tutorial.

  126. babeltekno on March 25th, 2012 at 7:29 am

    Thanks,, it useful … nice info :-)

  127. Louis on April 10th, 2012 at 7:29 am

    Thanx very much! Very interesting ;-)

  128. masud on April 18th, 2012 at 12:48 pm

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

  129. vipul on May 2nd, 2012 at 8:11 pm

    hi nice collection of jquery….

  130. suresh on May 21st, 2012 at 12:22 pm

    Good collection of jquery files

  131. Stand Fiyatlari on May 24th, 2012 at 7:12 pm

    Great effects.Thanks for your sharing.

  132. bimawidyana on July 9th, 2012 at 10:08 pm

    Great job, another inspiration sources, thanks :)

  133. pradeep on August 27th, 2012 at 10:29 am

    Thanks lottttttttttt

  134. Ahmed on September 1st, 2012 at 2:38 pm

    thanks for your effort

  135. Nandni sharma on September 4th, 2012 at 8:12 am

    gud efforts……….

  136. srithar on September 14th, 2012 at 11:10 am

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

  137. Linaka on September 22nd, 2012 at 6:07 pm

    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/

  138. usman rock on September 26th, 2012 at 3:57 pm

    bohat ala…… very nyce

  139. sam angela on September 28th, 2012 at 3:18 am

    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

  140. kapil on October 19th, 2012 at 9:18 am

    very good examples and tutorials for jquery plugin.

    thanks

  141. Robet Sheva on November 1st, 2012 at 3:11 pm

    Nice. thanks for sharing :)

  142. ilcode on November 8th, 2012 at 1:10 am

    Thank you a lot !

  143. Raghibsuleman on November 14th, 2012 at 8:11 am

    Nice tutorials dear thanks for the share…

  144. wecode on February 5th, 2013 at 4:00 am

    Superb tutorial! Thanks a lot for sharing.

  145. Amy Watson on April 29th, 2013 at 7:30 am

    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!