jQuery 插件开发精简概括-优快云博客

本文介绍如何使用jQuery创建全局函数及不同级别的插件，包括对象级别和类级别插件的开发方式，并通过实例展示了如何调用这些函数和插件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

参考： http://www.iteye.com/topic/545971