Home  >  Article  >  Web Front-end  >  JQuery plug-in development sample code_jquery

JQuery plug-in development sample code_jquery

WBOY
WBOYOriginal
2016-05-16 17:17:121054browse

JQuery plug-in development:
Class level development, develop new global functions
Object level development, develop new methods for Jquery objects
1. Class level development- Define global method

Copy code The code is as follows:

jQuery.foo = function( ) {
alert('This is a test.');
};

Using namespace can avoid function conflicts within the namespace.
Copy code The code is as follows:

jQuery.apollo={
fun1:function( ){
console.log('fun1');
},
fun2:function(){
console.log('fun2');
}
}


2. Object level development - defining jQuery object methods

Copy code The code is as follows:

(function($) {
$.fn.pluginName = function() {

};
})( jQuery);
//The plug-in is called like this:
$('#myDiv').pluginName();

Accepts the options parameter to control the behavior of the plug-in
Copy code The code is as follows:

(function($){
$.fn.fun2=function (option){
var defaultOption={
param1:'param1',
param2:'param2'
}
$.extend(defaultOption,option);
console.log (defaultOption);
}
})(jQuery);
$(function(){
//Called like this
$("body").fun2({
param1:'new Param1'
});
});

Keep private functions private
Copy code The code is as follows:

(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
// ...
};
// private function for debugging
// The "debug" method cannot be entered from the external closure, so for our implementation it is Private.
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' $obj.size());
};
// ...
})(jQuery);
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn