100 jQuery Tutorials and Examples

 This article will share some best practices and examples for using the popular Javascript framework to create unobtrusive, accessible DOM scripting effects. The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.

1. Why jQuery?

jQuery is ideal because it can create impressive animations and interactions. jQuery is simple to understand and easy to use, which means the learning curve is small, while the possibilities are (almost) infinite.


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

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– 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.



  1. Wikipedia: Definition of Semantics
    It’s worth understanding the idea of semantics in general prior to trying to wrap one’s head around the concept of semantic markup.
  2. Who cares about semantic markup?
    Dave Shea
    Dave Shea explores the benefits of semantic markup and
  3. Standards don’t necessarily have anything to do with being semantically correct
    Jason Kottke
    Kottke discusses the differences between standards compliance and semantic markup.
  4. CSS3 selector specification
    The complete specification for CSS3 selectors (most of which work perfectly in jQuery selectors also). This is great reading for anyone who likes to keep up to date with best practices and standards compliance.

jQuery and JavaScript Practices

  1. jQuery Web Site: How jQuery Works and Tutorials
    John Resig + Other Contributors
    One of jQuery’s true strengths is the documentation provided by John Resig and his team.
  2. 51 Best jQuery Tutorials and Examples
  3. Easy As Pie: Unobtrusive JavaScript
  4. Seven Rules of Unobtrusive JavaScript
  5. Learning jQuery
  6. Visual jQuery
  7. jQuery Tutorials For Designers
  8. jQuery For Designers
    jQuery for Designers: learn how easy it is to apply web interaction using jQuery.
  9. 15 Days Of jQuery
    jQuery tutorials and example code that takes you from zero to hero in no time flat.
  10. 15 Resources To Get You Started With jQuery From Scratch
  11. The Seven Rules Of Pragmatic Progressive Enhancement
  12. The Behaviour Layer Slides
    Jeremy Keith
    Great slide notes giving a quick rundown on unobtrusive Javascripting.
  13. A List Apart: Behavioral Separation
    Jeremy Keith
    A more in-depth explanation of the idea of separating Javascript into an unobtrusive “behavioural” layer.
  14. Unobtrusive JavaScript with jQuery
    Simon Willison
    A great set of slides about using jQuery unobtrusively. Also, finishes with a wonderful summary of jQuery methods and usage.

You may also like...