Jquery plug-in writing notes compilation_jquery

jQuery plug-in type:
1. jQuery method:
Most jQuery plug-ins are of this type. Since this type of plug-in encapsulates object methods, jQuery is obtained in the jQuery selector. Operate within the object process, thereby taking advantage of jQuery's powerful selectors.
2. Global function:
You can also attach a custom function function independently 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 needs to be referenced through jQuery.fn() or $.fn().
3. Selector:
If you feel that the selector provided by jQuery is not enough or inconvenient, you can consider customizing the selector.
jQuery plug-in mechanism:
① jQuery.extend() method: Able to create global functions or selectors.
By: The so-called global function is the method of the jQuery object. It is actually the function located inside the jQuery namespace. Some people call this type of function a utility function. These functions have a common feature, that is, they do not directly operate the DOM. Elements, but operate Javascript's non-element objects, or perform other non-object specific operations, such as jQuery's each() function and noConflict() function
Example: Create two public functions on the jQuery namespace

Copy code The code is as follows:

jQuery.extend({
minValue : function(a,b ){
return a},
maxValue : function(a,b){
return a}
})
$(function(){
$("input").click(function(){
var a = prompt("Please enter a value?");
var b = prompt("Please enter another value?");
var c = jQuery.minValue(a,b);
var d = jQuery.maxValue(a,b);
alert("You enter The maximum value is: " d "nThe minimum value you enter is: " c);
});
})

※ In addition to creating plug-ins, the jQuery.extend() method can also be used to extend jQuery objects.
For example: call the jQuery.extend() method to merge object a and object b into a new object, and return the merged object and assign it to variable c

Copy the code The code is as follows:

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() "
" name ":" c[name]);
}
})

Example: Create jQuery global function

Copy code The code is as follows:

jQuery.css8 = {
minValue : function(a,b){
return a},
maxValue : function(a,b){
return a}
}
$(function(){
$("input").click(function(){
var a = prompt("Please enter a value? ");
var b = prompt("Please enter another value?");
var c = jQuery.css8.minValue(a,b);
var d = jQuery.css8.maxValue( a,b);
alert("The maximum value you entered is:" d "nThe minimum value you entered is:" c);
});
})

By: If you want to add a function to the jQuery namespace, you only need to specify the new function as a property of the jQuery object. The jQuery object name can also be abbreviated as $, jQuery.css8==$.css8
② jQuery.fn.extend() method: A method to create a jQuery object.
Example: Let’s take the simplest jQuery object method

Copy the code The code is as follows:

jQuery.fn.test = function(){
alert("This is a jQuery object method!");
}
$(function(){
$("div").click (function(){
$(this).test();
});
})