前端 js 常用模板代码

操作

1. select 动态添加 option

jQuery方法

jQuery获取Select选择的Text和Value:

 1. var checkText=jQuery("#select_id").find("option:selected").text();   //获取Select选择的Text

2. var checkValue=jQuery("#select_id").val();   //获取Select选择的option Value

3. var checkIndex=jQuery("#select_id ").get(0).selectedIndex;   //获取Select选择的索引值

4. var maxIndex=jQuery("#select_id option:last").attr("index");   //获取Select最大的索引值

jQuery添加/删除Select的Option项：

1. jQuery("#select_id").append("<option value='Value'>Text</option>");   //为Select追加一个Option(下拉项)

2. jQuery("#select_id").prepend("<option value='0'>请选择</option>");   //为Select插入一个Option(第一个位置)

3. jQuery("#select_id option:last").remove();   //删除Select中索引值最大Option(最后一个)

4. jQuery("#select_id option[index='0']").remove();   //删除Select中索引值为0的Option(第一个)

5. jQuery("#select_id option[value='3']").remove();   //删除Select中Value='3'的Option

6. jQuery("#select_id option[text='4']").remove();   //删除Select中Text='4'的Option

内容清空：

jQuery("#select_id").empty();

js原生方法

js中使用for循环生成select下拉框
yearSel是select的id

for(var i=2000;i<2031;i++){
var newOption = document.createElement("option");
newOption.text=i+"年";
newOption.value=i;
document.getElementById("yearSel").add(newOption);
}

2. jQuery设置和获取自定义属性

jquery

设置属性 .attr("属性","值")
获取属性 .attr("属性")

3. jQuery 禁用按钮/启用按钮

禁用按钮

$("#id").attr("disabled","true");
$("#id").attr("disabled",true);
$("#id").attr("disabled","disabled");

启用按钮

$("#id").removeAttr("disabled");
$("#id").attr("disabled",false);

注意

1、$("#id").attr("disabled","false");不起作用
2、disabled只能禁用button，对超链接不起作用

4. jQuery ajax Get

// 根据表单ID判断表单是否存在
function checkFormIsExist(operationFormId, formType) {
    let result = false;
    $.ajax({
        type: "GET",
        contentType: "application/json;charset=UTF-8",
        url: "/form/display/check_form/" + formId,
        dataType: 'json',
        async: false,
        error: function (request) {
            console.log(request);
            layer.alert("响应超时，发送请求失败");
            result = false;
        },
        success: function (data) {
            if (data.code === 1000) {
                result = true;
            } else {
                layer.msg("该表单不存在，请重新输入");
                result = false;
            }
        }
    });
    return result;
}

5. jQuery ajax POST

$.ajax({
    type: "POST",
    contentType: "application/json;charset=UTF-8",
    url: prefix + "/add/generate",
    dataType: 'json',
    data: JSON.stringify(obj),
    async: false,
    error: function (request) {
        console.log(request);
        layer.alert("响应超时，发送请求失败");
    },
    success: function (data) {
        if (data.code === 1000) {
            parent.layer.msg("成功", {
                icon: 1,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            },
                            );
            parent.layer.closeAll();
        } else {
            parent.layer.msg(data.message, {
                icon: 2,
                time: 2000 //2秒关闭（如果不配置，默认是3秒）
            },
                            );
        }
    }
});

6. 监听select的变化

// 监听select的变化，控制formId输入框是否展示
function listenPageSelect() {
    $("#pageSelect").change(function () {
        let option = $(this).children('option:selected')
        if (option.attr("must") === "1") {
            $("#formIdDiv").show();
        } else {
            $("#formIdDiv").hide();
        }
    });w
}

工具方法

1. isEmpty 判断是否为空

// 判断字符串是否为空
function isEmpty(obj) {
    return typeof obj == "undefined" || obj == null || obj === "" || obj.trim() === "";
}

2. isDigit 判断是否是数字

// 是否是数字
function isDigit(val) {
    /^\d+$/.test(val)
}

3. 判断是否为数字字母下划线组成

// 判断是否为 数字 字母 下划线 组成
function isLegalValue(val) {
    return /^(\w)+$/.test(val);
}

// 判断是否为 数字 字母 下划线 和 "/" 组成
function isLegalValue(val) {
    return /^(\w|\/)+$/.test(val);
}

4. 判断字符串中是否包含某个字符串

注意：不是 str.contains() 方法

方法一: indexOf() (推荐)
var str = "123";
console.log(str.indexOf("3") != -1 );  // true
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

方法二: search()
var str = "123";
console.log(str.search("3") != -1 );  // true
search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。