• jQuery3的新特性


    前言:自从react,vue等方便的新框架出现后,好多大公司已经摒弃了jquery,但是大部分的公司还在使用,并且jquery的版本还在一直更新中。jquery2.x版本将不再支持IE6/7/8浏览器。现在更新到的最新版本3.x增加了一些新特性,也摒弃了一些特性。接下来就总结一下:

    一,增加的一些特性

    1,for...of循环

    可以用来遍历一个jquery集合所有的DOM元素。

    假设你想给页面中每个input元素分配一个ID,在jQuery3之前,你可以这样写:

    1 var inputs = $('input');
    2 for(var i=0;i<inputs.length;i++){
    3     inputs[i].id = 'input-'+i;
    4 }

    jQuery3:

    1 var inputs = $('input');
    2 var i=0;
    3 for(var input of inputs){
    4    input.id = 'input-'+i++;
    5 }

    2,采用requestAnimationFrame()来实现动画
    IE10以上的版本都支持这个函数

    3,unwrap()

    该方法增加了一个可选的选择器参数

    1 unwrap([selector])

    有了这一变化,你就可以传入包含一个选择器表达式的字符串,在父元素进行匹配,如果存在匹配,匹配的子元素被解包,不进行任何操作。
    二,被修改的一些特性

    1,:visible和:hidden

    修改了过滤器的含义,只要元素具有任何布局,包括那些宽度或高度为0的情况,元素被认为是:visible。比如说 <br/>元素和没有内容的内联元素可以通过:visible过滤器进行选择

    <div></div>
    <br />
    console.log($('body:visible').length);

    jquery 1.x  2.x中输出的结果是0, jquery 3中结果是2。
    2,data()

    该调整主要是为了让该方法符合DatasetAPI规范,jquery3 强所有属性的键都该驼峰式大小写形式

    <div id="container"></div>
    
    var $elem = $('#container');
    $elem.data({
        'my-property':'hello'
    });
    console.log($elem.data());

    在控制台上获得以下结果:{my-property:"hello"}
    在jquery3 {myProperty:"hello"}

    3,Deferred对象

    jquery 1.x  2.x 中 ,传入deferred中的回调函数中如果出现未捕获异常,会导致程序停止执行。而原生的Promise对象并非如此,它会抛出异常,并不断向上冒泡,直至到达window.onerror。

    jquery3遵循原生的Promise对象的模式,因此,抛出的异常将被视为一个失败状态(rejection)从而执行失败回调,完成之后,整个进程 将继续进行,后续的成功回调将被执行。

     1 var deferred = $.Deferred();
     2 deferrea.then(function(){
     3    throw new error('an error');
     4 }).then(
     5     function(){
     6       console.log('success 1');    
     7     },function(){
     8     console.log('failure 1');
     9 }).then{
    10  function(){
    11       console.log('success 2');    
    12     },function(){
    13     console.log('failure 2');
    14 }
    15 );
    16 deferred.resolve();

    在jquery 1.x   2.x中,只有第一个函数会被执行到,由于没有window.onerror定义任何事件处理函数,所以控制台会输出“Uncaught Error:an error”,而且进程的执行将终止
    而jquery3中,行为完全不同,在控制台中会看到failure1 和success2两条消息。异常会被第一个失败回调处理,一旦被处理,则继续执行下面的成功函数。

    三,已废弃,移除的方法和属性

    1,废弃了bind(),unbind(),delegate(),undelegate()

    用on()方法提供了统一的访问接口,取代了bind(),delegate(),live()

    off()取代了unbind(),undelegate(),die()

    2,移除了load(),unload(),error()

    3,移除context,support,selector这些属性

    4,bugs修复: width()和height()的返回值不再四舍五入

    5,wrapAll()

  • 相关阅读:
    CSS文本超出指定行数省略显示
    Vue框架H5商城类项目商品详情点击返回弹出推荐商品弹窗的实现方案
    vue项目强制清除页面缓存
    使用es6的then()方法封装jquery的ajax请求
    微信小程序——微信卡券的领取和查看
    vue项目如何通过前端实现自动识别并配置服务器环境地址
    HTML中的Meta标签详解
    复用微信小程序源码包后仍然有原小程序的版本管理怎么处理
    译: 3. Axis2快速入门指南
    译: 2. Apache Axis2安装指南
  • 原文地址:https://www.cnblogs.com/hsprout/p/6150360.html
Copyright © 2020-2023  润新知