JS操作小记(持续更新)

常用操作

  • 清空div内容
$('#div').empty;
  • 合并两个数组
a.push.apply(a,b);
  • 合并两个对象
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };

var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1);  // { a: 1, b: 2, c: 3 }, 注意目标对象自身也会改变。
// 不想让o1改变的话,如下
var obj = Object.assign({},o1, o2, o3);

//第二种方法,jquery有一个继承方法,可以直接用
a = {'a': 1};
b = {'b': 1};
c = $.extend(a, b)
或
c = $.extend({}, a, b)

// 第三种
var obj = { name: 'coco' }
var obj1 = { age: 27 }
var newObj = { ...obj, ...obj1 };
console.log(newObj); // { name: "coco", age: 27 } 
  • 禁用checkBox
$('input[type="checkbox"]').prop("disabled",true);
  • 判断数组或对象中的key是否存在
ary.hasOwnProperty(key); 或 obj.hasOwnProperty(key);
  • 主动触发layui select事件
setTimeout(function () {
$('#selectId').next(".layui-form-select")
.find("dd[lay-value="+optionValue+"]")
.click();
},500);
// 需要延迟执行,不然没效果
  • 刷新当前页面
location.reload();
  • 页面自动刷新
<meta http-equiv="refresh" content="5">
<!-- 5代表每隔5秒刷新一次 -->
  • 格式化时间戳
//给DATE类添加一个格式化输出字串的方法
Date.prototype.format = function(format)
{
var o = {
"M+" : this.getMonth()+1, //month
"d+" : this.getDate(), //day
"h+" : this.getHours(), //hour
"m+" : this.getMinutes(), //minute
"s+" : this.getSeconds(), //second 
//quarter
"q+" : Math.floor((this.getMonth()+3)/3),
"S" : this.getMilliseconds() //millisecond
};
if(/(y+)/.test(format)) format=format.replace(RegExp.$1,(this.getFullYear()+"").substr(4 - RegExp.$1.length));
for(var k in o)if(new RegExp("("+ k +")").test(format))
format = format.replace(RegExp.$1,
RegExp.$1.length===1 ? o[k] :
("00"+ o[k]).substr((""+ o[k]).length));
return format;
};
  • 格式化到星期几
// 格式化日期到星期几
function getCurrentTime() {
var dt = new Date().format("yyyy-MM-dd hh:mm:ss");
var weekArr = [ '星期天','星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var week = weekArr[new Date().getDay()];
return dt + " " + week;
}
  • 控制DOM元素显示隐藏
$('dom').css('display','none') // 隐藏
$('dom').css('display','none') // 显示
$('dom').hide() // 隐藏
$('dom').show() // 显示
// 这两种隐藏时均不占用位置,有时用display控制显隐,元素的样式会改变,这时候可以尝试hide/show;
  • js下载文件
function downLoad(url,name) {
var link = document.createElement('a');
link.href = url;
link.download = name;
link.click();
}
  • layui实现对checkbox进行单选控制
  1. 首先给同级checkbox添加相同的namelay-filter
<p>
<input style="vertical-align:middle;margin-left:7px;" type="checkbox" lay-skin="primary" name="b1Zg" id="b1_zg_1"
value="1" class="b1Zg" lay-filter="b1Zg"/>
建设用地规划许可证(含变更)
<input style="vertical-align:middle;margin-left:10px;" type="checkbox" lay-skin="primary" name="b1Zg"
id="b1_zg_2" value="2" class="b1Zg" lay-filter="b1Zg"/>
国有土地划拨决定书
</p>
  1. 监听事项,取消同级选中
layui.use([ 'form', 'table', 'layer'], function () {
var form = layui.form;

checkFilter("b1Zg"); //有多个单选部分就调多次
function checkFilter(filterName) {
form.on('checkbox('+ filterName+')', function(data){
$("input[name=" +filterName + "]").prop("checked", false); //全部取消选中
$(this).prop("checked", true); //勾选当前选中的选择框
form.render('checkbox');
});
}
})
  • object对象动态添加元素
obj["name"] = content;

注意事项

  • JS枚举比较时注意观察对象的类型,打印在控制台是看不出来的,例如数字1和字符串'1' ,在找错误或枚举处理之前可以用 typeOf a先判断一下类型。
  • Dom.trigger('click') 有时不生效,可以尝试直接Dom.click()
  • 拼接字符串渲染htmlclick事件不生效
    例如拼接这条语句:
<span class="exit" onclick="logOut()">退出</span>

使用两种方式均不生效:

function logOut(){
.......
}
// 或者
$('.exit').click(function(){
.......
})

正确写法:

$('body').on('click','.exit',function(){
......
})

原因:在新的dom载入渲染之前js就加载完了,所以方法不生效。解决办法:将事件委托道body(当然也可以是其他父元素),等事件冒泡到父元素上面再进行事件处理

posted @ 2020-02-27 15:38  Gyyyang  阅读(...)  评论(...编辑  收藏