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');
    });
    

    (完)

  • 相关阅读:
    .XamlReader.Load()解决给定编码中的字符无效与无法创建未知类型
    ie中jQuery无法解析xml文件的解决方案[转帖]
    关于BI
    关天response.setContentType()和application/json
    win7 exe程序icon消失
    关于spring的p标签(转)
    人生的阶段(转)
    Firefox高版本中alert样式问题
    IDM606注册
    Java 线程池
  • 原文地址:https://www.cnblogs.com/zhangbao/p/6739329.html
Copyright © 2011-2022 走看看