jQuery 1.6 现已正式发布,可供使用!我们对这个版本感到非常自豪,它包含对属性模块的重大重写以及一些性能改进。
请借此机会感谢 jQuery 团队 和 jQuery 错误分类团队 的成员,感谢他们在发布此版本中提供的帮助。
您可以从 jQuery CDN 获取代码
您也可以从其他 CDN 获取代码
我们鼓励社区中的每个人尝试 参与 为 jQuery 核心做出贡献。我们已经创建了一个 完整页面 的信息,专门用于帮助您更多地参与团队。团队随时准备帮助您帮助我们!
事实上,我们已经开始着手进行 jQuery 1.7 的工作。我们欢迎 为 jQuery 1.7 提交功能建议。如果您有任何建议,请使用上述表格提交。
jQuery 1.6 更改日志
此版本中发生的所有 API 更改都可以在 jQuery API 文档中找到
https://api.jqueryjs.cn/category/version/1.6/
重大更改
在大多数版本中,我们都努力与现有代码保持兼容性。但是,在某些情况下,jQuery 1.6 可能需要对现有代码进行更改
data-
属性的大小写映射
jQuery 1.5 在 .data()
方法中引入了这样一项功能,该功能会自动导入元素上设置的所有 data-
属性,并使用 JSON 语义将其转换为 JavaScript 值。在 jQuery 1.6 中,我们更新了此功能,使其与 W3C HTML5 规范 中关于驼峰式大小写数据属性(包含嵌入的连字符)的规定一致。因此,例如在 jQuery 1.5.2 中,data-max-value="15"
的属性会创建一个数据对象 { max-value: 15 }
,但从 jQuery 1.6 开始,它会设置 { maxValue: 15 }
。
.prop()
、.removeProp()
和 .attr()
在 1.6 版本中,我们已将 DOM 属性和 DOM 特性的处理拆分为独立的方法。新的 .prop()
方法用于设置或获取 DOM 元素的属性,而 .removeProp()
用于删除属性。过去,jQuery 并没有明确区分属性和特性。通常,DOM 属性表示从文档中检索到的 DOM 信息的状态,例如标记 <input type="text" value="abc">
中的 value
属性。DOM 特性表示文档的动态状态;例如,如果用户在上面的输入元素中单击并键入 def
,则 .prop("value")
为 abcdef
,但 .attr("value")
仍然为 abc
。
在大多数情况下,浏览器将属性值视为特性的初始值,但布尔属性(如 checked
或 disabled
)具有特殊的语义。
例如,考虑标记 <input type="checkbox" checked>
。checked
属性的存在意味着 DOM .checked
特性为 true
,即使属性没有值。在上面的代码中,checked
属性值为一个空字符串(如果未指定属性,则为 undefined
),但 checked
特性值为 true
。
在 jQuery 1.6 之前,.attr("checked")
返回布尔特性值 (true
),但从 jQuery 1.6 开始,它返回属性的实际值(一个空字符串),该值在用户单击复选框以更改其状态时不会改变。
有几种方法可以检查复选框的当前选中状态。最好且最有效的方法是直接使用 DOM 特性,如在事件处理程序中使用 this.checked
,其中 this
引用被单击的元素。在使用 jQuery 1.6 或更高版本的代码中,新方法 $(this).prop("checked")
获取与 this.checked
相同的值,并且速度相对较快。最后,表达式 $(this).is(":checked")
适用于所有版本的 jQuery。
Ajax
修复的错误
- #6481: 回滚 $.param 应该将空数组/对象视为空字符串
- #7881: 使其与 XHR 2 兼容
- #8417: 当 POST AJAX 数据中包含 “??”,则将其格式化为 jQuery<timestamp>?
- #8744: .ajax() jsonp 请求在超时时无法正确处理
- #8884: jqXHR 破坏了自定义报头字段的名称
属性
性能改进
测试和数据
.prop()
、.removeProp()
和 .attr()
(参见上面“重大更改”部分中关于更改内容的描述。)
布尔属性
在 jQuery 1.6 中,布尔属性(如 selected、checked 等)现在可以通过将 true
或 false
传递给 .attr()
来切换,以添加或删除它们。例如
$("#checkbox").attr("checked", true); // Checks it
$("#checkbox").attr("checked", false); // Unchecks it
.attr() 和 .val() 的可扩展性
添加了两个新的钩子,以便更轻松地为特定属性(jQuery.attrHooks)或表单输入值(jQuery.valHooks)添加特殊处理。
例如
jQuery.attrHooks.selected = {
set: function( elem, value ) {
if ( value === false ) {
jQuery.removeAttr(elem, “selected”);
return value;
}
}
};
这两个钩子的行为与 jQuery 的内置 CSS 钩子非常相似(允许您为属性(或值)指定获取或设置方法),以便处理这些特定情况。
修复的错误
- #1591: IE“无效参数”$(‘table’).attr(‘non-existent’)
- #3116: .attr 无法与 SVG IDL 一起使用
- #3786: removeAttr 应该使用 jQuery.props
- #4283: .attr(‘checked’) & XHTML 1.1 Strict
- #4464: IE 无法获取已分离 IMG 元素的宽度属性
- #4978: jQuery.prop 缺少 cellpadding?
- #5413: 标签 “img” 的宽度/高度属性为零 (IE)
- #6562: 使用 .attr() 设置 ‘target’ 属性,节点的 ID 为 ‘target’
- #6708: Opera 对 usemap 属性值的处理结果不一致
- #6823: 使 .val(value) 对于常见用例更快速
- #7472: $(‘form’).attr(‘id’) 返回 DOM 元素
- #7485: [attribute] 选择器和 attr() 方法之间不一致
- #7709: 从非 Chrome Firefox/3.5.15 访问 ‘nodeType’ 属性时拒绝权限
- #7996: Safari $(‘script’).attr(‘event’); 错误
- #8117: .removeAttr 无法与 select 元素的 size 属性一起使用
- #8150: Webkit 和 Firefox 中的 removeAttr 问题
- #8255: 支持 list 属性
- #8418: 使用 attr() 方法在 IE 7 中设置 name 参数
- #8457: attrHooks
- #8570: .val 方法对 IE9 中动态创建的单选按钮返回 “on”
- #8699: .attr() 在缺少属性时返回 -1 而不是 undefined
- #8772: 使用 .attr() 设置 input 类型为 ‘range’ 会在 IE9 中导致脚本错误
- #8997: 不支持新属性 “form” (HTML5),.attr(‘form’) 无法正常工作
- #9037: $(‘blah’).attr(‘onclick’) 在 Firefox 中返回事件
构建
修复的错误
核心
jQuery.map( Object )
现在可以使用 jQuery.map 方法映射 JavaScript 对象的属性。例如
var counts = { first: 1, second: 2 };
counts = jQuery.map( counts, function( value ) {
return value++;
});
修复的错误
- #2616: 更好的 jQuery.map
- #4366: $.each 在 IE 中使用 document.styleSheets 时失败
- #6690: 存储对 location 和 navigator 对象的引用
- #7049: 使 jQuery.noConflict() 随时可调用
- #7783: 修正 $.proxy 以像 (并使用) Function.prototype.bind 一样工作
- #7862: jQuery.globalEval(): Firefox 中远程脚本延迟执行
- #7990: 在 Firefox 中使用 jQuery 构造函数创建大型 HTML 块时出现脚本空间配额耗尽错误
- #8893: jQuery.proxy( context, name ) 在 1.6b1 中存在错误
- #8984: jQuery 无法正确解析字符串中的 html!
- #8993: jQuery.map( emptyNodeList ) 正在枚举属性。
CSS
相对 CSS
我们移植了 .animate() 方法的功能,使您能够使用相对值更新 CSS 属性。现在,您可以为 CSS 值添加前缀 “+=” 或 “-=” 以相对于当前值更新属性。
// Move an item 10px over
$("#item").css("left", "+=10px");
修复的错误
- #6135: jQuery 尝试访问文本标签的 .style 属性
- #7345: 支持 $().css() 的相对值
- #7730: offset.js: setOffset 使用 parseInt 解析可能包含浮点数的 css 值
- #8401: 对 opacity cssHooks 的小幅增强
- #8402: jQuery.cssProps 在除了 IE6/7/8 之外的所有浏览器中都是无用的
- #8403: jQuery 在分配不透明度时破坏了其他 IE 过滤器
数据
性能改进
通过提高事件触发的性能,.data()
取得了巨大的性能改进。jQuery 的 .data()
方法触发 getData 和 setData 事件,这些事件允许插件实现更高的可扩展性水平,改进它们的触发方式可以使 .data()
变得更快。
测试和数据
修复的错误
- #7328: data-foo-bar 应该可以通过 .data( ‘fooBar’ ) 和 .data( ‘foo-bar’ ) 访问
延迟对象
deferred.always()
在 1.5 中,当您想在延迟对象被解决或拒绝时执行完全相同的操作时,您必须使用命名函数并将其两次传递给 “then”
function callback() {
// the deferred has been resolved or rejected
}
defer.then( callback, callback );
使用 “always”,您可以直接执行
defer.always(function() {
// the deferred has been resolved or rejected
});
deferred.pipe()
链接异步任务可能很繁琐,尤其是在您想为整个链返回一个 Promise 时
function chainedAjax( url ) {
return $.Deferred(function( defer ) {
$.ajax( url ).then( function( url2 ) {
$.ajax( url2 ).then( defer.resolve, defer.reject )
}, defer.reject ).promise();
});
}
使用 “pipe”,一切都变得更易读且更自然
function chainedAjax( url ) {
return $.ajax( url ).pipe(function( url2 ) {
return $.ajax( url2 );
});
}
它还可以用于过滤解决和/或拒绝值
var request = $.ajax( url ).pipe(function( data ) {
return data.value;
});
request.done(function( value ) {
// we get the value field of the original response
});
效果
同步动画
在 jQuery 中,您可以同时运行多个动画(甚至可以在同一个元素上同时运行多个动画,动画不同的属性)。在 1.6 中,我们引入了一项增强功能,确保所有动画同步到同一个定时器间隔。这可能会在以前造成问题,因为动画可能会略微不同步(甚至相差几毫秒),从而导致动画略微“偏离”。
更流畅的动画
此外,jQuery 现在使用浏览器提供的新的 requestAnimationFrame 方法,使我们的动画更加流畅。我们可以使用此功能来避免调用定时器,而是依赖浏览器提供最佳的动画体验。
.promise()
就像之前的 $.ajax()
一样,$.animate()
获取 “延迟对象”。jQuery 对象现在可以返回一个 Promise 来观察集合中的所有动画何时完成
$(".elements").fadeOut();
$.when( $(".elements") ).done(function( elements ) {
// all elements faded out
});
修复的错误
- #7917: .animate() 在与大量元素组一起使用时无法 “同步”
- #7934: $.fn.animate 实现延迟对象
- #7974: 清理 effects.js 以提高性能并减少文件大小
- #8099: SPAN 元素在 show() 时变为块级元素
- #8101: 在可用时使用 requestAnimationFrame 而不是 setInterval 来进行动画
事件
性能改进
(如在讨论 .data()
性能时所述,事件触发的性能已经得到改进。)
jQuery.holdReady()
jQuery 提供了一种机制来延迟 ready 事件的执行(主要用于插件作者)。该机制的 API 在 1.6 中得到了改进,最终形成了一个简单易用的方法
jQuery.holdReady( true ); // Pause execution of ready event
// later...
jQuery.holdReady( false ); // Resume execution
修复的错误
- #5884: 实时 mouseenter/mouseleave 事件在嵌套时无法按预期触发
- #6514: 如果通过 live 绑定,则 Mouseenter 和 mouseleave 事件无法触发
- #6913: 命名空间事件冒泡错误
- #6993: .bind() 和 .one() 不允许函数作为数据
- #7071: 访问 VML 元素的 ‘type’ 属性在 IE 中失败
- #7883: .delegate (和 .live) 应该接受 false 作为 fn 参数,就像 .bind 一样
- #8018: 对 frameElement 的不安全访问会导致跨域 (i)frame 中的错误
- #8272: 纯 JS 对象事件处理程序中的异常被 jQuery 吞并
- #8712: 自定义事件不会冒泡到窗口
- #8732: IE9 focusin/focusout 的错误功能检测
- #8753: jQuery 1.6: jQuery.Event 构造函数支持设置属性
- #8755: 在 IE6、7、8 中,绑定到 beforeunload 会在页面卸载时抛出错误
- #8777: jQuery 1.6: undelegate() 接受自定义命名空间事件
- #8788: 重组 jQuery.event.trigger 以使用循环而不是递归
- #8790: 优化未附加的事件,如数据事件
- #8803: jQuery.holdReady() 方法
操作
修复的错误
- #1954: val() 在 IE 中对按钮元素返回 innerHTML
- #6180: jQuery.clean 不应该触碰类型不是 text/javascript 的脚本标签
- #7623: 在 replaceWith 中抛出异常
- #7885: jQuery .offset 当当前偏移量为浮点数 (这在 FireFox 中是可能的) 时无法正常工作。
- #8060: 将 checked 设置为 true 时,断开的复选框在附加到 DOM 之后不会保留。
- #8500: 单选按钮和复选框在 IE 中被包裹后会恢复到默认 (HTML) 状态
杂项
修复的错误
- #8203: 删除不必要的“someVar = null;”
- #8851: 在源代码和测试中用双引号将字符串括起来
- #8882: 测试: 更新 QUnit 使用方式,将 id=main 替换为 id=qunit-fixture
偏移量
修复的错误
- #7931: 当对空 jQuery 对象调用 scrollTop 和 scrollLeft 设置器时,它们返回 null
选择器
:focus
选择器
在 jQuery 1.6 中,我们现在确保 :focus
选择器在所有浏览器中都能正常工作。您可以使用此选择器查找页面上当前获得焦点的元素(例如表单输入)。
$("input:focus").addClass("active");
- #3685: 选择器对包含名为“name”的元素的表单不起作用
- #4321: $(“#”) 返回 undefined
- #8105: :focus 选择器过滤器
支持
修复的错误
- #9028: 如果使用 body 背景图片,IE8 在加载 1.6rc1 时会崩溃
遍历
find()
、closest()
和 is()
现在都接受 DOM 元素和 jQuery 对象
在 jQuery 1.6 中,我们确保 find()
、closest()
和 is()
都可以接受 DOM 元素和 jQuery 对象作为参数。这为您提供了根据传入元素过滤元素集的替代方法。
// Only returns .test elements if they're inside of a div
$("div").find( $(".test") )
修复的错误
- #2773: $.fn.is 和 $.fn.not 应该接受 DOMelements 和 jQuery 集合
- #5712: 允许 jQuery.fn.is 接受一个函数
- #6912: $().add(selectElement) 添加选项子节点而不是
- #7369: $(‘<div>ff</div>’).closest(‘[attr]’); 在所有浏览器中引发异常
- #8609: .find(” “) 的结果为 undefined