(功能) Features
下面的內(nèi)容概括了jQuery1.4里加入的變更和功能。另外所有的變更都已經(jīng)在jQuery 1.4 的文檔里記錄了。
熱門(mén)方法經(jīng)過(guò)了性能上的大”檢修”
不少比較熱門(mén)的和常用的jQuery方法在1.4里被重寫(xiě)了。(譯注:重寫(xiě)了方法的內(nèi)部,外部調(diào)用沒(méi)有大幅度改變) 我們分析源碼的時(shí)候發(fā)現(xiàn)我們能夠獲得大幅的性能提升,通過(guò)把jQuery和自己比較: 查看內(nèi)部函數(shù)被調(diào)用了多少次,然后努力降低源碼的復(fù)雜度(譯注:計(jì)算機(jī)算法中的Complexity)
在1.4版里我們顯著的降低了大部分熱門(mén)jQuery方法的的復(fù)雜度。
更易用的設(shè)置函數(shù) (Easy Setter Functions)
算來(lái)已經(jīng)有一陣了,你們已經(jīng)可以給.attr()傳遞一個(gè)函數(shù),然后這個(gè)函數(shù)的結(jié)果會(huì)被用來(lái)賦給相應(yīng)的html屬性(attribute)上。這個(gè)功能現(xiàn)在被移植到所有的設(shè)置函數(shù)了: .css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .before(), .after(), .replaceWith(), .wrap(), .wrapInner(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().
另外, 對(duì)于下面幾個(gè)方法,當(dāng)前的值會(huì)被作為第2個(gè)變量傳遞給這個(gè)函數(shù)。.css(), .attr(), .val(), .html(), .text(), .append(), .prepend(), .offset(), .addClass(), .removeClass(), 以及 .toggleClass().
這樣代碼就可以這樣寫(xiě): // 找出所有A標(biāo)簽里的'&'字符,然后用一個(gè)span標(biāo)簽包圍 $('a').html(function(i,html){ return html.replace(/&/gi,'&'); }); // 給一些鏈接的title屬性加些信息 $('a[target]').attr("title", function(i,title){ return title + " (新窗口打開(kāi))"; });
嵌套參數(shù)的序列化 (jQuery.param() 文檔, Commit 1, Commit 2)
jQuery 1.4在jQuery.param方法里加入了嵌入?yún)?shù)序列化的支持,借用了PHP編程里興起的,而后又被Ruby on Rails推廣開(kāi)來(lái)的方式。 舉例來(lái)說(shuō), {foo: ["bar", "baz"]} 會(huì)被序列化為 “foo[]=bar&foo[]=baz”.
在jQuery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化為 “foo=bar&foo=baz”. 但是,這樣做沒(méi)用辦法將只含有一個(gè)元素的陣列編碼。如果你需要舊的序列化方式,你可以設(shè)置傳統(tǒng)Ajax設(shè)置來(lái)進(jìn)行切換。(使用jQuery.ajaxSettings.traditional進(jìn)行全局切換,或者根據(jù)情況單獨(dú)切換。
總共有3種方式可以切換到舊的序列化方式: // 全局改變序列化方式 (使用舊的) jQuery.ajaxSettings.traditional = true; // 指定情況使用舊的序列化方式 jQuery.param( stuff, true ); // 針對(duì)一個(gè)單獨(dú)的Ajax請(qǐng)求使用舊的序列化方式 $.ajax({ data: stuff, traditional: true });
更多信息參見(jiàn): jQuery.param() 文檔, jQuery.ajax() 文檔, Commit, Code
JSON和腳本類(lèi)型通過(guò)”content-type”自動(dòng)識(shí)別。 (jQuery.ajax 文檔, Commit 1, Commit 2)
如果一個(gè)Ajax請(qǐng)求的回復(fù)的媒體類(lèi)型是JSON(application/json), dataType默認(rèn)設(shè)為”json”(如果dataType沒(méi)有被指明)。另外,如果回復(fù)的媒體類(lèi)型是 Javascript(application/javascript), dataType默認(rèn)設(shè)為”script”(同樣,如果dataType沒(méi)有明確指明), 這種情況下,腳本會(huì)自動(dòng)運(yùn)行。
加入了Etag的支持 (jQuery.ajax() 文檔, Commit)
默認(rèn)設(shè)置下, jQuery會(huì)忽略Ajax請(qǐng)求的”Last-Modified”頁(yè)頭。這樣做是為了忽略瀏覽器的緩存。設(shè)置ifModified:true就可以使 jQuery使用可用的緩存。jQuery1.4還會(huì)發(fā)出”If-None-Match”的頁(yè)頭如果你設(shè)置了ifModified選項(xiàng)。
嚴(yán)格JSON模式,本地的JSON.parse方法 (jQuery.ajax() 文檔, Commit 1, Commit 2, Commit 3)
jQuery 1.3和以前的版本曾使用Javascript的eval對(duì)引入的JSON解析。1.4版則會(huì)使用本地的JSON解析器,前提是如果有本地的解析器可用。它也會(huì)對(duì)引入的JSON進(jìn)行校驗(yàn)。所以在jQuery.getJSON方法里,或當(dāng)一個(gè)Ajax請(qǐng)求的dataType是”json”的時(shí)候,jQuery會(huì)拒絕不合標(biāo)準(zhǔn)的JSON(例如{foo: "bar"})。
序列化HTML5的元素 (jQuery.param() 文檔, Commit)
新的HTML5輸入方法 (比如’datetime’和’range’)在序列化.serialize()一個(gè)表單的時(shí)候會(huì)被包括在內(nèi)。
Ajax請(qǐng)求的環(huán)境 (jQuery.ajax() 文檔, Commit)
你可以附加一個(gè)”環(huán)境”到Ajax請(qǐng)求上,所有的回調(diào)函數(shù)里都會(huì)擁有同樣的”環(huán)境”設(shè)置(這樣可以簡(jiǎn)化你的代碼,盡可能避免使用閉合,或是其他對(duì)象)。 jQuery.ajax({ url: "test.html", context: document.body, success: function(){ jQuery(this).addClass("done"); } });
請(qǐng)求成功回調(diào)函數(shù)的第三個(gè)參數(shù)會(huì)被設(shè)為原始的XHR對(duì)象 (jQuery.ajax() 文檔, Commit)
所有的Ajax請(qǐng)求的成功回調(diào)函數(shù)現(xiàn)在都會(huì)收到原始的XMLHttpRequest對(duì)象,作為第三個(gè)參數(shù)。之前這個(gè)XHR對(duì)象只能通過(guò)$.ajax一類(lèi)方法的返回值來(lái)獲取。
明確設(shè)置”Content-Type” (jQuery.ajax() 文檔, Commit)
在1.3版,如果沒(méi)有實(shí)際數(shù)據(jù)發(fā)送,jQuery.ajax的contentType會(huì)被忽略。1.4版里,contentType將總是和請(qǐng)求一同發(fā)送。這修復(fù)了某些后臺(tái)憑靠”Content-Type”頁(yè)頭判斷回復(fù)類(lèi)別所造成的問(wèn)題。
明確設(shè)置JSONP回調(diào)函數(shù)的名字 (jQuery.ajax 文檔, Commit)
你可以使用jQuery.ajax()方法的jsonpCallback選項(xiàng),通過(guò)名字來(lái)指定JSONP的回調(diào)函數(shù)。
防止啟動(dòng)前跨域XHR (Commit)
跨域Ajax(針對(duì)提供支持的瀏覽器)將更易用,因?yàn)槟J(rèn)設(shè)置下,啟動(dòng)前XHR被阻止了。(TODO)
jQuery.ajax()現(xiàn)在使用”onreadystatechange”事件替換了計(jì)時(shí)器 (Commit)
使用”onreadystatechange”替換了輪流探詢,Ajax請(qǐng)求現(xiàn)在將使用更少的資源
元素屬性 (Attributes)
.CSS()和.attr() 的性能被優(yōu)化了。
.attr()方法多了一個(gè)設(shè)置函數(shù)作為參數(shù) (.attr() 文檔)
你不但可以將一個(gè)函數(shù)用在.attr()里,還可以在這個(gè)函數(shù)里使用屬性的當(dāng)前值。 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)
出處:帕蘭映像
責(zé)任編輯:moby
上一頁(yè) jQuery 1.4官方文檔中文版 [1] 下一頁(yè) jQuery 1.4官方文檔中文版 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論,我還想發(fā)表評(píng)論。
|