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添加相同的name 和 lay-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>

2. 监听事项，取消同级选中

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()
• 拼接字符串渲染html，click事件不生效
  例如拼接这条语句：

<span class="exit" onclick="logOut()">退出</span>

使用两种方式均不生效：

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

正确写法：

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

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