手记

html中常用JavaScript函数有哪些?

常用基础函数
使用原生JS编写,不依赖任何库文件
(看完不回复,写代码绝对会出BUG哦!)


基础函数
/**
 * 遍历对象
 * @param {Object} obj
 * @param {Function} fun 需两个参数
 */
function foreach (obj,fun) {
    for (key in obj) {
        var value = obj[key];
        fun(key,value);
    }
}
数字处理
/**
 * 数字前添加前导零
 * @param  {Number} num
 * @param  {Number} digit
 * @return {String}
 */
function fillByZero (num,digit) {
    var num = String(num);
    for (var i = num.length; i < digit; i++) {
        num = '0' + num;
    }
    return num;
}

/**
 * 返回大于等于min小于等于max的随机数(也可只传一个参数,代表返回一个大于等于0小于等于min的随机数)(和PHP中rand函数用法完全一样)
 * @param  {number} min
 * @param  {number} max
 * @return {number}
 */
function rand (min,max) {
    if (!max) {
        max = min;
        min = 0;
    }
    var r = 0;
    do {
        r = Math.round(Math.random() * max);
    } while(r < min);
    return r;
}
字符串处理
/**
 * 获取当前页面Cookie(需trim函数支持)
 * @return {Object} Cookie集合
 */
function getCookie() {
    cookie = document.cookie;
    var arr = cookie.split(';');
    var ret = {};
    for (var i = 0; i < arr.length; i++) {
        var c = arr[i].split('=');
        ret[trim(c[0])] = c[1];
    }
    return ret;
}
/**
 * 设置Cookie(需foreach函数支持)
 * @param {Object} obj Cookie集合
 */
function setCookie(obj) {
    var cookie = '';
    foreach(obj,function (key,value) {
        cookie += key + '=' + value + ';';
    });
    cookie = cookie.replace(/(;$)/,'');
    document.cookie = cookie;
}
/**
 * 创建一个HTTP请求地址(最适合AJAX请求传参数了)(需要foreach函数支持)
 * @param  {Object} param
 * @param  {String} url   可选参数
 * @return {String}
 */
function buildHTTPQuery (param,url) {
    var query = url ? url : '';
    if (query && query.indexOf('?') == -1) {
        query += '?';
    }
    foreach(param,function (key,value) {
        query += key + '=' + value + '&';
    });
    query = query.replace(/(&$)/,'');
    return query;
}

/**
 * 解析HTTP请求(你可以这样玩:var $_GET = decodeHTTPQuery())
 * @param  {String} code 可以是完整的网址,也可以仅仅是search部分(如不填默认取当前网址的search部分)
 * @return {Object}      解析后的对象
 */
function decodeHTTPQuery(code) {
    code = code ? code : window.location.search;
    var start = code.indexOf('?');
    code = start == -1 ? code : code.substr(start+1);
    var arr = code.split('&');
    var ret = {};
    for (var i = 0; i < arr.length; i++) {
        var c = arr[i].split('=');
        ret[c[0]] = c[1];
    }
    return ret;
}
/**
 * 删除字符串两边的空格
 * @param  {String} str
 * @return {String}
 */
function trim (str) {
    return str.replace(/(^\s*)|(\s*$)/g,'');
}
DOM操作函数
/**
 * 获取元素(需hasClass函数支持)
 * @param  {String} s
 * @param  {String} p 当以类名或标签名获取元素时,传入的父元素的id,不传默认使用document
 * @return {NodeList}
 */
function $ (s,p) {
    var tag = s.substr(0,1);
    var name = s.substr(1);
    var eles = [];
    if (tag == "#") {
        eles.push(document.getElementById(name));
    } else if (tag == ".") {
        var e = $("*",p);
        for (var i = 0;i < e.length;i++) {
            if (hasClass(e[i],name)) {
                eles.push(e[i]);
            }
        }
    } else {
        var p = p ? $("#" + p) : document;
        eles = p.getElementsByTagName(s);
    }
    return eles.length == 1 ? eles[0] : eles;
}

/**
 * CSS3选择器匹配元素(IE8以下不支持)
 * @param  {String} e
 * @return {NodeList}
 */
function $ (e) {
    var e = document.querySelectorAll(e);
    return e.length == 1 ? e[0] : e;
}

/**
 * 获取元素样式(包括样式表)
 * @param  {HTMLElement} ele
 * @param  {String} type
 * @return {String}
 */
function getStyle (ele,type) {
    return ele.style[type] || getComputedStyle(ele)[type];
}

/**
 * 获取所有子元素
 * @param  {Object} ele
 * @return {Array}
 */
function getChildren (ele) {
    var children = ele.childNodes;
    var arr = [];
    for (var i = 0; i < children.length; i++) {
        if (children[i].nodeType == 1) {
            arr.push(children[i]);
        }
    }
    return arr;
}

/**
 * 检查一个元素是否含有某个Class
 * @param  {HTMLElement} ele
 * @param  {String} className
 * @return {Boolean}
 */
function hasClass (ele,className) {
    var exp = new RegExp("\\b(" + className + ")\\b");
    return exp.test(ele.className);
}

/**
 * 添加Class(需hasClass函数支持)
 * @param {HTMLElement} ele
 * @param {String} cls
 */

function addClass (ele,cls) {
    if (!hasClass(ele,cls)) {
        ele.className += ' ' + cls;
    }
}

/**
 * 删除Class(需hasClass函数支持)
 * @param {HTMLElement} ele
 * @param {String} cls
 */
function removeClass (ele,cls) {
    if (hasClass(ele,cls)) {
        var exp = new RegExp("\\b(" + cls + ")\\b");
        ele.className = ele.className.replace(exp,' ');
    }
}

/**
 * 如果一个元素有某个Class,则删除这个Class,否则添加(需hasClass、trim函数支持)
 * @param  {HTMLElement} ele
 * @param  {String}      className
 */
function toggleClass (ele,className) {
    if (hasClass(ele,className)) {
        ele.className = ele.className.replace(className,'');
    } else {
        ele.className += ' ' + className;
    }
    ele.className = ele.className.trim();
}
26人推荐
随时随地看视频
慕课网APP

热门评论

..

夺基地东奔西走厅地方 工作    东走西顾  东奔西走

哈哈哈哈哈哈哈哈哈哈哈哈

字符串处理不错,很常用也很实用

查看全部评论