Integrating Existing Plugins
A jQuery plugin is reusable code that adds a feature to jQuery. Plugins can add effects, widgets, validation, and other features.
In this page:
Syntax
<script src="jquery.js"></script>
<script src="plugin-name.js"></script> <!-- after jQuery -->
$("selector").pluginName({option: value});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>
<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>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>
<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; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
// Plugin script tags must come after the jQuery script tag,
// since they attach methods onto jQuery.fn which must already exist
$("#output").text(typeof $.fn.on);
});
$("#resetBtn").click(function() {
$("#output").empty();
});
</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>
<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(options) {
const settings = $.extend({color: "yellow"}, options);
return this.css("background", settings.color);
};
$("p").highlight({color: "pink"});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
$("#output").empty();
});
</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>
<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">
<div class="carousel">Slide</div>
</section>
<div id="output"></div>
<script>
var original = $("#demo").html();
$("#runBtn").click(function() {
$.fn.highlight = function() { return this.css("background", "yellow"); };
$(document).ready(function() {
$(".carousel").highlight();
});
});
$("#resetBtn").click(function() {
$("#demo").html(original);
jQuery(document).off();
$("#output").empty();
});
</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>
<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; }
</style>
</head>
<body>
<button id="runBtn">Run</button>
<button id="resetBtn">Reset</button>
<div id="output"></div>
<script>
$("#runBtn").click(function() {
// Before adding a plugin, check: required files, init method, options, browser support
$("#output").text("Checklist before integrating a third-party plugin");
});
$("#resetBtn").click(function() {
$("#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
- Including the plugin script before jQuery, so
jQuery.fnis undefined and the plugin fails to load. - Calling a plugin method that does not exist, such as
$("p").highlightX(), because of a typo or a missing script. - Passing options in the wrong form, such as a string instead of an object, so the plugin ignores them and uses its defaults.
🔒
Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: