js学习小结（二）2014.4.15(Tabs组件，异步文件上传，User-Agent，CSS选择器优先级)
2014-04-16 11:18
603 查看
按今天的学习顺序来记录
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，为此我倒腾了半个多小时。
附上源码：
3，异步文件上传
主要使用了XMLHttpRequest2的新特性，这个博文写的不错，介绍了新的XMLHttpRequest1与2的区别，以及新增的特性，我就是利用了XHR2中新增的FormData异步提交了一个表单，该表单中有一个file控件，然后实现了文件上传，并且利用html5的progressbar和xhr.upload事件做了一个显示进度条。
4 User-Agent
直接添加资料：http://hi.baidu.com/whmtorrent/item/f0469009f52130e5f55ba6d6?qq-pf-to=pcqq.group
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS基本知识1-CSS基本概念
- css3旋转、放大
- 关于CSS的优先级,CSS优先级计算
- CSS学习（1）开篇
- 关于在IE-8下 button的背景图片不能正确显示的问题
- CSS中常用中文字体转Unicode编码表
- CSS3实现Tooltip提示框飞入飞出动画
- Style Resource（样式资源）
- 【CSS3】Advanced7：CSS Transitions
- 【CSS3】Advanced6：Attribute Selectors
- 【CSS3】Advanced5：At Rules:@import, @media, and @font-face
- CSS基本知识8-CSS定位
- CSS基本知识3-CSS盒模型
- 【CSS3】Advanced4：Advanced Colors
- 纯CSS实现的大小渐变、渐远效果
- 【CSS3】Advanced3：Universal, Child, and Adjacent Selectors
- CSS中几个与换行有关的属性简明总结
- 【css样式生成 & 图片合并压缩工具】Sprite，你值得拥有
- CSS 宽度自适应总结
- 多控制器状态栏样式改变