Plugins

Learning objectives#

• Load and initialise a third-party plugin
• Pass options and call plugin methods
• Write a plugin on $.fn with defaults
• Keep plugins chainable

Explanation#

A plugin is a script that adds methods to $.fn, the prototype of every jQuery object. Load it after jQuery, then call $("#date").datepicker({ ... }).

Most plugins accept an options object merged with their defaults, and many expose methods: $("#slider").slick("slickNext").

To write one: $.fn.highlight = function (options) { const settings = $.extend({}, defaults, options); return this.each(function () { ... }); };

Return this (usually via this.each) so your plugin can be chained like built-in methods.

Popular examples: jQuery UI (datepicker, dialog), jQuery Validation, Select2, DataTables. Check that a plugin is maintained before adding it; many old ones are abandoned.

Syntax#

1$.fn.myPlugin = function (options) {
2  const settings = $.extend({ color: 'yellow' }, options);
3  return this.each(function () {
4    $(this).css('background', settings.color);
5  });
6};
7$('.note').myPlugin({ color: 'pink' }).fadeIn();

Code example: A character-counter plugin#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<div style="font-family:sans-serif">
3  <p><textarea id="bio" rows="2" cols="40"></textarea></p>
4  <p><input id="tweet" size="40"></p>
5</div>
6<script>
7  (function ($) {
8    $.fn.charCounter = function (options) {
9      const settings = $.extend({ max: 100, warnAt: 0.9 }, options);
10

11      return this.each(function () {
12        const $field = $(this);
13        const $label = $('<small>').insertAfter($field);
14

15        function update() {
16          const length = $field.val().length;
17          $label.text(' ' + length + '/' + settings.max)
18                .css('color', length > settings.max ? 'red' : length >= settings.max * settings.warnAt ? 'orange' : 'gray');
19        }
20

21        $field.on('input.charCounter', update);
22        update();
23      });
24    };
25  })(jQuery);
26

27  $(function () {
28    $('#bio').charCounter({ max: 160 });
29    $('#tweet').charCounter({ max: 20 }).attr('placeholder', 'max 20 characters');
30    console.log('Plugin installed:', typeof $.fn.charCounter);
31  });
32</script>

Each field gets a grey counter (“0/160”, “0/20”) that updates as you type, turns orange near the limit and red above it. The console logs “Plugin installed: function”. The second call shows the plugin is chainable (.attr runs afterwards).

Step-by-step explanation#

1. The plugin is wrapped in (function ($) { ... })(jQuery) so $ is safe even if another library uses it.
2. $.extend merges user options over the defaults.
3. this.each runs the setup once per matched element and returns the jQuery object for chaining.
4. A namespaced event (input.charCounter) makes it easy to remove later with .off(".charCounter").

Real-world use case#

Common mistakes#

Best practices#

• Load plugins after jQuery, once
• Use $.extend for defaults
• Return this.each(...)
• Namespace events and data keys

Remember this#

Practice exercise#

1<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
2<input id="pan" value="abcde1234f">
3<script>
4  $.fn.uppercaseOnBlur = function () {
5    return this.each(function () {
6      $(this).on('blur', function () { $(this).val($(this).val().toUpperCase()); });
7    });
8  };
9  $(function () { $('#pan').uppercaseOnBlur(); });
10</script>

Mini quiz#

Want more? Practise all jQuery MCQs · jQuery interview questions

Related topics#

My notes#

Saved in this browser.