The Elegance of the Chain: More on jQuery

As we continue to celebrate the 20th anniversary of jQuery, I want to revisit one specific technique that revolutionized web development: Method Chaining. This feature did more than just save keystrokes; it made JavaScript more expressive and was a major factor in the library’s rise because it made the library easy to learn by nonprogrammers.

Before we dive in, a modern disclaimer: in 2026, I generally wouldn’t recommend jQuery for new projects. Most browsers now have native implementations (often inspired by jQuery itself) that make the library redundant. Even John Resig himself doesn’t use jQuery on his projects anymore. Furthermore, the paradigm of web UI development has shifted from direct DOM manipulation to reactive frameworks like React, Vue, Svelte, etc. Today, complexities like event delegation and cross-browser event handling are largely managed for us. However, in the early days, mastering these concepts was essential for building performant web applications.

Understanding Method Chaining

Method chaining was at the heart of jQuery’s “Write Less, Do More” philosophy. This technique allows you to link multiple methods together in a single statement, executing them sequentially on the same object without the need to declare intermediate variables.

In practice, what used to require four or five lines of code could be condensed into one elegant line:

$('.example').addClass('active').css('color', 'blue').text('Updated!');

Beyond the aesthetic appeal, this was highly practical. During an era of slower internet speeds, shipping less code while maintaining functionality was a significant competitive advantage.

Implementing Your Own Micro-Library

To understand how this works under the hood, we can build a modern “micro-library” using ES6 classes. The secret sauce of method chaining is the return this; statement. By returning the current instance of the class at the end of a method, you allow the next method in the chain to act upon that same object.

Here is a functional example of how you can recreate this logic:

(function () {
    class Element {
        constructor(element) {
            this.element = typeof element === 'string'
                ? document.querySelector(element)
                : element;
        }

        addClass(className) {
            this.element.classList.add(className);
            return this; // This enables the chain
        }

        css(property, value) {
            this.element.style[property] = value;
            return this; // This enables the chain
        }

        on(event, callback) {
            // We use .call(this) to ensure 'this' inside the callback 
            // refers to our Element wrapper, not the native DOM node.
            this.element.addEventListener(event, (e) => callback.call(this, e));
            return this;
        }

        text(content) {
            // Getter logic: if no content, return the value and BREAK the chain
            if (content === undefined) {
                return this.element.textContent;
            }
            // Setter logic: update value and CONTINUE the chain
            this.element.textContent = content;
            return this;
        }
    };

    window.$ = (selector) => new Element(selector);
})();

The “Chain Breaker”: Getters vs. Setters

A critical distinction in method chaining is the difference between modifiers and accessors.

• Modifiers (Setters): Methods like .addClass() or .css() perform an action and then return this. They are designed to keep the chain moving.
• Accessors (Getters): Methods like .text() or .html() serve a dual purpose. If you pass a value, they act as setters and keep the chain alive. However, if you call them without arguments to retrieve data, they return a string, not the object. This “breaks” the chain because a string does not have your custom .addClass() or .css() methods.

Seeing it in Action

By using the micro-library above, we can write highly expressive UI logic in our HTML files that feels just like the classic jQuery experience:

$('.demo').text('Hello, World!')
            .on('click', function(e) {
                   this.addClass('red');
             });

You can see this code in action by visiting this link.

Conclusion

Method chaining changed the way we thought about “fluent” interfaces in JavaScript. While we have moved on to more complex frameworks, understanding these fundamental patterns is vital for any developer. It reminds us that at the end of the day, our tools are built on simple, elegant logic.