Jquery plug-in writing notes

JQuery plugin type:
1. jQuery method:
Most jQuery plug-ins use this type of plug-ins. Because these plug-ins encapsulate object methods, they operate when the jQuery selector obtains jQuery objects to take advantage of jQuery's powerful selector.
2. Global functions:
You can also independently attach a user-defined function to the jQuery namespace and use it as a public function under the jQuery scope. However, the global function is not bound to the jQuery object, so it cannot be called on the jQuery object obtained by the selector. It must be referenced using jQuery. fn () or $. fn.
3. selector:
If the selector provided by jQuery is insufficient or inconvenient, you can consider customizing the selector.
JQuery plug-in mechanism:
① JQuery. extend () method: You can create a global function or selector.
By: the so-called global function is the jQuery object method, which is actually a function located inside the jQuery namespace. Some people call this type of function as a utility function. These functions share a common feature, instead of operating the DOM element directly, you can operate non-element objects in Javascript, or perform other non-object-specific operations, such as jQuery's each () function and noConflict () function.
For example, create two common functions in the jQuery namespace. Copy codeThe Code is as follows: jQuery. extend ({
MinValue: function (a, B ){
Return a <B? A: B;
},
MaxValue: function (a, B ){
Return a <B? B:;
}
})
$ (Function (){
$ ("Input"). click (function (){
Var a = prompt ("Please input a value? ");
Var B = prompt ("Please input another value? ");
Var c = jQuery. minValue (a, B );
Var d = jQuery. maxValue (a, B );
Alert ("the maximum value you entered is:" + d + "\ n the minimum value you entered is:" + c );
});
})
<Input type = "button" value = "jQuery Extension Test"/>

※In addition to creating plug-ins, The jQuery. extend () method can also be used to expand jQuery objects.
For example, the jQuery. extend () method is called to merge object a and object B into a new object, and return the merged object and assign it to variable c.Copy codeCode: var a = {name: "zhu", pass: 123}
Var B = {name: "wang", pass: 456, age: 1}
Var c = jQuery. extend (a, B );
$ (Function (){
For (var name in c ){
$ ("Div" ).html ($ ("div" ).html () + "<br/>" + name + ":" + c [name]);
}
})

Example: Create a jQuery global functionCopy codeThe Code is as follows: jQuery.css 8 = {
MinValue: function (a, B ){
Return a <B? A: B;
},
MaxValue: function (a, B ){
Return a <B? B:;
}
}
$ (Function (){
$ ("Input"). click (function (){
Var a = prompt ("Please input a value? ");
Var B = prompt ("Please input another value? ");
Var c = jQuery.css 8. minValue (a, B );
Var d = jQuery.css 8. maxValue (a, B );
Alert ("the maximum value you entered is:" + d + "\ n the minimum value you entered is:" + c );
});
})

By: to add a function to the jQuery namespace, you only need to define the new function as an attribute of the jQuery object. The jqueryobject name can also be simplified to "simplified". jquery.css8?##.css 8
② JQuery. fn. extend () method: The jQuery object method can be created.
Example: The simplest jQuery object MethodCopy codeThe Code is as follows: jQuery. fn. test = function (){
Alert ("this is the jQuery object method! ");
}
$ (Function (){
$ ("Div"). click (function (){
$ (This). test ();
});
})