javascript 常用小技巧

注意

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

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

超出文本显示省略号

<div style=\"width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis\">

终止代码执行

return;

判断数组类型

#typeof 只能检测基本类型 null function object array等都是object
#检测array 应该使用instanceof 
arr instanceof Array
#对象的constructor属性
#除了instanceof，每个对象还有constructor的属性，利用它似乎也能进行Array的判断
alert(arr.constructor === Array); // true

checkbox选种值的获取

/**
* checkbox常见操作
* document.querySelectorAll('.class、#id')与document.getElementsByName('name值')能达到一样的效果，代码将用前者造轮子
* 缺点：操作需要循环去定位然后在操作
* checkbox常见操作与radio常见操作都一样
*/
var checkboxObj = document.querySelectorAll('.checkbox');
for(var i = 0;i < checkboxObj.length;i++){
    if(checkboxObj[i].checked == true){
         console.log(checkboxObj[i].value);//获取选中的值
        checkboxObj[i].checked = false;//设置取消选中
    }else{
        checkboxObj[i].checked = true;//设置选中
    }
}

#jquery
var checkedObj=[];
$("input[type='checkbox']:checked").each(
    function (j) {
        if(j>=0){
            checkedObj.push($(this).val());
        }
    }
)
// console.log(checkedObj)

对象和字符串的转换

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阻止冒泡方法 
} 
}

阻止冒泡与浏览器默认事件

 /**
 * 阻止事件冒泡 
 * @param e 事件对象
 */
stopBubble(e){
    //如果提供了事件对象，则这是一个非IE浏览器
    if ( e && e.stopPropagation )
        //因此它支持W3C的stopPropagation()方法
        e.stopPropagation();
    else
    //否则，我们需要使用IE的方式来取消事件冒泡
    window.event.cancelBubble = true;
},
/**
 * 阻止浏览器默认行为
  * @param e 事件对象
  */
 stopDefault(e){
    //阻止默认浏览器动作(W3C)
    if ( e && e.preventDefault )
      e.preventDefault();
    //IE中阻止函数器默认动作的方式
    else
      window.event.returnValue = false;
    return false;
  },

全部替换

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 "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 

数组删除指定元素

//splice是对原数组的操作
//arrayObject.splice(index,howmany,item1,.....,itemX)
//item是添加的元素，可选的
let index = arr.indexof(find)
if(index>=0){
    arr.splice(index,1)
}

js原生计时器

<html>
<body>
<span id="clock" style="font-size: 3em">00:30:00:00</span>
<script type="text/javascript">
    var oclock=document.getElementById("clock");
    var start1 = oclock.innerHTML;
    var finish = "00:00:00:00";
    var timer = null;

    run();

    function run() {//定义时间函数，让秒表每100ms变化一次
        timer =setInterval("onTimer()", 100);//100ms的定时器
    }

    function onTimer()
    {
        if (start1 == finish)//如果倒计时结束清除时间函数
        {
            clearInterval(timer);
            start1="00:00:00:10";//(清除时间函数后还是会执行一次 所以多给一个10ms再动态赋值)
        }

        var hms = new String(start1).split(":");//以:作为分隔符号取字符串内的数据
        var ms = new Number(hms[3]);//给每个数据定义对象
        var s = new Number(hms[2]);
        var m = new Number(hms[1]);
        var h = new Number(hms[0]);

        ms -= 10;//每次执行ms减10

        if (ms < 0)//判断时间并进行变化
        {
            ms = 90;
            s -= 1;
            if (s < 0)
            {
                s = 59;
                m -= 1;
            }
            if (m < 0)
            {
                m = 59;
                h -= 1;
            }
        }
        var ms = ms < 10 ? ("0" + ms) : ms;//如果出现个位数给个位数前面添加0
        var ss = s < 10 ? ("0" + s) : s;
        var sm = m < 10 ? ("0" + m) : m;
        var sh = h < 10 ? ("0" + h) : h;
        start1 = sh + ":" + sm + ":" + ss + ":" + ms;
        oclock.innerHTML = start1;//重新给oclock赋值
    }
</script>
</body>
</html>