Authoring a Custom Plugin
In this page:
Start a Plugin
Writing a plugin starts by attaching a named function directly to $.fn, so it can be invoked the same way as any of jQuery's own built-in methods, like $('.box').myPlugin(). The function itself typically receives an options object as its argument.
Example: Start a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function() {
return this.css("border", "2px solid blue");
};
$(".box").myPlugin();
</script>
</body>
</html>Add Options
Options make a plugin flexible enough to be reused across different situations, and defining sensible defaults means the plugin still works correctly even when the caller supplies no options at all. Merging user-supplied options over the defaults, usually with $.extend(), is the standard way to combine the two.
Example: Add Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
$.fn.myPlugin = function(options) {
const settings = $.extend({color: "blue"}, options);
return this.css("border", "2px solid " + settings.color);
};
$(".box").myPlugin({color: "red"});
</script>
</body>
</html>Use each for Elements
Use each() inside a plugin whenever it needs to perform its operation separately for every element in the current selection, since a plugin might be called on one element or on many at once. Looping explicitly with each() ensures the plugin behaves correctly either way.
Example: Use each for Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">One</div><div class="box">Two</div>
<script>
$.fn.myPlugin = function() {
return this.each(function() {
$(this).css("border", "2px solid blue");
});
};
$(".box").myPlugin();
</script>
</body>
</html>Avoid Global Variables
Plugin code should keep its helper variables private rather than creating them as globals, since global names can silently collide with other scripts running on the same page. Wrapping the plugin in a closure — a function that creates its own private scope — is a simple, standard way to achieve this.
Example: Avoid Global Variables
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
(function($) {
$.fn.myPlugin = function() {
const borderStyle = "2px solid blue";
return this.css("border", borderStyle);
};
})(jQuery);
$(".box").myPlugin();
</script>
</body>
</html>Complete Custom Plugin
A genuinely useful, reusable plugin combines a clear, specific name; sensible defaults; a flexible options object; chainability by returning this; and straightforward internal logic that does one job well rather than trying to do everything.
Example: Complete Custom Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="box">Box</div>
<script>
(function($) {
$.fn.myPlugin = function(options) {
const settings = $.extend({color: "blue"}, options);
return this.each(function() {
$(this).css("border", "2px solid " + settings.color);
});
};
})(jQuery);
$(".box").myPlugin({color: "green"});
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: