首页 > 代码库 > 给jQuery写插件的方法
给jQuery写插件的方法
<!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="http://www.mamicode.com/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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。