Register to get access to free programming courses with interactive exercises


In August 2006, John Resig released the JQuery library. In a short time, this library has gained popularity and has become the de facto standard for website interactive elements:

// The $ sign is a jQuery function
// We do everything through it
$(() => {
  // This function will run on the DOMContentLoaded event

In many ways, this happened because jQuery appeared at the right time in the right place. People transitioned to layouts without tables, and CSS gained popularity. jQuery allowed developers to reuse the same selectors to add behavior.

In addition, CSS3 was implemented in jQuery much earlier than it appeared natively in the browsers. With jQuery, people do not have to think about different browsers since its task is to ensure that websites work on all platforms:

// Works the same way as document.querySelectorAll
// document.querySelectorAll('.section span')
// Returns a special jQuery collection with its own set of methods
const spans = $('.section span');

Another reason for its success was that jQuery popularized the separation of layout and behavior. We call this technique unobtrusive JavaScript. The idea is that event handlers are defined not in the tags but separately:

const buttons = $('button');
// It hangs a click handler on all buttons in this collection => {

Instead of:

<button onclick="alert('hey!')">

The jQuery is an excellent example of a DSL — domain-specific language. As a rule, the code in JQuery expresses the task in the same terms as its formulation:

// Hiding all elements with the container.main selector

// Deleting an element with id=address

Moreover, jQuery has long provided the only decent way to make AJAX requests and animations on pages. And thanks to its extensibility provided by plugins, the library ecosystem has a dozen years become fantastic.

At one point, any front-end library would have appeared as a plugin for jQuery. The situation came to the point that some people do not even know about the existence of JavaScript and DOM. They immediately start with jQuery and see the world only through it and it only.


The $ function is a single entry point for everything. If you call $ and pass a string inside, JQuery sees the string as a selector. In this case, it is necessary to select DOM elements. This call is similar to querySelectorAll(), with the only difference being that it returns a specialized collection.

In principle, jQuery works with elements in the same way as with collections, even if it is just a single element.

And any changes are applied immediately to all collection elements without the need for any iteration:

// All h1 elements are selected
const headings = $('h1');
// Adding a class to all h1 headers

// The same without jquery
const headings = document.querySelectorAll('h1');
headings.forEach((el) => el.classList.add('header'));

Below are some example functions that modify the DOM element and its descendants. The main feature of jQuery here is that if you call these functions without parameters, they return a value. If we call them with parameters, they change:

// If one header was found
const link = $('#home');
link.html('link to home'); // Installing textContent
link.attr('href', '/about'); // Setting the attribute
// Reading the attribute
console.log(link.attr('href')); // => /about


jQuery provides its methods for subscribing to events, acting as an abstraction for addEventListener.

For example, this is how jQuery processes a click on a button:

$('button').click(() => {
  // Setting the href attribute on an element with the w3c ID
  // `attr` can take a function as the second parameter
  // The original attribute value is passed to it
  $('#w3c').attr('href', (i, origValue) => `${origValue}/jquery`);


jQuery can also execute Ajax requests. However, it learned to do this before standards arrived, so the interface of this mechanism differs from standard promises:

// The call chain works on the same principle as promises,
// although it differs in terms of details
const jqxhr = $.get('/api/v1/companies.json', (data) => {
.done(() => {
.fail(() => {
.always(() => {


jQuery provides a set of ready-made animations and a mechanism for creating more complex effects based on changing CSS properties:

<!-- The element looks smooth when clicked -->
<div id="clickme">
  Click here
<img id="book" src="book.png" alt="" width="100" height="123">
  // he #book element loads as hidden, and appears slowly when clicked
  $('#clickme').click(() => {
    $('#book').show('slow', () => {
      // Actions after the animation is completed

There is a group of JQuery UI plugins. The plugins implement functions needed when developing interactive sites, for example, dragging, auto-completing, resizing, and sorting:

JQuery UI


At one time, jQuery was a great choice, but that's not always the case. Since the release of the library, the web has marched on. The DOM standard has evolved so much that it's more convenient to do many things directly than it is through jQuery, and there's a lot of support from browsers for the standard itself. In places where there isn't enough support, there are always polyfills.

In addition, jQuery doesn't fit into new standards. An obvious example would be promises and AJAX.

All of this is leading to jQuery gradually being abandoned. You can find many popular libraries for any front-end task that will be better in their niche than what jQuery offers.

On the other hand, there is already so much written on jQuery that it's more or less required knowledge for any vacancy related to front-end development. As illustrated by the examples above, there's nothing complicated or fantastic about jQuery. Moreover, knowing the DOM is the most important thing. Everything else is just about carefully reading documentation and looking at examples.

Hexlet Experts

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
hours of theory

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing:">Bookmate</span>
<span class="translation_missing" title="translation missing:">Healthsamurai</span>
<span class="translation_missing" title="translation missing:">Dualboot</span>
<span class="translation_missing" title="translation missing:">Abbyy</span>
Suggested learning programs
Development of front-end components for web applications
10 months
from scratch
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.