Question

I saw a post out there:

what does $.fn mean

However I still don’t understand it. Can someone explain this in very simple terms to me. Why did they choose to specify it this way?

Answer 1

$.fn is just an alias for jQuery.prototype. To write a jQuery plugin, such as DataTables, one usually starts by adding a new function property to $.fn.

In simpler terms, when you write $.fn.pluginName, you are extending jQuery’s prototype, by adding a new function called pluginName to it. This way, you can call it using, for example, $("#myElement").pluginName(). That’s basically what DataTables does, it provides an extension to jQuery called dataTablesExt.

Now, this plugin has several properties. One of them, is called afnSortData (which you could also refer to using jQuery.prototype.dataTableExt.afnSortData). This way, the plugin properties are scoped to the dataTableExt object/plugin. DataTables could have opted to define it in the global namespace, but this way, someone could overwrite afnSortData with, say, {} and break the plugin.