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