An example of how to write a jquery plugin

Abstract: jQuery plug-in development is divided into class-level development and object-level development.

jQuery plug-in development is divided into class-level development and object-level development

. Class level ($.extend)
jQuery.extend(object) The class level is used in jQuery class / namespace Adding a new function to the above can be understood as extending the jquery class. The most obvious example is $.ajax(...), and the ajax methods are all called with jQuery.ajax(), which is a bit like "class name.method name" static How the method is called. Use the $.extend method when developing the extension method, namely jQuery.extend(object);

jQuery.extend() method has an overload
Let 's also write an example of jQuery.extend(object):

jQuery.extend({
    " " minValue": function (a, b) {
        return a < b ? a : b;
    },
    "maxValue": function (a, b) {
        return a > b ? a : b;
    }
});
call:

var i = 100; j = 101;
var min_v = $.minValue(i, j); // min_v equals 100
var max_v = $.maxValue(i, j); // max_v equals 101
Overloaded version: jQuery.extend([deep], target, object1, [objectN])

extends an object with one or more other objects and returns the extended object.

If target is not specified, the jQuery namespace itself is extended . This helps plugin authors to add new methods to jQuery.

If the first parameter is set to true, jQuery returns a deep copy, recursively copying any objects found. Otherwise, the copy will share the structure with the original object

Undefined properties will not be copied, however properties inherited from the object's prototype will be copied

Parameters:

deep: optional. If set to true, merge recursively.

target: The object to be modified.

object1: The object to be merged into the first object.

objectN: optional. The object to be merged into the first object

Example 1:

// Merge settings and options, modify and return settings.
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//result:
settings == {validate: true, limit: 5, name: "bar" }
Example 2:

//Merge defaults and options, do not modify defaults.
var empty = {};
var defaults = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
var settings = jQuery.extend(empty, defaults , options);
//Result:
settings == { validate: true, limit: 5, name: "bar" }
empty == { validate: true, limit: 5, name: "bar" }
This overloaded method, We generally use custom plugin parameters to override the default parameters of the plugin when writing plugins.

Object level
Object level can be understood as object-based expansion, such as $("#table").changeColor(...); here this changeColor is an object-based extension.
Use the $.fn.extend method when developing the extension method, that is, jQuery.fn.extend(object);


## First prepare a shelf

; (function($){})(jQuery);

This shelf is for you to write the plug-in code The space to be written is briefly explained below

. 1. Self-executing anonymous function: refers to a function like this:



To encapsulate your own plug-ins in the jQuery environment, first of all, to avoid conflicts with other libraries, you need to pass a jQuery parameter after the plug-in, and write the parameters in the corresponding function as $

2. To avoid problems, you need to add it before and after the plug-in. Semicolon (the addition of a semicolon will not affect the operation of the program)

3. Why ```(function{// code})();``` can be executed, while ```function{// code}( );``` but will report an error?

First, be clear about the difference between the two: ``` (function {// code})``` is an expression, ```function {// code}``` is a function Declaration.   

Secondly, the characteristics of js "pre-compilation": js in the "pre-compilation" stage, it will interpret the function declaration, but it will ignore the expression.   

When js is executed to ```function(){//code}(); ```, since ```function() {//code}``` has been interpreted in the "precompile" stage, js will skip ```function(){//code}```, Attempting to execute ```();```, it will report an error;

when js executes to ```(function {// code})(); ```, because ```(function{// code })```` is an expression, js will solve it to get the return value, since the return value is a function, it will be executed when it encounters ````();```.

In addition, the function is converted to The method of the expression does not necessarily depend on the grouping operator (), we can also use the void operator, the ~ operator, the ! operator...
For example:

//The plugin writing method in the bootstrap framework:
!function($){
　　/ /do something;
}(jQuery ); is the same thing
as
(function($){
　　//do something;
})(jQuery); The biggest use of anonymous
functions is to create closures (one of the features of the JavaScript language), and can also

Build namespaces to reduce the use of global variables

Example :

var a=1;
(function(){
var a=100;
})();
alert(a); // pop 1


## go to another shelf

;(function ($){
$.fn.tab = function(options){
var defaults = {
//various parameters, various properties
}
var options = $.extend(defaults,options);
this.each(function(){ / / There is no need to do $(this) again, because "this" is already a jQuery object. $(this) is the same as $($('.tab'))
// Various functions
});
return this; / /Writing directly as return this.each() can be omitted here
http://click.aliyun.com/m/23412/