前端常用小结(持续追加)

最后更新日：2014年12月21日
1、得到一共几个option:document.getElementById("caseClassify").options.length;
得到option内容:document.getElementById("caseClassify").options[i].innerHTML
2、超过大小用滚动条代替overflow:auto
图片与文字水平对齐:vertical-align
3、JSON.parse(needObj); 解析成JSON
JSON.stringify(obj); 封装成JSON
4、window.sessionStorage.removeItem(userId);根据ID删除
window.sessionStorage.getItem(userId);根据ID得到
window.sessionStorage.setItem(roleIds,roleIdList);根据key保存value
上述适用于HTML5
5、$("#id").draggable()表示可以拖动
$("#id").show()->parent.parent.jQuery("#id").show()
6、a标签传参乱码解决办法:
办法1：
window.location.href="/a/b.do?method=c&d="+encodeURI("张三");
new String(x.getBytes("iso-8859-1"),"UTF-8")
办法2：
window.location.href="/a/b.do?method=c&d="+encodeURI(encodeURI("张三"));
URLDecoder.decode(x,"UTF-8")
7、setTimeout三种用法：
setTimeout("test()",1000);
setTimeout(test,1000);
setTimeout(function(){test();},1000);
8、时间相关：
var data = new Date();
var year = data.getFullYear();//年
var month = data.getMonth() + 1;//月
var day = data.getDate();//日
var hours=data.getHours();//时
var min=data.getMinutes();//分
var sec=data.getSeconds();//秒
var week = data.getDay();//0表示周日,6表示周六
9、页面无缓存：
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">
10、鼠标移上一块区域触发事件，可以通过CSS来写，如：
.b:hover{
   background-color:yellow;
}
点击事件调用CSS可以写为：
var x = document.getElementById("example");
x.onclick = function(e){
    e.preventDefault();//取消单击事件的默认动作以阻止链接的跳转
     x.className = "a";
};
11、IE浏览器简单判断：
<!-- IE10不支持条件判断 -->
<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="a.css"/>
<![endif]-->
<!--[if IE 8]>
<link rel="stylesheet" type="text/css" href="b.css"/>
<![endif]-->
12、简单模拟iframe局部刷新
主页引的iframe
<div id="rightiframeZone">
<iframe scrolling="no" id="rightiframe" name="rightiframe" src="rightiframe.html" style="width:100%;height:661px;" frameborder=0>
</iframe>
</div>
另一个页面
<a href='rightiframe.html' target="rightiframe">
   <span id='hideZone' hidden="hidden"></span>
</a>
要刷新主页面只要:$('#hideZone').click();
关于页面自刷新（重新刷新页面）还可以：window.location.reload();
13、数组和对象
var x = [1,2,3,4,5];
x.reverse();//逆序输出数组
var y = {};
console.log(typeof y);//类型判断
console.log(y instanceof Object);//是否属于某个类型
var z = {x:10,y:20};
console.log('x' in z);//true
delete z.x;
console.log('x' in z);//false
var m = [,,];
console.log(m.length);//为2而不是3,最后一位为空是不算的
var n = [1,3,4];
n = n.join('$')//1$3$4;
14、none和hidden
document.getElementById('id').style.display = 'none';//释放空间
document.getElementById('id').style.visibility = 'hidden';//占位,不释放空间
15、radio的选取
如：性别<input type="radio" name="gender" value="男"/>男<input type="radio" name="gender" value="女"/>女<br />
一般用到对其的操作为：
$("input[name='gender']").is(":checked");//是否被选择
$('input[name="gender"]:checked').val();//选择的值
16、两数组取并集简单解决方法
方法一：
var x = ['c','d','a','b'];
var y = ['d','c','f'];
for(i=0;i<y.length;i++){
var flag = true;
for(var j=0;j<x.length;j++){
if(x[j]==y[i]){
y.splice(i,1);
flag = false;
break;
}
}
if(flag){
x.push(y[i]);
}
}
console.log(x);
方法二：
var x = ['c','d','a','b'];
var y = ['d','c','f'];
var context = {};
for(var i=0;i<x.length;i++){
context[x[i]] = x[i];
}
for(var j=0;j<y.length;j++){
context[y[j]] = y[j];
}
//输出
for(var k in context){
console.log(k);
}
个人比较喜欢第二种写法
17、地址引用和值引用及日期相关注意
var newNowDate = nowDate.getTime();//地址引用
var newNowDate = new Date(nowDate.getTime());//值引用
18、获取table内的值
var table = document.getElementById("a");       
var rows = table.rows;//得到所有的行
rows[0].cells[3];//得到某行某列
19、回车事件
var x = document.getElementsByClassName('a')[0];
x.onkeydown = function(e){
      var e = event ||
              window.event ||
              arguments.callee.caller.arguments[0];
      if(e&&e.keyCode==13){
     console.log(1);
      }
};