jQuery plugin 开发的一个例子

47 阅读1分钟

测试代码:

<html>
<script src="jquery_1.7.1.js">
</script>
<script>
 jQuery.fn.println = function() {
  var msg = Array.prototype.join.call(arguments, " ");
  this.each(function(){ 
  jQuery(this).append(document.createTextNode(msg)).append("<br/>");
  });
  return this;
 };
 jQuery.debug = function() {
  var elt = jQuery("#debug");
  if( elt.length == 0) {
  elt = jQuery("<div id = 'debug'><h1>Debugging output </h1></div>");
  jQuery(document.body).append(elt);
  }
  elt.println.apply(elt,arguments);
 };
function start() {
 var x = "hello world";
 var y = 23;
 jQuery.debug("x = ", x , " y = ", y);
}
</script>
<body id = "main" οnlοad="start();">
<h1 id = "header">hello</h1>
</body>
</html>
  1. 在$的prototype上增加一个println的方法:
    clipboard1
    clipboard2
    clipboard3
  2. 使用代码创建一个新的text node用于输出debug 内容:

在这里插入图片描述

调用prototype上定义的println方法:

在这里插入图片描述

输出debug 内容:

在这里插入图片描述

最后结果:

在这里插入图片描述