jQuery Plugin Basics

Writing a jQuery Plugin

Extend $.fn (which is jQuery.prototype) to add a method available on all jQuery objects. Always return this to maintain chainability.

Example

$.fn.highlight = function(color) {
  return this.each(function() {
    $(this).css("background-color", color || "yellow");
  });
};

// Usage — chainable
$("p.important").highlight("lightblue").addClass("highlighted");

JAVASCRIPT

Full Editor

Pro Tip

Always return this.each(...) from plugins — it preserves jQuery chaining.

Related Resources

jQuery Reference

Complete tag & property list

jQuery How-To Guides

Step-by-step practical guides

jQuery Exercises

Practice what you've learned