jquery Plug-in Type:
1. jquery Method:
Most jquery plug-ins are this type of plug-in, because it encapsulates the object method and operates in the jquery selector to get the jquery object to play the powerful selector advantage of jquery.
2. Global functions:
Custom function functions can also be attached independently to the jquery namespace to be used as a common function in the jquery scope. However, global functions are not bound to jquery objects and cannot be invoked on the jquery object that the selector obtains. It needs to be referenced by Jquery.fn () or $.fn ().
3. Selector:
Consider a custom selector if jquery offers a selection that is not sufficient or inconvenient.
jquery plug-in mechanism:
①jquery.extend () Method: The ability to create global functions or selectors.
By: The so-called global function, which is the method of the JQuery object, is actually a function located inside the jquery namespace, which is called utility functions, which have a common feature of not manipulating DOM elements directly, but manipulating JavaScript's non element objects. or perform other non-object specific actions, such as the each () function of jquery and the Noconflict () function
Example: Creating two public functions on the jquery namespace
Copy Code code as follows:
Jquery.extend ({
Minvalue:function (a,b) {
Return a<b?a:b;
},
Maxvalue:function (a,b) {
Return a<b?b:a;
}
})
$ (function () {
$ ("Input"). Click (function () {
var a = prompt ("Please enter a numeric value?") ");
var B = Prompt ("Please enter a value again?") ");
var c = jquery.minvalue (a,b);
var d = jquery.maxvalue (a,b);
Alert ("The maximum value you enter is:" + D + "\ n the minimum value you enter is:" + C);
});
})
<input type= "button" value= "jquery plug-in extension test"/>
In addition to creating Plug-ins, the ※jquery.extend () method can be used to extend the JQuery object.
For example, call the Jquery.extend () method to merge object A and object B into a new object and return the merged object to assign it to the variable C
Copy Code code 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 () + "<br/>" + name + ":" + c[name]);
}
})
Example: Creating a jquery global function
Copy Code code as follows:
Jquery.css8 = {
Minvalue:function (a,b) {
Return a<b?a:b;
},
Maxvalue:function (a,b) {
Return a<b?b:a;
}
}
$ (function () {
$ ("Input"). Click (function () {
var a = prompt ("Please enter a numeric value?") ");
var B = Prompt ("Please enter a value again?") ");
var c = jQuery.css8.minValue (a,b);
var d = jQuery.css8.maxValue (a,b);
Alert ("The maximum value you enter is:" + D + "\ n the minimum value you enter is:" + C);
});
})
By: If you want to add a function to the jquery namespace, just make the new function a property of the jquery object. Where the JQuery object name can also be abbreviated to $,JQUERY.CSS8==$.CSS8
②jquery.fn.extend () Method: The ability to create JQuery object methods.
Example: One of the simplest jquery object methods
Copy Code code as follows:
JQuery.fn.test = function () {
Alert ("This is the JQuery object Method!") ");
}
$ (function () {
$ ("div"). Click (function () {
$ (this). Test ();
});
})
