Back to Curriculum

jQuery Plugins

📚 Lesson 9 of 15 ⏱️ 45 min

jQuery Plugins

45 min

jQuery plugins extend jQuery's functionality with additional features and capabilities.

Popular plugins include jQuery UI, jQuery Mobile, and countless community-created plugins.

Creating custom plugins allows you to reuse code and share functionality.

Exercise

Create a simple custom jQuery plugin that adds a highlight effect.

(function($) {
  $.fn.highlight = function(options) {
    var settings = $.extend({
      color: 'yellow',
      duration: 1000
    }, options);
    
    return this.each(function() {
      var $this = $(this);
      var originalColor = $this.css('background-color');
      
      $this.css('background-color', settings.color);
      
      setTimeout(function() {
        $this.css('background-color', originalColor);
      }, settings.duration);
    });
  };
})(jQuery);

// Usage
$('.highlight-me').highlight({ color: 'orange', duration: 2000 });

Code Editor

Output