<!DOCTYPE html> <html> <head> <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> <meta charset="utf-8"> <title>JS Bin</title> </head> <body> <input type="button" value="func1()" onclick="f1()"/> <input type="button" value="func2('xxx')" onclick="f2()"/> <input type="button" value="func3()" onclick="f3()"/> <input type="button" value="func4('xxx')" onclick="f4()"/> <input type="button" value="func5()" onclick="f5()"/> <input type="button" value="func6('xxx')" onclick="f6()"/> <div id="div1"><span class="btn_text"></span>xxx<input type="button" value="plugin1('xxxx')" onclick="pg1()"/></div> <div id="div2"><span class="btn_text"></span>xxx<input type="button" value="plugin2('xxxx')" onclick="pg2()"/></div> <div id="div3"><span class="btn_text"></span>xxx<input type="button" value="plugin3('xxxx')" onclick="pg3()"/></div> <div id="div4"><span class="btn_text"></span>xxx<input type="button" value="plugin4('xxxx')" onclick="pg4()"/></div> <div id="div5"><span class="btn_text"></span>xxx<input type="button" value="plugin5('xxxx')" onclick="pg5()"/></div> <div id="div6"><span class="btn_text"></span>xxx<input type="button" value="plugin6('xxxx')" onclick="pg6()"/></div> <div id="div7"><span class="btn_text"></span>xxx<input type="button" value="plugin7('xxxx')" onclick="pg7()"/></div> <div id="div8"><span class="btn_text"></span>xxx<input type="button" value="plugin8('xxxx')" onclick="pg8()"/></div> </body> </html>
///////////////////// 全局函数 jQuery.func1 = function() { alert('test func1'); }; jQuery.func2 = function(param) { alert('test func2, param is "' + param + '".'); }; jQuery.extend({ func3: function() { alert('test func3.'); }, func4: function(param) { alert('test func4, param is "' + param + '".'); } }); jQuery.myPlugin = { func5:function() { alert('test func5.'); }, func6:function(param) { alert('test func6, param is "' + param + '".'); } }; function f1() { $.func1(); // jQuery.func1(); } function f2() { $.func2("参数2"); // jQuery.func2(); } function f3() { $.func3(); // jQuery.func3(); } function f4() { $.func4("参数4"); // jQuery.func4(); } function f5() { $.myPlugin.func5(); // jQuery.myPlugin.func5(); } function f6() { $.myPlugin.func6("参数6"); // jQuery.myPlugin.func6(); } ////////////////////// jQuery 插件开发(类级别、对象级别), /////// 对象级别开发,jQuery("#id").plugin("aaa")/$("#id").plugin("aaa") // 形式1 (function($){ $.fn.extend({ plugin1 : function(p) { $(this).find(".btn_text").html(p); }, plugin2 : function(p) { this.plugin1(p); } }); })(jQuery); // 形式2 (function($){ $.fn.plugin3 = function(p) { $(this).find(".btn_text").html(p); }; $.fn.plugin4 = function(p) { this.plugin3(p); }; })(jQuery); function pg1(){$("#div1").plugin1("1111");} function pg2(){$("#div2").plugin1("2222");} function pg3(){$("#div3").plugin1("3333");} function pg4(){$("#div4").plugin1("4444");} ///////// 类级别插件开发,jQuery.plugin("aaa")/$.plugin("aaa") (function($){ $.extend({ plugin5 : function(obj, p) { $(obj).find(".btn_text").html(p); }, plugin6 : function(obj, p) { this.plugin5(obj, p); } }); })(jQuery); (function($){ $.plugin7 = function(obj, p) { $(obj).find(".btn_text").html(p); }; $.plugin8 = function(obj, p) { this.plugin7(obj, p); }; })(jQuery); function pg5(){$.plugin5($("#div5"), "5555");} function pg6(){$.plugin6($("#div6"), "6666");} function pg7(){$.plugin7($("#div7"), "7777");} function pg8(){$.plugin8($("#div8"), "8888");}
相关推荐
jQuery插件开发及常用插件大全PDF;jQuery插件开发.pdf、jQuery常用插件大全.pdf
jquery 插件开发 pdf
jQuery插件开发全解析 可提高封装能力和js编程能力。
JQuery插件的写法 最常用的jquery插件开发方式(教程合集) jquery插件的例子 jQuery插件开发教程_看这一本就行了 JQuery插件写法 jq插件最常用的写法
jquery 插件开发详解通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
NULL 博文链接:https://zhoucl.iteye.com/blog/1239737
通用 JQuery 插件开发,及相关示例
jquery 插件jquery 插件jquery 插件jquery 插件
jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery.treeview插件库)jquery插件库(jquery....
jquery 精简版 jquery 精简版 jquery 精简版jquery 精简版 jquery 精简版 jquery 精简版 jquery 精简版
Jquery开发文档,为pdf格式,希望对你有所帮助。Jquery开发文档,为pdf格式,希望对你有所帮助。
jQuery插件开发全解析.pdf 详细叙述了jquery脚本开发 JQuery插件开发
NULL 博文链接:https://fbinbin.iteye.com/blog/2330594
jquery插件开发快速入门
jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件jQuery插件
jquery插件库大全(200个): jqueryQQ表情插件 jquery下拉菜单导航 jquery下拉菜单栏 jquery仿Windows系统选中图标效果 jquery仿京东商品详情页图片放大效果 jquery仿百度新闻焦点轮播 jquery分离布局模版 jquery...
组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件组织架构图之JQuery插件...
NULL 博文链接:https://lpyyn.iteye.com/blog/2094991