<!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");}