javascript代码实例教程-jQuery的发展史,你知道吗?

发布时间:2019-02-10 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-jQuery的发展史,你知道吗?脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。 每天多学一点知识,就少写一行代码
2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见倾心。在本篇文章中,我们将讲述jquery的发展历史,让读者对jQuery有更多的了解

2005年8月,John Resig提议改进PRototyPE的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做说明。

第一个例子是为元素注册一个事件:
Behaviour.register({
'#example li': function(e){
e.onclick = function(){
this.parentNode.removeChild(this);
}
}
});
他认为应该改写为:
$('#example li').bind('click',function(){
this.parentNode.removeChild(this);
});
第二个例子是为不同的元素注册不同的事件:
Behaviour.register({
'b.someclass' : function(e){
e.onclick = function(){
alert(this.innerHTML);
}
},
'#someid u' : function(e){
e.onmouseover = function(){
this.innerHTML = "BLAH!";
}
}
});
他认为应该改写为:
$('b.someclass').bind('click',function(){
alert(this.innerHTML);
});
$('#someid u').bind('mouseover',function(){
this.innerHTML = 'BLAH!';
});
第三个例子是为不断变化的元素注册不同的事件:
Behaviour.register({
'#foo ol li': function(a) {
a.tITle = "List Items!";
a.onclick = function(){ alert('Hello!'); };
},
'#foo ol li.tmp': function(a) {
a.style.color = 'white';
},
'#foo ol li.tmp .foo': function(a) {
a.style.background = 'red';
}
});
他认为应该改写为:
$('#foo ol li')
.set('title','List Items!')
.bind('click',function(){ alert('Hello!'); })
.select('.tmp')
.style('color','white')
.select('.foo')
.style('background','red');
这些代码也是jQuery语法的最初雏形。当时John的想法很简单:他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是,这篇文章一经发布就引起了业界的广泛关注。于是John开始认真思考着这件事情(编写语法更为简洁的JavaScript程序库),直到2006年1月14日,John正式宣布以jQuery的名称发布自己的程序库。随之而来的是jQuery的快速发展。
2006年8月,jQuery的第一个稳定版本,并且已经支持CSS选择符、事件处理AJAX交互。
2007年7月,jQuery 1.1.3版发布,这次小版本的变化包含了对jQuery选择符引擎执行速度的显著提升。从这个版本开始,jQuery的性能达到了Prototype、Mootools以及Dojo等同类JavaScript库的水平。同年9月,jQuery 1.2版发布,它去掉了对xpath选择符的支持,原因是相对于CSS语法它已经变得多余了。这一版能够对效果进行更为灵活的定制,而且借助新增的命名空间事件,也使插件开发变得更容易。同时,jQuery UI项目也开始启动,这个新的套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含大量预定义好的部件(widget),以及一组用于构建高级元素(例如可拖放、拖拽、排序)的工具。
注意:XPath(XML Path Language,XML路径语言)是在XML文档中识别不同元素或者元素值的一种语言,与CSS在HTML文档中识别元素的方式类似。在涉及属性选择符时,jQuery使用了XPath中的惯例来标识属性,即将属性前置一个@符号并放在一对方括号中。例如,要选择所有带title属性的链接,可以使用下面的代码:
$('a[@title]')
但在jQuery 1.2去掉对XPath选择符的支持后,这种写法就不能用了,必须使用如下代码:
$('a[title]')
在一些老的代码和插件中这种问题比较常见。

2008年5月,jQuery 1.2.6版发布,这版主要是将brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中,同时也修改了许多BUG,而且有不少的性能得到提高。因此,如果把你以前的jQuery版本升级到1.2.6,那么你完全可以从你的代码中排除Dimensions插件。


注意:Dimensions插件是一个获得元素尺寸、定位的插件。
在jQuery迅速发展的同时,一些大的厂商也看中了商机。2009年9月,微软和诺基亚公司正式宣布支持开的jQuery库,另外,微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员,其他成员还有GOOGLEIntel,IBM,Intuit等公司。
2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。
注意:Sizzle是jQuery作者John Resig新写的DOM选择器引擎。Sizzle有一个重要的特点,它是完全独立于jQuery的,如果你不想用jQuery,可以只用Sizzle。Sizzle下载地址:http://sizzlejs.COM/
2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。

在1.3及更早版本中,jQuery通过JavaScript的eval方法来解析json对象。在1.4中,如果你用的浏览器支持,则会使用原生的JSON.parse解析json对象,这样对json对象的书写验证则更为严格。比如:{foo: "bar"}的写法将不会被验证为合法的json对象,必须写成{"foo":"bar"}。如果你的程序打算升级到1.4版本,那么这一点要尤其注意。
2010年2月,jQuery 1.4.2版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。比如给表格的每个td绑定hover事件,代码如下:
//1.4.2
$("table").delegate("td", "hover", function(){
$(this).toggleClass("hover");
});
//1.3.2
$("table").each(function(){
$("td", this).live("hover", function(){
$(this).toggleClass("hover");
});
});
2011年1月,jQuery 1.5版发布。该版本做了如下修改:

  • 重写Ajax模块 (1)最大的变化是调用jQuery.ajax(或jQuery.get,jQuery.post等)会返回jqXhr的对象,为不同浏览器内置的XMLHttpRequest对象提供了一致的超集,可以完成以前不可能完成的任务,比如:中止JSONP请求。
    (2)提供了更高级的统一API
    (3)更好的扩展性,可以方便地扩展Ajax的发送与接收,管理Ajax请求。

    • 新增延迟对象 开发人员借此可以使用无法立即获得的返回值(如异步Ajax请求的返回结果),而且第一次能够附加多个事件处理器
      比如,使用新的jQuery Ajax API实现下面的代码:
      // 发出请求,并记住jqxhr对象
      VAR jqxhr = $.ajax({ url: "example.php" })
      .success(function() { alert("success"); })
      .error(function() { alert("error"); })
      .complete(function() { alert("complete"); });
      // 这里可以做其它工作 ...
      // 完成另一个功能
      jqxhr.complete(function(){ alert("second complete"); });

      • jQuery.sub() 可以方便地创建jQuery副本,不影响原有的jquery对象,避免jQuery冲突。示例代码如下:
        (function(){
        var sub$ = jQuery.sub();
        sub$.fn.myCustomMethod = function(){
        return 'just for me';
        };
        sub$(document).ready(function() {
        sub$('body').myCustomMethod() ; // 'just for me'
        });
        })();

        alert( typeof jQuery('body').myCustomMethod ); // undefined

        • 内部开发系统 jQuery团队内部开发系统的两点改变:一是服务器端用NodeJS替换了老的Java/Rhino系统,使得团队可以专注于JavaScript环境的新变化;二是所用的代码压缩优化程序从Google Closure Compiler切换到UglifyJS,新工具的压缩效果非常令人满意。
          2011年5月,jQuery 1.6版发布。该版本重写了Attribute模块和大量的性能改进。值得注意的是此次更新有2个破坏性的变更,将会影响到现有打算升级到1.6的那些项目。

          • 变更1:更新data()方法 在jQuery1.5中,data()方法可以用来将元素上的数据属性转化为JSON形式的值。JQuery 1.6已经更新了此功能,data()方法获取的值会以驼峰形式展示,以配合W3C HTML5规范。比如:
            //html:

            //js:
            $('span').data(); //jQuery 1.5.2输出:{"max-value":15,"min-value":5}
            $('span').data(); //jQuery 1.6 输出: {"maxValue":15,"minValue":5}

            • 变更2:独立方法处理DOM属性,以区分DOM的attributes和properties 一般情况下,attributes表示从文档中获取DOM的状态信息,而properties表示元素的动态状态信息。比如:
              //html:

              //js:
              $("input:text").attr('value') ; //输出 abc
              $("input:text").prop('value') ; //输出 abc
              如果用户手动改变文本框的值为“abcdef”,那么:
              $("input:text").attr('value') ; //输出 abc
              $("input:text").prop('value') ; //输出 abcdef
              同样,如果网页中的复选框的代码如下:

              那么结果也会有所不同:
              $(":checkbox").attr('checked'); //输出'',空字符串
              $(":checkbox").prop('checked'); //输出 true
              所以在jQuery 1.6中,如果要判断复选框是否选中,需在事件处理程序中使用:
              $(this).prop("checked")
              //或者 $(this).is(":checked")

              由于jQuery 1.6对attr()方法的改变,导致很多使用attr()方法的程序出现问题,必须修改为1.6的语法才能使用,这个不向前兼容的改变引起了开发的强烈不满。于是在不到10天的时间里,jQuery 1.6.1发布,它调整了attr()方法,使其兼容1.6之前的做法。比如:
              $(":checkbox").attr("checked", true);
              $("option").attr("selected", true);
              $("input").attr("readonly", true);
              $("input").attr("disabled", true);
              if( $(":checkbox").attr("checked") ) { /* Do something */ }
              2011年11月,jQuery 1.7版发布。该版本做了如下修改:

              • 新的事件API:on()和off() 新的on()和off()API统一了jQuery中所有对文档绑定事件的操作,而且它们也更加简短。代码如下:
                $(elements).on( events [, selector] [, data] , handler );
                $(elements).off( [ events ] [, selector] [, handler] );
                其中on()替代了之前版本中的bind()、delegate()和live();off()替代了unbind()、undelegate()和die()。下面代码是新旧API调用之间对应的例子:
                $('a').bind('click', myHandler); //旧
                $('a').on('click', myHandler); //新

                $('form').bind('submit', { val: 42 }, fn); //旧
                $('form').on('submit', { val: 42 }, fn); //新

                $(window).unbind('scroll.myPlugin'); //旧
                $(window).off('scroll.myPlugin'); //新

                $('.comment').delegate('a.add', 'click', addNew); //旧
                $('.comment').on('click', 'a.add', addNew); //新

                $('.diaLOG').undelegate('a', 'click.myDlg'); //旧
                $('.dialog').off('click.myDlg', 'a'); //新

                $('a').live('click', fn); //旧

                $(document).on('click', 'a', fn); //新
                $('a').die('click'); //旧

                $(document).off('click', 'a'); //新

                • 事件委托的性能改进

                  javascript代码实例教程-jQuery的发展史,你知道吗?

                  vcC01L3W2NKqoaOxyMjnQmFja2JvbmUsIEphdmFTY3JpcHQgTVZDus1TcHJvdXRjb3JltcjTptPDv/K83La8yrnTw8HLtPPBv7XEysK8/s6vzdCho7+8wse1vdXi0ru146OsalF1ZXJ5IDEuN9bYubnBy8rCvP7Or8XJo6zKucbkuPy807/sy9mjrNPIxuTKx9TatPO24Mr9s6O8+8fpv/bPwqGjzbwxMC0xyscxLjYuNLrNMS43SOAxvrXE0NTE3LHIvc+jrNfu1tW1xMrCvP7Or83Qus0xLjYuNM/gscijrL3ayqHBy7Tz1LzSu7DrtcTKsbzko7o8YnI+Cjxicj4KPHVsPgo8bGk+uPy6w7XY1qez1klFIDYvNy84z8K1xEhUTUwgNQrIzrrOytTNvNTaSUUgNi83LzjW0Mq508PQwrXEwOamizIwMjg0O9PaPHNlY3Rpb24+tcRIVE1MIDWx6sepo6y6wc7e0snOyra8u+HT9rW9SUUgNi83LzjO3reoveLO9tXi0Kmx6sepo6zJ9dbBvavV4tCpserHqBTTzsS1tdbQ0saz/bXEzsrM4qGj1NpqUXVLCnkgMS431tCjrM6qvc++yUlFsOaxvtbQaHRtbCgp0rvA4LXEt723qL2owaLBy7bUSFRNTAogNbXE1qez1qGj1eLSu7mmxNy6zdLUx7C1xGlubmVyU2hpds/gzayjrLWrxOPI1Mi70OjSqtTaxOO1xM7EtbXNt7K/vNPI60hUTUw1U2hpdqOou/LV301vZGVybml6cqOp0tTKub7JSUWw5rG+1qez1khUTUwgNbHqx6mho8jn0OjSqrj8tuDXysHPo6zH67Lpv7RUaGUgU3Rvcnkgb2YgdGhlIEhUTUw1IFNoaXajqGh0dHA6Ly9wYXVSAXJpc2guY29tLzIwMTEvdGhlLWhpc3Rvcnktb2YtdGhlLWh0bWw1LXNoaXYvo6mhozxicj4KPGJyPgo8dWw+CjxsaT64/Naxudu12MfQu7u2r7utCtTaalF1ZXJ5tcS+ybDmsb7W0KOswOAmIzIwMjg0O9Pac2xpZGVUb2dnbGUoKbvyZmFkZVRvZ2dsZSgptcTH0Lu7tq+7rdTau6XP4LbRt8W6zcew0ru49ravu62xu3N0b3AoKdbV1rnKsc7et6jV/bOjuaTX96Gj1NoxLjew5rG+1tDV4tK7x+m/9rG70N64tKOstq+7rc+1zbO74bzh16HUqsvYtcSz9cq8JiMyMDU0MDuyotTa0ru49sfQu7u1xLavu62xu8zhx7DW1da5yrHW2NbDy/zDx6GjpgJyPgo8YnI+Cjx1bD4KPGxpPtLssr3Eo7/ptqjS5ShBTUQpCmpRdWVyeSAxLjfWp7PWQU1Euea3tqOsv8nS1Lrn1/HRrUFNRLnmt7a1xL3Fsb6809TYxvfQrDF3o6yxyMjnUmVxdWlyZUpTu/LV32N1cmwuanOhozxicj4KPGJyPgoKPHVsPgo8bGk+alF1ZXJ5LkRlZmVycmVkCmpRdWVyES5EZWZlcnJlZLbUz/Oz/cHLzOG5qdDCtcS9+LbItKbA7bywzajWqre9t6jWrs3io6zNrMqx0rLQwtT20ru49r/J08PAtMihtcPEv8ewRGVmZXJyZWTXtMystcRzdGF0ZSgpt723qKGjRGVmZXJyZWTSss2ouf1qUXVlcnkuQ2FsbGJhY2tzu/rWxsC0zOG5qbj4v6q3otXf0ru49s2z0ru1xMrCvP60psdtvdO/2qGjPGJyPgo8YnI+Cjx1bD4KPGxpPmpRdWVyeS5pc051bWVyaWMoKQrU2sq508NqUXVlcnm1xLn9s8zW0KOs09DKsbry0OjSqtaqtcDSu7j2ss7K/crHyv0mIzIwNTQwO7vyv8nS1LG7s8m5prXE16q7u86qyv0mIzIwNTQwO7XEx+m/9qGjy/nS1GpRdWVyeb+qt6Kyormrv6pqUXVlcnkuaXNOdW1lcmljKCm3vbeooaPOqsv8tKu13dK7uPbIztLiwODQzbXEss7K/aOsy/y9q7bU06a1xLe1u9h0cnVlu/JmYWxzZaGjPGJyPgo8YnI+Cjx1bD4KPGxpPsb608O6zcm+s/21xLmmxNwKalF1ZXJ5vau/qsq8xvrTw7n9yrG1xMzY0NSjrNLUyrm0+sLrv+K4/LzTvqu88qOszazKsczhuN/Q1MTcoaOxyMjnbGl2ZSgpus1kaWUoKdLR1NoxLjew5rG+1tCxu8b608OjrNXi0Km3vbeou7m9q7zM0PjT0NCno6y1q86qwcu85sjd0tS687XEsOaxvrK7vajS6cq508PL/MPHo6y/ydLUyrnTw29uKCmhom9mZigpus1kZWxlZ2F0ZSgp1q7A4LXEtPrM5qGjPGJyPgrSu9Cpt8ex6te8tcTM2NDU1NoxLjew5rG+1tCxu7O5tdfSxrP9wcujrLHIyOdldmVudC5sYXllcli6zWV2ZW50LmxheWVyWaOsv8nS1Mq508NldmVudC5vcmlnaW5hbEV2ZW50LmxheWVyWLrNZXZlbnQub3JpZ2luYWxFdmVudC5sYXllclm0+szmoaM8YnI+Cjxicj4KalF1ZXJ5LmlzTmFOKCmjutXi0rvOtLmrv6q1xMq108O6r8r90tGxu8m+s/2jrNDCtcRqUXVlcnkuaXNOdW1lcmljKCnM4bmpwcvA4CYjMjAyODQ7tcS5psTco6yyosfSv8nS1LG7uPy6w7XE1qez1qGjPGJyPgo8YnI+CmpRdWVyeS5ldmVudC5wcm94eSgpo7rV4tK7zrS5q7+qus25/cqxtcS3vbeo0tGxu8m+s/2jrL+qt6LV39OmyrnTw7mrv6q1xGpRdWVyeS5wcm94ebe9t6i0+szmoaM8YnI+CmpRdWVyecv509Cw5rG+tcS3otDQy7XD97/J0tTU2rnZt73VvRxJSum1vaOszfjWt86qaHR0cDovL2JsB2CuanF1ZXJ5LmNvbS+6zWh0dHA6Ly9qcXVlcnkuIG9yZy9oaXN0b3J5L6GjPGJyPgo8YnI+CjxzdHJvbmc+sb7OxNWq19ShtrfmwPu1xGpRdWVyeaG3KLXaMrDmKTwvc3Ryb25nPjxicj4KPGJyPgo8YnI+CjxpbWcgc3JjPQ=="/uploadfile/Collfiles/20140122/2014012209110283.jpg" alt="/">

                  javascript代码实例教程-jQuery的发展史,你知道吗?


                  觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!

                  脚本宝典总结

                  以上是脚本宝典为你收集整理的javascript代码实例教程-jQuery的发展史,你知道吗?全部内容,希望文章能够帮你解决javascript代码实例教程-jQuery的发展史,你知道吗?所遇到的问题。

                  如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

                  本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
                  如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。