Integrating Existing Plugins
In this page:
What is a jQuery Plugin?
A jQuery plugin is a function attached to jQuery.fn so it becomes callable on any jQuery selection, extending what the library can do beyond its built-in methods. This is how the entire jQuery plugin ecosystem — carousels, validators, date pickers — adds features without modifying jQuery's own source.
Example: What is a jQuery Plugin?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight();
</script>
</body>
</html>Include a Plugin
A plugin is normally loaded with a script tag placed after jQuery itself, since it needs jQuery.fn to already exist before it can attach new methods to it. Once loaded, the plugin's methods become available on any jQuery object, just like built-in methods such as .hide() or .addClass().
Example: Include a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// Plugin script tags must come after the jQuery script tag,
// since they attach methods onto jQuery.fn which must already exist
console.log(typeof $.fn.on);
</script>
</body>
</html>Use Plugin Options
Good plugins often accept an options object as an argument, letting users customize behavior — colors, speeds, callback functions — without needing to edit the plugin's own code. This turns a single plugin into something reusable across many different projects with different requirements.
Example: Use Plugin Options
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function(options) {
const settings = $.extend({color: "yellow"}, options);
return this.css("background", settings.color);
};
$("p").highlight({color: "pink"});
</script>
</body>
</html>Initialize a Plugin
Many plugins are initialized by calling a method on a selected element, such as $('.carousel').slick(), and initialization is commonly done inside a document-ready handler to guarantee the target elements already exist in the DOM.
Example: Initialize a Plugin
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div class="carousel">Slide</div>
<script>
$.fn.highlight = function() { return this.css("background", "yellow"); };
$(document).ready(function() {
$(".carousel").highlight();
});
</script>
</body>
</html>Small Plugin Integration Project
Before adding a third-party plugin to a project, it's worth checking its documentation for required files, the correct initialization method, available options, and which browsers it actually supports — skipping this step is a common source of confusing bugs later.
Example: Small Plugin Integration Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
// Before adding a plugin, check: required files, init method, options, browser support
console.log("Checklist before integrating a third-party plugin");
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: