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不会做互斥判断,直接添加选中,达不到单选需求。如下所示的单选组:

   

       

   

       

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

$("#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)) {

return false;

}

return true

你可能感兴趣的:(js常用小技巧)