1. Features of jQuery

• jQuery eliminates browser compatibility issues
• Traversing the DOM tree and selecting elements
• A large plugin library
• A utility function library, such as $.type(), $.extent(), and so on

The core function of jQuery usually refers to a factory object, that is, the jQuery() function, or its more commonly used alias, the $() function.

Apart from jQuery and $, jQuery does not pollute the global namespace.

Naming of jQuery plugins:
The convention is to name them jquery.pluginName.js, and the minified versions follow a similar naming convention, jquery.pluginName.min.js

2. Ways to Extend jQuery

2.1 Extending via the alias of the jQuery function’s prototype property (jquery.fn)

fn/prototype is live. Whenever new properties and methods are added, any object created from that type can immediately access these properties and methods.

1
2
3

jQuery.fn.newFunction = function () {
  console.log("This is a simple case");
};

2.2 The jQuery.extend() Method

The most basic function of the $.extend method is to merge two objects. When calling the $.extend method, if only one argument is passed, that argument will be merged into jQuery.

1
2
3
4
5

jQuery.extend({
  newFunction: function () {
    console.log("This is a simple case");
  },
});

2.3 Extension via the jQuery UI Widget Factory

The Widget Factory is a jQuery method that accepts two or three arguments: the first is the namespace, the second is an existing widget prototype from which it will inherit, and the third is an optional object literal that serves as the new widget prototype.

1

jQuery.widget("namespace.newFunction", {});

3. Points to Watch Out For

• this. In the context of a jQuery plugin, this refers to jQuery itself, not the DOM currently being operated on. The only exception is inside a $.each loop body, where this points to the DOM.
• Make sure $ points to jQuery. (function($){ })(jQuery).
• Do not omit semicolons. This avoids exceptions during minification.
• Return the jQuery object whenever possible, to support chaining syntax.

4. Best Practices

• Use the jQuery plugin pattern
• Declare a single name for the plugin, exposing a unique interface to the outside
• The plugin accepts only a single Options argument