The Basics of jQuery

Share this article

When it comes to client side libraries, jQuery clearly takes the cake. Recent research indicates that jQuery is used on half of all Web sites. There is a good explanation for jQuery’s popularity – it’s extremely simple to use. This article introduces the key concepts behind jQuery, and will get the absolute beginner up and running.


jQuery was created by John Resig, and released in January 2006. jQuery simplifies cross browser JavaScript programming by providing a layer of abstraction on top of native browser APIs. DOM navigation, in particular, is simplified by allowing DOM queries to be made using CSS selector style syntax. This isn’t necessarily a big deal in modern browsers, which support the Selectors API, but older browsers such as IE6 can benefit greatly from jQuery. jQuery also provides abstractions for many other popular features, such as AJAX and animations.

Getting jQuery

jQuery is just a normal JavaScript file, so you can include it using a standard <script> tag. jQuery can be included from the project’s page, or from a variety of content delivery networks (CDNs). The following example shows how jQuery can be included in any HTML document.
<script src=""></script>
If you want your site to be totally self-contained, I recommend downloading the code and hosting it on your own servers. jQuery is freely available for download on the project’s home page. The code is conveniently available in both production (minified) and development versions.

The $() Function

One thing that typically stands out to new jQuery developers is the proliferation of dollar signs sprinkled throughout the code. By default, jQuery namespaces all of its methods and properties in the $ variable. The most popular method is jQuery()
, which is typically aliased as $(). This method can be used in a variety of ways, but normally it accepts a CSS style selector string which is used to to query the DOM. Any matching nodes are then returned as a collection of jQuery objects. The following example selects all hyperlinks of class foo. The links are then iterated over, one at a time, using the each() function. each(), takes a callback function as an argument. As each matching element is iterated over, the callback function is invoked with this referencing the current element. The attr() function is then used to retrieve the href attribute from each link.
$("").each(function() {
  var link = $(this);
  var href = link.attr("href");
  // Use link here

The ready() Function

jQuery is also very good at abstracting away events. And, there might not be any event that is more inconsistently implemented than the page load event. For example, some browsers only support the window’s load event, which doesn’t fire until everything has loaded, including images. Better browsers also support the DOMContentLoaded
event which fires once the DOM has been parsed, without waiting for images, stylesheets, and other resources. With jQuery, you don’t have to try to distinguish between the various page load events. Instead, jQuery provides the ready() function. ready() accepts a single argument, a function which executes once the DOM is fully loaded. The following example shows how ready() is used to react to page load events.
  // Explore jQuery here


This article has explored the very basics of jQuery. Of course, this is just the tip of the iceberg. jQuery’s immense popularity has given rise to an entire ecosystem of books, developers, plugins, and tools. However, I must provide a word of warning to any potential jQuery developers. Because jQuery makes complicated tasks so simple, many developers never bother to learn how things actually work under the hood. This can lead to a false sense of understanding, which is never a good thing for a programmer. I encourage you to read over the jQuery source code – you never know what you might learn.

Frequently Asked Questions about jQuery Basics

What is the difference between JavaScript and jQuery?

JavaScript is a high-level, interpreted programming language that is used to make web pages more interactive. It is a standalone language developed in Netscape. jQuery, on the other hand, is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, and animation much simpler with an easy-to-use API that works across a multitude of browsers. Essentially, jQuery is a set of JavaScript libraries that have been designed to simplify HTML document traversing, event handling, animating, and Ajax interactions.

How do I start using jQuery?

To start using jQuery, you need to include the jQuery library in your project. You can either download it from the jQuery website or include it directly from a Content Delivery Network (CDN). Once the library is included, you can start using jQuery functions. It’s important to ensure that the jQuery library is loaded before you try to run any jQuery code.

What is the $ sign in jQuery?

The $ sign is just a shortcut for “jQuery”. So, $(document) is equivalent to jQuery(document). It’s used to define or access jQuery. You can also create your own custom name for jQuery, but $ is commonly used and widely recognized in the jQuery community.

What are jQuery selectors and how do they work?

jQuery selectors are used to select one or more HTML elements. Once an element is selected, you can perform various operations on it. jQuery selectors are based on the same syntax as CSS selectors. They start with the dollar sign and parentheses: $(). Inside the parentheses, you put your selector. For example, to select all paragraphs in an HTML document, you would use $(“p”).

How can I handle events in jQuery?

jQuery provides a powerful way to handle events through various methods such as click(), dblclick(), hover(), focus(), blur(), etc. These methods are used to register behaviors to take effect when the user interacts with the HTML elements in the browser. You can provide an anonymous function or a named function as the handler function.

What is the use of the jQuery .ready() method?

The .ready() method is used to make a function available after the document is loaded. Whatever code you write inside the $(document ).ready() method will run once the page DOM is ready to execute JavaScript code. This is to prevent any jQuery code from running before the document is finished loading.

How can I manipulate HTML elements with jQuery?

jQuery provides a wide range of methods to manipulate HTML elements. You can change the content of elements using methods like text(), html(), and val(). You can also change the attributes of elements using attr(), css(), and class-related methods. Additionally, you can add or remove elements using append(), prepend(), after(), before(), remove(), and empty() methods.

What is AJAX in jQuery?

AJAX stands for Asynchronous JavaScript and XML. It is a technique for creating fast and dynamic web pages. jQuery has various AJAX functions that allow you to update a web page without reloading it, request data from a server after the page has loaded, and receive data from a server after the page has loaded.

How can I debug jQuery code?

Debugging jQuery is similar to debugging JavaScript. You can use the browser’s developer tools to debug jQuery code. The console.log() method is very useful for checking if your selectors are working correctly and if your events are firing. You can also use breakpoints in the source code to pause execution and inspect the current state.

Can I use jQuery with other JavaScript libraries?

Yes, jQuery can be used with other JavaScript libraries. However, other libraries might also use the $ symbol as a function or variable name, just like jQuery. To ensure that jQuery doesn’t conflict with other libraries, you can use the jQuery.noConflict() method. This allows you to create a new alias for jQuery, freeing up the $ symbol for other libraries.

Colin IhrigColin Ihrig
View Author

Colin Ihrig is a software engineer working primarily with Node.js. Colin is the author of Pro Node.js for Developers, and co-author of Full Stack JavaScript Development with MEAN. Colin is a member of the Node.js Technical Steering Committee, and a hapi core team member. Colin received his Bachelor of Science in Engineering, and Master of Science in Computer Engineering from the University of Pittsburgh in 2005 and 2008, respectively.

Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form