More than a day to learn a little more knowledge, less write one line of code
in January 2006, the first version of jQuery available, it has been more than six years (Note: As of this point in time is to book time). Although it took so long, but it is still with its simple, flexible programming style people at first sight. In this article, we will talk about jQuery's history, so that readers have a better understanding of jQuery.
In August 2005, John Resig proposed improvements Prototype of "Behaviour" library, he published his thoughts on the blog, and spent three examples do illustrate.
The first example is registered as an event element:
Behaviour.register ({
'#example Li': function (E) {
e.onclick = function () {
this.parentNode.removeChild (the this);
}
}
});
His that should be rewritten as:
. $ ( 'example # Li') the bind ( 'the Click', function () {
this.parentNode.removeChild (the this);
});
the second example is different for the different elements of the registration event:
Behaviour.register ({
'b.someclass': function (E) {
e.onclick = function () {
Alert (this.innerHTML);
}
},
'#someid U': function (E) {
e.onmouseover = function () {
this.innerHTML = "! BLAH";
}
}
});
he thought it should be rewritten as:
$ ( 'b.someclass') the bind (. 'the Click', function () {
Alert (this.innerHTML);
});
$ ( '# someID U') the bind ( 'mouseOver', function (.) {
this.innerHTML = 'BLAH!';
});
section three examples for changing elements of different registration event:
Behaviour.register ({
'#foo Li OL': function (a) {
a.title = "List the Items!";
a.onclick = function () {Alert ( '! the Hello');};
},
'#foo li.tmp OL': function (A) {
a.style.color = 'White';
},
'#foo li.tmp .foo OL': function ( A) {
a.style.= background 'Red';
}
});
he thought it should be rewritten as:
$ ( 'OL foo # Li')
.set ( 'title', 'List the Items!')
.bind ( 'the Click', function () {Alert () 'the Hello!';})
.Select ( 'tmp.' )
.style ( 'Color', 'White')
.Select () 'foo.'
.style ( 'background', 'Red');
these are exactly the jQuery initial prototype syntax. At that time John's idea is simple: he found that the existing grammar is relatively more concise JavaScript library. But he did not think that the article was released it caused widespread concern in the industry. So John began seriously thinking about this thing (write syntax is more concise JavaScript library), until January 14, 2006, John officially announced the release of their names jQuery library. Followed by the rapid development of the jQuery.
In August 2006, the first stable version of jQuery, and has supported CSS selectors, event handling and AJAX interactions.
In July 2007, jQuery 1.1.3 release, this version of the small changes include the jQuery selectors to perform the engine speed is significantly improved. From this version, jQuery performance reached the level of Prototype, Mootools and other similar Dojo JavaScript library. In September, jQuery version 1.2 release, which removed the support for XPath selectors, because it is relative to the CSS syntax has become redundant. This version can effect a more flexible customization, but also by means of the new namespace events, but also to plug-in development easier. Meanwhile, jQuery UI project has started, the new package as a once popular but obsolete alternative project Interface plug-in and released. jQuery UI contains a number of pre-defined parts (the widget), and a set of tools used to build advanced elements (for example, drag and drop, drag, sorting) of.
Note: XPath (XML Path Language, XML Path Language) is to identify the different elements or element values in the XML document in a language, and CSS way to identify elements in an HTML document similar. When it comes to property selectors, jQuery uses XPath to identify properties in practice, is about to attribute a front @ symbol and put a pair of square brackets . For example, to select all links with title attribute, you can use the following code:
$ ( 'A [ @title ]')
but after removing the support jQuery 1.2 XPath selectors, such an approach can not be used, must be used the following code:
$ ( 'a [title]')
in some old plug-in code and this problem is more common.
在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，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版发布。该版本做了如下修改：
（2）提供了更高级的统一的API。
（3）更好的扩展性，可以方便地扩展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"); });
(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
2011年5月，jQuery 1.6版发布。该版本重写了Attribute模块和大量的性能改进。值得注意的是此次更新有2个破坏性的变更，将会影响到现有打算升级到1.6的那些项目。
//html:
<span data-max-value="15" data-min-value="5"></span>
//js:
$('span').data(); //jQuery 1.5.2输出：{"max-value":15,"min-value":5}
$('span').data(); //jQuery 1.6 输出： {"maxValue":15,"minValue":5}
//html:
<input type="text" value="abc">
//js:
$("input:text").attr('value') ; //输出 abc
$("input:text").prop('value') ; //输出 abc
如果用户手动改变文本框的值为“abcdef”，那么：
$("input:text").attr('value') ; //输出 abc
$("input:text").prop('value') ; //输出 abcdef
同样，如果网页中的复选框的代码如下：
<input type="checkbox" checked />
那么结果也会有所不同：
$(":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版发布。该版本做了如下修改：
$(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'); //新
随着页面大小和复杂度的不断增长，事件委托变得越来越重要。比如Backbone, JavaScript MVC和Sproutcore等应用框架都使用了大量的事件委托。考虑到这一点，jQuery 1.7重构了事件委派，使其更加快速，尤其是在大多数常见情况下。图10-1是1.6.4和1.7版本的性能比较，最终的事件委托和1.6.4相比，节省了大约一半的时间：
Some non-standard features are completely removed in version 1.7, such as event.layerX and event.layerY, you can use event.originalEvent.layerX and event.originalEvent.layerY instead.
jQuery.isNaN (): This useful function undocumented has been removed, the new jQuery.isNumeric () provides similar functionality, and can be better supported.
jQuery.event.proxy (): This unpublished and outdated methods have been removed, developers should use public jQuery.proxy method instead.
jQuery All versions of release notes can be found at the official site, available at http://blog.jquery.com/ and HTTP: // jQuery. ORG / History /.
This article is taken "sharp jQuery" (2nd edition)
in January 2006, the first version of jQuery available, it has been more than six years (Note: As of this point in time is to book time). Although it took so long, but it is still with its simple, flexible programming style people at first sight. In this article, we will talk about jQuery's history, so that readers have a better understanding of jQuery.
In August 2005, John Resig proposed improvements Prototype of "Behaviour" library, he published his thoughts on the blog, and spent three examples do illustrate.
The first example is registered as an event element:
Behaviour.register ({
'#example Li': function (E) {
e.onclick = function () {
this.parentNode.removeChild (the this);
}
}
});
His that should be rewritten as:
. $ ( 'example # Li') the bind ( 'the Click', function () {
this.parentNode.removeChild (the this);
});
the second example is different for the different elements of the registration event:
Behaviour.register ({
'b.someclass': function (E) {
e.onclick = function () {
Alert (this.innerHTML);
}
},
'#someid U': function (E) {
e.onmouseover = function () {
this.innerHTML = "! BLAH";
}
}
});
he thought it should be rewritten as:
$ ( 'b.someclass') the bind (. 'the Click', function () {
Alert (this.innerHTML);
});
$ ( '# someID U') the bind ( 'mouseOver', function (.) {
this.innerHTML = 'BLAH!';
});
section three examples for changing elements of different registration event:
Behaviour.register ({
'#foo Li OL': function (a) {
a.title = "List the Items!";
a.onclick = function () {Alert ( '! the Hello');};
},
'#foo li.tmp OL': function (A) {
a.style.color = 'White';
},
'#foo li.tmp .foo OL': function ( A) {
a.style.= background 'Red';
}
});
he thought it should be rewritten as:
$ ( 'OL foo # Li')
.set ( 'title', 'List the Items!')
.bind ( 'the Click', function () {Alert () 'the Hello!';})
.Select ( 'tmp.' )
.style ( 'Color', 'White')
.Select () 'foo.'
.style ( 'background', 'Red');
these are exactly the jQuery initial prototype syntax. At that time John's idea is simple: he found that the existing grammar is relatively more concise JavaScript library. But he did not think that the article was released it caused widespread concern in the industry. So John began seriously thinking about this thing (write syntax is more concise JavaScript library), until January 14, 2006, John officially announced the release of their names jQuery library. Followed by the rapid development of the jQuery.
In August 2006, the first stable version of jQuery, and has supported CSS selectors, event handling and AJAX interactions.
In July 2007, jQuery 1.1.3 release, this version of the small changes include the jQuery selectors to perform the engine speed is significantly improved. From this version, jQuery performance reached the level of Prototype, Mootools and other similar Dojo JavaScript library. In September, jQuery version 1.2 release, which removed the support for XPath selectors, because it is relative to the CSS syntax has become redundant. This version can effect a more flexible customization, but also by means of the new namespace events, but also to plug-in development easier. Meanwhile, jQuery UI project has started, the new package as a once popular but obsolete alternative project Interface plug-in and released. jQuery UI contains a number of pre-defined parts (the widget), and a set of tools used to build advanced elements (for example, drag and drop, drag, sorting) of.
Note: XPath (XML Path Language, XML Path Language) is to identify the different elements or element values in the XML document in a language, and CSS way to identify elements in an HTML document similar. When it comes to property selectors, jQuery uses XPath to identify properties in practice, is about to attribute a front @ symbol and put a pair of square brackets . For example, to select all links with title attribute, you can use the following code:
$ ( 'A [ @title ]')
but after removing the support jQuery 1.2 XPath selectors, such an approach can not be used, must be used the following code:
$ ( 'a [title]')
in some old plug-in code and this problem is more common.
2008年5月，jQuery 1.2.6版发布，这版主要是将Brandon Aaron开发的流行的Dimensions插件的功能移植到了核心库中，同时也修改了许多BUG，而且有不少的性能得到提高。因此，如果把你以前的jQuery版本升级到1.2.6，那么你完全可以从你的代码中排除Dimensions插件。
在jQuery迅速发展的同时，一些大的厂商也看中了商机。2009年9月，微软和诺基亚公司正式宣布支持开源的jQuery库，另外，微软公司还宣称他们将把jQuery作为Visual Studio工具集的一部分。他将提供包括jQuery的智能提示、代码片段、示例文档编制等内容在内的功能。微软和诺基亚公司将长期成为jQuery的用户成员，其他成员还有Google，Intel，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模块
（2）提供了更高级的统一的API。
（3）更好的扩展性，可以方便地扩展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()
(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
- 内部开发系统
2011年5月，jQuery 1.6版发布。该版本重写了Attribute模块和大量的性能改进。值得注意的是此次更新有2个破坏性的变更，将会影响到现有打算升级到1.6的那些项目。
- 变更1：更新data()方法
//html:
<span data-max-value="15" data-min-value="5"></span>
//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
//html:
<input type="text" value="abc">
//js:
$("input:text").attr('value') ; //输出 abc
$("input:text").prop('value') ; //输出 abc
如果用户手动改变文本框的值为“abcdef”，那么：
$("input:text").attr('value') ; //输出 abc
$("input:text").prop('value') ; //输出 abcdef
同样，如果网页中的复选框的代码如下：
<input type="checkbox" checked />
那么结果也会有所不同：
$(":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()
$(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'); //新
- 事件委托的性能改进
随着页面大小和复杂度的不断增长，事件委托变得越来越重要。比如Backbone, JavaScript MVC和Sproutcore等应用框架都使用了大量的事件委托。考虑到这一点，jQuery 1.7重构了事件委派，使其更加快速，尤其是在大多数常见情况下。图10-1是1.6.4和1.7版本的性能比较，最终的事件委托和1.6.4相比，节省了大约一半的时间：
- 更好地支持IE 6/7/8下的HTML 5
- 更直观地切换动画
- 异步模块定义(AMD)
- jQuery.Deferred
- jQuery.isNumeric()
- 弃用和删除的功能
Some non-standard features are completely removed in version 1.7, such as event.layerX and event.layerY, you can use event.originalEvent.layerX and event.originalEvent.layerY instead.
jQuery.isNaN (): This useful function undocumented has been removed, the new jQuery.isNumeric () provides similar functionality, and can be better supported.
jQuery.event.proxy (): This unpublished and outdated methods have been removed, developers should use public jQuery.proxy method instead.
jQuery All versions of release notes can be found at the official site, available at http://blog.jquery.com/ and HTTP: // jQuery. ORG / History /.
This article is taken "sharp jQuery" (2nd edition)
Reproduced in: https: //my.oschina.net/cjkall/blog/195837