A guide to the basics of jQuery

jQuery is the most popular JavaScript library nowadays. It uses CSS selector style syntax to fetch elements in document object model (DOM) into wrapped element set, and then manipulate elements in the wrapped set with jQuery functions to archive different effect.

jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more.

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

The jQuery library makes it easy to manipulate a page of HTML after it’s displayed by the browser.

jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery:

  • DOM manipulation: The jQuery made it easy to select DOM elements, traverse them and modifying their content by using cross-browser open source selector engine called Sizzle.
  • Event handling: The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.
  • AJAX Support: The jQuery helps you a lot to develop a responsive and feature-rich site using AJAX technology.
  • Animations: The jQuery comes with plenty of built-in animation effects which you can use in your websites.
  • Lightweight: The jQuery is very lightweight library – about 19KB in size ( Minified and gzipped ).
  • Cross Browser Support: The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+
  • Latest Technology: The jQuery supports CSS3 selectors and basic XPath syntax.


Before you use jQuery to do anything to your page, you need to ensure that the page is in a state where it’s ready to be manipulated. With jQuery, we accomplish this by putting our code in a function, and then passing that function to $(document).ready(). As you can see here, the function we pass can just be an anonymous function.

$( document ).ready(function() {
console.log( ‘ready!’ );

This will run the function that we pass to .ready() once the document is ready. What’s going on here? We’re using $(document) to create a jQuery object from our page’s document, and then calling the .ready() function on that object, passing it the function we want to execute.


If you click on me, I will disappear.

Click me away!

Click me too!