jQuery Tutorial
jQuery Introduction jQuery Getting Started jQuery Syntax jQuery Selectors jQuery Events
jQuery Effects
jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animation jQuery stop() jQuery Callback jQuery Chaining
jQuery Manipulation
jQuery Get/Set jQuery Add jQuery Remove jQuery CSS Classes jQuery css() jQuery Dimensions
jQuery Traversing
jQuery Traversing jQuery Ancestors jQuery Descendants jQuery Siblings jQuery Filtering
jQuery AJAX
jQuery AJAX Intro jQuery Load jQuery Get/Post jQuery AJAX Events
jQuery Misc
jQuery noConflict() jQuery Filters
jQuery References
jQuery Reference jQuery Selectors jQuery Events jQuery Effects jQuery HTML/CSS jQuery Traversing jQuery AJAX jQuery Miscellaneous jQuery Properties

jQuery Introduction

jQuery is a fast, lightweight, and feature-rich JavaScript library that is based on the principle "write less, do more".

jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

The purpose of jQuery is to make it much easier to use JavaScript on your website.

This tutorial will help you learn the essentials of latest jQuery, from the fundamentals to advanced topics.

Examples in each Chapter

Every chapter in this tutorial contains lots of practice examples that you can try and test yourself using our online editor to extend your learning. The purpose of these examples is to provide you a better understanding of the usage of jQuery.

Basic jQuery example
Run code

Advantages of jQuery

If you're not familiar with jQuery, you might be wondering what makes jQuery so special.

jQuery simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation.

The jQuery library contains the following features:

  • HTML/DOM manipulation
  • CSS manipulation
  • Event handling
  • Effects and Animations
  • AJAX Support
  • Utilities
  • Plugins
  • Cross Browser Support

Info: In JavaScript, you often need to write several lines of code to select and manipulate an element in an HTML document, but with jQuery robust selector mechanism you can traverse the DOM tree and select elements in an easy and efficient manner to perform any manipulation.

What jQuery can do?

There are lot more things you can do with jQuery:

  • jQuery can easily select elements
  • jQuery can easily change the style (CSS) and position of the elements
  • jQuery can easily manipulate DOM elements and their attributes
  • jQuery can easily create effect like show or hide elements, sliding transition, and so on
  • jQuery can easily create complex CSS animation with fewer lines of code
  • jQuery can easily traverse all around the DOM tree to locate any element
  • jQuery can easily perform multiple actions on an element with a single line of code
  • jQuery can easily get or set dimensions of HTML elements

The list does not end here, there are many other interesting things that you can do with jQuery.

You will learn about all of them in detail in upcoming chapters.


Before you start studying jQuery, you should have a basic knowledge of:

If you're a beginner, start with the basics and gradually move forward by learning a little bit every day.

We recommend reading this tutorial, in the sequence listed in the left menu.

jQuery References

The reference section will give you detailed information about jQuery selectors, effects, properties, events and more.

Go to jQuery Reference