Calling methods on DOM elements

In the previous recipe, the plugin is called on the $ shortcut. In this recipe, we will create a plugin that can be called directly on the DOM elements. This is possible by extending the jQuery.prototype, that is, the jQuery.fn object.

Note

Every object in JavaScript is derived from Object and inherits properties and methods from Object.prototype. When a property or method is attached to the prototype, all instances of the object reflect that property or method.

The constructs used in this example are summarized as follows:

Construct	Type	Description
$	jQuery function	This refers to the jQuery function. $ is an alias for jQuery.
$("#identifier")	jQuery selector	This selects an element based on its ID.
$("html_tag")	jQuery selector	This selects all elements with the specified HTML tag.
$(this)	jQuery object	This refers to the current jQuery object.
.css()	jQuery method	This gets the style property for the first matched element or sets...