javascript 常用小技巧

注意

第一行总是写上’use strict’;是因为我们总是以严格模式运行JavaScript代码,避免各种潜在陷阱。

'use strict';
console.log('Hello, world.');

对象和字符串的转换

var obj = {a: 'aaa', b: 'bbb'};
var objStr = JSON.stringify(obj); // "{"a":"aaa","b":"bbb"}"
var newObj = JSON.parse(objStr); // {a: "aaa", b: "bbb"}

数据类型

underfined、null、0、false、NaN、空字符串。他们的逻辑非结果均为true。

闭包格式W

好处:避免命名冲突(全局变量污染)。

(function(a, b) {
console.log(a+b); //30
})(10, 20);

截取和清空数组

var arr = [12, 222, 44, 88];
arr.length = 2; //截取,arr = [12, 222]; 
arr.length = 0; //清空,arr will be equal to [].

获取数组的最大最小值

var numbers = [5, 45822, 120, -215];
var maxInNumbers = Math.max.apply(Math, numbers); //45822
var minInNumbers = Math.min.apply(Math, numbers); //-215

浮点数计算问题

0.1 + 0.2 == 0.3 //false
#为什么呢?因为0.1+0.2等于0.30000000000000004。JavaScript的数字都遵循IEEE 754标准构建,在内部都是64位浮点小数表示。可以通过使用toFixed()来解决这个问题。

滚动鼠标触发事件

$(window).scroll(function() {
var a = $(window).scrollTop();
if(a > 100) {
$('.go-top').fadeIn();
}else {
$('.go-top').fadeOut();
}
});
$(".go-top").click(function(){
$("html,body").animate({scrollTop:"0px"},'600');
});

阻止冒泡

function stopBubble(e){
e = e || window.event; 
if(e.stopPropagation){
e.stopPropagation(); //W3C阻止冒泡方法 
}else { 
e.cancelBubble = true; //IE阻止冒泡方法 
} 
}

全部替换

var replaceAll = function(bigStr, str1, str2) { //把bigStr中的所有str1替换为str2
var reg = new RegExp(str1, 'gm');
return bigStr.replace(reg, str2);
}

获取url的参数值

var getURLParam = function(name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)', "ig").exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
};

深度拷贝对象

function cloneObj(obj) {
var o = obj.constructor == Object ? new obj.constructor() : new obj.constructor(obj.valueOf());
for(var key in obj){
if(o[key] != obj[key] ){
if(typeof(obj[key]) == 'object' ){
o[key] = mods.cloneObj(obj[key]);
}else{
o[key] = obj[key];
}
}
}
return o;
}

数组去重

var unique = function(arr) {
var result = [], json = {};
for (var i = 0, len = arr.length; i < len; i++){
if (!json[arr[i]]) {
json[arr[i]] = 1;
result.push(arr[i]); //返回没被删除的元素
}
}
return result;
};

判断数组元素是否重复

var isRepeat = function(arr) { //arr是否有重复元素
var hash = {};
for (var i in arr) {
if (hash[arr[i]]) return true;
hash[arr[i]] = true;
}
return false;
};

生成随机数

function randombetween(min, max){
 return min + (Math.random() * (max-min +1));
}

操作cookie

own.setCookie = function(cname, cvalue, exdays){
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = 'expires='+d.toUTCString();
    document.cookie = cname + '=' + cvalue + '; ' + expires;
    };
    own.getCookie = function(cname) {
    var name = cname + '=';
    var ca = document.cookie.split(';');
    for(var i=0; i< ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0) == ' ') c = c.substring(1);
    if (c.indexOf(name) != -1) return c.substring(name.length, c.length);
    }
    return '';
};

让英文字符串超出表格宽度自动换行

word-wrap: break-word; word-break: break-all; 

透明背景

<IFRAME src="1.htm" width=300 height=180 allowtransparency></iframe> 

获得style内容

obj.style.cssText 

HTML标签

document.documentElement.innerHTML 

第一个style标签

document.styleSheets[0] 

style标签里的第一个样式

document.styleSheets[0].rules[0] 

防止点击空链接时,页面往往重置到页首端。

<a href="javascript:function()">word</a> 

上一网页源

asp: 
request.servervariables("HTTP_REFERER") 
javascript: 
document.referrer 

释放内存

CollectGarbage(); 

禁止右键

document.oncontextmenu = function() { return false;} 

禁止保存

<noscript><iframe src="*.htm"></iframe></noscript> 

禁止选取

<body oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onselect="document.selection.empty()" oncopy="document.selection.empty()" onbeforecopy="return false"onmouseup="document.selection.empty()> 

禁止粘贴

<input type=text onpaste="return false"> 

地址栏图标

<link rel="Shortcut Icon" href="favicon.ico"> 
favicon.ico 名字最好不变16*16的16色,放虚拟目录根目录下 

收藏栏图标

<link rel="Bookmark" href="favicon.ico"> 

查看源码

<input type=button value=查看网页源代码 onclick="window.location = 'view-source:'+ 'http://www.csdn.net/'"> 

关闭输入法

<input style="ime-mode:disabled">

自动全选

<input type=text name=text1 value="123" onfocus="this.select()"> 

ENTER键可以让光标移到下一个输入框

<input onkeydown="if(event.keyCode==13)event.keyCode=9"> 

文本框的默认值

<input type=text value="123" onfocus="alert(this.defaultValue)"> 

获得时间所代表的微秒

var n1 = new Date("2004-10-10".replace(/-/g, "\/")).getTime() 

窗口是否关闭

win.closed 

checkbox扁平

<input type=checkbox style="position: absolute; clip:rect(5px 15px 15px 5px)"><br> 

获取选中内容

document.selection.createRange().duplicate().text 

自动完成功能

<input type=text autocomplete=on>打开该功能 
<input type=text autocomplete=off>关闭该功能 

窗口最大化

<body onload="window.resizeTo(window.screen.width - 4,window.screen.height-50);window.moveTo(-4,-4)"> 

无关闭按钮IE

window.open("aa.htm", "meizz", "fullscreen=7"); 

统一编码/解码

alert(decodeURIComponent(encodeURIComponent("http://你好.com?as= hehe"))) 
encodeURIComponent对":"、"/"、";" 和 "?"也编码 

表格行指示

<tr onmouseover="this.bgColor='#f0f0f0'" onmouseout="this.bgColor='#ffffff'"> 

各种尺寸

s += "\r\n网页可见区域宽:"+ document.body.clientWidth; 
s += "\r\n网页可见区域高:"+ document.body.clientHeight; 
s += "\r\n网页可见区域高:"+ document.body.offsetWeight +" (包括边线的宽)"; 
s += "\r\n网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"; 
s += "\r\n网页正文全文宽:"+ document.body.scrollWidth; 
s += "\r\n网页正文全文高:"+ document.body.scrollHeight; 
s += "\r\n网页被卷去的高:"+ document.body.scrollTop; 
s += "\r\n网页被卷去的左:"+ document.body.scrollLeft; 
s += "\r\n网页正文部分上:"+ window.screenTop; 
s += "\r\n网页正文部分左:"+ window.screenLeft; 
s += "\r\n屏幕分辨率的高:"+ window.screen.height; 
s += "\r\n屏幕分辨率的宽:"+ window.screen.width; 
s += "\r\n屏幕可用工作区高度:"+ window.screen.availHeight; 
s += "\r\n屏幕可用工作区宽度:"+ window.screen.availWidth;

UNCODE编码

escape() ,unescape 

事件源对象

event.srcElement.tagName 
event.srcElement.type 

捕获释放

event.srcElement.setCapture(); 
event.srcElement.releaseCapture(); 

事件按键

event.keyCode 
event.shiftKey 
event.altKey 
event.ctrlKey 

事件返回值

event.returnValue 

猜你喜欢

转载自blog.csdn.net/benben0729/article/details/83475237