小知识随手记（四）
1、JS禁止BackSpace键：
function dokey(e){
var ev =e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源
var t = obj.type || obj.getAttribute("type");//获取事件源类型
if(ev.keyCode === 8 && t !== "password" && t !== "text" && t !== "textarea"){
return false;
}
}
document.onkeypress = dokey;//禁止后退键，作用于Firefox、Opera
document.onkeydown = dokey;//禁止后退键，作用于IE、Chrome
此问题有个bug就是当鼠标放在一个不可编辑的输入框上的时候，退格键依然会产生页面后退效果！所以修改一下：
function dokey(e){
var ev =e || window.event;//获取event对象
var obj = ev.target || ev.srcElement;//获取事件源
var t = obj.type || obj.getAttribute("type");//获取事件源类型
var vReadOnly = obj.readOnly;//获取作为判断条件的事件类型
vReadOnly = (vReadOnly === undefined) ? false : vReadOnly;
//当敲Backspace键时，事件源类型为密码或单行、多行文本的，并且readOnly属性为true则退格键失效
var flag1 = ev.keyCode == 8 && (t=="password"||t=="text"||t=="textarea") && (vReadOnly==true);
//当敲Backspace键时，事件源类型非密码或单行、多行文本的，则退格键失效
var flag2 = ev.keyCode == 8 && t != "password" && t != "text" && t != "textarea";
if(flag1 || flag2){
return false;
}
}
document.onkeypress = dokey;//禁止后退键，作用于Firefox、Opera
document.onkeydown = dokey;//禁止后退键，作用于IE、Chrome
还有种情况就是disabled的时候，试验了下发现给input disabled 的时候，其类型就变成了 t == null，所以可以暂时不予考虑。
2、关于this重定向的问题：
对于window的一些自己的方法，比如setTimeout()、setInterval()方法里面涉及到this对象时，均会需要this重定向的，这点需要注意。
<script>
window.onload=function(){
var aBtn=document.getElementsByTagName('input');
var that=null;//定义一个空对象用于承载this
for(var i=0;i<aBtn.length;i++){
aBtn[i].onclick = function(){
that = this;//给that赋值this，this指点击的按钮button对象
fn1();
};
}
function fn1(){
that.style.background='red';//fn1里的this指的是window对象，所以需要this重定向为button对象
}
};
</script>
</head>
<body>
<input type="button" value="btn1" />
<input type="button" value="btn2" />
<input type="button" value="btn3" />
</body>
3、关于for循环的一个知识点：
问题1：
function Test()
{
var k=0;
for(j=0,i=0;j<6,i<10;j++,i++){
k=i+j;
}
alert(k);//k值是多少？
}
Test();
问题2：
function Test()
{
var k=0;
for(j=0,i=0;j<10,i<6;j++,i++){
k=i+j;
}
alert(k);//k值是多少？
}
Test();
问题1答案是18，首先每次for循环的i和j值是相等的:
第一次：j=0,i=0, 符合条件，k=j+i=0;
第二次：j=1,i=1,符合条件，k=j+i=2;
第三次：j=2,i=2,符合条件，k=j+i=4;
第四次：j=3,i=3,符合条件，k=j+i=6;
第五次：j=4,i=4,符合条件，k=j+i=8;
第六次：j=5,i=5,符合条件，k=j+i=10;
第七次：j=6,i=6,符合条件，k=j+i=12;（这里需要注意，循环继续的判断依据以分号前的最后一项为准，即判断i<10符不符合条件。）
第八次：j=7,i=7,符合条件，k=j+i=14;
第九次：j=8,i=8,符合条件，k=j+i=16;
第十次：j=9,i=9,符合条件，k=j+i=18;
第十一次：j=10,i=10,不符合条件，循环结束。
for循环共执行10次，k的最终值等于18。
这里值得一提的是如果把条件j<6,i<10；改成j<10,i<6；
结果将完全不同，此时循环执行到i=5就会结束，此时k=10。
拓展1：最后项从1开始，a：1、2、3；i/j：0、1、2，所以是4
function Test()
{
var k=0;
for(var j=0,i=0,a=1;j<10,i<6,a<4;j++,i++,a++){
k=i+j;
}
alert(k);//k值是4
}
拓展2：
function Test()
{
var k=0;
for(var j=0,i=0,a=1;j<10,i<6,a<14;j++,i++,a++){
k=i+j;
}
alert(k);//k值是24
}
总结：
循环继续的判断依据以分号前的最后一项为准，不会管其他前面的项是否满足条件。
同时还需注意最后项的起始计算条件。
4、删除元素绑定的事件：
（1）CSS方法：
.disabled { pointer-events: none; }
（2）jQuery方法：
unbind()方法：规定从指定元素上删除的一个或多个事件处理程序。如果没有规定参数，unbind() 方法会删除指定元素的所有事件处理程序。
obj.unbind("click");//取消绑定onclick事件
obj.attr('onclick', '');//使onclick的值为空
$('.disableCss').removeAttr('onclick');//去掉标签中的onclick事件
$('#button').attr('disabled',"true");//添加disabled属性
$('#button').removeAttr("disabled"); //移除disabled属性
5、textarea在浏览器中固定大小和禁止拖动：
HTML 标签 textarea 在大部分浏览器中只要指定行（rows）和列（cols）属性，就可以规定 textarea 的尺寸，大小就不会改变，不过更好的办法是使用 CSS 的 height 和 width 属性,但是Chrome,Safari和FireFox渲染的效果不同，可以拖动右下角图标改变大小。但是过分拖动大小会影响页面布局，使页面变得不美观。可以通过添加如下两个样式禁用拖动，固定大小：
css3提供resize属性：
1.both(默认值)--在xy方向上均可以拖拽；
2.vertical--在垂直方向上
3.horizontal--在水平方向上
4.none--不可以拖拽
5.inherit（继承）--textarea的父集一般是div元素，所以设置为继承的话，也是不可以拖拽的
（1）彻底禁用拖动（推荐）
resize: none;
（2）只是固定大小，右下角的拖动图标仍在
width: 200px;
height: 100px;
max-width: 200px;
max-height: 100px;
6、判断元素是否含有指定的类（className）：
（1） is(".classname")
（2）hasClass("classname")：注意jquery的低版本可能是hasClass(".classname")
$("#organization").tree({//easyUI组织结构树用法
onSelect: function(node){
var obj = $(node.target).find(".tree-checkbox");
var checkObjArray = $(".tree-checkbox").not(obj);
if(obj.is(".tree-checkbox0")){
obj.removeClass("tree-checkbox0").addClass("tree-checkbox1");
for(var i = 0, len = checkObjArray.length; i < len; i++){
if(checkObjArray.eq(i).is(".tree-checkbox1")){
checkObjArray.eq(i).removeClass("tree-checkbox1").addClass("tree-checkbox0");
}
}
}else{
obj.removeClass("tree-checkbox1").addClass("tree-checkbox0");
}
}
});
上面代码：1、$(node.target)，dom对象和jquery对象互转；2、$(".tree-checkbox").not(obj)，jquery对象not方法过滤；3、checkObjArray.eq(i).is(".tree-checkbox1")，jquery对象数组选择第几个的问题，以及判断元素是否有指定类名的问题。
7、jquery操作对象数组元素方法详解：
（1）错误方式：不能用[]方式取jquery对象数组。
（2）正确方式：
一、eq()：
var div_span = $("#div span");
for( var i = 0, len = div_span.length; i < len; i++ ) {
div_span.eq(i).html(i);
}
二、each()遍历：each()遍历的时候，如果用$(this)，得到的是jquery对象；如果直接用this，得到的是DOM对象
$(function() {
var div_span = $("#div1 span");
var i = 0;
div_span.each( function(){
$(this).html(i);
i++;
});
});
三、纯js代码获取的DOM对象数组，可以用[]的方式获取数组元素。
8、设置opacity时，存在一个问题就是：子级一定会继承父级的透明度，哪怕给子级设置opacity为1也不行。因为设置了opacity的父元素，此属性一定会被子元素继承。如果父元素定义了opacity，子元素再定义一个opacity，那么子元素的opacity效果其实是两者的乘积。
如何解决呢：
（1）如果父级背景是图片之类的，那么就需要取消父子关系，再子级用定位的方式覆盖到父级上。
（2）如果父级背景是纯色的，那么就可以使用rgba颜色模式：注意是 background: rgba(0,0,0,.3); 而不是background-color；这样就父级就不会影响子级的透明度了。
9、控制radio只读不可修改：
一、想让radio只读，就是想radio不可以修改。有一种场景是：让没有选中的radio不可以修改。代码如下：
$("input[name='tempProduct.isMustInvoice'][value='0']").prop("disabled",true);
将值为0的radio设置不可以修改，这种设置的好外是：选中的radio值可以传入后台进行操作。
二、将所有的radio设置为只读
$("input[name='tempProduct.isMustInvoice']").each(function(){
$(this).attr("disabled",true);
});
这样做的缺点是：值无法传入后台。
10、arguments相关：
通过arguments 对象的length属性，来智能的判断有多少参数，然后把参数进行合理的应用 。
比如，要实现一个加法运算，将所有传进来的数字累加，而数字的个数又不确定。
function box() {
var sum = 0;
if (arguments.length == 0) return sum; //如果没有参数，退出
for(var i = 0;i < arguments.length; i++) { //如果有，就累加
sum = sum + arguments[i];//获取参数的值
}
return sum; //返回累加结果
}
alert(box(5,9,12));
