js学习小结（二）2014.4.15(Tabs组件，异步文件上传，User-Agent，CSS选择器优先级)

本文链接：https://blog.youkuaiyun.com/danzhang1010/article/details/23780055

本文详细介绍了CSS选择器优先级及可继承属性，并通过实战案例展示了如何使用JavaScript实现带持久化状态的Tabs组件，以及利用XMLHttpRequest2实现异步文件上传。

按今天的学习顺序来记录

1.css选择器优先级
没有写代码进行验证，把几条优先级原则记录下拉，应付面试。

（1）css中有哪些选择器？

通配符选择器（*）；

标签选择器（html 标签）；

群组选择器（，）；

层次选择器（空格）；

类选择器（.）；

id选择器（#）；

（2）有哪些属性可以继承

主要是一些字体和排版方面的样式可以继承，例如font，word-spacing，list的相关属性等。

（3）css的优先级：

内联>内部>外部

（4）css选择器的优先级

1）指定的样式>继承的样式

2） id>class>标签

3）越具体优先级越高。例如 table tr td >td

4）标签#id>标签 .class

ps：如果标签里有id和class，并且都为id和class指定了样式，那么id优先，即使class属性很具体，id的优先级远远高于class。

2.Tabs组件

这是一道面试题,题目要求

tab1显示：内容1；tab2显示：内容2；tab3显示：内容3

要求：

1). 请写出HTML结构，并实现JS鼠标滑过或点击，当前标签高亮

( 2). 支持IE6+,Firfox, Chrome

( 3.) 页面刷新之后保持最后一次切换的标签

主要用到cookie保存状态，还有布局，还有事件绑定。此外还要注意一点：在chrome中如果直接打开页面，不经过服务器，它是不允许js设置document.cookie的值，必须通过服务器访问该页面才允许写cookie，为此我倒腾了半个多小时。

附上源码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#contanier{
		
		width: 500px;
		margin: 0 auto;
		position: relative;
	}
	#contanier h3{
		
		float: left;
		width: 80px;
		height: 20px;
		border: 1px solid blue;
		background-color:  	#30D5C8;
		font-size: 10px;
	}
	#contanier .up{
		background-color:  	#FFDEAD;
	}
    #contanier div{
    	display: none;
    	height: 300px;
    	width: 500px;
    	position: absolute;
    	top:22px;
    	left:0px;
    	border: 1px solid blue;

    }
    #contanier .block{
    	display: block;
    }
	</style>
	
</head>
<body>
<div id="contanier">
	<h3  id='01'>标题1</h3>
	<div >
		<p>it is just test1</p>

	</div>
	<h3 id='02'>标题2</h3>
	<div >
		<p>it is just test2</p>

	</div>
	<h3 id='03'>标题3</h3>
	<div >
		<p>it is just test3</p>

	</div>
	<h3 id='04'>标题4</h3>
	<div >
		<p>it is just test4</p>

	</div>
	<h3 id='05'>标题5</h3>
	<div >
		<p>it is just test5</p>

	</div>
	<h3 id='06'>标题6</h3>
	<div >
		<p>it is just test6</p>

	</div>
</div>
</body>
</html>
<script type="text/javascript">
	var contanier=document.getElementById("contanier");
	var h3s=contanier.getElementsByTagName('h3');	
	var preselected=h3s[0];//保存上一次选择的标签，用于清除它的样式
	function selectedHandler(event){		
			preselected.className='';
			getNextSilbling(preselected).className='';

		var event=event?event:window.event;
		var target=event.target?event.target:event.srcElement;
		target.className='up';
		//获取h3相邻的div
		var div=getNextSilbling(target);
		div.className='block';
		preselected=target;
	}
	(function(){
		for(var i=0,len=h3s.length;i<len;i++){
			h3s[i].onmouseover=h3s[i].onclick=selectedHandler;
		}
	})();
	function getNextSilbling(element){
		if(element.nextSibling.nodeType==3){//说明是element的文本节点,在chrome和ff中是这样的
			return  element.nextSibling.nextSibling;
		}else{
			return element.nextSibling;//在ie中是这样，低版本ie不会把文本节点当做兄弟节点
		}
	}
	window.onunload=function(){//页面卸载时，写入cookie
		var id=preselected.id;
		var date=new Date();
		date.setTime((date.getTime()+30*24*3600*1000));
		var _cookie='selectedH='+id+';expires='+date.toGMTString();		
		console.log(_cookie);
		document.cookie=_cookie;
	};
	window.onload=function(){//页面载入时，读取cookie
			var cookies=document.cookie.split(";");
			var flag=false;
			for(var i=0,len=cookies.length;i<len;i++){
				var temp=cookies[i].split("=")[0];
				if(temp.replace(/^(\s)*/g,'')=='selectedH'){
					preselected=document.getElementById(cookies[i].split("=")[1]);
					preselected.click();//js模拟点击事件
					flag=true;
					
				}

			}
			if(!flag){//如果cookie中没有保存的话，就点击第一个标签，用于在页面cookie被清除后，rengr
				preselected=document.getElementById('01');
					preselected.click();
			}
	};
	</script>

3，异步文件上传

主要使用了XMLHttpRequest2的新特性，这个博文写的不错，介绍了新的XMLHttpRequest1与2的区别，以及新增的特性，我就是利用了XHR2中新增的FormData异步提交了一个表单，该表单中有一个file控件，然后实现了文件上传，并且利用html5的progressbar和xhr.upload事件做了一个显示进度条。

<!DOCTYPE html>
<html lang='zh-CN'>
	<meta charset='utf-8' />
	<head>
		<title>通过formdata上传文件</title>
		<style type="text/css">
			#progressor {
				width: 100px;
				height: 30px;
				border: 1px solid #0066CC;
				background: transparent;
				z-index: 2;
			}

			#progressorInner {
				width: 0;
				height: 30px;
				background-color: green;
				z-index: 1;
			}
		</style>
		<script src="../js/JSExtent.js"></script>
		<script src="../js/AjaxExtent.js"></script>

	</head>
	<body>
		<form>
			<input type='file' id='myfile' name='myfile' />
			<input type='text' id='otherfiled' name='otherfiled' />
		</form>
		<input type='button' value="提交" id='submitbutton' />
		progress:
		<div id="progressor">
			<div id="progressorInner">

			</div>
		</div>
		<progress id='progressBar' value='0' max='100'></progress>
		<span id='percentage'></span>
	</body>
</html>
<script type="text/javascript">
	(function() {
		var button = document.getElementById("submitbutton");
		button.onclick = uploadfile;
	})();
	function uploadfile() {
		zd.ajax.fileupload('uploadAction', document.forms[0], function() {
			console.log('suceesee');
		}, function() {
			console.log('failed');
		}, progressFunction);

	}

	function progressFunction(evt) {
		var progressBar = document.getElementById('progressBar');
		var percentageDiv = document.getElementById('percentage');
		if (evt.lengthComputable) {
			progressBar.max = evt.total;
			progressBar.value = evt.loaded;
			percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + '%';
		}
	}
</script>

AjaxExtent.js

NameSpace.createNameSpace("zd.ajax");
zd.ajax.getXMLHttpRequest=function(){
	var request;
	if(window.XMLHttpRequest){//如果不为空，说明是safri或者mozail
		request=new XMLHttpRequest();		
	}else{//说明是ie
		var xhrNames=["MSXML2.XMLHTTP.6.0","MSXML2.XMLHTTP.3.0","MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0,len=xhrNames.length;i<len;i++){
			try{
				var XHR=new ActiveXObject(xhrNames[i]);
			}catch(e){
				
			}
			if(typeof XHR!='undefined'){
				request=XHR;
			}else{
				new Error("Ajax not supported");
			}
		}
	}
	return request;
}
//自己封装一个文件上传的方法,利用的是xhr2中的新特性，包括FormData。onload。onprogress，onerror
zd.ajax.fileupload=function(url,form,success,error,progress){
	var xhr=zd.ajax.getXMLHttpRequest();		
		/*xhr.onreadystatechange=function(){
			if(xhr.readyState==4){
				if(xhr.status>=200&&xhr.status<=300||xhr.staus==304){
					success();
				}else{
					error();
				}
			}
		};*/
	xhr.onload=function(){
		if(xhr.status>=200&&xhr.status<=300||xhr.staus==304){
			success();
		}
	};
	    xhr.onerror=error;
	    xhr.upload.addEventListener('progress', progress, false);//通过xhr的upload属性添加progress事件监听	
		xhr.open('POST',url,true);
		xhr.send(new FormData(form));
};

JSExtent.js

//定义一个命名空间工具类NameSpace
var NameSpace=new Object();
/**
 * @author Administrator
 * 扩展Funtion类，定义一个静态方法createnamespace
 */
NameSpace.createNameSpace=function(namepath){
		if(!namepath||!namepath.length)
				return null;
		var patharr=namepath.split(".");
		var rootobj=window;//rootobj是一个关联数组，
		var len=patharr.length,i=0;
		while(i<len){			
			var currentObj=patharr[i];
			if(!rootobj[currentObj])//说明在上一层路径中不存在这样一个对象,则新建一个空对象
				rootobj[currentObj]={};
			rootobj=rootobj[currentObj];		
			i++;			
		}
		
		return rootobj;	
}

4 User-Agent

直接添加资料：http://hi.baidu.com/whmtorrent/item/f0469009f52130e5f55ba6d6?qq-pf-to=pcqq.group