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, ...)).