给jQuery写插件的方法

浏览数：23 / 时间：2015年06月09日

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
div div{ border:#ccc solid 1px; margin-bottom:2px;}
</style>
<title>无标题文档</title>
<script src="../../inc/jquery-2.0.3_code.js"></script>
<script>
//alert($.Snow)
//alert($("#div1").html)

(function($){  
var	
 
    doll = function() {
	    return new doll.fn.init( );
	}; 	
    doll.fn = doll.prototype = {
	constructor: doll,
	init:function(){},
	fx:function(){alert(‘这是类库的一个实例化方法[fx]‘);}
	}; 

    doll.fn.init.prototype = doll.fn;

    doll.tool=function(){
        alert("插件的工具方法测试");	
    }
	
	doll.mkdiv =function(str){	
	    var div = document.createElement(‘div‘);
        div.innerHTML = str;
		div.style.border="#ccc solid 2px";
		div.style.marginBottom="20px";
		return div;	
    }


//第一种方法 扩展jQ的实例方法
	$.fn.foo2=function(){
		var i=0;
			for(p in this){
				i++;
				if(i>5){return;}
				alert(p);
				alert(this[p]);	
			}	
	}
	$.fn.toA=function(){
	  return [].slice.call( this );	
	}
	
//第二种方法 扩展jQ的实例方法
$.fn.extend({ 
   toArr: function(){
	  return [].slice.call( this );	
   },
   
   //_get()返回一个原生的js集合 与jQ的 get方法是一样的
    _get: function(num){
    return num == null ?

			// Return a ‘clean‘ array
			this.toArray() :

			// Return just the object
			( num < 0 ? this[ this.length + num ] : this[ num ] );
    },
    _test: function(){
	   
	 var i=0;
			for(p in this){
				i++;
				if(i<2){
					
					alert(p);
					alert(this[p]);	
					x=this[p];
				}
			}	
	        var j=0;
			 
			for(p in x){
				j++;
				 if(j>1){return;}
			    alert(p);	
			}  
    },
	_prop:function(len,num){
		if( typeof len != "string" && typeof len != "number" ){
			try{
		
				for(  p in this ){
					$(num).append($.doll.mkdiv(
							p + ":<br>    <pre>" +  
							(  len==-1 || len=="" ? this[p] : 
							   this[p]  ) +"</pre>"
						));
                  		 
		        }
		   }catch(e){alert(e)}
		   
		}else{
		    this._prop_(len,num);
		}
	},
	_prop_:function(len,num){		 
		num= typeof num == "undefined" ? 10 : num;		 
		len= typeof len == "undefined" ? 50: len;
		var i=0; 
		try{
		for(  p in this ){
			i++;
		    if( i < num || num==-1){
			this.append($.doll.mkdiv(
			    p + ":<br>    <pre>" +  
				(  len==-1 || len=="" ? this[p] : 
				   this[p].toString().substr(0,len)  ) +"</pre>"
			));
			}		 
		}
		}catch(e){}
	    return this;	
	}
			

})

    window.doll= window._ = doll;
	

    //第一种方法扩展jQ的工具方法
    window.jQuery.doll=window.doll;
	
	
    //第二种方法扩展jQ的工具方法
    $.extend({
		tool2:function(){
			alert("插件的工具方法测试2")
		},
		_prop:$.fn._prop ,
		
		_prof:function(id,obj){
		   obj= typeof obj == "undefined" ? window : obj;	
		   $._prop.apply(obj,[obj,id]);
		}
		
	});
		
})(window.jQuery)


  $.doll.tool();
//$.tool2();
//$("#div1").foo2();
$(function(){
 console.log($("div").toArr());
 $("div")._get()[0].innerHTML="dfsaf";
 $("div")._get()[2].style.background="#ff0000";
 ////$("div")._test();
 
  
		
 $("#debug").append($.doll.mkdiv(‘hello word !‘));
 
 $("#debug")._get()[0].appendChild(
     $.doll.mkdiv(‘hello word !----‘)
 );
 
 //$("#debug")._prop( "",5);
 var a = {"first":1,"second":2,"third":3};
 //$("#debug")._prop("",-1);
 //$("#debug")._prop.apply($("#debug"),["",-1])
 //$("#debug")._prop.apply($("#debug"),["",-1])
  
 //$("#debug")._prop.apply(window,[window,"#div1"])
})
//console.log({a:1,b:3})





</script>
<script>

 $(function(){
	 
	// $("#debug")._prop.apply(window,[window,"#div1"])
	 // $._prop.apply(window,[window,"#div1"])
	 
	 //_prof(id,obj)
	 //获取对象obj的所有属性，并把属性显示到 id 为div1的层里面
	  $._prof("#div1",window.$)
	  
    //alert($("#div1").html())

 })


</script>

</head>

<body>
<div id="div1">aaaa</div>
<div >aaaa</div> 
<div >aaaa</div> 
<div >aaaa</div> 
<div id="debug" >0000000000000000000000000000</div> 
<?
require_once(‘../../inc.php‘);

?>
</body>
</html>

给jQuery写插件的方法,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

给jQuery写插件的方法