jQuery升级踩坑大全(2)_H5之家 - 中国HTML5教程资源分享第一站

　　jQuery Migrate中，关于attr方法的警告有以下这些：

1. JQMIGRATE: jQuery.fn.attr('value', val) no longer sets properties 2. JQMIGRATE: jQuery.fn.attr('value') no longer gets properties 3. JQMIGRATE: jQuery.fn.attr('checked') may use property instead of attribute 4. JQMIGRATE: jQuery.fn.attr( props, pass ) is deprecated

　　实践中我发现，早期写的代码里面，获取一个input输入表单的值时，是怎么获取的呢？$('input').attr('value')；又是怎么设置的呢？$('input').attr('value', 'helloworld')。这在新版本中都是不正确的！正确的做法应该是

$('input').val(); //获取input表单现在所输入的值 $('input').val('helloworld'); //设置input表单输入的值

　　到底是获取还是设置，只取决于调用val方法时有没有带着参数。

　　如果你想手动设置单选框（例如<input type="radio" >）被选中，应该怎么设置呢？老的代码里面可能会看到这样 $('input').attr('checked', true)或者$('input').attr('checked', 'checked')。这些现在也都是不正确的！正确的做法应该是

$('input').prop('checked', true); //把单选框设为选中状态 $('input').prop('checked'); //获取单选框是不是被选中了，返回true或false

　　这是从jQuery 1.6版本开始使用的写法。如果设置disabled和selected属性，也是使用prop方法。那到底什么时候使用attr方法呢？两者的区别是：prop设置的是某元素固有的属性，而attr设置的是写在html标签上的自定义属性。举个例子：

<input type="checkbox" checked="checked" haha="hello" > var v1 = $('input').prop("checked"); //返回true/false，是否被选中，随状态改变而改变 var v2 = $('input').attr("checked"); //返回"checked"，这是你设置在标签上的，不会变 var v3 = $('input').attr("haha"); //返回"hello"，自定义属性 var v4 = $('input').prop("haha"); //返回undefined，根本没有这个固有属性

上　　面提到的第四个错误，jQuery.fn.attr(props, pass) is deprecated这个警告在真实项目中从未见到过，看了一下源码，触发该警告的jQuery写法很少见，可忽略。

　　7. 向$.parseJSON传入了非法的参数

　　在jQuery Migrate中，该错误产生如下警告

JQMIGRATE: jQuery.parseJSON requires a valid JSON string

　　jQuery之所以改这个接口，是为了和浏览器自带的JSON.parse接口对齐，从jQuery 1.9开始生效。这个问题常见于AJAX接收服务端返回值的时候。服务端可能返回一个空字符串，这时候调用该接口会产生错误。必须向$.parseJSON传入合法的JSON字符串。修正方法如下：

var v1 = $.parseJSON(str); 替换为 var v1 = $.parseJSON( str ? str : "null" ); 　　8. 使用了被废弃的'hover'事件字符串

　　在jQuery Migrate中该错误产生如下警告

JQMIGRATE: 'hover' pseudo-event is deprecated, use 'mouseenter mouseleave'

　　在注册事件处理函数时，'hover'以前可以看作是'mouseenter mouseleave'两个事件的别称。目前已经将该别称去掉了，所以代码中请用'mouseenter mouseleave'替换之。

　　9. jQuery.fn.andSelf已经被替换，不能再使用

　　jQuery Migrate中是这样的警告：

JQMIGRATE: jQuery.fn.andSelf() replaced by jQuery.fn.addBack()

　　两个函数功能是完全一样的，可以直接替换。

　　以上，就是在jQuery升级中常见的问题，当然，本着精益求精的精神，我们还是需要研究一下不常见的问题是什么样子的。需要指出的是：下面的问题在我的实际项目中从来没有碰到过，比较少见，但也无法保证一定不会出现在你的项目中，仅供感兴趣的程序员们参考吧。

　少见坑　　1. jQuery不兼容浏览器的怪异模式

　　这个错误的触发方式非常简单，直接把html页面最顶端的<!DOCTYPE html>标签删掉就可以了。浏览器怪异模式是为了兼容老古董网页而设计的，详情可参考这篇文章：链接。我想现在的WEB程序员应该不会傻到不写DOCTYPE，也很少使用这种模式下的浏览器吧。

　　jQuery Migrate展示的错误警告如下：

　　2. AJAX全局事件必须绑定到document节点上

　　jQuery Migrate中的警告如下：

JQMIGRATE: AJAX events should be attached to document: ajaxStart

　　jQuery中AJAX全局事件包括如下接口ajaxStart, ajaxStop, ajaxSend, ajaxComplete, ajaxError, ajaxSuccess。因为这些事件使用的比较少，所以也归在少见坑当中。从jQuery 1.9开始，这些事件只能绑定到$(document)上。改正方法如下（摘自jQuery官网）：

$("#status").ajaxStart(function(){ $(this).text("Ajax started"); }); 修改为 $(document).ajaxStart(function(){ $("#status").text("Ajax started"); }); 　　3. IE6/7/8浏览器不支持修改input表单的type属性

　　在jQuery Migrate中是这样的警告：

JQMIGRATE: Can't change the 'type' of an input or button in IE 6/7/8

　　改变input的表单的type属性，你可以直接把文本框改成单选框，改成多选框等等。虽然我感觉这是一种并不算优雅的行为，但是很多浏览器都是支持这么做的，除了IE6/7/8。建议在实际中也是少用这个功能为好。

　　4. 使用了被移除的$.clean, $.event.handle, $.attrFn, $.fn.data('events'), jQuery.event.trigger属性与方法