登录 注册 易寻首页

易U QQ群:248861958

HTMLElement 扩展
方法说明
trimString 删除前后的空格
rcssHTMLCollection,NodeList 替换删除增加css rcss('目标css','替换成css')
del删除
prev上一个元素
next下一个元素
show逐渐显示 show(回调函数,动画时间,最终透明度)
hide逐渐隐藏 hide(回调函数,动画时间,最终透明度)
offset位置
$em.$('css选择器',true|false true返回所有的数组 false 发回第一个)
G 方法 提示中的图片是svg矢量图
方法说明
alert警告提示 G.alert('提示内容',时间,是否有遮蔽层,回调函数)
error错误提示 G.error('提示内容',时间,是否有遮蔽层,回调函数)
success成功提示 G.success('提示内容',时间,是否有遮蔽层,回调函数)
notice注意提示 G.notice('提示内容',时间,是否有遮蔽层,回调函数)
confirm确认提示 G.confirm('提示内容',回调函数,是否有遮蔽层)
prompt输入提示 G.prompt('提示内容',回调函数,是否有遮蔽层)
box弹出窗口 box=G.box('标题',内容,是否有遮蔽层,回调函数) box 含有close 方法 : box.close() 关闭
tpl模板渲染 G.tpl('数据',模板,特殊处理函数)
obje奖b对象压入到a对象,会覆盖a中重复的信息 G.obje('a对象',b对象)
F表单自动验证 G.F() 将req="true" 表示必填,exp="正则表达式" 写入表单元素
$选择器 G.$('.div1')
$$创建元素 G.$$(标签或者html)
wc写cookies G.wc(名字,值,过期时间)
rc读取cookies G.rc(名称)
rand产生随机数 G.rand(最小,最大)
fixcss3生成各浏览器的前缀 G.fix(属性,值)
addl添加css样式 G.addl(dom元素,css对象)
on绑定事件 G.on(元素,事件,函数)
ajajax G.aj(地址,post数据,回调函数,格式)

下载

包含一个js(11KB)文件和一个css(3KB)文件下载
                注:不支持ie

所有代码 + 注释

<script type="text/javascript">
/*
 除去字符串前后的空格
*/
String.prototype.trim=function(){return this.replace(/(^\s+)|(\s+$)/g,'')};

/*
 增加删除替换css
 @a 需要替换的css
 @b 替换成的css
*/
HTMLElement.prototype.rcss=function(a,b){
	if(a==''){
		eval('var s = new RegExp(/\\b'+b+'\\b/)');
		if(!s.test(this.className)){
			this.className=this.className.trim()+' '+b;
		}
	}else{
		eval('var s=this.className.replace(/\\b'+a+'\\b/g,b)');
		this.className=s.trim();
	}
	return this
};

/*
 删除元素
*/
HTMLElement.prototype.del=function(){
	this.parentNode.removeChild(this);
};
Array.prototype.each=function(f){
	return this.forEach(f)
};
HTMLCollection.prototype.each=NodeList.prototype.each=function(f){
	for(var i=0,l=this.length;i<l;i++){
		f(this[i],i,this);
	}
	return this
};
HTMLCollection.prototype.rcss=NodeList.prototype.rcss=function(a,b){
	this.each(function(t){t.rcss(a,b);});
	return this
};
NodeList.prototype.del=function(){
	this.each(function(t){t.del();})
};

/*
 上一个元素
*/
HTMLElement.prototype.prev=function(){
	return this.previousElementSibling
};

/*
 下一个元素
*/
HTMLElement.prototype.next=function(){
	return this.nextElementSibling
};

/*
 位置
*/
HTMLElement.prototype.offset=function(){
	return this.getBoundingClientRect()
};
HTMLElement.prototype.$=function(s,r){
	if(typeof(r)=='undefined'){
		return this.querySelector(s);
	}else{
		return this.querySelectorAll(s)
	}
}
;(function(win,doc){
	var ex={
		$:function(s,r,d){
			var d=d||doc;
			if(typeof(r)=='undefined'){
				return d.querySelector(s);
			}else{
				return d.querySelectorAll(s);
			}
		},
		$$:function(a){
			if(a.indexOf('<')==-1){
				return doc.createElement(a);
			}else{
				var r=doc.createElement('div');
				r.innerHTML=a;
				return r.children[0];
			}
		},
		/*
		 创建cookies
		 @n 名字
		 @v 值
		 @h 过期时间
		*/
		wc:function(n,v,h){
			var _e=new Date((new Date()).getTime()+1000*h);
			_e='; expires='+_e.toGMTString();
			doc.cookie=n+'='+escape(v)+_e;
		},
		/*
		 获取cookies
		*/
		rc:function(n){
			var v='',s=n+'=',c=document.cookie,w=c.indexOf(s),en;
			if(w > -1){
				w+=s.length;en=c.indexOf(';',w);
				if(en==-1)en=c.length;v=unescape(c.substring(w,en));
			}
			return v
		},
		/*
		 随机数
		 @n 最小
		 @m 最大
		*/
		rand:function(n,m){
			return Math.round(Math.random()*(m-n)+n);
		},
		
		/*
		 生成css3
		 @s 属性
		 @v 值
		*/
		fix:function(s,v){
			var ar=['Moz','Ms','O','Webkit'],r={},f=function(a,b){return b.toUpperCase();},
			ds=s.replace(/([a-z]{1})/,f).replace(/(-[a-z]{1})/g,f);
			ar.forEach(function(vl,i){
				r[vl+ds]=v;
			});
			r[s]=v;
			return r;
		},
		/*
		 添加css样式
		 @em  dom元素
		 @obj css对象
		*/
		addl:function(em,obj){
			for(i in obj){
				em.style[i]=obj[i];
			}
		},
		on:function(el,ev,fn){
			el.addEventListener(ev,fn,false)
		},
		aj:function(url,data,f,gs){
			var self=this;
			var k=url.replace(/[^\w]/g,'');
			if(typeof(self.ajone[k])=='undefined'){
				self.ajone[k]=true;
				var xm=new XMLHttpRequest();
				xm.open("post",url,true);
				xm.setRequestHeader("is_ajax","1");
				xm.onreadystatechange=function(){
					if(xm.readyState==4){
						if(xm.status==200){
							delete self.ajone[k];
							if(f){
								if(gs && gs=='json'){
									eval('var _j='+xm.responseText);
									eval(f(_j))
								}else{
									eval(f(xm.responseText));
								}
							}
						}else if(xm.status==404 || xm.status==403 || xm.status==500){
							delete self.ajone[k];
							if(f){
								f(false,xm.status);
							}
						}
					}
				};
				xm.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
				xm.send(data)
			}
		}
	};
	ex.F=function(){
		var ts='',css='F_css',
		tsf=function(a,b){
			if(typeof(a.getAttribute('ts'))=='string'){
				return a.getAttribute('ts')+'<br>';
			}else{
				return a.parentNode.prev().innerHTML+b+'<br>';
			}
		},
		st1=function(em){
			eval('var re = new RegExp(/'+em.getAttribute('exp')+'/)');
			if(!re.test(em.value)){
				em.rcss('',css);
				ts+=tsf(em,'格式不正确!')
			}else{
				em.rcss(css,'');
			}
		},
		st2=function(em,ep){
			var v=true;
			if(em.type=='checkbox' && em.checked==false){
				ts+='请选择'+tsf(em,'')+'!<br>';
				v=false;
			}else if(em.value.trim()==''){
				ts+=tsf(em,'不能为空!');
				v=false;
			}
			if(v===false){
				em.rcss('',css);
			}else{
				em.rcss(css,'');
			}
			if(ep && v){
				st1(em);
			}
		},
		st=function(){
			var fs=doc.forms;
			for(var a=0,l=fs.length;a<l;a++){
				if(typeof(fs[a].f)!='undefined'){
					continue;
				}
				fs[a].f=false;
				for(var b=0,j=fs[a].length;b<j;b++){
					if(typeof(fs[a][b].getAttribute('req'))=='string'){
						if(typeof(fs[a][b].getAttribute('exp'))=='string'){
							ex.on(fs[a][b],'blur',function(){st2(this,true)});
						}else{
							ex.on(fs[a][b],'blur',function(){st2(this,false)});
						}
					}else if(typeof(fs[a][b].getAttribute('exp'))=='string'){
						ex.on(fs[a][b],'blur',function(){
							if(this.value!=''){
								st1(this);
							}else{
								this.rcss(css,'');
							}
						})
					}
				}
				ex.on(fs[a],'submit',function(e){
					ts='';
					for(var i=0,j=this.length;i<j;i++){
						if(typeof(this[i].getAttribute('req'))=='string'){
							if(this[i].type=='radio'){
								var rs=this[this[i].name],z=true;
								for(var r=0;r<rs.length;r++){
									if(rs[r].checked){
										z=false;
										break;
									}
								}
								if(z){
									rs[0].rcss('',css);
									ts+=tsf(this[i],'不能为空!');
								}
								i+=(rs.length-1);
							}else if(typeof(this[i].getAttribute('exp'))=='string'){
								st2(this[i],true);
							}else{
								st2(this[i],false);
							}
						}else if(typeof(this[i].getAttribute('exp'))=='string'){
							if(this[i].value!=''){
								st1(this[i]);
							}else{
								this[i].rcss(css,'');
							}
						}
					}
					if(ts){
						ex.alert(ts.replace(/:/g,''));
						e.preventDefault();
					}else{
						this.f=true;
						if(this.fun){
							this.fun()
						}
					}
				});
				if(typeof(fs[a].getAttribute('onsubmit'))!='undefined'){
					fs[a].fun=fs[a].onsubmit;
					fs[a].onsubmit='';
				}
			}
			return true;
		};
		return st()
	};
	
	/*
	 将to对象中的值覆盖so的值
	 @so 原来的对象
	 @to 压入到so的对象
	*/	
	ex.obje=function(so,to){
		for(i in so){
			if(to[i]){
				so[i]=to[i];
			}
		}
		return so
	};
	
	/*
	 显示
	 @f 回调函数?
	 @t 动画周期?默认2
	 @v 透明度的值?默认1
	*/
	HTMLElement.prototype.show=function(f,t,v){
		var t=t||0.2,v=v||1,self=this;
		this.style.opacity=0.01;
		this.style.display='block';
		setTimeout(function(){
			ex.addl(self,ex.fix('transition','all '+t+'s linear'));
			self.style.opacity=v;
		},15);
		if(f){
			setTimeout(function(){
				f(self);
			},t);
		}
	};
	
	HTMLElement.prototype.hide=function(f,t,v){
		var t=t||0.2,self=this;
		ex.addl(this,ex.fix('transition','all '+t+'s linear'));
		setTimeout(function(){
			self.style.opacity=0.01;
		},1);
		setTimeout(function(){
			self.style.display='none';
			if(f){
				f(self);
			}
		},t*1000);
	};
	
	var svgs={
		'G_alert':'<svg><defs><linearGradient id="G_atsvg" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:#c36904;"/><stop offset="100%" style="stop-color:#e69510;"/></linearGradient></defs><path d="M29.225,23.567l-3.778-6.542c-1.139-1.972-3.002-5.2-4.141-7.172l-3.778-6.542c-1.14-1.973-3.003-1.973-4.142,0L9.609,9.853c-1.139,1.972-3.003,5.201-4.142,7.172L1.69,23.567c-1.139,1.974-0.207,3.587,2.071,3.587h23.391C29.432,27.154,30.363,25.541,29.225,23.567zM16.536,24.68h-2.241v-2.151h2.241V24.58zM16.428,20.244h-2.023l-0.201-9.204h2.407L16.428,20.844z" style="fill:url(#G_atsvg); stroke:#D56000; stroke-width:0.1;" transform="scale(1.1)"/></svg>',	
		'G_notice':'<svg><defs><linearGradient id="G_nosvg" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:#4f85bb;"/><stop offset="100%" style="stop-color:#4f85bb;"/></linearGradient></defs><path d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M14.757,8h2.42v2.574h-2.42V8z M18.762,23.622H16.1c-1.034,0-1.475-0.44-1.475-1.496v-6.865c0-0.33-0.176-0.484-0.484-0.484h-0.88V12.4h2.662c1.035,0,1.474,0.462,1.474,1.496v6.887c0,0.309,0.176,0.484,0.484,0.484h0.88V23.622z" style="fill:url(#G_nosvg); stroke:#3F71A3; stroke-width:0.1;" transform="scale(1.05)"/></svg>',
		'G_error':'<svg><path d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" style="fill:#E22; stroke:#F22; stroke-width:0.1;" transform="scale(1.2)"/></svg>',
		'G_success':'<svg><path d="M2.379,14.729 5.208,11.899 12.958,19.648 25.877,6.733 28.707,9.561 12.958,25.308z" style="fill:#72aa00; stroke:#299a0b; stroke-width:0.2;" transform="scale(1.05)"/></svg>',
		'G_confirm':'<svg><defs><linearGradient id="G_cfsvg" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:#15ADCC;"/><stop offset="50%" style="stop-color:#3E90EE;"/><stop offset="51%" style="stop-color:#71A5E9;"/><stop offset="100%" style="stop-color:#A5B1ED;"/></linearGradient></defs><path d="M16,1.466C7.973,1.466,1.466,7.973,1.466,16c0,8.027,6.507,14.534,14.534,14.534c8.027,0,14.534-6.507,14.534-14.534C30.534,7.973,24.027,1.466,16,1.466z M17.328,24.371h-2.707v-2.596h2.707V24.371zM17.328,19.003v0.858h-2.707v-1.057c0-3.19,3.63-3.696,3.63-5.963c0-1.034-0.924-1.826-2.134-1.826c-1.254,0-2.354,0.924-2.354,0.924l-1.541-1.915c0,0,1.519-1.584,4.137-1.584c2.487,0,4.796,1.54,4.796,4.136C21.156,16.208,17.328,16.627,17.328,19.003z" style="fill:url(#G_cfsvg); stroke:#7A8DDA; stroke-width:0.2;" transform="scale(1.02)" /></svg>',
		'G_prompt':'<svg><defs><linearGradient id="G_prsvg" x1="0%" y1="100%" x2="0%" y2="0%"><stop offset="0%" style="stop-color:#666;"/><stop offset="100%" style="stop-color:#BBB;"/></linearGradient></defs><path d="M21.635,6.366c-0.467-0.772-1.043-1.528-1.748-2.229c-0.713-0.708-1.482-1.288-2.269-1.754L19,1C19,1,21,1,22,2S23,5,23,5  L21.635,6.366z M10,18H6v-4l0.48-0.48c0.813,0.385,1.621,0.926,2.348,1.652c0.728,0.729,1.268,1.535,1.652,2.348L10,18z M20.48,7.52  l-8.846,8.845c-0.467-0.771-1.043-1.529-1.748-2.229c-0.712-0.709-1.482-1.288-2.269-1.754L16.48,3.52  c0.813,0.383,1.621,0.924,2.348,1.651C19.557,5.899,20.097,6.707,20.48,7.52z M4,4v16h16v-7l3-3.038V21c0,1.105-0.896,2-2,2H3 c-1.104,0-2-0.895-2-2V3c0-1.104,0.896-2,2-2h11.01l-3.001,3H4z" style="fill:url(#G_prsvg);; stroke:#FFF; stroke-width:0.2;" transform="scale(1.02)" /></svg>'
	};
	function div(o){
		if(o.bg){
			var bg=ex.$$('<div class="G_bg"></div>');
		}
		if(o.css=='G_confirm'){
			var div=ex.$$('<div class="'+o.css+'">'+svgs[o.css]+'<p class="G_p1">'+o.s+'</p><p class="G_p2"><span class="G_span">确认</span><span class="G_span">取消</span></p></div>');
			div.children[2].children[0].onclick=function(){
				hd(true)
			};
			div.children[2].children[1].onclick=function(){
				hd(false);
			}
		}else if(o.css=='G_prompt'){
			var div=ex.$$('<div class="'+o.css+'">'+svgs[o.css]+'<p class="G_p1">'+o.s+'</p><p class="G_p3"><input type="text" /></p><p class="G_p2"><span class="G_span">确认</span><span class="G_span">取消</span></p></div>');
			div.children[3].children[0].onclick=function(){
				hd(div.children[2].children[0].value)
			};
			div.children[3].children[1].onclick=function(){
				hd(false);
			}
		}else if(o.css=='G_box'){
			var div=ex.$$('<div class="'+o.css+'"><div class="G_title">'+o.t+'</div><div class="G_content">'+o.s+'</div><span class="G_close">×</span></div>');
			div.children[2].onclick=function(){
				hd(false)
			};
			this.close=function(){
				div.children[2].onclick();
			}
		}else{
			var div=ex.$$('<div class="'+o.css+'">'+svgs[o.css]+'<p class="G_msg">'+o.s+'</p></div>');
			setTimeout(function(){
				hd(true)
			},o.t);
		}
		
		
		if(o.bg){
			doc.body.appendChild(bg);
			bg.show(false,0.2,0.6);
		}
		doc.body.appendChild(div);
		function ct(){
			var ws=div.offset();
			with(div.style){
				left='50%';
				top='50%';
				marginLeft='-'+ws.width/2+'px';
				marginTop='-'+ws.height/2+'px';
			}
		}
		function hd(v){
			function d(t){
				t.del();
			}
			if(o.bg){
				bg.hide(d);
			}
			div.hide(d);
			if(o.f){
				o.f(v);
			}
		}
		ct();
		div.show();
		if(o.css=='G_prompt'){
			div.children[2].children[0].focus();
		}
	}
	
	/*
	 @s 提示语
	 @b 是否显示遮蔽层?
	 @t 显示时间?
	 @f 回调函数?
	*/
	ex.notice=function(s,b,t,f){
		var t=t||3000;
		new div({'s':s,'bg':b,'t':t,'f':f,'css':'G_notice'})
	};
	ex.alert=function(s,b,t,f){
		var t=t||3000;
		new div({'s':s,'bg':b,'t':t,'f':f,'css':'G_alert'})
	};
	ex.success=function(s,b,t,f){
		var t=t||3000;
		new div({'s':s,'bg':b,'t':t,'f':f,'css':'G_success'})
	};
	ex.error=function(s,b,t,f){
		var t=t||3000;
		new div({'s':s,'bg':b,'t':t,'f':f,'css':'G_error'})
	};
	
	/*
	 @s 提示语
	 @f 回调函数?
	 @b 是否显示遮蔽层?
	*/
	ex.confirm=function(s,f,b){
		new div({'s':s,'bg':b,'f':f,'css':'G_confirm'})
	};
	ex.prompt=function(s,f,b){
		new div({'s':s,'bg':b,'f':f,'css':'G_prompt'})
	};
	
	/*
	 @t 标题
	 @s 内容
	 @b 是否显示遮蔽层?
	 @f 关闭时回调函数?
	*/
	ex.box=function(t,s,b,f){
		return new div({'s':s,'bg':b,'t':t,'f':f,'css':'G_box'})
	};
	
	/*
	 渲染模板
	 @o json对象数据
	 @s 模板字符串
	 @f 处理函数?
	*/
	ex.tpl=function(o,s,f){
		return s.replace(/{([^\}]+)}/g,function(a,b){
			if(f){
				return f(o[b]);
			}else{
				return o[b];
			}
		});
	};
	
	win.G=ex;
})(window,document);
</script>

京ICP备12040723号 关于易寻 联系我们 手机版