Roadmap › jQuery › Module: AJAX and Effects
Lessons in this course (10)

7. Writing a jQuery plugin

IntermediateMediumLesson 7 of 10
js
(function ($) {
  $.fn.highlight = function (options) {
    const settings = $.extend({ color: "yellow", duration: 1000 }, options);
    return this.each(function () {                     // implicit iteration + chainable
      const $el = $(this);
      const original = $el.css("background-color");
      $el.css("background-color", settings.color);
      setTimeout(() => $el.css("background-color", original), settings.duration);
    });
  };
})(jQuery);

$(".new-row").highlight({ color: "#d3f9d8" }).addClass("seen");

$.fn is jQuery.prototype; $.extend merges objects (deep merge with $.extend(true, ...)).