您当时的方位:主页 > 言语编程 > jQuery

jQuery 1.4官方文档具体叙述新特性功用

2014-10-28  

为了庆祝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的仿制,一份是最小化的(咱们现在选用作为默许的紧缩工具了),一份是未紧缩的(供纠错或阅览)。

  • (23kb )
  • (154kb)

别的,Google也在他们的服务器上。这份仿制会主动的最小化然后紧缩 – 而且放在Google最快的缓存服务器上。

你能够在你的站点上直接引证上面的URL,这样就能够享用敏捷加载jQuery的功用优势了。

就jQuery1.4来说,咱们尽力的削减大规模晋级中的费事 – 经过坚持一切public函数的签名。即使如此,还请通读,这样能够了解哪些改动或许会给你的运用形成问题。

(功用) Features

下面的内容归纳了jQuery1.4里参加的改动和功用。别的一切的改动都现已在里记载了。

抢手办法经过了功用上的大”检修”

不少比较抢手的和常用的jQuery办法在1.4里被重写了。(译注:重写了办法的内部,外部调用没有大幅度改动) 咱们剖析源码的时分发现咱们能够取得大幅的功用进步,经过把jQuery和自己比较: 查看内部函数被调用了多少次,然后尽力(译注:核算机算法中的Complexity)

常用jQuery办法调用频率

在1.4版里咱们明显的降低了大部分抢手jQuery办法的的杂乱度。

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

算来现已有一阵了,你们现已能够给传递一个函数,然后这个函数的成果会被用来赋给相应的HTML特点(attribute)上。这个功用现在被移植到一切的设置函数了: , , , , , , , , , , , , , , , 以及 .

别的, 关于下面几个办法,当时的值会被作为第2个变量传递给这个函数。, , , , , , , , , , 以及 .

这样代码就能够这样写:

// 找出一切A标签里的'&'字符,然后用一个span标签围住$('a').html(function(i,html){return html.replace(/&/gi,'&');});// 给一些链接的title特点加些信息$('a[target]').attr("title", function(i,title){return title + " (新窗口翻开)";});

Ajax

嵌套参数的序列化 (, , )

jQuery 1.4在jQuery.param办法里参加了嵌入参数序列化的支撑,借用了PHP编程里鼓起的,然后又被Ruby on Rails推行开来的办法。

举例来说,

会被序列化为 “foo[]=bar&foo[]=baz”.

在jQuery 1.3版里, 曾被序列化为 “foo=bar&foo=baz”. 可是,这样做没用办法将只含有一个元素的阵列编码。假如你需求旧的序列化办法,你能够设置传统Ajax设置来进行切换。(运用进行大局切换,或许依据状况独自切换。

总共有3种办法能够切换到旧的序列化办法:

// 大局改动序列化办法 (运用旧的)jQuery.ajaxSettings.traditional = true;// 指定状况运用旧的序列化办法jQuery.param( stuff, true );// 针对一个独自的Ajax恳求运用旧的序列化办法$.ajax({ data: stuff, traditional: true });

更多信息拜见: , , ,

JSON和脚本类型经过”content-type”主动辨认。 (, , )

假如一个Ajax恳求的回复的媒体类型是JSON(application/json), dataType默许设为”json”(假如dataType没有被指明)。别的,假如回复的媒体类型是 Javascript(application/javascript), dataType默许设为”script”(相同,假如dataType没有清晰指明), 这种状况下,脚本会主动运转。

参加了Etag的支撑 (, )

默许设置下, jQuery会疏忽Ajax恳求的”Last-Modified”页头。这样做是为了疏忽浏览器的缓存。设置ifModified:true就能够使 jQuery运用可用的缓存。jQuery1.4还会宣布”If-None-Match”的页头假如你设置了ifModified选项。

严厉JSON形式,本地的JSON.parse办法 (, , , )

jQuery 1.3和曾经的版别曾运用Javascript的对引进的JSON解析。1.4版则会运用本地的JSON解析器,条件是假如有本地的解析器可用。它也会对引进的JSON进行校验。所以在办法里,或当一个Ajax恳求的dataType是”json”的时分,jQuery会回绝不合标准的JSON(例如)。

序列化HTML5的元素 (, )

新的 (比方’datetime’和’range’)在序列化一个表单的时分会被包含在内。

Ajax恳求的环境 (, )

你能够附加一个”环境”到Ajax恳求上,一切的回调函数里都会具有相同的”环境”设置(这样能够简化你的代码,尽或许防止运用闭合,或是其他方针)。

jQuery.ajax({url: "test.html",context: document.body,success: function(){jQuery(this).addClass("done");}});

恳求成功回调函数的第三个参数会被设为原始的XHR方针 (, )

一切的Ajax恳求的成功回调函数现在都会收到原始的XMLHttpRequest方针,作为第三个参数。之前这个XHR方针只能经过一类办法的回来值来获取。

清晰设置”Content-Type” (, )

在1.3版,假如没有实践数据发送,的contentType会被疏忽。1.4版里,contentType将总是和恳求一同发送。这修正了某些后台凭靠”Content-Type”页头判别回复类别所形成的问题。

清晰设置JSONP回调函数的姓名 (, )

你能够运用办法的jsonpCallback选项,经过姓名来指定JSONP的回调函数。

防止发动前跨域XHR ()

跨域Ajax(针对供给支撑的浏览器)将更易用,由于默许设置下,发动前XHR被阻挠了。(TODO)

jQuery.ajax()现在运用”onreadystatechange”事情替换了计时器 ()

运用”onreadystatechange”替换了轮番打听,Ajax恳求现在将运用更少的资源

元素特点 (Attributes)

的功用被优化了。

<.css().attr()的功用进步

办法多了一个设置函数作为参数 ()

你不光能够将一个函数用在里,还能够在这个函数里运用特点的当时值。

jQuery('<img src="enter.png" alt="enter your name" />').attr("alt", function(index, value) {return "Please, " + value;});

.val( Function ) ()

<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()办法了 (, )

中心 (Core)

便利元素创立 (, )

现在当你需求运用jQuery函数创立一个元素的时分,你能够一同附递一个方针来指定特点值和事情:

jQuery("", {id: "foo",css: {height: "50px",width: "50px",color: "blue",backgroundColor: "#ccc"},click: function() {$(this).css("backgroundColor", "red");}}).appendTo("body");

方针里的键值的姓名与相关的jQuery的办法的姓名是对应的,方针的值会被作为参数传递给jQuery的办法。

(译注:比方相当于

.eq(-N), .get(-N) (负指数) (, , )

你现在能够在办法里运用负数。比方,你要挑选倒数第2个div元素,或许是倒数第2个DOM方针:

$("div").eq(-2);$("div").get(-2);

新的.first()和.last()办法 (, , )

便利起见, 新增的办法等同于和.

新的.toArray()办法 (, )

办法自始便是从jQuery调集里回来一个阵列。为了能够更清晰, 你能够用来到达相同的效果。(译注:这儿应该是为了今后的版别留出空间,比方今后或许会参加.toList()办法,到时分就会易于区别。) 不过,和不相同的是,不承受参数。

jQuery()回来一个空集 (, )

在jQuery 1.3中,办法回来仅包含的jQuery调集。这个能够用来创立一个空集,然后动态参加一些元素。注: 办法在1.4中仍然有用,可是被指示陈腐了。请运用或许

jQuery(“TAG”) (, )

当运用单个标签姓名的时分jQuery会运用更便利的途径。

jQuery(“<div>”), jQuery(“<div/>”) 和 jQuery(“<div></div>”) (, )

现在这三个办法都运用同一个代码途径了(document.createElement), 来优化的功用。留意,假如你指定了特点,将会运用浏览器自身的语法剖析(经过设置innerHTML)。

款式 (CSS)

.css()办法在功用是曾经的2倍。

.css()的功用进步

, , 和 这几个办法在功用上是曾经的3倍

addClass, removeClass, 和 hasClass的功用进步

.toggleClass()能够切换多个css类了 (, )

你能够经过调用多个css类的姓名来切换他们。

$("div").toggleClass("current active");

数据

.data()回来方针, .data(Object)设置方针 (, , )

有时分你或许需求在一个元素上附加一个杂乱的方针。一个常见的比方是你需求从一个元素身上仿制一切的数据到令一个元素上。在jQuery 1.4里, 不运用任何参数调用时,.data会回来一个杂乱方针。(译注: 包含一切键-值对的方针。) 调用 则会设置这个方针。留意这个方针还包含了元素上绑定的事情,所以用的时分要当心。

除非需求, 否则不会创立数据缓存。 (, , )

jQuery运用一个共同的自界说特点来获取特定元素上附加的数据。当查找数据,可是没有新加的数据的时分,jQuery会尽量防止创立这个自界说特点。这样或许会进步功用,一同还会在这种状况下防止污染DOM。

效果 (Effects)

单个特点缓进缓出 (, )

除了能够给一个动态效果指定缓进出函数外,你现在能够指定每个特点的缓进出函数了。James Padolsey的有更进一步的信息和演示。

$("#clickme").click(function() {$("div").animate({width: ["+=200px", "swing"],height: ["+=50px", "linear"],}, 2000, function() {$(this).after("<div>Animation complete.</div>");});});

事情 (Events)

新办法: jQuery.proxy() (, , )

假如你需求确保一个函数内的”this”安稳地坚持某个值, 你能够用取得一个相同效果域的函数。

var obj = {name: "John",test: function() {alert( this.name );$("#test").unbind("click", obj.test);}};$("#test").click( jQuery.proxy( obj, "test" ) );

多个事情绑定 ()

你能够经过递入一个方针来一次性绑定元素的多个事情。

$("div.test").bind({click: function(){$(this).addClass("active");},mouseenter: function(){$(this).addClass("inside");},mouseleave: function(){$(this).removeClass("inside");}});

‘change’和’submit’事情标准化 (, )

一般的或是即时的事情能够在各种浏览器上安稳作业了。咱们覆盖了IE里的, 替换为与其他浏览器相同的事情。

新的事情: ‘focusin’ and ‘focusout’ (, , )

在一般状况下等同于, 可是多了向父元素传递的效果。假如你自己编写你的事情署理形式(TODO), 这个功用将对你有很大协助。请留意对运用办法将不会起效果; 在规划的时分咱们依据 决议不使其向父元素传递事情。

$("form").focusout(function(event) {var tgt = event.target;if (tgt.nodeName == "INPUT" && !tgt.value) {$(tgt).after("nothing here");}});

一切的事情都能够成为即时事情 ()

除了, (用focusin), 和 (用focusout)以外, 一切能用绑定的事情都能够成为即时事情。

所支撑的事情里,咱们对能够支撑下面这几个额定的事情感到特别自豪。经过里的事情署理, 1.4版完成了对, , , , , 以及事情的跨浏览器支撑。

注: 假如你需求即时的事情,你应该用, 而不要用, 由于就像前面说到的, 不向上传递。

还有, 也承受数据方针作为参数了, 同办法相同 ()

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

现在能够在绑定事情的时分给挑选符指定一个环境。假如环境被指定了, 只要归于这个环境下的元素才会被绑定事情。在创立即时事情的时分, 元素自身不需求现已被界说, 可是环境有必要被创立。

确认ready事情至少含有元素 ()

jQuery现在会查看是不是存在,假如不存在,会对进行轮番打听。

在不需求手动处理内存溢出的非IE浏览器中, 卸载的速度进步了。 ()

DOM操作 (Manipulation)

在jQuery 1.4里一系列的DOM操作办法的功用都有巨大的进步。

, , , and 的功用进步了。

DOM嵌入的功用进步

的功用进步到曾经的3倍。

.html()的功用进步

.remove()和.empty()的速度则到达曾经的4倍.

.remove() 和 .empty()的功用进步

新办法: .detach() (, )

将一个元素从DOM里移除, 可是并不卸载相关的事情处理函数。这个办法可用于暂时性的将一个元素移除,履行相关操作,然后回来。

var foo = $("#foo").click(function() {// 相关操作});foo.detach();// foo保留了相关处理函数foo.appendTo("body");

新的unwrap()办法 (, )

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

<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办法里的缓存 ()

jQuery会将一类办法创立的节点记入缓存。这样, 关于运用这些办法, 运用字符串进行DOM操作的页面,功用将有极大的进步。

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

现在你能够对还没有放置到DOM Tree上的节点进行, , 和的操作了。意味着你能够先对节点进行杂乱的操作, 待完结后再放到适宜的DOM方位上。这样也能尽量防止操作过程中形成从头排版。

jQuery("<div>").before("<p>Hello</p>").appendTo("body")

也会仿制相关数据 (, )

1.3版中, 尽管也是深度仿制, 可是没有仿制相关的数据。1.4版里,它则会仿制数据, 一同还包含一切的事情。这点上和在语义想同的, 所以一般方针和阵列会被仿制, 可是自界说的方针则不会。

位移 (Offset)

.offset( coords | Function ) (, )

现在能够设置元素的位移了! 和一切的设置函数相同, 也能够承受一个函数作为第二个参数。

行列 (Queueing)

行列阅历了一次大修, 运用行列会比运用默许的更易把握。

新的 .delay() 办法 (, )

办法会依据参数滞后若干毫秒履行行列里剩余的方针。默许的它会运用”fx”行列。但你能够挑选性的经过办法的第二个参数挑选其他行列。(译注:每个行列都以一个姓名辨认。)

$("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() (, )

行列能够被清空了。这个办法会移除行列里一切未履行的函数, 但不会移除正在运转的函数。无参数的状况下调用办法将会清空默许的”fx”行列。

挑选符 (Selectors)

“#id p”功率更高 ()

一切以ID最初的挑选符都得到了优化, 能够在瞬间得到回来值。一切以ID为最初的挑选符速度将一向快于其他挑选符。

页面遍访 (Traversing)

.index(), .index(String) (, )

办法经过重写, 变得愈加直观和灵敏。

你能够取得一个元素相关于同父元素的指数:

// 核算第一个 <li class="current"> 元素在它一切的同父元素中的指数:$("li.current").index()

你也能够取得一个元素在一个jQuery元素调集中的指数, 这个调集能够用一个挑选符或许是一个DOM元从来指定:

// 核算这个 <h3 id="more-info"> 元素在页面上一切 <h3> 元素里的指数:$("#more-info").index("h3")

新的.has()办法 (, )

这个办法相当于挑选符里的过滤法。它拿到一个jQuery调集,回来含有指定挑选符的元素。

新的 .nextUntil(), .prevUntil(), .parentsUntil() 办法 (, , , )

新的”until”办法类似于, , 和。区别是能够用一个挑选符来中止元素探究。

.add(String, Element) (, )

能够给办法指定环境了。这个功用能够用于在一个调用链中参加和操作额定元素(比方Ajax恳求里回来的新元素)。

.closest(filter, DOMElement) (, )

能够经过办法的第2个参数设置一个环境。给设置一个环境一般能够进步这个办法的运转速度。这个优化也适用, 由于这个办法内部调用了

常用工具 (Utilities)

jQuery.isEmptyObject() (, )

假如方针,em>没有任何特点, 该办法将回来办法不对参数进行任何查看, 所以请确保参数是一个方针。

jQuery.isPlainObject() (, )

假如一个方针是经过字符创立的(译注:{}),回来; 假如方针是其他类别的方针(译注:如new Object())或许是根本类型, 则回来

jQuery.contains() (, )

假如两个参数都是DOM节点,而且第二个节点是嵌套在第一个节点内部的话, 回来。反之回来

jQuery.noop (, )

是个空的函数, 能够用在有必要要有一个函数的状况下。(译注: noop是No Operation的意思。)

jQuery.unique() ()

jQuery 1.4版中, 办法回来成果里的元素是依照他们在页面里的次序排序的。由于在创立jQuery调集的时分jQuery运用办法, 所以jQuery办法回来的调集也是依照他们在页面里的次序排列的。

其他 (Miscellaneous)

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

例如, 你能够经过勘探引擎是否是Webkit。

改进了对的处理 (, )

jQuery不再企图在Java applets上绑定事情或是数据了(绑定事情或是数据会呈现过错)。

不再运用arguments.callee ()

为了适应的要求, 一同也由于行将开端运用的ECMAScript 5标准里将其标记为陈腐, 咱们将jQuery中心中一切用到的代码都移除了。

用Closure Compiler替换了YUI Min ()

中文API文档支撑

您能够在(http://www.ajaxa.cn/)下载最新的API文档

内部重组 (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版发布过程中咱们 (比较之下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 测验成果

咱们尽量企图减小jQuery 1.4对大规模晋级或许形成的费事 – 坚持一切揭露函数的签名不变。即使如此, 请通读下面的列表以确保你对或许对你的运用形成问题的改动。

  • 不再简略的将成果串联到一同, 成果将会被混合到一同, 然后依据他们在页面里的次序排列。
  • 将仿制事情和数据, 而不仅是事情。
  • 不再回来, 取而代之的是元素的方针缓存。
  • (无参数) 不再主动转化成了。
  • 经过取得一个或一个的值不再有歧义(将总是依据特点挑选, 而不是依据的值)。()
  • 现在将回来引擎的版别.
  • 现在起将对引进的JSON更严厉, 假如JSON的格局不符将会报错。假如你需求对不契合JSON严厉格局的Javascript进行估值, 你有必要设置恳求的文件类型为纯文本, 然后用来对内容估值。
  • 参数序列化默许会依照PHP/Rails的风格进行。你能够经过来切换到旧的序列化办法。你也能够针对单个恳求进行切换, 在调用的时分递入
  • 内部的jQuery.className被移除了。
  • 不再扩展杂乱方针或是阵列。(TODO)
  • 假如一个没有指定dataType, 而回来的数据类型是”text/javascript”, 那么回复将会被履行。之前, 有必要清晰的指定dataType。
  • 设置的”ifModified”特点会将ETags归入考虑。

咱们还针对1.4版中或许形成问题的改动编写了一个向后兼容的。假如你晋级到1.4今后呈现问题, 能够在引进1.4版的文件之后引进这个插件。

怎么运用这个插件:

<script src="http://code.jquery.com/jquery.js"></script><script src="http://code.jquery.com/jquery.compat-1.3.js"></script>

原始数据和测验页面

功用测验中咱们运用了下列测验套包:

  • Function Call Profiling: .

成果的原始数据 (一切的数据都是 1.3.2 vs. 1.4):

函数调用的次数547    3760    3500    200896    39923909    299307    11828955    10028648    2011662    593DOM嵌入558    3171079    6241079    5161155    829436    332196    194243    169HTML116    46281    78313    78234    63134    4343    4291    27CSS/特点703    3701780    12501765    12501157    749629    498346    184333    161CSS114    52203    93118    93109    47116    5458    2454    22CSS类553    1381578    5461515    5011033    327769    298229    80173    41移除/清空3298    2869030    23447921    17035282    12662898    3031166    1401034    122

原译者署名:coolnalu
来历: