Learn jQuery Advanced — Complete Plugins, Performance & Best Practices Guide

Q: What is the difference between $.fn and $.extend?

$.fn is the jQuery prototype — add methods here to make them available on jQuery objects. $.extend merges objects (used for default options in plugins).

Q: How do I test if something is a jQuery object?

obj instanceof jQuery or !!obj.jquery (jquery property exists on jQuery objects).

Q: How do I handle jQuery in a module bundler (Webpack, etc.)?

Install via npm: npm install jquery, then import $ from 'jquery' or const $ = require('jquery').

Web Frameworks

jQuery

jQuery Advanced — Complete Plugins, Performance & Best Practices Guide

DodaTech Updated Jun 6, 2026 10 min read

Advanced jQuery techniques help you write robust, performant, and reusable code — covering conflict resolution, asynchronous promises, custom plugin development, selector optimization, and production-ready patterns.

What You’ll Learn

How to manage $ conflicts with other libraries using noConflict
How to use jQuery Deferred and promises for async operations
How to create custom jQuery plugins with options and methods
How to optimize selector performance and DOM manipulation
How to use jQuery utility methods effectively
Common advanced mistakes and best practices

Why Advanced jQuery Matters

Writing jQuery that’s fast, reusable, and conflict-free separates beginners from professionals. Your first jQuery script might work fine, but as projects grow, you need patterns that scale. Think of this tutorial as moving from writing individual sentences to writing entire chapters — structured, organized, and maintainable. In DodaTech’s Durga Antivirus Pro, custom jQuery plugins power the dashboard widgets, deferred objects manage parallel API requests for threat data, and performance optimization ensures the UI stays responsive even with thousands of scan results.

Advanced jQuery Learning Path

    flowchart LR
  A[jQuery AJAX] --> B[jQuery UI]
  B --> C[jQuery Advanced: You Are Here]
  C --> D[noConflict]
  C --> E[Deferred & Promises]
  C --> F[Plugin Development]
  C --> G[Performance]
  C --> H[Utility Methods]
  D --> I[Production-Ready Code]
  E --> I

⚙️

Prerequisites: Complete https://tutorials.dodatech.com/frameworks/jquery/jquery-basics/ through https://tutorials.dodatech.com/frameworks/jquery/jquery-ajax/. Experience with JavaScript closures and callbacks helpful.

noConflict — Avoiding $ Conflicts

When a page uses multiple libraries that both use the $ variable (like Prototype, MooTools, or modern ES6), you need to resolve the conflict:

// Release $ back to the other library
var jq = jQuery.noConflict();

// Now use jQuery via your alias
jq(function() {
    jq("p").hide();
});

// Or assign a different alias
var $j = jQuery.noConflict();
$j(function() {
    $j("p").hide();
});

The Closure Pattern (Most Common)

This is the safest and most widely used pattern:

jQuery.noConflict();
(function($) {
    // Inside this IIFE, $ is jQuery
    $(function() {
        $("p").hide();
        $("button").click(function() { ... });
    });
})(jQuery);

Why this pattern? It creates a private scope where $ safely refers to jQuery. Code outside the closure uses whatever $ means globally. No conflicts, no surprises.

WordPress-Specific Pattern

WordPress ships with jQuery in noConflict mode by default:

jQuery(document).ready(function($) {
    // $ is jQuery inside here — safe to use
    $("button").click(function() { ... });
});

WordPress passes jQuery as the first argument to the ready callback, so you can name it $ locally without affecting the global scope.

Deferred & Promise Objects

Before native JavaScript Promises, jQuery had its own Deferred system. You’ll encounter it in legacy code, and it’s still useful with jQuery’s AJAX methods.

Creating a Deferred

function wait(duration) {
    var deferred = $.Deferred();

    setTimeout(function() {
        deferred.resolve("Done after " + duration + "ms");
    }, duration);

    return deferred.promise();  // Return read-only promise
}

// Usage
wait(1000).done(function(message) {
    console.log(message);  // "Done after 1000ms"
});

Deferred States

A Deferred has three states:

var d = $.Deferred();

d.state();     // "pending" — not resolved or rejected yet

d.resolve("OK");
d.resolve("Again");  // Ignored — already resolved (one-time)

d.state();     // "resolved"

d.reject("Error");   // Ignored — already resolved (can't change)

Key Methods

var deferred = $.Deferred();
var promise = deferred.promise();  // Read-only view (can't resolve/reject)

// Attach handlers
promise.then(
    function(value) { /* resolved */ },
    function(error) { /* rejected */ }
);

// Separate handlers
promise.done(function(value) { /* resolved */ });
promise.fail(function(error) { /* rejected */ });
promise.always(function() { /* resolved or rejected */ });

// Resolve/Reject
deferred.resolve("value");
deferred.reject("error");

$.when — Wait for Multiple Async Operations

$.when(
    $.get("api/users"),
    $.get("api/posts"),
    $.get("api/comments")
).done(function(users, posts, comments) {
    // All 3 completed
    console.log("Users:", users[0]);     // [data, status, xhr]
    console.log("Posts:", posts[0]);
}).fail(function() {
    console.log("One of the requests failed");
});

Creating jQuery Plugins

jQuery’s prototyping system lets you add new methods available on every jQuery object.

Basic Plugin

(function($) {
    $.fn.highlight = function(options) {
        // Merge user options with defaults
        var settings = $.extend({
            color: "yellow",
            duration: 1000
        }, options);

        // `this` is the jQuery object — return it for chaining
        return this.each(function() {
            var $el = $(this);
            $el.css("background-color", settings.color);

            if (settings.duration) {
                setTimeout(function() {
                    $el.css("background-color", "");
                }, settings.duration);
            }
        });
    };
})(jQuery);

// Usage
$("p").highlight();                              // Default yellow
$("p").highlight({ color: "#ffcccc", duration: 2000 });
$(".important").highlight({ color: "#ff9999" }).fadeIn();  // Chainable

Plugin Pattern Explained Line by Line

(function($) { ... })(jQuery); — IIFE that passes jQuery as $, protecting the $ alias
$.fn.highlight = ... — $.fn is the jQuery prototype; adding to it makes the method available on all jQuery objects
$.extend({ defaults }, options) — Merge defaults with user options (safe pattern)
return this.each(function() { ... }) — Iterate over matched elements AND return this for chaining
$(this) — Inside .each(), this is the native DOM element; wrap it in jQuery

Plugin with Public Methods

For more complex plugins with multiple methods:

(function($) {
    var methods = {
        init: function(options) {
            return this.each(function() {
                var $this = $(this);
                if (!$this.data("tooltip")) {
                    $this.data("tooltip", { content: options.content });
                    // Build tooltip DOM...
                }
            });
        },
        show: function() {
            return this.each(function() { /* Show tooltip */ });
        },
        hide: function() {
            return this.each(function() { /* Hide tooltip */ });
        },
        destroy: function() {
            return this.each(function() {
                $(this).removeData("tooltip");
                // Remove tooltip from DOM
            });
        }
    };

    $.fn.tooltip = function(method) {
        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === "object" || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error("Method " + method + " does not exist");
        }
    };
})(jQuery);

// Usage
$("a[title]").tooltip({ content: "Tooltip text" });
$("a[title]").tooltip("show");
$("a[title]").tooltip("destroy");

Performance Optimization

Selector Performance

// FASTEST — ID selector (uses getElementById)
$("#content");

// GOOD — tag selector with context
$("p", "#content");           // Context parameter narrows search
$("#content").find("p");      // .find() is very fast

// SLOW — complex attribute selector on large DOM
$("[data-type='widget']");

// BETTER — narrow scope first
$("#widgetContainer").find("[data-type='widget']");

// ALWAYS cache repeated selections
var $menu = $("#menu");       // Query the DOM once
$menu.find("li").addClass("active");
$menu.find("a").css("color", "blue");

DOM Manipulation Performance

// BAD — causes 3 separate DOM updates (3 reflows)
$("#list").append("<li>1</li>");
$("#list").append("<li>2</li>");
$("#list").append("<li>3</li>");

// GOOD — single DOM update (1 reflow)
var html = "";
for (var i = 1; i <= 3; i++) {
    html += "<li>" + i + "</li>";
}
$("#list").append(html);

// BEST — document fragment (zero reflows until appended)
var $fragment = $(document.createDocumentFragment());
for (var i = 1; i <= 100; i++) {
    $fragment.append("<li>" + i + "</li>");
}
$("#list").append($fragment);

Event Delegation Performance

// BAD — binds N event handlers (N = number of <li> elements)
$("li").click(function() { ... });

// GOOD — one delegated handler regardless of count
$("#list").on("click", "li", function() { ... });

Avoid Unnecessary jQuery Calls

// BAD — calls $() 3 times (3 DOM queries)
$("p").css("color", "red");
$("p").addClass("highlight");
$("p").text("Updated");

// GOOD — chaining (1 DOM query)
$("p").css("color", "red").addClass("highlight").text("Updated");

// OR cache (1 DOM query)
var $p = $("p");
$p.css("color", "red");
$p.addClass("highlight");
$p.text("Updated");

Utility Methods

jQuery provides several utility functions that don’t operate on DOM elements:

// Type checking
$.isArray([]);                // true
$.isFunction(function() {});  // true
$.isNumeric("42");            // true
$.isPlainObject({});          // true
$.isEmptyObject({});          // true

// Iteration
$.each([1, 2, 3], function(i, val) { console.log(i, val); });
$.each({a: 1, b: 2}, function(key, val) { console.log(key, val); });

// Transformation
var doubled = $.map([1, 2, 3], function(n) { return n * 2; });
var evens = $.grep([1, 2, 3, 4], function(n) { return n % 2 === 0; });

// Object merging
var obj = $.extend({ a: 1 }, { b: 2 });      // {a: 1, b: 2}
var deep = $.extend(true, {}, obj1, obj2);     // Deep merge (nested)

// String utilities
$.trim("  hello  ");                          // "hello"

// Parsing
$.parseJSON('{"a":1}');  // {a: 1} (modern: use JSON.parse)
$.parseHTML("<p>Hi</p>"); // [<p>Hi</p>]

// Timing and binding
$.now();                // Current timestamp (Date.now)
$.proxy(fn, context);   // Bind function context (modern: fn.bind(context))

Common Mistakes

1. Building Plugins Without Protecting $

Always wrap plugin code in an IIFE that passes jQuery:

// SAFE — $ is protected
(function($) {
    $.fn.myPlugin = function() { ... };
})(jQuery);

2. Not Supporting Chaining in Plugins

Always return this.each(...) from plugin methods so users can chain:

$.fn.myPlugin = function() {
    return this.each(function() {
        // ...
    });  // ← Returns jQuery object for chaining
};

3. Re-querying the Same DOM Elements

// BAD — queries DOM 3 times
$("p").addClass("a");
$("p").addClass("b");
$("p").addClass("c");

// GOOD — cache once
var $p = $("p");
$p.addClass("a").addClass("b").addClass("c");

4. Using $.each for Large Arrays Instead of Native for

// SLOW for 10,000+ items
$.each(bigArray, function(i, item) { ... });

// FASTER with native for loop
for (var i = 0; i < bigArray.length; i++) { ... }

5. Binding the Same Event Handler Multiple Times

// BAD — fires twice
function handler() { alert("clicked"); }
$("#btn").click(handler);
$("#btn").click(handler);  // Bound again!

// GOOD — unbind first
$("#btn").off("click", handler).on("click", handler);

Practice Questions

1. What does $.fn refer to?

$.fn is the jQuery prototype. Adding methods to it makes them available on all jQuery objects created with $().

2. Why wrap plugin code in an IIFE (function($) { ... })(jQuery)?

To protect the $ alias. Inside the IIFE, $ is always jQuery regardless of what $ means outside.

3. What’s the difference between jQuery Deferred and native Promises?

For new code, use native Promises. jQuery Deferred is similar but has some differences: handlers fire even after resolution, and error handling is different. Use jQuery’s Deferred when working with old jQuery AJAX code.

4. What’s the most common jQuery performance mistake?

Re-querying the same DOM elements. Cache selections with var $el = $(selector) and reuse $el.

5. Challenge: Write a jQuery plugin called stickyHeader that makes a table header sticky when scrolling. It should clone the <thead>, make it position: fixed at the top, and show/hide it based on scroll position.

Answer

(function($) {
    $.fn.stickyHeader = function() {
        return this.each(function() {
            var $table = $(this);
            var $header = $table.find("thead");
            var $clone = $header.clone().addClass("sticky-clone");
            var offset = $table.offset().top;

            $clone.css({ position: "fixed", top: 0, display: "none", "z-index": 100 });
            $("body").append($clone);

            $(window).scroll(function() {
                if ($(window).scrollTop() > offset) {
                    $clone.show();
                } else {
                    $clone.hide();
                }
            });
        });
    };
})(jQuery);

// Usage: $("table").stickyHeader();

FAQ

What is the difference between $.fn and $.extend?

$.fn is the jQuery prototype — add methods here to make them available on jQuery objects. $.extend merges objects (used for default options in plugins).

Should I use jQuery Deferred or native Promises?

For new code, use native Promises. jQuery Deferred is primarily for legacy code compatibility.

How do I test if something is a jQuery object?

obj instanceof jQuery or !!obj.jquery (jquery property exists on jQuery objects).

What is the most common jQuery performance mistake?

Re-querying the DOM for the same elements. Cache selections into variables.

Can I use jQuery with React or Vue?

Yes, but it’s not recommended for the same DOM. React/Vue manage their own virtual DOM; mixing jQuery can cause conflicts. Use jQuery for non-managed DOM parts or legacy integration.

How do I handle jQuery in a module bundler (Webpack, etc.)?

Install via npm: npm install jquery, then import $ from 'jquery' or const $ = require('jquery').

Try It Yourself

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Accordion Plugin</title>
    <style>
        body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; }
        .accordion { border: 1px solid #ddd; border-radius: 8px; overflow: hidden; }
        .accordion-header { background: #f5f5f5; padding: 12px 16px; cursor: pointer; font-weight: bold; border-bottom: 1px solid #ddd; }
        .accordion-header:hover { background: #e3f2fd; }
        .accordion-header.active { background: #1a73e8; color: white; }
        .accordion-content { padding: 16px; display: none; }
    </style>
</head>
<body>
    <h1>Custom Accordion Plugin</h1>
    <div class="accordion">
        <div class="accordion-header">Section 1</div>
        <div class="accordion-content"><p>Content for section 1.</p></div>
        <div class="accordion-header">Section 2</div>
        <div class="accordion-content"><p>Content for section 2.</p></div>
        <div class="accordion-header">Section 3</div>
        <div class="accordion-content"><p>Content for section 3.</p></div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        (function($) {
            $.fn.accordionify = function(options) {
                var settings = $.extend({ speed: 300, oneOpen: true }, options);
                return this.each(function() {
                    var $accordion = $(this);
                    $accordion.find(".accordion-header").click(function() {
                        var $header = $(this);
                        var $content = $header.next(".accordion-content");
                        if ($content.is(":visible")) {
                            $content.slideUp(settings.speed);
                            $header.removeClass("active");
                            return;
                        }
                        if (settings.oneOpen) {
                            $accordion.find(".accordion-content").slideUp(settings.speed);
                            $accordion.find(".accordion-header").removeClass("active");
                        }
                        $content.slideDown(settings.speed);
                        $header.addClass("active");
                    });
                    $accordion.find(".accordion-header:first").click();
                });
            };
        })(jQuery);
        $(function() { $(".accordion").accordionify({ speed: 400, oneOpen: true }); });
    </script>
</body>
</html>

What’s Next

Topic	Description
https://tutorials.dodatech.com/frameworks/jquery/jquery-reference/	Complete jQuery API reference
https://tutorials.dodatech.com/frameworks/jquery/jquery-ajax/	AJAX promises and async patterns
https://tutorials.dodatech.com/frameworks/jquery/jquery-ui/	jQuery UI widget customization
JavaScript	JavaScript closures, prototypes, and async patterns
Webpack	Module bundling for production jQuery code

What’s Next

Congratulations on completing this Jquery Advanced tutorial! Here’s where to go from here:

Practice daily — Consistency is more important than long study sessions
Build a project — Apply what you learned by building something real
Explore related topics — Check out other tutorials in the same category
Join the community — Discuss with other learners and share your progress

Remember: every expert was once a beginner. Keep coding!

Previous jQuery AJAX — Complete Async Requests & API Calls Guide Next jQuery Reference & Cheatsheet — Complete API

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse jQuery