jQuery Prototype Chain
jQuery methods are commonly added through $.fn. It refers to the prototype used by jQuery objects.
In this page:
Syntax
$.fn.methodName = function () {
return this;
};What is $.fn?
$.fn is the object jQuery uses as the prototype for every jQuery-wrapped selection, which is why adding a method to $.fn makes that method available on every result of $(...) afterward. This single object is the mechanism behind jQuery's entire extensibility model.
Example: What is $.fn?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.shout = function() {
return this.text($(this).text().toUpperCase());
};
$("p").shout();
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Return this for Chaining
A plugin should normally return this when it finishes changing the selected elements, since this refers to the jQuery object the method was called on. Returning it is what allows other jQuery methods to be chained immediately afterward, matching the behavior users expect from built-in methods.
Example: Return this for Chaining
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight().css("padding", "10px");
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Work with Multiple Elements
A jQuery plugin should usually operate on every element in the current selection, not just the first one, since $(...) can match multiple elements at once. The each() method is the standard way to loop through them and apply logic to each element individually inside a plugin.
Example: Work with Multiple Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>One</p><p>Two</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$("#output").empty();
$.fn.shout = function() {
return this.each(function() {
$(this).text($(this).text().toUpperCase());
});
};
$("p").shout();
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Use Plugin Scope Safely
Plugin code should avoid creating unnecessary global variables, since those can silently collide with other scripts on the same page. Wrapping a plugin's code in a function expression keeps its helper variables private and inaccessible from outside the plugin.
Example: Use Plugin Scope Safely
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
</style>
</head>
<body>
<button id="runBtn">Run Plugin</button><button id="resetBtn" class="secondary">Reset</button>
<p id="target" class="item">Plugin target</p>
<div id="output"></div>
<script>
(function ($) {
$.fn.highlight = function () {
const privateColor = "yellow";
return this.css("background", privateColor);
};
})(jQuery);
$("#runBtn").click(function () {
$("#target").highlight();
$("#output").text("highlight() ran; privateColor stays hidden inside the plugin scope: typeof privateColor = " + typeof privateColor);
});
$("#resetBtn").click(function () {
$("#target").css("background", "");
$("#output").text("");
});
</script>
</body>
</html>Small Prototype Project
This prototype pattern — attaching functions to $.fn that return this for chaining — is the standard, expected way to add new chainable methods to jQuery, which is why virtually every published jQuery plugin follows it.
Example: Small Prototype Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
#resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
#demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
#demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
#demo :where(table) { border-collapse:collapse; }
#demo :where(td, th) { border-radius:0; }
#demo :where(input, select, textarea) { margin:4px 0; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<section id="demo">
<p>Text</p>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight();
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
Common Mistakes
- Adding a plugin to
$instead of$.fn, so$("p").myPlugin()is not a function. - Forgetting
return this;at the end of the plugin, which breaks chaining such as$("p").myPlugin().hide(). - Using an arrow function for the plugin method, where
thisno longer refers to the jQuery selection.
🔒
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: