How to create and use jQuery plugins?

To create and use jQuery plugins, follow these steps:

Start by including the jQuery library in your HTML document. You can either download the jQuery library and link it locally or use a Content Delivery Network (CDN) like Google Hosted Libraries to include it using the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Create a new JavaScript file for your plugin. It is a good practice to encapsulate your plugin code within a self-executing anonymous function to avoid conflicts with other libraries and plugins. For example:

(function ($) {
  // Plugin code here
})(jQuery);

Define your plugin as a function or an object within the self-executing anonymous function. Here's an example of a simple plugin that changes the background color of an element:

(function ($) {
  $.fn.changeColor = function (color) {
    return this.each(function () {
      $(this).css('background-color', color);
    });
  };
})(jQuery);

Inside the plugin function, use the $.fn or jQuery.fn object to extend jQuery's prototype with your plugin method. In the example above, $fn.changeColor adds a method called changeColor to the prototype of the jQuery object, allowing it to be called on any jQuery object.
To use your plugin, you can simply call it on a jQuery object. For example, if you have a <div> with the class "myDiv", you can change its background color like this:

$('.myDiv').changeColor('red');

This will change the background color of all elements with the class "myDiv" to red.

That's it! You have created and used a jQuery plugin. You can add more functionality to your plugin by extending the $.fn object with additional methods, just like you did with the changeColor method.