首页 > 代码库 > [整理] jQuery插件开发
[整理] jQuery插件开发
1、类级别的插件开发
类级别的插件开发，可似为给jQuery类添加方法，调用方式：$.你的方法()，如：$.ajax() 函数。
1.1、给jQuery类添加方法
$.alertMsg = function(msg){ alert("alertMsg : " + msg); };// 调用// $.alertMsg("hello");
1.2、给jQuery类添加带命名空间的方法
$.myPlugin = { alertMsg : function(msg){ alert("myPlugin.alertMsg : " + msg); }, };// 调用// $.myPlugin.alertMsg("hello");
1.3、使用 jQuery.extend 给jQuery类添加方法
$.extend({ alertMsg2 : function(msg){ alert("alertMsg2 : " + msg); }, // 调用 // $.alertMsg2("hello"); myPlugin2 : { alertMsg : function(msg){ alert("myPlugin2.alertMsg : " + msg); }, }, // 调用 // $.myPlugin2.myPlugin2("hello");});
2、对象级别的插件开发
对象级别的插件开发，可似为给jQuery对象添加方法，调用方式：$(对象).你的方法()，如：$("body").css() 函数。
2.1、给jQuery对象添加方法
$.fn.alertText = function(msg){ alert("alertText : " + this.text() + " , " + msg);};// 调用// $(elem).alertText("hello");
2.2、给jQuery对象添加带名命空间的方法
$.fn.myPlugin = { alertText : function(msg){ // this 为 myPlugin 对象，要获取事件源，使用event.target alert("myPlugin.alertText : " + $(event.target).text() + " , " + msg); },};// 调用// $(elem).myPlugin.alertText("hello");$.fn.myPlugin2 = function(method){ var methods = { init : function(){ alert("myPlugin2.init"); }, alertText : function(msg){ alert("myPlugin2.alertText : " + this.text() + " , " + msg); }, }; if(methods[method]){ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); }else{ return methods.init(); } };// 调用// $(elem).myPlugin2(); // $(elem).myPlugin2("init");// $(elem).myPlugin2("alertText", "hello");
2.3、 使用 jQuery.fn.extend 给jQuery对象添加方法
$.fn.extend({ alertText2 : function(msg){ alert("alertText2 : " + this.text() + " , " + msg); }, // 调用 // $(elem).alertText2("hello"); myPlugin3 : { alertText : function(msg){ // this 为 myPlugin 对象，要获取事件源，使用event.target alert("myPlugin3.alertText : " + $(event.target).text() + " , " + msg); }, }, // 调用 // $(elem).myPlugin3.alertText("hello"); myPlugin4 : function(method){ var methods = { init : function(){ alert("myPlugin4.init"); }, alertText : function(msg){ alert("myPlugin4.alertText : " + this.text() + " , " + msg); }, }; if(methods[method]){ return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); }else{ return methods.init(); } } // 调用 // $(elem).myPlugin4(); // $(elem).myPlugin4("init"); // $(elem).myPlugin4("alertText", "hello");});
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。