/dhtab/
JS实用技巧手记（三）
301 Moved Permanently

301 Moved Permanently

nginx
阅读(3722) 赞(0)

JS实用技巧手记（三）

2017-06-17 19:23:04 更新

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 用户判断给定的对象是否是数组

1
2
3
4
5
6
function isArray(o){
    return Object.prototype.toString.call(o)==='[object Array]';
}
// demo：
isArray("str");  //false
isArray([1,2]);  //true

 

2. 判断检查数组中是否存在某个值

1
2
3
4
5
6
7
8
9
10
Array.prototype.inArray = function(e) {
    for(i=0;i < this.length;i++)
    {
        if(this[i] == e)
        return true;
    }
    return false;
}
// demo:
[1,2].inArray(1);  //true

 

3. 用来显示或隐藏一个DOM元素

1
2
3
4
5
6
7
8
9
10
11
function toggle(obj){
    var el = document.getElementById(obj);  
    if ( el.style.display != 'none' ) {  
        el.style.display = 'none';  
    }
    else {  
        el.style.display = '';  
    }  
}
// demo:
oDiv.onclick = toggle("id");

 

4. 加载样式文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function LoadStyle(url) {
    try {
        document.createStyleSheet(url)
    } catch(e) {
        var cssLink = document.createElement('link');
        cssLink.rel = 'stylesheet';
        cssLink.type = 'text/css';
        cssLink.href = url;
        var head = document.getElementsByTagName('head')[0];
        head.appendChild(cssLink)
    }
}
// demo:
LoadStyle("css/style.css");

 

5. 清除脚本内容

1
2
3
function stripscript(s) {
    return s.replace(/<script.*?>.*?<\/script>/ig, '');
}

 

6. 解析获取URL参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function getUrlParm(url, parm)
{
    var thisUrl=url;
    var parmValue="";
    var re=new RegExp(parm+"=.*", "i");
    var mResult=re.exec(thisUrl);
    if(mResult!=null){
        mResult=mResult[0];
        alert(mResult);
        if(mResult.indexOf("&")!=-1)
            mResult=mResult.split("&")[0];
        alert(parm+" value is "+mResult.split("=")[1]);  //return mResult.split("=")[1];
    }
}
// demo:
getUrlParm("http://www.xuanfeng.com/login?user=chris","user");
// user=chris
// user value is chris

 

7. 判断是否为有效的数字

1
2
3
4
5
6
var i = 123; var str = "string";
if( typeof i == "number" ){ } //true
//某些方法(如:parseInt,parseFloat)会返回一个特殊的值NaN(Not a Number)
//请注意第2点中的[注意],此方法不完全适合判断一个字符串是否是数字型!!
i = parseInt(str);
if( isNaN(i) ){ }  //true

 

8. 获取时间的某部份

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var myDate = new Date();
myDate.getYear(); //获取当前年份(2位)
myDate.getFullYear(); //获取完整的年份(4位,1970-????)
myDate.getMonth(); //获取当前月份(0-11,0代表1月)
myDate.getDate(); //获取当前日(1-31)
myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
myDate.getHours(); //获取当前小时数(0-23)
myDate.getMinutes(); //获取当前分钟数(0-59)
myDate.getSeconds(); //获取当前秒数(0-59)
myDate.getMilliseconds(); //获取当前毫秒数(0-999)
myDate.toLocaleDateString(); //获取当前日期
myDate.toLocaleTimeString(); //获取当前时间
myDate.toLocaleString( ); //获取日期与时间

 

9. 事件源对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
event.srcElement.tagName
event.srcElement.type
// 捕获释放
event.srcElement.setCapture();
event.srcElement.releaseCapture();
// 事件按键
event.keyCode
event.shiftKey
event.altKey
event.ctrlKey
// 事件返回值
event.returnValue
// 鼠标位置
event.x
event.y

 

10. 元素显示的通用方法

1
2
3
4
5
6
7
8
9
10
11
function $(id) {
    return !id ? null : document.getElementById(id);
}
function display(id) {
    var obj = $(id);
    if(obj.style.visibility) {
        obj.style.visibility = obj.style.visibility == 'visible' ? 'hidden' : 'visible';
    } else {
        obj.style.display = obj.style.display == '' ? 'none' : '';
    }
}
← JS实用技巧手记（二）
JS实用技巧手记（四） →

推荐文章

推荐教程

最新教程