zoukankan      html  css  js  c++  java
  • jQuery 演变史

    一、说明

    最近我读完了 jQuery 官方的博客仓库,目的是为了梳理清楚 jQuery API 接口的演变过程。从而明确知道在对应版本下使用正确、合适的 API,以下便是我的总结笔记。

    jQuery 有三个版本,1.*2.*3.*,下面给出它们的区别:

    1.*:IE6+ 的浏览器支持。只做 Bug 维护。最终版本 1.12.4。对于一般项目来说,使用它就够了。
    2.*:IE9+ 的浏览器支持。只做 Bug 维护。最终版本 2.2.4。很少使用。
    3.*:IE9+ 的浏览器支持。最新版本。jQuery.Deferred 对象更新为兼容 Promises/A+ 和 ES2015 原生 Promises 的对象模式。

    jQuery CDN:新浪unpkg

    版本迭代历史

    jQuery 1.1.4

    引入 $.noConflict()

    var jq = $.noConflict();
    

    使用后,全局环境 $jQuery 都变无效,有效的仅是变量 jq

    jQuery 1.5.0

    引入了 deferred 对象

    jQuery 1.6.1

    引入 .prop() 方法,对 .attr() 方法进行了少许修改。目的是为了区别开操作 DOM 元素属性和 HTML 标签特性,改变了之前仅有.attr() 方法的局面。

    下面列举了在 1.6.1 版本后,最好使用 .prop() 方法的举例:

    1.6.1 之前使用 1.6.1 之后最好用
    $(window).attr… $(window).prop…
    $(document).attr… $(document).prop…
    $(“:checkbox”).attr(“checked”, true); $(“:checkbox”).prop(“checked”, true);
    $(“option”).attr(“selected”, true); $(“option”).prop(“selected”, true);

    下面列举的 boolean 类型的 HTML 特性/对象属性都推荐使用 .prop() 方法操作:

    autofocus, autoplay, async, checked, controls, defer, disabled, hidden, loop, multiple, open, readonly, required, scoped, selected

    下面这张表格里,最左面一列是 HTML 特性/对象属性,右边两列(attr.prop() 方法)下面打钩的表示推荐使用该方法操作(灰色钩表示也可以这样用,但不是推荐的)。

    HTML 特性/对象属性 .attr() .prop()
    accesskey
    align
    async
    autofocus
    checked
    class
    contenteditable
    defaultValue
    draggable
    href
    id
    label
    location *
    multiple
    nodeName
    nodeType
    readOnly
    rel
    selected
    selectedIndex
    src
    style
    tabindex
    tagName
    title
    type
    width **

    * 例如 window.location
    ** 如果需要覆盖 .width() 方法

    需要额外注意的是,操作 HTML 属性 value 的方法依旧使用 .val()

    通过 .prop() 方法获得的是动态的值,但 .attr() 不是。例如当修改表单 <input type="text" value="abc"> 里的值为 abcdef 时,.prop("value") 值为 abcdef 但是 .attr("value") 的值依旧为 abc

    <input type="checkbox" checked>checked 的值其实是个空字符串(没有就是 undefined),即 .attr("checked")"",但它的 .prop("checked")true

    jQuery 1.7

    引入了事件绑定方法 .on().off()。在 1.7 版本之前,给元素绑定事件的方法有三种:.bind().live().delegate(),它们已经不再推荐使用。现在统一使用 .on().off() 方法替代上面三个方法,而且使用起来也非常简单。

    $(elems).on(events, selector, data, fn);
    $(elems).off(events, selector, fn);
    

    提供了 selector 参数,即被认为是委派事件,否则认为是直接绑定事件,下面列举正确使用.on().off() 方法的例子:

    .bind()、.live() 和 .delegate() 使用 .on() 和 .off() 后
    $(elems).bind(events, fn) $(elems).on(events, fn)
    $(elems).bind(events, { mydata: 42 }, fn) $(elems).on(events, { mydata: 42 }, fn)
    $(elems).unbind(events, fn) $(elems).off(events, fn)
    $(elems).delegate(selector, events, fn) $(elems).on(events, selector, fn)
    $(elems).undelegate(selector, events, fn) $(elems).off(events, selector, fn)
    $(selector).live(events, fn) $(document).on(events, selector, fn)
    $(selector).die(events, fn) $(document).off(events, selector, fn)

    jQuery 1.9

    引入了检索回指定 CSS 选项值的方法 $(element).css([ name1, name2 … ])

    var dims = $("#box").css([ "width", "height", "backgroundColor" ]);
    //  {  "10px", height: "20px", backgroundColor: "#D00DAD" }
    

    提供了跨浏览器 CSS3 支持:

    :nth-last-child, :nth-of-type, :nth-last-of-type, :first-of-type, :last-of-type, :only-of-type, :target, :root, :lang

    jQuery 1.10.0 和 2.0.1 同时发行

    同时发行的目的是为了统一 1.x 和 2.x 版本的 API 行为,就是说 1.x 和 2.x 版本除了浏览器兼容性(1.x 支持 IE6+ ,2.x 支持 IE9+)不同外,其它都一样,两个版本的切换是没有问题的:

    2015 年 jQuery 版本几乎无更新,都是 bug 修改,而且博客少更新,跟 2008 年一样。jQuery 1.12 还没有音讯。
    jQuery 1.10.0 - 1.12.4 与 2.0.1 - 2.2.4 同时开发,目的是提供统一的公共 API,除了内部代码实现不同外,还有浏览器支持上的不同。
    但看样子,用 1.10.2 版本就够了,因为会发现后续版本没有 API 改变,且每一次次版本升级带来的都是漫长的 bug 修改期。

    支持 IE8 的话,用 1.10.2,否则(适用现代浏览器)用 2.0.3 就可以了。

    jQuery 1.12.4 和 2.2.4

    1.12.4:IE6+ 的浏览器支持,1.* 的最终版本。
    2.2.4:IE9+ 的浏览器支持。2.* 的最终版本。

    jQuery 3.0

    2016 年起 jQuery 团队开发重点放在 3.0 版本,1.x 和 2.x 版本在 5 月份停止更新。

    2016 年 1 月 14 号,jQuery 10 周年,3.0 版本面世

    [译] jQuery 3 有哪些新东西

    jQuery.Deferred 对象更新为兼容 Promises/A+ 和 ES2015 原生 Promises 对象模式。

    Slim 版本,不包括 ajax 和效果模块(基本效果函数除外)代码。

    jQuery 3.1.0

    修复 jQuery(document).ready(function() {}) 里的无声抛错 Bug。

    $(function() {
        throw new Error('boom!')
        $('#app').text('hello world');
    });
    

    (完)

  • 相关阅读:
    [ Algorithm ] N次方算法 N Square 动态规划解决
    [ Algorithm ] LCS 算法 动态规划解决
    sql server全文索引使用中的小坑
    关于join时显示no join predicate的那点事
    使用scvmm 2012的动态优化管理群集资源
    附加数据库后无法创建发布,error 2812 解决
    浅谈Virtual Machine Manager(SCVMM 2012) cluster 过载状态检测算法
    windows 2012 r2下安装sharepoint 2013错误解决
    sql server 2012 数据引擎任务调度算法解析(下)
    sql server 2012 数据引擎任务调度算法解析(上)
  • 原文地址:https://www.cnblogs.com/zhangbao/p/6739329.html
Copyright © 2011-2022 走看看