What does fn in jQuery.fn mean? How to use $.fn [jQuery]

If you look at the jQuery source code and libraries, you will find a description like $.fn.
Here is a brief explanation of what this refers to and an introduction to how to use it.

What does fn in jQuery.fn mean?

The bottom line is that fn is an alias for the prototype property.
javascript can add methods to existing constructors using the prototype property.

Simple prototype sample

// constructor function
var Product = function(name, price) {
    this.name = name;
    this.price = price;
}

var testProduct = new Product('banana', 100);
console.log( testProduct );

// result
{"name":"banana","age":100}

I tried to create a basic constructor above. Actually add a method using the prototype property

// add method
Product.prototype.getName = function() {
    return this.name;
}

// add property
Product.prototype.stock = 10;

As mentioned above, you can later add new properties and methods to existing constructors by using the prototype property.

How to use $.fn

I know it’s an alias for the prototype property, but I’ll explain how it can actually be used.

Add properties to create a plugin

The fact that $.fn is an alias for prototype allows you to add properties and methods, as in the example above.
Let’s add a simple method.

Simple plugin sample

$.fn.textRed = function() {
    this.css("color", "red");
};

// surrounded by span turns red
$("span").textRed();

Isn’t it easy? Please be aware of the following when actually implementing the plugin.

Enable method chain

// Care jQuery Method Chaining
$.fn.textRed = function(){
    this.css("color", "red");
    return this;
};

// What is Method Chaining?
$("span").textRed().addClass("warning");

Add return this to enable the method chain. By doing so, the addClass() described after textRed() in the above example will work.

Used / assumed to be used with other libraries

$ is an alias for jQuery, but it may also be used in other libraries.
Therefore, the scope is limited as shown below so that the name will not be covered.

(function ($) {
    $.fn.textRed= function() {
        this.css( "color", "red" );
        return this;
    };
}(jQuery));

That’s how to create a simple plugin.

Other ways to use $.fn

For example, you can use it like this.
– Create one basic, for example base.js, javascript file and load it on all pages.
– Introduce a library such as a flexslider, but the library loads only the page to be used.
In the above case, if you write the flexslider description in base.js, an error will occur on the page where the library is not loaded.
Therefore, you can use $.fn when you want to separate the page where the slider is loaded by the conditional statement.

if ($.fn.flexslider) {
    $('.image-slider').flexslider({
    });
}

It will only be executed if a property called flexslider has been added to $.fn.

So far, I have introduced how to use $.fn, though it is simple.
Please note that it is difficult to talk about the constructor and the plug-in in detail, so I will explain it only briefly.

jQuery Recommended Books

Many jQuery books are old. However, jQuery itself is still evolving.
It may be best to look at the formula.
jQuery official

jQuery The best textbook
From basic to applied.