前端开发（个人笔记）【更新中。。。。】
JS
1、获取浏览器的高度和宽度
2、获取UUID随机码
function uuid() {
var s = [];
var hexDigits = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
for (var i = 0; i < 32; i++) {
s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
}
s[3] = s[8] = '-'
var uuid = s.join("");
return uuid;
}
3、判断是否XXXX-XX-XX格式日期
function isDate(dateString){
if(dateString.trim()=="")
return true;
//年月日正则表达式
var r = dateString.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
if(r == null){
return false;
}
var d = new Date(r[1],r[3]-1,r[4]);
var num = (d.getFullYear()==r[1]&&(d.getMonth()+1)==r[3]&&d.getDate()==r[4]);
return (num != 0);
}
4、前端获取日期
getNowTime: function () {
let dateTime
let yy = new Date().getFullYear()
let mm = new Date().getMonth() + 1
let dd = new Date().getDate()
let hh = new Date().getHours()
let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes()
:
new Date().getMinutes()
let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds()
:
new Date().getSeconds()
dateTime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
console.log(dateTime)
return dateTime
},
5、手动中断ajax请求
var ajax;
function showUrlImageEditor(mdata) {
if(ajax){
ajax.abort();//手动中断ajax请求
}
ajax = $.ajax({
type: "POST",
url: '/imgcx/imgViewAddSY',
cache: true,
data: {
"imgurl": mdata,
},
success: function (res) {
if ("200" == res.rtnCode) {
imgView(res.data);
}else{
alert("图像预览失败！");
}
}
});
}
注: 只中断前端请求，使上一个请求没有返回值，并不会中断服务器端的请求，即服务器正常执行，前端将无返回值。
6、js页加载js文件
document.write("<script type='text/javascript' src='/iframe/assets/js/selectJs.js'></script>");
JQery
1、input的单选框取值和赋值方法
<div class="layui-input-inline">
<input type="radio" lay-filter="raQT" name="typeId" value="1" title="正常" checked >
<input type="radio" lay-filter="raQT" name="typeId" value="2" title="补充">
</div>
//获取、、
var redioValue = $("input[name='typeId']:checked").val();
//赋值
$("input[name='typeId'][value='1']").prop("checked",true);
2、移除style的属性
<button id="cgsButton" style="background-color: #009688;display: none" type="button">车购税</button>
//移除某个属性，例如display
$('#cgsButton').css('display', '');
//移除整个style
$("#cgsButton").removeAttr("style","");
2、清空select下拉列表
//清空下拉框sel_cjry中的值
$('#sel_cjry option').remove();
//清空所有下拉框中的值
$('#select option').remove();
3、数组和字符串互相转化
数组转字符串
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
var str = arr.join(",");
//str 结果
George,John,Thomas
字符串转数组
var str = "George,John,Thomas";
var arr = str.split(',');
//arr 结果
["George","John","Thomas"]
4、id/name模糊查询
//name前缀为aa的所有div的jquery对象
$("div[name^='aa']");
//name后缀为aa的所有div的jquery对象
$("div[name$='aa']");
//name中包含aa的所有div的jquery对象
$("div[id*='aa']");
//以上返回的都是jquery的集合对象，因此都可以用
.each(function(i){
});
//进行遍历
//下面的格式可用于集合，也可以用于匹配单个jquery对象
$("tag:type[tagattribute='xx']");
//例：
$("input:text[name='xx']")
Layui
1、tips提示框
layer.tips("要提示的信息", '#nsrsbh', {tips: [1, '#ff4c4c']});
//#nsrsbh id
//{tips: [1, '#ff4c4c']} tips设计，1在下方展示，另一个参数为颜色
2、表单中的Switch按钮的使用
<input type="checkbox" checked lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
//监听事件switchTest
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? true : false), {
offset: '6px'
});
});
3、表单刷新 / 单个select刷新 / form.render()的使用
//表单
<form class="layui-form toolbar" id="cxtjForm" lay-filter="formfilter">
<div class="layui-inline">
<label class="layui-form-label">分类机构：</label>
<div class="layui-input-inline">
<input type="text" id="sel_fljg" name="swjgDm" class="layui-input">
</div>
</div>
<div class="layui-inline layui-form" lay-filter="flrfilter">
<label class="layui-form-label">分类人：</label>
<div class="layui-input-inline">
<select id="sel_flr" name="czryDm" placeholder="分类人" lay-verType="tips"/>
</div>
</div>
</form>
//刷新表单全部
form.render();
//刷新表单全部select
form.render('select');
或
form.render('select','formfilter'); //class="layui-form" 和 lay-filter="formfilter"都要有
//刷新表单中某个select
form.render('select','flrfilter'); //给所在div的class添加"layui-form",再添加监听lay-filter="flrfilter"即可
4、动态隐藏table的某列
根据data-field来隐藏
done: function (res, curr, count) {
//当条件成立时，隐藏data-field=‘2’的一列
if(cxlx == 'YSH'){
$("[data-field='2']").css('display','none');
}
return false;
}
5、下拉框多选xmSelect
效果：
//html部分
<div id="demo1"></div>
//js部分
//获取数据
var demo1 = xmSelect.render({
el: '#demo1', //id
name: 'validweek',//用于表单提交
layVerify: 'required',//非空校验
layVerType: 'msg',//提示信息
data: [
{name: '待审核', value: 1, selected: true},
{name: '审核退回', value: 2, selected: true},
{name: '禁用选项', value: 3, disabled: true}
],//数据
//自己构件选项
/*template:function({item,arr,name,value}){
return name+'<span style="position:absolute;right:10px;color:red">'+value+'</span>'
},*/
toolbar: {
show: true,
list: ['ALL', 'CLEAR', 'REVERSE']
},
theme:{//主题
color:'Orange'
},
filterable:'true',//开启搜索
paging:'true',//显示分页
pageSize:'5',//默认10
//配置label样式
model:{
label:{
type:'block',//text|block|count
//1.使用字符串拼接方法
text:{
left:'',
right:'',
separator:','
},
//2.使用方块显示
block:{
showCount:2,//最大显示数量，0：不限制
showIcon:false,//是否显示删除图标
template:null,//自定义渲染name,
},
//3.自定义
count:{
template(data, sels){//data：所有的数据，sels:选中的数据
return `已选中 ${sels.length} 项, 共 ${data.length} 项`
}
}
}
},
})
//数据回显(将后台数据拼接成array)比如
var resultData='${webInfo.validweek}'.split(',').sort();//4,5,6
//回显数据
demo1.setValue(resultData);
//获取选中的数据
var str = demo1.getValue('valueStr');
6、tabel中嵌入下拉框，及解决下拉框遮蔽问题
tabel中嵌入下拉框
<!-- html部分 -->
<script type="text/html" id="selectZllb">
<select id="zllbDm" name="zllbDm" lay-filter="zllbChange">
</select>
</script>
<!-- js部分（table结构的cols中）-->
{field: 'zllbDm', title: '资料类别', templet: '#selectZllb'},
<!-- js部分（table结构后边的方法）-->
done: function (res, curr, count) {
$("select[name='zllbDm']").empty();
$("select[name='zllbDm']").append("<option value=''>请选择资料类别</option>");
$("select[name='zllbDm']").append(zllbListStr);
// 渲染之前组装select的option选项值
layui.each($("select[name='zllbDm']"), function (index, item) {
var elem = $(item);
elem.val(tabledata[index].zllbDm);
});
return false;
}
解决下拉框遮蔽问题
<!-- CSS部分 -->
/* 使得下拉框与单元格刚好合适 */
td .layui-form-select{
margin-top: -10px;
margin-left: -15px;
margin-right: -15px;
color:#000000;
}
<!-- js部分（table结构后边的方法） -->
done: function (res, curr, count) {
//解决下拉框遮蔽问题
res.data.forEach(function (item, index) {
var tr = $(".layui-table").find("tbody tr[data-index='"+index+"']");
tr.find(".laytable-cell-1-0-3").attr("style","overflow: visible !important;");
});
form.render('select');
return true;
}
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
