前端 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。