js常用小技巧

1、form表单中的数据修改：

var param = $("#form").serializeArray();

//param的表现形式如下：param=({"name":"name", "value":"value"}...);

const index = param.findIndex(item => item.name ==="modifyname");

param[index] = Object.assign(param[index], {value:"new-value"});

则可以修改 param中 name为modifyname的数据值为“new-value”;

2、删除多余的字段

var param=$("#form").serializeArray();

$.each(param,function(index,item) {

if (item && item.name =="del-name") {

param.splice(index, 1);

return false;

}

});

3、多个form表单数据合并

var param = $("#form").serializeArray().concat( $("#form1").serializeArray());

var vparam = $("#form :visible")..serializeArray(); //仅获取可见form元素的值

4、form表单恢复时，隐藏的input数据恢复

$("#form input:hidden").val("");

5、在Boostrap的模态框中使用datetimepicker越界问题处理

一个页面中，如果模态框数据较多，整个模态框高度几乎达到页面底部，而且日期组件作为模态框底部元素的一部分，则会出现日期组件超过页面高度部分无法显示，此时需要设置模态框的container属性，设置如下：

//初始化日期插件属性

$('.form_datetime').datetimepicker({

container:"#ModalID .modal-content", //模态框

minView : "month", //选择日期后，不会再跳转去选择时分秒

format : 'yyyy-mm-dd',//设置日期格式

autoclose : true,//选择后自动关闭日期插件

});

6、bootstrap 报错：Uncaught RangeError: Maximum call stack size

bootstrap弹窗里面再弹窗，浏览器console报错：Uncaught RangeError: Maximum call stack size exceeded，导致页面上一些奇怪的错误。

这是bootstrap多层弹窗导致的。解决方案有两种：

a、注释了bootstrap.min.js的这一句代码即可。

enforceFocus:function(){

var t=this;

e(document).on("focusin.modal",function(e){

t.$element[0]!==e.target&&!t.$element.has(e.target).length/*多层弹窗死循环&&t.$element.focus()*/})

escape:function(){...}

b、是在页面js 里开始加上

$.fn.modal.Constructor.prototype.enforceFocus =function(){};

7、获取给定日期后的指定日期

//获取给定参数后的新日期字符串

function getNewDate(currDate, addYear, addMonth, addDay){

var date;

if (currDate) {//currDate:2000-01-01

date=new Date(Date.parse(currDate.replace(/-/g, "/")));

}else {

date =new Date();

}

if (addYear && addYear !=0) {

date.setFullYear(date.getFullYear()+addYear)

//N年前需要对日期+1或者减1

date.setDate(date.getDate()+(addYear>0 ? -1 :1));

}

if (addMonth && addMonth !=0) {

date.setMonth(date.getMonth()+addMonth);

//N月前需要对日期+1或者减1

date.setDate(date.getDate()+(addMonth>0 ? -1 :1));

}

if (addDay && addDay !=0) {

date.setDate(date.getDate()+addDay);

}

var year = date.getFullYear();

var month = (date.getMonth() +1) <10 ? ("0" + (date.getMonth() +1)) : (date.getMonth() +1);

var day = date.getDate() <10 ? ("0" + date.getDate()) : date.getDate();

//返回日期格式：2000-01-01

return year+'-'+month+'-'+day;

}

8、查找数组中是否包含某个值

a、includes: includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

arr.includes(searchElement)

arr.includes(searchElement, fromIndex)

b、indexOf: indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置.indexOf() 方法对大小写敏感！

stringObject.indexOf(searchvalue,fromindex)

如果要检索的字符串值没有出现，则该方法返回 -1。

该方法主要用于查找子字符串

9、对于列表数据在非表格中展示，页面的处理方式：

页面数据展示如图

var rec = [{}, {}...]

rec.map(function (item, index) {

if (index >0) {

$("#divlistParent").append($("#divlistParent form:first").clone())

$("#divlistParent form:eq("+index+") table").attr("id", "table"+index); //如果复制的页面组件带有id，则会克隆出一个完全一样的id，造成后面的数据无法处理，故更改克隆后的id值。

}

$("#divlistParent form:eq("+index+")").find("[tp='det']").each(function (i, ele) {

var obj =$(ele);

var name = obj.attr('name');

if (obj[0].tagName =="INPUT") {

obj.val(item[name]);

}else {

obj.html(item[name]);

}

});

})

10、设置radio的选中

对于经常需要用到单选的地方，回显数据一定要使用prop，使用attr不会做互斥判断，直接添加选中，达不到单选需求。如下所示的单选组：

</div>

设置某个选项选中操作如下：

$("#radioGroup input:radio[name=sex][value="+1+"]").prop("checked",true); //此时会选中第二个单选项

11、判断一个对象是否为空

方法一：

var data = {};

var b = $.isEmptyObject(data);

alert(b);//true

方法二：

ar data = {};

var arr = Object.getOwnPropertyNames(data);

alert(arr.length == 0);//true

12、select下拉框不显示滚动条

添加style是为了保证弹出框的位置显示。不增加style会导致select显示在下层被遮挡住

13、验证至多带2位小数的数字

var reg =/^[0-9]+(.[0-9]{1,2}){0,1}$/;

if (!reg.test(gets)) {