原文：jQuery 1.4 Released

翻译：coolnalu

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作为默认的压缩工具了)，一份是未压缩的(供纠错或阅读)。

jQuery压缩 (23kb Gzipped)

jQuery常规 (154kb)

另外，Google也在他们的服务器上放置了一份jQuery的拷贝。这份拷贝会自动的最小化然后压缩 – 并且放在Google最快的缓存服务器上。

http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js

你可以在你的站点上直接引用上面的URL，这样就可以享受迅速加载jQuery的性能优势了。

就jQuery1.4来说，我们努力的减少大规模升级中的麻烦 – 通过保持所有public函数的签名。即使如此，还请通读可能会造成问题的变更列表，这样能够了解哪些变更可能会给你的应用造成问题。

功能(新特性)Features

下面的内容概括了jQuery1.4里加入的变更和功能。另外所有的变更都已经在jQuery 1.4 的文档里记录了。

热门方法经过了性能上的大”检修”

不少比较热门的和常用的jQuery方法在1.4里被重写了。(译注:重写了方法的内部，外部调用没有大幅度改变) 我们分析源码的时候发现我们能够获得大幅的性能提升，通过把jQuery和自己比较: 查看内部函数被调用了多少次，然后努力降低源码的复杂度(译注:计算机算法中的Complexity)

View the cropped chart.

在1.4版里我们显著的降低了大部分热门jQuery方法的的复杂度。

更易用的设置函数 (Easy Setter Functions)

算来已经有一阵了，你们已经可以给.attr()传递一个函数，然后这个函数的结果会被用来赋给相应的HTML属性(attribute)上。这个功能现在被移植到所有的设置函数了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

另外, 对于下面几个方法，当前的值会被作为第2个变量传递给这个函数。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().

这样代码就可以这样写:

Ajax

嵌套参数的序列化 (jQuery.param() 文档, Commit 1, Commit 2)

jQuery 1.4在jQuery.param方法里加入了嵌入参数序列化的支持，借用了PHP编程里兴起的，而后又被Ruby on Rails推广开来的方式。
举例来说，
{foo: ["bar", "baz"]} 会被序列化为 “foo[]=bar&foo[]=baz”.

在jQuery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化为 “foo=bar&foo=baz”. 但是，这样做没用办法将只含有一个元素的阵列编码。如果你需要旧的序列化方式，你可以设置传统Ajax设置来进行切换。(使用jQuery.ajaxSettings.traditional进行全局切换，或者根据情况单独切换。

总共有3种方式可以切换到旧的序列化方式:

更多信息参见: 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的eval对引入的JSON解析。1.4版则会使用本地的JSON解析器，前提是如果有本地的解析器可用。它也会对引入的JSON进行校验。所以在jQuery.getJSON方法里，或当一个Ajax请求的dataType是”json”的时候，jQuery会拒绝不合标准的JSON(例如{foo: "bar"})。

序列化HTML5的元素 (jQuery.param() 文档, Commit)

新的HTML5输入方法 (比如’datetime’和’range’)在序列化.serialize()一个表单的时候会被包括在内。

Ajax请求的环境 (jQuery.ajax() 文档, Commit)

你可以附加一个”环境”到Ajax请求上，所有的回调函数里都会拥有同样的”环境”设置(这样可以简化你的代码，尽可能避免使用闭合,或是其他对象)。

请求成功回调函数的第三个参数会被设为原始的XHR对象 (jQuery.ajax() 文档, Commit)

所有的Ajax请求的成功回调函数现在都会收到原始的XMLHttpRequest对象，作为第三个参数。之前这个XHR对象只能通过$.ajax一类方法的返回值来获取。

明确设置”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)

.css()和.attr() 的性能被优化了。

<

.attr()方法多了一个设置函数作为参数 (.attr() 文档)

你不但可以将一个函数用在.attr()里，还可以在这个函数里使用属性的当前值。

.val( Function ) (.val() 文档)

text和CDATAHTML元素也支持.text()方法了 (.text() 文档, Commit)

核心 (Core)

快捷元素创建 (jQuery() 文档, Commit)

现在当你需要使用jQuery函数创建一个元素的时候，你可以同时附递一个对象来指定属性值和事件:

对象里的键值的名字与相关的jQuery的方法的名字是对应的，对象的值会被作为参数传递给jQuery的方法。

(译注:譬如$("<a>link</a>", {css:{background:"#ccc"}});相当于$("<a>link</a>")).css("background", "#ccc");

.eq(-N), .get(-N) (负指数) (.eq() 文档, .get() 文档, Commit)

你现在可以在.get()和.eq()方法里使用负数。譬如，你要选择倒数第2个div元素，或者是倒数第2个DOM对象:

新的.first()和.last()方法 (.first() 文档, .last() 文档, Commit)

方便起见, 新增的.first()和.last()方法等同于.eq(0)和.eq(-1).

新的.toArray()方法 (.toArray() 文档, Commit)

.get()方法自始就是从jQuery集合里返回一个阵列。为了能够更明确, 你可以用.toArray()来达到一样的效果。(译注:这里应该是为了以后的版本留出空间，譬如以后可能会加入.toList()方法，到时候就会易于区分。) 不过，和.get()不一样的是，.toArray()不接受参数。

jQuery()返回一个空集 (jQuery() 文档, Commit)

在jQuery 1.3中,jQuery()方法返回仅包括document的jQuery集合。这个可以用来创建一个空集，然后动态加入一些元素。注: jQuery().ready()方式在1.4中依然有效，但是被指示陈旧了。请使用jQuery(document).ready()或者jQuery(function(){})。

jQuery(“TAG”) (Element Selector 文档, Commit)

当使用单个标签名字的时候jQuery会使用更快捷的路径。

jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (jQuery() 文档, Commit)

现在这三个方法都使用同一个代码路径了(document.createElement), 来优化jQuery("<div></div>")的性能。注意，如果你指定了属性，将会使用浏览器本身的语法分析(通过设置innerHTML)。

样式 (CSS)

.css()方法在性能是以前的2倍。

.addClass(), .removeClass(), 和 .hasClass()这几个方法在性能上是以前的3倍

.toggleClass()可以切换多个css类了 (.toggleClass() 文档, Commit)

你可以通过.toggleClass()调用多个css类的名字来切换他们。

数据

.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上有更进一步的信息和演示。

事件 (Events)

新方法: jQuery.proxy() (jQuery.proxy() Documenation, Commit 1, Commit 2)

如果你需要保证一个函数内的”this”恒定地保持某个值, 你可以用jQuery.proxy获得一个相同作用域的函数。

多个事件绑定 (.bind() 文档)

你可以通过递入一个对象来一次性绑定元素的多个事件。

‘change’和’submit’事件规范化 (Change 文档, Submit 文档)

普通的或是即时的change和submit事件可以在各种浏览器上稳定工作了。我们覆盖了IE里的change和submit, 替换为与其他浏览器相同的事件。

新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文档, .focusout() 文档, Commit)

focusin和focusout在一般情况下等同于focus和blur, 但是多了向父元素传递的作用。如果你自己编写你的事件代理模式(TODO), 这个功能将对你有很大帮助。请注意对focus和blur使用live()方法将不会起作用; 在设计的时候我们根据 DOM事件规范决定不使其向父元素传递事件。

所有的事件都可以成为即时事件 (.live() 文档)

除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用.bind()绑定的事件都可以成为即时事件。

在live()所支持的事件里，我们对能够支持下面这几个额外的事件感到尤其骄傲。通过.live()里的事件代理, 1.4版实现了对change, submit, focusin, focusout, mouseenter, 以及mouseleave事件的跨浏览器支持。

注: 如果你需要即时的focus事件，你应该用focusin和focusout, 而不要用focus和blur, 因为就像前面提到的, focus和blur不向上传递。

还有, live()也接受数据对象作为参数了, 同bind()方法一样 (Commit)

live/die也支持环境变量了 (Commit)

现在可以在绑定事件的时候给选择符指定一个环境。如果环境被指定了, 只有属于这个环境下的元素才会被绑定事件。在创建即时事件的时候, 元素本身不需要已经被定义, 但是环境必须被创建。

确定ready事件至少含有body元素 (Commit)

jQuery现在会检查body是不是存在，如果不存在，会对body进行轮流探询。

在不需要手动处理内存溢出的非IE浏览器中, 卸载的速度提高了。 (Commit)

DOM操作 (Manipulation)

在jQuery 1.4里一系列的DOM操作方法的性能都有巨大的提升。

.append(), .prepend(), .before(), and .after()的性能提高了。

.html()的性能提高到以前的3倍。

.remove()和.empty()的速度则达到以前的4倍.

新方法: .detach() (.detach() 文档, Commit)

detach()将一个元素从DOM里移除, 但是并不卸载关联的事件处理函数。这个方法可用于暂时性的将一个元素移除，执行相关操作，然后返回。

新的unwrap()方法 (documentation, commit)

unwrap()方法拿到一个已知的父元素的子元素，然后将父元素用子元素替换。(译注: 将子元素从”包裹”里拿出来, 因名unwrap)。如此这般:

domManip方法里的缓存 (commit)

jQuery会将jQuery("<div>")和.after("<div>")一类方法创建的节点记入缓存。这样, 对于利用这些方法, 使用字符串进行DOM操作的页面，性能将有极大的提高。

无连接的节点间的before, after, replaceWith操作 (commit)

现在你可以对还没有放置到DOM Tree上的节点进行before, after, 和replaceWith的操作了。意味着你可以先对节点进行复杂的操作, 待完成后再放到合适的DOM位置上。这样也能尽量避免操作过程中造成重新排版。

.clone(true) 也会复制关联数据 (clone 文档, commit)

1.3版中, .clone(true)虽然也是深度复制, 但是没有复制关联的数据。1.4版里，它则会复制数据, 同时还包括所有的事件。这点上和jQuery.extend在语义想同的, 所以普通对象和阵列会被复制, 但是自定义的对象则不会。

位移 (Offset)

.offset( coords | Function ) (.offset() 文档, commit)

现在可以设置元素的位移了! 和所有的设置函数一样, offset也可以接受一个函数作为第二个参数。

队列 (Queueing)

队列经历了一次大修, 使用队列会比使用默认的fx更易掌握。

新的 .delay() 方法 (.delay() 文档, commit)

.delay()方法会根据参数滞后若干毫秒执行队列里剩下的对象。默认的它会使用”fx”队列。但你可以选择性的通过delay方法的第二个参数选择其他队列。(译注:每个队列都以一个名字识别。)

队列里的next (.queue() 文档, commit)

jQuery 1.4版里, 当队列里的一个函数被调用的时候，第一个参数会被设为另一个函数。当后者被调用的时候, 会自动排除队列里的下一个对象, 以此来推动队列到下一步。

.clearQueue() (clearQueue 文档, commit)

队列可以被清空了。这个方法会移除队列里所有未执行的函数, 但不会移除正在运行的函数。无参数的情况下调用.clearQueue()方法将会清空默认的”fx”队列。

选择符 (Selectors)

“#id p”效率更高 (commit)

所有以ID开头的选择符都得到了优化, 能够在瞬间得到返回值。所有以ID为开头的选择符速度将一直快于其他选择符。

页面遍访 (Traversing)

.index(), .index(String) (index 文档, commit)

.index() 方法经过重写, 变得更加直观和灵活。

你可以获得一个元素相对于同父元素的指数:

你也可以获得一个元素在一个jQuery元素集合中的指数, 这个集合可以用一个选择符或者是一个DOM元素来指定:

新的.has()方法 (has 文档, commit)

这个方法相当于选择符里的:has()过滤法。它拿到一个jQuery集合,返回含有指定选择符的元素。

新的 .nextUntil(), .prevUntil(), .parentsUntil() 方法 (.nextUntil() 文档, .prevUntil() 文档, .parentsUntil() 文档, commit)

新的”until”方法类似于.nextAll(), .prevAll(), 和.parents()。区别是可以用一个选择符来停止元素探索。

.add(String, Element) (.add() 文档, commit)

可以给.add()方法指定环境了。这个功能可以用于在一个调用链中加入和操作额外元素(比如Ajax请求里返回的新元素)。

.closest(filter, DOMElement) (.closest() 文档, commit)

可以通过closest方法的第2个参数设置一个DOMElement环境。给closest设置一个环境一般能够提高这个方法的运行速度。这个优化也适用live(), 因为这个方法内部调用了closest()。

常用工具 (Utilities)

jQuery.isEmptyObject() (jQuery.isEmptyObject() 文档, commit)

如果对象,em>没有任何属性, 该方法将返回true。jQuery.isEmptyObject()方法不对参数进行任何检查, 所以请保证参数是一个对象。

jQuery.isPlainObject() (jQuery.isPlainObject(), commit )

如果一个对象是通过字符创建的(译注:{}),jQuery.isPlainObject()返回true; 如果对象是其他类别的对象(译注:如new Object())或者是基本类型, 则返回false。

jQuery.contains() (jQuery.contains() 文档, commit)

如果两个参数都是DOM节点，并且第二个节点是嵌套在第一个节点内部的话, jQuery.contains()返回true。反之返回false。

jQuery.noop (jQuery.noop() 文档, commit)

是个空的函数, 可以用在必须要有一个函数的情况下。(译注: noop是No Operation的意思。)

jQuery.unique() (jQuery.unique() 文档)

jQuery 1.4版中, jQuery.unique()方法返回结果里的元素是按照他们在页面里的顺序排序的。由于在创建jQuery集合的时候jQuery使用jQuery.unique()方法, 所以jQuery方法返回的集合也是按照他们在页面里的顺序排列的。

其他 (Miscellaneous)

jQuery.browser以浏览器引擎为中心 (jQuery.browser 文档, commit)

例如, 你可以通过jQuery.browser.webkit探测引擎是否是Webkit。

改进了对applets的处理 (commit 1, commit 2)

jQuery不再试图在Java applets上绑定事件或是数据了(绑定事件或是数据会出现错误)。

不再使用arguments.callee (commit)

为了顺应Caja的要求, 同时也因为即将开始应用的ECMAScript 5规范里将其标记为陈旧, 我们将jQuery核心中所有用到arguments.callee的代码都移除了。

用Closure Compiler替换了YUI Min (commit)

内部重组 (Internal Reorganization)

在1.4版的开发过程中的一个重点是要建立一个更易读, 更易懂的代码库。为了达到这个目标我们树立了一系列编写代码规范的向导。

下面是一些主要的变化:

旧的’core.js’文件被分成了’attribute.js’, ‘css.js’, ‘data.js’, ‘manipulation.js’, ‘traversing.js’, and ‘queue.js’.

ready事件被移入了’core.js’ (因为它是jQuery的一个基本组成之一)。

大部分核心代码都符合新的代码规范.

css和属性的逻辑被划分开来, 不再如以往相互缠绕。

测试 (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,
IE 8, Opera 10.10, and Chrome)

我们尽量试图减小jQuery 1.4对大规模升级可能造成的麻烦 – 保持所有公开函数的签名不变。即使如此, 请通读下面的列表以保证你对可能对你的应用造成问题的变更。

.add()不再简单的将结果串联到一起, 结果将会被混合到一起, 然后根据他们在页面里的顺序排列。

.clone(true)将复制事件和数据, 而不仅是事件。

jQuery.data(elem) 不再返回id, 取而代之的是元素的对象缓存。

jQuery() (无参数) 不再自动转换成jQuery(document)了。

通过.val(“…”)获得一个option或一个checkbox的值不再有歧义(将总是根据value属性选择, 而不是根据text的值)。(Commit)

jQuery.browser.version现在将返回引擎的版本.

现在起将对引入的JSON更严格, 如果JSON的格式不符将会报错。如果你需要对不符合JSON严格格式的Javascript进行估值, 你必须设置请求的文件类型为纯文本, 然后用eval()来对内容估值。

参数序列化默认会按照PHP/Rails的风格进行。你可以通过jQuery.ajaxSettings.traditional = true;来切换到旧的序列化方式。你也可以针对个别请求进行切换, 在调用jQuery.ajax的时候递入{traditional: true}

内部的jQuery.className被移除了。

jQuery.extend(true, …)不再扩展复杂对象或是阵列。(TODO)

如果一个Ajax请求没有指定dataType, 而返回的数据类型是”text/javascript”, 那么回复将会被执行。之前, 必须明确的指定dataType。

设置Ajax 请求的”ifModified”属性会将ETags纳入考虑。

我们还针对1.4版中可能造成问题的变更编写了一个向后兼容的插件。如果你升级到1.4以后出现问题, 可以在引入1.4版的文件之后引入这个插件。

如何使用这个插件:

原始数据和测试页面

性能测试中我们使用了下列测试套包:

Attributes

Class

DOM Manipulation

Empty/Remove

Function Call Profiling: 1.3.2 1.4.

结果的原始数据 (所有的数据都是 1.3.2 vs. 1.4):

函数调用的次数
547 3
760 3
500 200
896 399
23909 299
307 118
28955 100
28648 201
1662 593

DOM嵌入
558 317
1079 624
1079 516
1155 829
436 332
196 194
243 169

HTML
116 46
281 78
313 78
234 63
134 43
43 42
91 27

CSS/属性
703 370
1780 1250
1765 1250
1157 749
629 498
346 184
333 161

CSS
114 52
203 93
118 93
109 47
116 54
58 24
54 22

CSS类
553 138
1578 546
1515 501
1033 327
769 298
229 80
173 41

移除/清空
3298 286
9030 2344
7921 1703
5282 1266
2898 303
1166 140
1034 122

您可能感兴趣的文章

• wordpress采集插件—wp-o-matic使用详解
• jQuery:1.4新版本中你应该知道的15个新特性(二)
• jQuery:1.4新版本中你应该知道的15个新特性(一)

在之前的版本中已经有了.wrap()方法来个标签添加新的父标签，而在1.4新版本中又添加了相对的.unwrap()方法来去除标签的父标签。实例Html代码如下：

1
2
3

<div>
    <p>Foo</p>
</div>

jQuery1.4版本中实现代码：

1

jQuery('p').unwrap();

执行后的话题Html代码如下:

1

<p>Foo</p>

>>>>阅读更多关于.unwrap()方法的资料…

十、不用删除数据，即可删除掉DOM中的标签元素：

新版本中的.detach()方法允许你删除DOM中的任何标签元素，就像.remove()方法一样。但它与.remove()方法的不同之处是：.remove()是将标签直接删除，而.detach()方法则是将标签暂时移除，并通过方法内部调用.data()方法将标签缓存后赋予变量，再后面的代码中若还需要找回该标签，变量则会自动读取缓存的数据；另外若被.detach()方法移除的标签在移除前绑定了事件机制的话，在后面恢复后，该事件机制依然存在，无需再次绑定。
jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var foo = jQuery('#foo');

// Bind an important event handler
foo.click(function(){
    alert('Foo!');
});

foo.detach(); // Remove it from the DOM

// … do stuff

foo.appendTo('body'); // Add it back to the DOM

foo.click(); // alerts "Foo!"

>>>>阅读更多关于.detach()方法的资料…

十一、对.index()方法进行了扩展：

1.4新版本中新增了两个.index()的调用方法。而之前，我们将一个标签元素作为.index()方法的参数，并希望执行后返回一个标识当前集合中匹配元素序列号的数字结果。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

点击li标签获得该li标签的序号

jQuery1.32版本中实现代码：

1
2
3

$('li').click(function() {
       alert($('li').index(this));
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9

$('li').click(function() {
       alert($(this).index());
});

//或者

$('li').click(function() {
	alert($(this).index('li'));
});

>>>>阅读更多关于.index()方法的资料…

十二、DOM控制方法支持回调函数：

在1.4版本中绝大部分的DOM控制方法只支持回调函数作为唯一的参数，除了极个别的（比如：.attr()、.css()）方法中可以作为第二参数。这些回调函数将被匹配集合中所有元素所执行，
以确定哪些应作为该方法的实际值。

下面的这些DOM控制方法都支持回调函数：

• after
• before
• append
• prepend
• addClass
• toggleClass
• removeClass
• wrap
• wrapAll
• wrapInner
• val
• text
• replaceWith
• css
• attr
• html

在回调方法中，若你想访问该匹配集合的话，你需要使用”this”，或者序号index作为该方法的第一个参数。
jQuery1.4版本中实现代码：

1
2
3

jQuery('li').html(function(i){
    return 'Index of this list item: ' + i;
});

当然你可以给该回调函数传递第二个参数，比如是在使用设置类的DOM控制方法（如：.html()、.attr()等），你若想得到当前的值。

jQuery1.4版本中实现代码：

1
2
3

jQuery('a').attr('href', function(i, currentHref){
    return currentHref + '?foo=bar';
});

正如你看到的一样，在使用.attr()和.css()方法是，当该方法的第一个是属性名称时，你可以将回调函数作为方法的第二参数。

jQuery1.4版本中实现代码：

1
2
3

jQuery('li').css('color', function(i, currentCssColor){
    return i % 2 ? 'red' : 'blue';
});

十三、检测对象类型方法：

jQuery1.4新版本在命名空间下新增了两个帮助型的方法，用来帮助你检测对象类型。

第一个方法：.isEmptyObject()用来判断一个对象是否是空对象，返回一个布尔类型的结果；
第二个方法：.isPlainObject()用来判断一个对象是否是最原始的Javascript对象(该对象是否是通过{}或者new Object()创建)，同样也返回一个布尔类型的结果。

jQuery1.4版本中实现代码：

1
2
3
4
5
6

jQuery.isEmptyObject({}); // true
jQuery.isEmptyObject({foo:1}); // false

jQuery.isPlainObject({}); // true
jQuery.isPlainObject(window); // false
jQuery.isPlainObject(jQuery()); // false

>>>>阅读更多关于.isEmptyObject().isPlainObject()方法的资料…

十四、.Closest()方法扩展：

扩展后的.Closest()支持数组选择器作为参数，这在遍历一个元素的祖先元素时非常有用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

< !DOCTYPE html>
<html>
<head>
  <style></style>
  <script src="/scripts/jquery-1.4.js"></script>
</head>
<body>
	<ul><li></li><li></li></ul>
<script>var close = $("li:first").closest(["ul", "body"]);
$.each(close, function(i){
  $("li").eq(i).html( this.selector + ": " + this.elem.nodeName );
});</script>
</body>
</html>

执行后的结果是：

1
2

    * ul: UL
    * body: BODY

另外该方法还支持使用上下文对象作为它的第二参数，也就是说你可以遍历任意上下文对象直到的元素的祖先元素。这个扩展使用的列子非常少，但在内部使用时非常的有效率。

>>>>阅读更多关于.closest()方法的资料…

十四、新的事件机制（focusIn 、focusOut）：

新版本中若要给事件对象委派”focus”和”blur”事件，也可以使用.focusIn()和.focusOut()方法（它们是一一对应的）。更加重要的是focus和blur事件不支持.live()方法委派，但focusIn和focusOut事件是支持.live()方法委派。

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7

   jQuery('form')
    .focusin(function(){
        jQuery(this).addClass('focused');
    });
    .focusout(function(){
        jQuery(this).removeClass('focused');
    });

1
2
3
4
5
6
7

   jQuery('input')
    .live('focusin', function(){
        jQuery(this).addClass('focused');
    });
    .live('focusout', function(){
        jQuery(this).removeClass('focused');
    });

>>>>阅读更多关于.focusin().focusin()方法的资料…

您可能感兴趣的文章

• jQuery:1.4新版本中你应该知道的15个新特性(一)
• jQuery1.4下载、性能及新特性详解

jQuery()方法是jQuery库的核心方法之一，在1.32版本及早期的版本中，该方法是用来获取节点或者创建DOM对象的，它只支持一个参数。在使用来创建新的DOM对象时，我们若要给该DOM对象添加属性的话，只能通过attr()方法在后面追加，很是不方便，阅读起来也比较累。在jQuery1.4中，给jQuery方法新增了一个对象型的参数，用来创建新的DOM对象设置该DOM对象相应的属性。

jQuery1.32版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13

jQuery('<a></a>').attr({
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external'
}).text('Go to Google!')
   .css({
       fontWeight: 700,
       color: 'green'
   })
   .click(function(){
       alert('Foo has been clicked!');
   });

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

jQuery('<a />', {
    id: 'foo',
    href: 'http://google.com',
    title: 'Become a Googler',
    rel: 'external',
    text: 'Go to Google!',
    css: {
        fontWeight: 700,
        color: 'green'
    },
    click: function(){
        alert('Foo has been clicked!');
    }
});

>>>>阅读更多关于jQuery(…)方法的资料…

二、新增”until”系列方法：

新增”until”系列方法中有三个方法：”nextUntil”, “prevUntil” 和”parentsUntil”，这些方法是用来获取符合条件内的DOM对象。中文你可以理解为“直到”的意思。

若有一段XHtml代码如下：

1
2
3
4
5
6
7
8

<ul>
    <li>Apple</li>
    <li>Banana</li>
    <li>Grape</li>
    <li>Strawberry</li>
    <li>Pear</li>
    <li>Peach</li>
</ul>

现在我想选取从含有apple的li到含有pear的li,则代码实现：

jQuery1.32版本中实现代码：

1

jQuery('ul li').slice(1, 4);

jQuery1.4版本中实现代码：

1

jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)');

虽然上面两者的选取效果是一样的，但若现在我在含有apple的li到含有pear的li中间再添加内容的话，1.32版本的代码就需要修改了，而1.4版本的则可继续使用，也就说1.4版本的代码可用性和语义性增强了。

>>>>阅读更多关于prevUntil, nextUntil, parentsUntil方法的资料…

三、给事件对象一次绑定多个事件：

1.4不再像1.32版本中那样链式地给一个时间对象绑定时间，现在你可以将多个时间归纳后绑定到一个方法中。

jQuery1.32版本中实现代码：

1
2
3
4
5
6
7

jQuery('#foo).bind('click', function() {
        // do something
}).bind('mouseover', function() {
        // do something
}).bind('mouseout‘， function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4
5
6
7
8
9
10
11

jQuery('#foo).bind({
    click: function() {
        // do something
    },
    mouseover: function() {
        // do something
    },
    mouseout: function() {
        // do something
    }
});

当然对.one()一次点击事件也是适用的哦！

>>>>阅读更多关于.bind(…)方法的资料…

四、Per-Property Easing动画效果

在1.32版本中，我们使用animate()方法给对象添加动画效果时，特效很单一，只能再引入jquery.easing.js插件来丰富动画特效。在新版本1.4中将该插件集成到了jQuery库中，这样在使用过的过程中就更加地方便了。

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo').animate({
    left: 500,
    top: [500, 'easeOutBounce']
}, 2000);

当然也可以给附加的属性参数内添加动画效果，如：

1
2
3
4
5
6
7
8
9

jQuery('#foo').animate({
    left: 500,
    top: 500
}, {
    duration: 2000,
    specialEasing: {
        top: 'easeOutBounce'
    }
});

>>>>阅读更多关于per-property easing的资料…

五、新增live事件：

在1.32版本中，live()方法只对click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup这些时间提供了支持，而不支持也比较常用的focus和blur时间。在1.4版本中新增了submit, change, focus, blur四种时间的支持。其中focus对应的是focusin事件，而blur对应了focusout事件。

jQuery1.4版本中实现代码：

1
2
3
4
5

jQuery('input').live('focusin', function(){
    // do something with this
}).live('focusout', function(){
    // do something with this
});

六、控制方法的上下文对象：

1.4版本在jQuery命名空间下新增了一个名叫”proxy“的方法，该方法有两个参数：一个是作用域，一个是准备执行的处理方法。在Javascript中，this关键字很巧妙地自动执行父亲对象或某个DOM元素对象。当有时候我们希望this指向的不是一个DOM元素对象，而是希望它指向一个之前创建的对象。

举个列子，就很容易明白！比如，现在我们有一个app对象，该对象内部有一个”clickHandler“方法和一个命名为”config“的对象。代码如下：

1
2
3
4
5
6
7
8

var app = {
    config: {
        clickMessage: 'Hi!'
    },
    clickHandler: function() {
        alert(this.config.clickMessage);
    }
};

当我们调用app.clickHandler()方法时，app对象就有了自己的上下文对象：clickHandler方法中的this指向的是app对象。执行后会弹出内容为”Hi!“的提示框。若现在我希望将该app对象下的clickHandler方法绑定在一个超链接上，如下：

1

jQuery('a').bind('click', app.clickHandler);

而此时，当我们点击该超链接时，app对象下的clickHandler方法并不会执行，用Firebug测试则会提示”app.clickHandler is not a function!”。原因在于jQuery（以及绝大部分的事件对象）默认地将事件对象作为了该clickHandler方法的上下文对象，也就是此时this指向了a超链接标签元素。而我们的实际愿望是希望this执行app对象，那么1.4中我们就可以使用新增的proxy()方法来处理这一问题。代码如下：

1
2
3
4

jQuery('a').bind(
    'click',
    jQuery.proxy(app, 'clickHandler')
);

这样执行后提示框就会正常地弹出了。proxy()方法返回的是一个包装后的方法，它将执行你所期望的对象（通过第一个参数传递）。这在其他上下文对象中也很实用，比如给其他方法或插件传递回调函数。

>>>>阅读更多关于jQuery.proxy()方法的资料…

七、延迟动画队列：

在平时编写代码时，你或许发现有一个动画效果还没完成呢，下面的代码就已经执行完了。而我们希望的是等动画效果执行完成后或执行一段时间后再执行后面的代码。1.4版本中新增了delay()方法来延迟代码的执行。

jQuery1.32版本中实现代码：

1
2
3

setTimeout(500, function() {
        // do something
});

jQuery1.4版本中实现代码：

1
2
3
4

jQuery('#foo')
    .slideDown() // Slide down
    .delay(200) // Do nothing for 200 ms
    .fadeIn(); // Fade in

若你希望延迟一个动画队列比默认的“fx”(queue()函数的默认参数)还要慢的话，你只需要将这个queue的变量名当作delay()方法的第二个参数传递即可。

>>>>阅读更多关于.delay(…)方法的资料…

八、判断一个DOM父对象中是否含有某个匹配的子对象：

1.4中新增了一个过滤型的方法has()来判断某个对象是否在某个标签或集合内出现过。该方法将返回在标签中出现的所有匹配子对象的集合，至少会包含一个子对象。若没有找到匹配子对象，则返回的是一个空的集合。

1

jQuery('div').has('ul');

当然jQuery1.32版本中的.contains()方法其实也可以达到同样的效果，1.4版本又对.contains()进行了完善。在1.4版本中通过给.contains()方法传递两个DOM对象参数，从而判断第二个参数对象是否在第一个参数对象中。代码如下：

1
2
3

jQuery.contains(document.documentElement, document.body);
// Returns true - <body> is within <html>
</html></body>

>>>>阅读更多关于.has(…)，jQuery.contains(…)方法的资料…

您可能感兴趣的文章

• jQuery:1.4新版本中你应该知道的15个新特性(二)
• jQuery1.4下载、性能及新特性详解