JS 常用方法汇总

JS 常用方法汇总

0. js 初始化加载方法

$(function () {
    beforeInit();
    init();
});

function beforeInit(){
    // TODO
}

function init(){
    // TODO 
}

1. Ajax 请求发送与接受

function init() {
    // 请求接口时前端加载 loading，调用接口方法第一行：
    loadingMsg.startLoading('加载中...');
    var params = {
        'name': 'test',
        'id': '12345',
    };
    var param = {params: JSON.stringify(params)};
    $.post('/XXX', param, function (result) {   // 返回结果为 result
        // 调用返回后结束 loading：
        loadingMsg.hideLoading();
        if (result == '0000') {     // 判断根据后台返回结果的格式而定
            // TODO 

        } else {
            alert(json.MSG);
        }
    });
}

后台接收：

@RequestMapping("/XXX")
@ResponseBody
public String demo(HttpServletRequest request, String params){
    JSONObject paramsJson = JSONObject.parseObject(params);
    if(StringUtil.isEmptyObject(paramsJson)){
        paramsJson = new JSONObject();
    }
    // TODO 

    return "/XXXXX"; // 返回跳转 URL。可以设置结果为 json 字符串，在前端解析 json；
}

2. 设置html内容
// getElementsByClassName 不行

document.getElementById('targetId').innerHTML = returnRes + '元';

3. 缓存---实现跨页面读取参数；尽量少用，敏感信息不落地；

// 设置缓存
localStorage.setItem('itemName', itemValue);

// 读取缓存
localStorage.getItem('itemName');

4. 设置全局变量的内部值

var info = {};
info = result;      // 将接口返回结果赋给全局变量 info，后续方法调用
info.flag = '0';    // 添加新的值至全局变量中  info 内容为：{flag: "0"}

5. 判断

// 利用 JSON 判断对象内容
JSON.stringify(result) === '{}'

// 判断对象的类型
if(typeof result === 'undify'){
    // TODO
}

6. 链接跳转

window.location.href = '/XXX';  // 跳转后台或页面

7. jQuery 获取某个 id 中的值

$('#myInput').val()

8. jQuery 设置某个 id 中的值

$('#myInput').html(phoneNumber);

9. js 字符串截取与拼接

var tel = '15021932016';
var mtel = tel.substr(0, 3) + '****' + tel.substr(7);   // 手机号码脱敏
substr(start);          // 从 start 位开始（含 start 位）截取到最后，tel.substr(7) 输出 '2016'
substr(start, end);     // 截取范围含左不含右，tel.substr(0, 3) 输出 '150'

10. 返回上一页

history.go(-1);

11. 点击事件改变指定对象的 css 样式。removeClass(), addClass()

$('#deleteNum').on('click', (function () {
    var _this2 = $('#deleteNum');
    if (_this2.hasClass('delNumDisplay')) {
        _this2.removeClass('delNumDisplay');
        _this2.addClass('delNum');
    }
}));

12. 点击发送短信校验码 逻辑
html:

<button id='getPhoneNum' class="SecurityCode">获取验证码</button>

js:

$('.SecurityCode').on('click', (function () {
    sendemail()
}));
var countdown = 60;
function sendemail() {
    var obj = $("#getPhoneNum");
    var params = {
        'transType': 'XXXXXX', // 发送短信后台接口
        'Reqno': new Date().getTime(),
        'mobile': phoneNumber,
    };

    var param = {params: JSON.stringify(params)};
    $.post('/wx/dyb/callAppGateWay', param, function (result) {
        var json = eval('(' + result + ')');
        if (json.RESULT == '0000') {
            settime(obj);
        } else {
            alert(json.MSG);
        }
    });
}

//发送验证码倒计时
function settime(obj) {
    if (countdown == 0) {
        // 设置按键有效
        obj.attr('disabled', false);
        // 修改样式
        obj.removeClass('SecurityCodeSend');
        obj.addClass('SecurityCode');
        obj.html("获取验证码");
        countdown = 60;
        return;
    } else {
        // 设置按键失效
        obj.attr('disabled', true);
        // 修改样式
        obj.removeClass('SecurityCode');
        obj.addClass('SecurityCodeSend');
        obj.html(countdown + "秒后重新发送");
        countdown--;
    }
    setTimeout(function () {
        settime(obj)
    }, 1000)
}

13. 获取当前日期 yyyymmdd

function getNowFormatDate() {
    var day = new Date();
    var Year = 0;
    var Month = 0;
    var Day = 0;
    var CurrentDate = "";
    Year = day.getFullYear();//支持IE和火狐浏览器.
    Month = day.getMonth() + 1;
    Day = day.getDate();
    CurrentDate += Year;
    if (Month >= 10) {
        CurrentDate += Month;
    }
    else {
        CurrentDate += "0" + Month;
    }
    if (Day >= 10) {
        CurrentDate += Day;
    }
    else {
        CurrentDate += "0" + Day;
    }
    return CurrentDate;
}

14. spring boot 后端传值
controller:

model.addAttribute("code", code);

html:

var code = '[[${code}]]';

15. 限制重复点击事件
// 点击限制，on('click', (function (){ // TODO  })) 之前添加 off('click') 属性；

$('#sureButton').off('click').on('click', (function () {    
    signElec();
}));

或

$('#sureButton').attr('disabled', true);   // 点击之后添加 disabled 属性

16. 实时监测验证码

$(function () {
    $('.yzminput').bind('input propertychange', function () {
        // TODO 
    });
});

17. 多种条件限制，改变最终按键的样式

// 是否勾选同意协议
var isAgree = 0;

// 监听事件，触发确认框生效。onkeyup onclick
document.onkeyup = function () {
    document.onclick = function () {
        var $checkbox = $('.checkbox');
        var _this = $(this).find($checkbox);
        if (_this.hasClass('read')) {
            isAgree = 1;
        } else {
            isAgree = 0;
        }
    };

    // 输入金额限制
    var inputNum = $('#clvalNum').val();

    // 短信验证码的长度
    var yzm = $('.yzminput').val();

    // 判断三个条件是否满足
    if (inputNum >= 100 && isAgree==1 && yzm.length == 6) {
        // 改变提交按键的样式
        $('#sureButton').removeClass('sureBtn');
        $('#sureButton').addClass('sureBtnSubmit');
    } else {
        $('#sureButton').removeClass('sureBtnSubmit');
        $('#sureButton').addClass('sureBtn');
    }
};

18. 监听事件，触发确认框生效

function commonMonitor() {
    // 监听验证码
    var yzm = $('.yzminput').val();
    if (yzm.length == 6) {
        $('#sureButton').removeClass('sureBtn');
        $('#sureButton').addClass('sureBtnSubmit');
    } else {
        $('#sureButton').removeClass('sureBtnSubmit');
        $('#sureButton').addClass('sureBtn');
        $('#sureButton').off('click');
    }
}

// 注：js绑定事件，解绑事件，以 id 为准