2009.12.24(5)——jquery插件开发

2009.12.24(5)——jquery插件开发
jQuery为开发插件提拱了两个方法,分别是:

jQuery.fn.extend(object);  给jQuery对象添加方法。  $().hello();
jQuery.extend(object);  为扩展jQuery类本身.为类添加新的方法。 $.hello();(注意没有小括号)


使用闭包:

//为了更好的兼容性,开始前有个分号
;(function($){	//此处将$作为匿名函数的形参
		/*这里放置代码,可以使用$作为jQuery的缩写别名*/
})(jQuery);	//这里就将jQuery作为实参传递给匿名函数了

这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery '

我们知道这段代码在被解析时会形同如下代码:

var jq = function($) {
  // Code goes here
}; 
jq(jQuery);


一.导入jQuery的js
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
//插件编写
;(function($){
	$.fn.extend({
		showValue:function(){alert("hello")}
	});
})(jQuery);
//插件编写
;(function($){
	$.extend({
		min: function(a, b) { return a < b ? a : b; },
		max: function(a, b) { return a > b ? a : b; }
	});
})(jQuery);
//插件实现
$(function(){
	//alert("fdsa");
	//注意这两个的差别,一个是$().XXX  一个是$.XXX
	$().showValue();
	alert($.min(2,3));
})

二.不导入jQuery的js
<script type="text/javascript">
	
    $ = function( selector ) {
		return new $.fn.init( selector );
	};
	
	$.fn = $.prototype = {
		init: function( selector ) {
			this[0] = document.getElementById(selector);
			//this.a = document.getElementById(selector);这和上面的一样
			return this;
		},
		val: function(val){
			if(val=='' || val == null){
				return this[0].value;
			}else{
				this[0].value = val;
			}
		}
	}
	
	$.fn.init.prototype = $.fn;
	
	$.extend = $.fn.extend =  function(options){
		for ( var name in options ) {  //循环迭代
			this[name] = options[name];
		}
	}
	
	$.extend({
		  min: function(a, b) { return a < b ? a : b; },
		  max: function(a, b) { return a > b ? a : b; }
	});
	
	$.fn.extend({
		  showValue:function(){
		  	alert(this[0].value);
		  }
	});
	
	//alert($.min(1,4));
	

	
  </script>
  
  <body>
  	<input type="text" id="test" value="good">
  </body>
  
  <script type="text/javascript">
  	//var var1 = $('test');
  	alert($.min(2,3));
  	$('test').showValue();
  	
  </script>



你可能感兴趣的:(jquery,C++,c,prototype,C#)