jQuery 1.4 发布啦为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的编程,测试,和记录文档的工作,我们为此感到很骄傲。 我要以个人的名义感谢 Brandon Aaron, Ben Alman, Louis-Rémi Babe, Ariel Flesler, Paul Irish, Robert Kati?, Yehuda Katz, Dave Methvin, Justin Meyer, Karl Swedberg, and Aaron Quint。谢谢他们在修复BUG和完成这次发布上所做的工作。 下载(Downloading)按照惯例,我们提供了两份jQuery的拷贝,一份是最小化的(我们现在采用Google Closure作为默认的压缩工具了),一份是未压缩的(供纠错或阅读)。 另外,Google也在他们的服务器上放置了一份jQuery的拷贝。这份拷贝会自动的最小化然后压缩 – 并且放在Google最快的缓存服务器上。 你可以在你的站点上直接引用上面的URL,这样就可以享受迅速加载jQuery的性能优势了。 就jQuery1.4来说,我们努力的减少大规模升级中的麻烦 – 通过保持所有public函数的签名。即使如此,还请通读可能会造成问题的变更列表,这样能够了解哪些变更可能会给你的应用造成问题。 (功能) Features下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在jQuery 1.4 的文档里记录了。 热门方法经过了性能上的大”检修”不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部,外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升,通过把jQuery和自己比较: 查看内部函数被调用了多少次,然后努力降低源码的复杂度(译注:计算机算法中的Complexity) 在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。 更易用的设置函数 (Easy Setter Functions)算来已经有一阵了,你们已经可以给 另外, 对于下面几个方法,当前的值会被作为第2个变量传递给这个函数。 这样代码就可以这样写: // 找出所有A标签里的'&'字符,然后用一个span标签包围$('a').html(function(i,html){return html.replace(/&/gi,'&');});// 给一些链接的title属性加些信息$('a[target]').attr("title", function(i,title){return title + " (新窗口打开)";}); Ajax嵌套参数的序列化 (jQuery.param() 文档, Commit 1, Commit 2) jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持,借用了PHP编程里兴起的,而后又被Ruby on Rails推广开来的方式。 在jQuery 1.3版里, 总共有3种方式可以切换到旧的序列化方式: // 全局改变序列化方式 (使用旧的)jQuery.ajaxSettings.traditional = true;// 指定情况使用旧的序列化方式jQuery.param( stuff, true );// 针对一个单独的Ajax请求使用旧的序列化方式$.ajax({ data: stuff, traditional: true }); 更多信息参见: jQuery.param() 文档, jQuery.ajax() 文档, Commit, Code JSON和脚本类型通过”content-type”自动识别。 (jQuery.ajax 文档, Commit 1, Commit 2) 如果一个Ajax请求的回复的媒体类型是JSON(application/json), dataType默认设为”json”(如果dataType没有被指明)。另外,如果回复的媒体类型是 Javascript(application/javascript), dataType默认设为”script”(同样,如果dataType没有明确指明), 这种情况下,脚本会自动运行。 加入了Etag的支持 (jQuery.ajax() 文档, Commit) 默认设置下, jQuery会忽略Ajax请求的”Last-Modified”页头。这样做是为了忽略浏览器的缓存。设置ifModified:true就可以使 jQuery使用可用的缓存。jQuery1.4还会发出”If-None-Match”的页头如果你设置了ifModified选项。 严格JSON模式,本地的JSON.parse方法 (jQuery.ajax() 文档, Commit 1, Commit 2, Commit 3) jQuery 1.3和以前的版本曾使用Javascript的 序列化HTML5的元素 (jQuery.param() 文档, Commit) 新的HTML5输入方法 (比如’datetime’和’range’)在序列化 Ajax请求的环境 (jQuery.ajax() 文档, Commit) 你可以附加一个”环境”到Ajax请求上,所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码,尽可能避免使用闭合,或是其他对象)。 jQuery.ajax({url: "test.html",context: document.body,success: function(){jQuery(this).addClass("done");}}); 请求成功回调函数的第三个参数会被设为原始的XHR对象 (jQuery.ajax() 文档, Commit) 所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象,作为第三个参数。之前这个XHR对象只能通过 明确设置”Content-Type” (jQuery.ajax() 文档, Commit) 在1.3版,如果没有实际数据发送,jQuery.ajax的contentType会被忽略。1.4版里,contentType将总是和请求一同发送。这修复了某些后台凭靠”Content-Type”页头判断回复类别所造成的问题。 明确设置JSONP回调函数的名字 (jQuery.ajax 文档, Commit) 你可以使用jQuery.ajax()方法的jsonpCallback选项,通过名字来指定JSONP的回调函数。 防止启动前跨域XHR (Commit) 跨域Ajax(针对提供支持的浏览器)将更易用,因为默认设置下,启动前XHR被阻止了。(TODO) jQuery.ajax()现在使用”onreadystatechange”事件替换了计时器 (Commit) 使用”onreadystatechange”替换了轮流探询,Ajax请求现在将使用更少的资源 元素属性 (Attributes)
你不但可以将一个函数用在 jQuery('<img src="enter.png" alt="enter your name" />').attr("alt", function(index, value) {return "Please, " + value;}); .val( Function ) (.val() 文档) <input class="food" type='text' data-index="0" /><input class="food" type='text' data-index="1" /> jQuery("input:text.food").hide();jQuery("<ul class='sortable'><li>Peanut Butter</li><li>Jelly</li></ul>").sortable().bind("endsort", function() {$(":text.food").val(function() {return $("ul.sortable li:eq(" + $(this).attr("data-index") + ")").text();});}); text和CDATAHTML元素也支持.text()方法了 (.text() 文档, Commit) 核心 (Core)快捷元素创建 (jQuery() 文档, Commit) 现在当你需要使用jQuery函数创建一个元素的时候,你可以同时附递一个对象来指定属性值和事件: jQuery(" 对象里的键值的名字与相关的jQuery的方法的名字是对应的,对象的值会被作为参数传递给jQuery的方法。 (译注:譬如 .eq(-N), .get(-N) (负指数) (.eq() 文档, .get() 文档, Commit) 你现在可以在 $("div").eq(-2);$("div").get(-2); 新的.first()和.last()方法 (.first() 文档, .last() 文档, Commit) 方便起见, 新增的 新的.toArray()方法 (.toArray() 文档, Commit) .get()方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用.toArray()来达到一样的效果。(译注:这里应该是为了以后的版本留出空间,譬如以后可能会加入.toList()方法,到时候就会易于区分。) 不过,和 jQuery()返回一个空集 (jQuery() 文档, Commit) 在jQuery 1.3中,jQuery()方法返回仅包括 jQuery(“TAG”) (Element Selector 文档, Commit) 当使用单个标签名字的时候jQuery会使用更快捷的路径。 jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (jQuery() 文档, Commit) 现在这三个方法都使用同一个代码路径了(document.createElement), 来优化 样式 (CSS).css()方法在性能是以前的2倍。
.toggleClass()可以切换多个css类了 (.toggleClass() 文档, Commit) 你可以通过.toggleClass()调用多个css类的名字来切换他们。 $("div").toggleClass("current active"); 数据.data()返回对象, .data(Object)设置对象 (.data() 文档, Commit 1, Commit 2) 有时候你可能需要在一个元素上附加一个复杂的对象。一个常见的例子是你需要从一个元素身上复制所有的数据到令一个元素上。在jQuery 1.4里, 不使用任何参数调用.data()时,.data会返回一个复杂对象。(译注: 包含所有键-值对的对象。) 调用.data(Object) 则会设置这个对象。注意这个对象还包括了元素上绑定的事件,所以用的时候要小心。 除非需要, 不然不会创建数据缓存。 (Commit 1, Commit 2, Commit 3) jQuery使用一个独特的自定义属性来获取特定元素上附加的数据。当查找数据,但是没有新加的数据的时候,jQuery会尽量避免创建这个自定义属性。这样可能会提高性能,同时还会在这种情况下避免污染DOM。 效果 (Effects)单个属性缓进缓出 (Per-property Easing 文档, Commit) 除了能够给一个动态效果指定缓进出函数外,你现在可以指定每个属性的缓进出函数了。James Padolsey的blog上有更进一步的信息和演示。 $("#clickme").click(function() {$("div").animate({width: ["+=200px", "swing"],height: ["+=50px", "linear"],}, 2000, function() {$(this).after("<div>Animation complete.</div>");});}); 事件 (Events)新方法: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2) 如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用 var obj = {name: "John",test: function() {alert( this.name );$("#test").unbind("click", obj.test);}};$("#test").click( jQuery.proxy( obj, "test" ) ); 多个事件绑定 (.bind() 文档) 你可以通过递入一个对象来一次性绑定元素的多个事件。 $("div.test").bind({click: function(){$(this).addClass("active");},mouseenter: function(){$(this).addClass("inside");},mouseleave: function(){$(this).removeClass("inside");}}); ‘change’和’submit’事件规范化 (Change 文档, Submit 文档) 普通的或是即时的 新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文档, .focusout() 文档, Commit)
$("form").focusout(function(event) {var tgt = event.target;if (tgt.nodeName == "INPUT" && !tgt.value) {$(tgt).after("nothing here");}}); 所有的事件都可以成为即时事件 (.live() 文档) 除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用 在 注: 如果你需要即时的 还有, live/die也支持环境变量了 (Commit) 现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。 确定ready事件至少含有 jQuery现在会检查 在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。 (Commit) DOM操作 (Manipulation)在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。 .append(), .prepend(), .before(), and .after()的性能提高了。 .html()的性能提高到以前的3倍。 .remove()和.empty()的速度则达到以前的4倍. 新方法: .detach() (.detach() 文档, Commit)
var foo = $("#foo").click(function() {// 相关操作});foo.detach();// foo保留了相关处理函数foo.appendTo("body"); 新的unwrap()方法 (documentation, commit)
<body><div><p>annie</p> <p>davey</p> <p>stevie</p></div></body> $('div').unwrap(); <body><p>annie</p> <p>davey</p> <p>stevie</p></body> domManip方法里的缓存 (commit) jQuery会将 无连接的节点间的before, after, replaceWith操作 (commit) 现在你可以对还没有放置到DOM Tree上的节点进行 jQuery("<div>").before("<p>Hello</p>").appendTo("body")
1.3版中, 位移 (Offset).offset( coords | Function ) (.offset() 文档, commit) 现在可以设置元素的位移了! 和所有的设置函数一样, 队列 (Queueing)队列经历了一次大修, 使用队列会比使用默认的 新的 .delay() 方法 (.delay() 文档, commit)
$("div").fadeIn().delay(4000).fadeOut(); 队列里的 jQuery 1.4版里, 当队列里的一个函数被调用的时候,第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。 jQuery("div").queue("ajax", function(next) {var self = this;jQuery.getJSON("/update", function(json) {$(self).html(json.text);next();};}).queue("ajax", function() {$(this).fadeIn();}); .clearQueue() (clearQueue 文档, commit) 队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用 选择符 (Selectors)“#id p”效率更高 (commit) 所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。 页面遍访 (Traversing).index(), .index(String) (index 文档, commit)
你可以获得一个元素相对于同父元素的指数: // 计算第一个 <li class="current"> 元素在它所有的同父元素中的指数:$("li.current").index() 你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定: // 计算这个 <h3 id="more-info"> 元素在页面上所有 <h3> 元素里的指数:
$("#more-info").index("h3") 这个方法相当于选择符里的 新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法 (.nextUntil() 文档, .prevUntil() 文档, .parentsUntil() 文档, commit) 新的”until”方法类似于 .add(String, Element) (.add() 文档, commit) 可以给 .closest(filter, DOMElement) (.closest() 文档, commit) 可以通过 常用工具 (Utilities)jQuery.isEmptyObject() (jQuery.isEmptyObject() 文档, commit) 如果对象,em>没有任何属性, 该方法将返回 jQuery.isPlainObject() (jQuery.isPlainObject(), commit ) 如果一个对象是通过字符创建的(译注:{}), jQuery.contains() (jQuery.contains() 文档, commit) 如果两个参数都是DOM节点,并且第二个节点是嵌套在第一个节点内部的话, jQuery.noop (jQuery.noop() 文档, commit) 是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。) jQuery.unique() (jQuery.unique() 文档) jQuery 1.4版中, 其他 (Miscellaneous)jQuery.browser以浏览器引擎为中心 (jQuery.browser 文档, commit) 例如, 你可以通过 改进了对 jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。 不再使用arguments.callee (commit) 为了顺应Caja的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到 用Closure Compiler替换了YUI Min (commit) 中文API文档支持您可以在Ajax之家(http://www./)下载最新的API文档 内部重组 (Internal Reorganization)在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。 下面是一些主要的变化:
测试 (Testing)jQuery 1.4版发布过程中我们修复了207个问题 (比较之下1.3版里有97个修复)。 jQuery 1.4.此外, 测试的数量从jQuery 1.3.2中的1504例升到了1.4中的3060例。 所有测试都在主要浏览器里完全通过了。(Safari 3.2, Safari 4, Firefox 2, Firefox 3, Firefox 3.5, IE 6, IE 7, 我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 – 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。
我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的插件。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。 如何使用这个插件: |
|
来自: 命運之輪 > 《JavaScript》