1、JavaScript 的对象的地址引用
JavaScript 的对象是可变的,它们是通过引用来传递的。如果将一个对象赋值给另一个对象,那么两个对象其实是指向同一个引用的,如下:
var o1= {'a':1};
var o2 = o1;
console.log(o2 === o1); //其实都是指向同一个对象,这里会打印 true
//改变o2的属性的值话,o1也会改变
o2.a = 2
console.log(o1.a); //这里会打印 2
//重新定义o1和o2
var o1= {'a':1};
var o2 = {'a':1};
console.log(o2 === o1); //现在它们不再是同一个对象了,这里会打印 false
数组同样适用上述情况,将a数组直接赋值给b数组的话,其实它俩指向的是同一个存储地址。注意。如果这时你循环处理b数组时,在循环中删除或者增加了a数组的元素,那么循环的次数就会发生变化,可能会引发你不想看到的结果哦。
2、js获取浏览器窗口宽高的兼容性写法
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
console.log('宽度:'+w+',高度:'+h);
3、js生成随机数和百分比转换
js生成随机数,原理:Math.random()生成 [0,1) 之间的随机数,Math.random()*(max-min+1)会生成0与max-min差值之间的数,所以再加上min就是 [min,max] 之间的随机数了,max-min差值要加一生成的数才会包括max。
//生成从min到max的随机整数
function randomIntNum(min,max){ return parseInt(Math.random()*(max-min+1)+min,10); }
//生成从min到max的随机数
function randomNum(min,max){ return Math.random()*(max-min+1)+min; }
小数转换成百分比并保留n位小数,默认为保留两位小数,toFixed()有时会产生精度丢失的情况,先乘10000再除以100就可以解决这个问题了。
//转换成百分比并保留n位小数
Number.prototype.toPercent = function(n){
if(typeof(n)!='number' && typeof(n)!='undefined'){ n=parseInt(n) || 2 }
if(typeof(n)=='undefined' || n<0 || n>100){ n = 2; }
return (Math.round(this * 10000)/100).toFixed(n) + '%';
}
4、jquery中dom.toggle()、dom.show()和dom.hide()的补充
jquery中dom.show()和dom.hide()是显示和隐藏元素用得,这两个函数可以带参数:速度和回调
dom.hide(speed,callback);
dom.show(speed,callback);
//例如
dom.hide(1000,function()
{
完成隐藏操作后做一些事情
});
通过设置speed,可以让隐藏和显示产生动画效果,这样就不用在css里设置延迟动画了。
另外,有另一个函数可以在元素隐藏时显示它,元素显示时隐藏它,用法和以上两个函数一样:
dom.toggle(speed,callback); //自动显示和隐藏元素
5、ajax请求的缓存
执行ajax请求时,有时为了防止得到得结果是缓存结果,可以在请求url后面加上用随机数生成的唯一ID来获取服务器上的数据,例如:
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
alert(xhr.responseText);
}
}
xhr.open("GET","http://xxx/demo_get.php?t=" + Math.random(),true);
xhr.send();
6、单行文本省略
div{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
7、多行元素的文本省略
div{
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:5;
overflow:hidden
}