jQuery 3.0 的变化

jQuery 3.0 版本更新了多个核心功能,包括简化 show/hide 方法、data 方法兼容 data-name-11 写法、deferred 兼容 Promise/A+ 规范、$.ajax 对象调整、width/height 方法返回值统一为十进制、移除 load/unload/error 快捷函数以及动画模块使用 requestAnimationFrame 替代 setTimeout。

1、简化了 show/hide

之前的 show/hide 是大兼容,比如 show, 无论元素的 display 是写在style,stylesheet里都能显示出来。3.0 则不同了,写在 stylesheet 里的 display:none 调用 show 后仍然隐藏。 3.0 建议采用 class 方式去显示隐藏,或者完全采用 hide 先隐藏(不使用css代码),再调用 show 也可以。

1
2
3
4
5
6
7
8
9
<style>
     input {
         display: none;
     }
</style>
<input id= "txt"  type= "text"  value= "" />
<script>
     $( '#txt' ).show();  // 仍然隐藏的状态
</script>

  

2、data 方法兼容 data-name-11 写法

1
2
3
4
5
<input id= "txt"  type= "text"  value= ""  data-name-11= "aa" />
<script>
      // 3.0 版本 输出 {"name-11": aa}, 之前版本输出 {}
     $( '#txt' ).data()
</script>

这个问题本质是$.camelCase方法的实现差异

1
2
// 3.0 输出 "name-11", 3.0 之前版本输出 "name11"
$.camelCase( 'data-name-11' )

  

3、derferred 兼容了 Promise/A+

3.0 终于可以自信的宣告支持 Promise/A 了,之前一直被诟病是阉割版的。

 

4、$.ajax 对象删除了 success | error | complete 方法

这是因为 Promise/A 规范的推动,大家对 Promise 的使用越来越多,之前对应 Derferred 上的几个方法没有存在的必要了

  • derferred.done -> jqXHR.success
  • derferred.fail    -> jqXHR.error
  • derrerred.always -> jqXHR.complete
1
2
3
4
// 以下方法在 3.0 后没有了
$.ajax().success
$.ajax().error
$.ajax().complete

 

5、width/height,css(width) / css(height) 的返回值一律是十进制

之前部分浏览器特殊情况下返回浮点数。

 

6、 移除了注册事件的快捷函数 load | unload | error

  • load 名称和 ajax load 同名, 含糊不清。
  • unload 如果 load 去掉, unload 也没有存在的意义了。
  • error 采用 window.onerror 注册,不是一个标准事件 hander,因此也建议移除

 bug:http://bugs.jquery.com/ticket/11733

 

7、动画模块使用 “requestAnimationFrame” 替代 setTimeout

requestAnimationFrame IE9及android4.4以下仍然不支持,但其它浏览器则明显提升性能

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值