前端js常用模板代码
- 格式：pdf
- 大小：77.41 KB
- 文档页数：3
前端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(""); //为Select追加⼀个Option(下拉项)
2. jQuery("#select_id").prepend(""); //为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。
