jquery版本升级填坑记录

为解决平台js漏洞，将jquery由低版本升级为高版本的jquery3.1.1.js。 总结了项目中所有的jquery版本，不下5种，全部废弃，引入jquery3.1.1.js。

jQuery官方推荐了jQuery Migrate 库来解决jQuery升级问题。引入以下两个js。

<script src="jquery-3.1.1.js"></script> 
<script src="jquery-migrate-1.3.0.js"></script>

踩坑大战开始：

1.新版jquery废弃了的一些方法。

live() die() toggle() load() unload() error()

2.新版jquery废弃了jQuery.browser属性。

3.废弃了size()方法。

我们一般在获取元素长度的时候，老版本中会使用size()方法，新版本后全部使用length来代替。

$('li').size() //错误 
$('li').length //正确

4.attr方法的使用规范。

$("input").attr('value','liming') //错误 
$("input").val() //正确，获取值 
$("input").val("liming") //正确，设置值

5.注意选择器的使用规范。

$menu.find("[href="+currentId+"]") //错误 
$menu.find('[href="'+currentId+'"]') //正确

6.还有一个比较严重的影响——jquery版本升级影响了layer.open弹出框的样式（不知道有没有小伙伴也遇到了这个奇葩的问题）。layer官网也不能访问了，只能硬着头皮做处理。

问题点：

a.弹出框位置设置错误，导致不居中。

b.弹出框高度设置错误。

解决方案：

layer.open使用注意（参数设置）：

a.area: ['80%', '700px'], 是设置弹框宽高的。数值可以自行调整（height不可以是%，必须写一个实际的px）。

b.offset: ['15%','10%'],是设置弹框偏移量的。数值可以自行调整（px和%都可）。

c.success回调方法中调用setLayerIframeHeight，此方法已经封装在common.js中。

    success: function(layero, index){ setLayerIframeHeight(layero) }

d.move: '.layui-layer-title',允许鼠标拖动标题进行移动。避免一些弹出框太大导致信息显示不全而影响使用。

示例：

```
layer.open({ 
    type: 2, 
    move: '.layui-layer-title', 
    shade: 0.1, 
    title: '选择推荐商品', 
    content: ["${base}/platform/goods/group/product/list?goodsId=" + goodsId, 'yes'], 
    area: ['80%', '700px'], 
    offset: ['15%','10%'], 
    success: function(layero, index){ 
        setLayerIframeHeight(layero) 
    } 
})
```

以下是方法setLayerIframeHeight

```
/** * 解决jq版本升级后，layer.open弹出框高度的问题 */ 
function setLayerIframeHeight(layero){ 
    var lContent = $(layero).find('.layui-layer-content'); 
    var layerUi = $(layero).parents('.layui-layer').prevObject[0]; 
    var layerHeight = layerUi.style.height; //这个高是在弹出框的时候设置的area的宽高 
    //设定layui-layer-content的高度为弹出框的高度 
    lContent.css('height', layerHeight); 

    //判断有没有title 
    var lChildNode = layerUi.childNodes; 
    var isHasTitle = false; 
    for(var i=0;i<lChildNode.length;i++){ 
        if(lChildNode[i].className == 'layui-layer-title'){
            isHasTitle = true; break; 
        } 
    } 

    //如果有标题，减去45 
    if(isHasTitle){ 
        lContent.css('height', (parseInt(layerHeight)-45) + 'px'); //45是标题的高度 
    } 

    //如果有btn，减去52 
    var btns = $(layero).find('.layui-layer-btn'); 
    var lastChild = btns.prevObject[0].lastChild.className; 
    if(lastChild == 'layui-layer-btn'){ 
        lContent.css('height', (parseInt(layerHeight)-45-52) + 'px'); //52是btn的高度 
    } 
}
```

总结：

1.以上提的问题点请多注意，尤其第6点，admin端如果使用layer.open方法，都需要单独处理layer的样式问题。

2.以上坑不全，如有新坑，欢迎小伙伴们来补充。