产生背景
2005年8月,John Resig提议改进Prototype的“Behaviour”库,于是他在blog上发表了自己的想法,并用了3个例子做说明。n第一个例子是为元素注册一个事件:
Behaviour.register({n '#example li': function(e){n e.onclick = function(){n this.parentNode.removeChild(this);n }n }n});
他认为应该改写为:
$('#example li').bind('click',function(){n this.parentNode.removeChild(this);n});n
第二个例子是为不同的元素注册不同的事件:
Behaviour.register({n 'b.someclass' : function(e){n e.onclick = function(){n alert(this.innerHTML);n }n },n '#someid u' : function(e){n e.onmouseover = function(){n this.innerHTML = "BLAH!";n }n }n});
他认为应该改写为:
$('b.someclass').bind('click',function(){n alert(this.innerHTML);n});n$('#someid u').bind('mouseover',function(){n this.innerHTML = 'BLAH!';n});
第三个例子是为不断变化的元素注册不同的事件:
Behaviour.register({n '#foo ol li': function(a) {n a.title = "List Items!";n a.onclick = function(){ alert('Hello!'); };n },n '#foo ol li.tmp': function(a) {n a.style.color = 'white';n },n '#foo ol li.tmp .foo': function(a) {n a.style.background = 'red';n}n});
他认为应该改写为:
$('#foo ol li')n .set('title','List Items!')n .bind('click',function(){ alert('Hello!'); })n .select('.tmp')n .style('color','white')n .select('.foo')n .style('background','red');
这些代码也是jQuery语法的最初雏形。当时John的想法很简单:他发现这种语法相对现有的JavaScript库更为简洁。但他没想到的是,这篇文章一经发布就引起了业界的广泛关注。于是John开始认真思考着这件事情(编写语法更为简洁的JavaScript程序库),直到2006年1月14日,John正式宣布以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),以及一组用于构建高级元素(例如可拖放、拖拽、排序)的工具。
2008年5月,jQuery 1.2.6版发布,这版主要是将Brandon Aaron开发的流行的Dimensions。n插件的功能移植到了核心库中,同时也修改了许多BUG,而且有不少的性能得到提高。因此,如果把你以前的jQuery版本升级到1.2.6,那么你完全可以从你的代码中排除Dimensions插件。
2009年1月,jQuery 1.3版发布,它使用了全新的选择符引擎Sizzle,在各个浏览器下全面超越其他同类型JavaScript框架的查询速度,程序库的性能也因此有了极大提升。这一版本的第2个变化就是提供live()方法,使用live()方法可以为当前及将来增加的元素绑定事件,在1.3版之前,如果要为将来增加的元素绑定事件,需要使用livequery插件,而在1.3版中,可以直接用live()方法。
2010年1月,也是jQuery的四周年生日,jQuery 1.4版发布,为了庆祝jQuery四周岁生日,jQuery团队特别创建了jquery14.com站点,带来了连续14天的新版本专题介绍。
2010年2月,jQuery 1.4.2版发布,它新增了有关事件委托的两个方法:delegate()和undelegate()。delegate()用于替代1.3.2中的live()方法。这个方法比live()来的方便,而且也可以达到动态添加事件的作用。
2011年1月,jQuery 1.5版发布。
2011年5月,jQuery 1.6版发布。该版本重写了Attribute模块和大量的性能改进。
主要功能
1、精准简单的选择对象(dom):
以下为引用的内容:
$('#element');// 相当于document.getElementByI“element”)
$('.element');//Class
$('p');//html标签
$(“form > input”);//子对象
$(“div,span,p.myClass”;//同时选择多种对象
$(“tr:odd”).css(“background-color”, “#bbbbff”)。//表格的隔行背景
$(“:input”);//表单对象
$(“input[name='newsletter']”);//特定的表单对象
2、对象函数的应用简单和不限制:
element.function(par);
$(”p.surprise”).addClass(”ohmy”).show(”slow”)...
3、对已选择对象的操作(包括样式):
以下为引用的内容:
$(“#element”).addClass(“selected”);//给对象添加样式
$('#element').css({ “background-color”:“yellow”, “font-weight”:“bolder” });//改变对象样式
$(“p”).attr({ src:“test.jpg”, alt: “Test Image”});//改变对象文本
$(“p”).find(“span”;//查找对象内部的对应元素
$(“p”).parent();//对象的父级元素
$(“p”).append(“Hello”);//给对象添加内容
3、支持aJax,支持文件格式:xml/html/script/json/jsonp
以下为引用的内容:$(“#feeds”),load(“feeds,html”),//相应区域导入静态页内容$(“#feeds”),load(“feeds.php”, {limit: 25}, function(){alert(“The last 25 entries in the feed have been loaded”);});//导入动态内容
4、对事件的支持:
以下为引用的内容:
$(“p”),hover(function () {$(this).addClass(“hilite”);//鼠标放上去时}, function () {$(this).removeClass(“hilite”);//移开鼠标 });//鼠标放上去和移开的不同效果(自动循环所有p对象)
5、动画:
以下为引用的内容:
$(“p”),show(“slow”);//隐藏对象(慢速渐变)
$(“#go”),click(function(){
$(“#block”),animate({width:“90%”, height: “100%”。fontSize:“10em”}, 1000 );});//鼠标点击后宽、高、字体的动态变化
6、扩展:
以下为引用的内容:
$.fn.background = function(bg){ return this.css('background', bg);};
$(#element).background(“red”);如果要为每一个jQuery对象添加一个函数,必须把该函数指派给 $.fn,同时这个函数必须要返回一个this(jQuery对象)
运行环境
从 jQuery 3.0 开始,支持以下浏览器:n浏览器:9+nChrome、Edge、Firefox、Safari:当前和当前 - 1n歌剧:当前nSafari 移动版 iOS:7+n安卓 4.0+njQuery 团队的政策是只更改对主要版本更新的浏览器支持,因此此列表将适用于至少 jQuery 4 到来。
插件
Ajax
Animation and Effects
Browser Tweaks
Data
DOM
Drag-and-Drop
Events
Forms
Integration
JavaScript
jQuery Extensions
Layout
Media
Menus
Navigation
Tables
User Interface
Utilities
Widgets
Windows and Overlays
UI库
基本的鼠标互动:拖拽(drag and dropping)、排序(sorting)、选择(selecting)、缩放(resizing)
各种互动效果:手风琴式的折叠菜单(accordions)、日历(date pickers)、对话框(dialogs)、滑动条(sliders)、表格排序(table sorters)、页签(tabs)、放大镜效果(Magnifier)、阴影效果(shadow)
版本
jQuery 3.6.0 已经发布!在 jQuery 3.5.0 中,主要的变化是对 html prefilter的安全修复。此版本不包括安全修复,但确实有一些很好的错误修复和改进。以下是 jQuery 3.6.0 的亮点:n即使对于 JSONP 错误也返回 JSONn在以前的版本中,当 JSONP 请求响应错误时,通常响应仍然是一个可执行脚本。已更改默认行为以尝试在这种情况下执行响应。遇到错误时仍会跳过普通脚本。n修复n一个值得强调的错误与将焦点重定向到焦点处理程序中的另一个元素有关。以在另一个焦点处理程序中触发焦点处理程序的示例为例:n
elem1.on(“focus”,function(){n elem2.trigger("focus");n});
由于它们在 IE 之外的任何地方都是同步的,因此在 3.4.0 中添加的一个修复程序利用本地事件导致本地.focus()方法最后调用初始元素,使其重新获得焦点。虽然代码继续利用本机焦点和模糊事件,但我们能够通过更多地与本机方法对齐并仅将最后一个焦点事件向上传播到 DOM 树来解决此问题。n其他错误修复和改进包括在 Firefox 中检索表行上的维度的修复,修复了在已删除元素上触发焦点事件时 Chrome 崩溃的修复,对一些测试的一些改进等等。



















