jQuery 1.4官方文檔中文版
當前位置：點晴教程→知識管理交流
→『 技術文檔交流 』
[p]為了慶祝jquery的四周歲生日, jquery的團隊榮幸的發布了jquery javascript庫的最新主要版本! 這個版本包含了大量的編程，測試，和記錄文檔的工作，我們為此感到很驕傲。[/p]
[p]我要以個人的名義感謝 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和完成這次發布上所做的工作。[/p]
下載(downloading)
按照慣例，我們提供了兩份jquery的拷貝，一份是最小化的(我們現在采用google closure作為默認的壓縮工具了)，一份是未壓縮的(供糾錯或閱讀)。
jquery壓縮 (23kb gzipped)
jquery常規 (154kb)
另外，google也在他們的服務器上放置了一份jquery的拷貝。這份拷貝會自動的最小化然后壓縮 – 并且放在google最快的緩存服務器上。
http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
[p]你可以在你的站點上直接引用上面的url，這樣就可以享受迅速加載jquery的性能優勢了。[/p]
就jquery1.4來說，我們努力的減少大規模升級中的麻煩 – 通過保持所有public函數的簽名。即使如此，還請通讀可能會造成問題的變更列表，這樣能夠了解哪些變更可能會給你的應用造成問題。
(功能) features
下面的內容概括了jquery1.4里加入的變更和功能。另外所有的變更都已經在jquery 1.4 的文檔里記錄了。
熱門方法經過了性能上的大”檢修”
不少比較熱門的和常用的jquery方法在1.4里被重寫了。(譯注:重寫了方法的內部，外部調用沒有大幅度改變) 我們分析源碼的時候發現我們能夠獲得大幅的性能提升，通過把jquery和自己比較: 查看內部函數被調用了多少次，然后努力降低源碼的復雜度(譯注:計算機算法中的complexity)
[img]http://bbon.cn/wp-content/uploads/2010/01/1658289oj.jpg[/img][br]view the cropped chart.
[p]在1.4版里我們顯著的降低了大部分熱門jquery方法的的復雜度。[/p]
更易用的設置函數 (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().
[p]這樣代碼就可以這樣寫:[/p]// 找出所有a標簽里的'&'字符，然后用一個span標簽包圍
$('a').html(function(i,html){
return html.replace(/&/gi,'&');
});
// 給一些鏈接的title屬性加些信息
$('a[target]').attr("title", function(i,title){
return title + " (新窗口打開)";
});
ajax
[b]嵌套參數的序列化[/b] (jquery.param() 文檔, commit 1, commit 2)
[p]jquery 1.4在jquery.param方法里加入了嵌入參數序列化的支持，借用了php編程里興起的，而后又被ruby on rails推廣開來的方式。[/p]
[p]舉例來說，[/p]
{foo: ["bar", "baz"]} 會被序列化為 “foo[]=bar&foo[]=baz”.
在jquery 1.3版里, {foo: ["bar", "baz"]} 曾被序列化為 “foo=bar&foo=baz”. 但是，這樣做沒用辦法將只含有一個元素的陣列編碼。如果你需要舊的序列化方式，你可以設置傳統ajax設置來進行切換。(使用jquery.ajaxsettings.traditional進行全局切換，或者根據情況單獨切換。
[p]總共有3種方式可以切換到舊的序列化方式:[/p]// 全局改變序列化方式 (使用舊的)
jquery.ajaxsettings.traditional = true;
// 指定情況使用舊的序列化方式
jquery.param( stuff, true );
// 針對一個單獨的ajax請求使用舊的序列化方式
$.ajax({ data: stuff, traditional: true });
更多信息參見: jquery.param() 文檔, jquery.ajax() 文檔, commit, code
[b]json和腳本類型通過”content-type”自動識別。[/b] (jquery.ajax 文檔, commit 1, commit 2)
[p]如果一個ajax請求的回復的媒體類型是json(application/json), datatype默認設為”json”(如果datatype沒有被指明)。另外，如果回復的媒體類型是 javascript(application/javascript), datatype默認設為”script”(同樣，如果datatype沒有明確指明), 這種情況下，腳本會自動運行。[/p]
[b]加入了etag的支持[/b] (jquery.ajax() 文檔, commit)
[p]默認設置下, jquery會忽略ajax請求的”last-modified”頁頭。這樣做是為了忽略瀏覽器的緩存。設置ifmodified:true就可以使 jquery使用可用的緩存。jquery1.4還會發出”if-none-match”的頁頭如果你設置了ifmodified選項。[/p]
[b]嚴格json模式，本地的json.parse方法[/b] (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"})。
[b]序列化html5的元素[/b] (jquery.param() 文檔, commit)
新的html5輸入方法 (比如’datetime’和’range’)在序列化.serialize()一個表單的時候會被包括在內。
[b]ajax請求的環境[/b] (jquery.ajax() 文檔, commit)
[p]你可以附加一個”環境”到ajax請求上，所有的回調函數里都會擁有同樣的”環境”設置(這樣可以簡化你的代碼，盡可能避免使用閉合,或是其他對象)。[/p]jquery.ajax({
url: "test.html",
context: document.body,
success: function(){
jquery(this).addclass("done");
}
});
[b]請求成功回調函數的第三個參數會被設為原始的xhr對象[/b] (jquery.ajax() 文檔, commit)
所有的ajax請求的成功回調函數現在都會收到原始的xmlhttprequest對象，作為第三個參數。之前這個xhr對象只能通過$.ajax一類方法的返回值來獲取。
[b]明確設置”content-type”[/b] (jquery.ajax() 文檔, commit)
在1.3版，如果沒有實際數據發送，jquery.ajax的contenttype會被忽略。1.4版里，contenttype將總是和請求一同發送。這修復了某些后臺憑靠”content-type”頁頭判斷回復類別所造成的問題。
[b]明確設置jsonp回調函數的名字[/b] (jquery.ajax 文檔, commit)
你可以使用jquery.ajax()方法的jsonpcallback選項，通過名字來指定jsonp的回調函數。
[b]防止啟動前跨域xhr[/b] (commit)
[p]跨域ajax(針對提供支持的瀏覽器)將更易用，因為默認設置下，啟動前xhr被阻止了。(todo)[/p]
[b]jquery.ajax()現在使用”onreadystatechange”事件替換了計時器[/b] (commit)
[p]使用”onreadystatechange”替換了輪流探詢，ajax請求現在將使用更少的資源[/p]
元素屬性 (attributes)
.css()和.attr() 的性能被優化了。
<[img]http://bbon.cn/wp-content/uploads/2010/01/165829epl.jpg[/img]
.attr()方法多了一個設置函數作為參數 (.attr() 文檔)
你不但可以將一個函數用在.attr()里，還可以在這個函數里使用屬性的當前值。jquery('  ')
.attr("alt", function(index, value) {
return "please, " + value;
});
[b].val( function )[/b] (.val() 文檔)
jquery("input:text.food").hide();
jquery("
”), jquery(“”) 和 jquery(“”)[/b] (jquery() 文檔, commit)
現在這三個方法都使用同一個代碼路徑了(document.createelement), 來優化jquery("")的性能。注意，如果你指定了屬性，將會使用瀏覽器本身的語法分析(通過設置innerhtml)。
樣式 (css)
[p][b].css()方法在性能是以前的2倍。[/b][/p]
[img]http://bbon.cn/wp-content/uploads/2010/01/165830osi.jpg[/img]
.addclass(), .removeclass(), 和 .hasclass()這幾個方法在性能上是以前的3倍
[img]http://bbon.cn/wp-content/uploads/2010/01/165831nce.jpg[/img]
[b].toggleclass()可以切換多個css類了[/b] (.toggleclass() 文檔, commit)
你可以通過.toggleclass()調用多個css類的名字來切換他們。$("div").toggleclass("current active");
數據
[b].data()返回對象, .data(object)設置對象[/b] (.data() 文檔, commit 1, commit 2)
有時候你可能需要在一個元素上附加一個復雜的對象。一個常見的例子是你需要從一個元素身上復制所有的數據到令一個元素上。在jquery 1.4里, 不使用任何參數調用.data()時，.data會返回一個復雜對象。(譯注: 包含所有鍵-值對的對象。) 調用.data(object) 則會設置這個對象。注意這個對象還包括了元素上綁定的事件，所以用的時候要小心。
[b]除非需要, 不然不會創建數據緩存。[/b] (commit 1, commit 2, commit 3)
[p]jquery使用一個獨特的自定義屬性來獲取特定元素上附加的數據。當查找數據，但是沒有新加的數據的時候，jquery會盡量避免創建這個自定義屬性。這樣可能會提高性能，同時還會在這種情況下避免污染dom。[/p]
效果 (effects)
[b]單個屬性緩進緩出[/b] (per-property easing 文檔, commit)
除了能夠給一個動態效果指定緩進出函數外，你現在可以指定每個屬性的緩進出函數了。james padolsey的blog上有更進一步的信息和演示。$("#clickme").click(function() {
$("div").animate({
width: ["+=200px", "swing"],
height: ["+=50px", "linear"],
}, 2000, function() {
$(this).after(" animation complete. ");
});
});
事件 (events)
[b]新方法: jquery.proxy()[/b] (jquery.proxy() documenation, commit 1, commit 2)
如果你需要保證一個函數內的”this”恒定地保持某個值, 你可以用jquery.proxy獲得一個相同作用域的函數。var obj = {
name: "john",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jquery.proxy( obj, "test" ) );
[b]多個事件綁定[/b] (.bind() 文檔)
[p]你可以通過遞入一個對象來一次性綁定元素的多個事件。[/p]$("div.test").bind({
click: function(){
$(this).addclass("active");
},
mouseenter: function(){
$(this).addclass("inside");
},
mouseleave: function(){
$(this).removeclass("inside");
}
});
[b]‘change’和’submit’事件規范化[/b] (change 文檔, submit 文檔)
普通的或是即時的change和submit事件可以在各種瀏覽器上穩定工作了。我們覆蓋了ie里的change和submit, 替換為與其他瀏覽器相同的事件。
[b]新的事件: ‘focusin’ and ‘focusout’[/b] (.focusin() 文檔, .focusout() 文檔, commit)
focusin和focusout在一般情況下等同于focus和blur, 但是多了向父元素傳遞的作用。如果你自己編寫你的事件代理模式(todo), 這個功能將對你有很大幫助。請注意對focus和blur使用live()方法將不會起作用; 在設計的時候我們根據 dom事件規范決定不使其向父元素傳遞事件。$("form").focusout(function(event) {
var tgt = event.target;
if (tgt.nodename == "input" && !tgt.value) {
$(tgt).after("nothing here");
}
});
[b]所有的事件都可以成為即時事件[/b] (.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)
[b]live/die也支持環境變量了[/b] (commit)
[p]現在可以在綁定事件的時候給選擇符指定一個環境。如果環境被指定了, 只有屬于這個環境下的元素才會被綁定事件。在創建即時事件的時候, 元素本身不需要已經被定義, 但是環境必須被創建。[/p]
確定ready事件至少含有body元素 (commit)
jquery現在會檢查body是不是存在，如果不存在，會對body進行輪流探詢。
[b]在不需要手動處理內存溢出的非ie瀏覽器中, 卸載的速度提高了。[/b] (commit)
dom操作 (manipulation)
[p]在jquery 1.4里一系列的dom操作方法的性能都有巨大的提升。[/p]
.append(), .prepend(), .before(), and .after()的性能提高了。
[img]http://bbon.cn/wp-content/uploads/2010/01/165832o5x.jpg[/img]
.html()的性能提高到以前的3倍。
[img]http://bbon.cn/wp-content/uploads/2010/01/165832pm8.jpg[/img]
[p][b].remove()和.empty()的速度則達到以前的4倍.[/b][/p]
[img]http://bbon.cn/wp-content/uploads/2010/01/165833mub.jpg[/img]
[b]新方法: .detach()[/b] (.detach() 文檔, commit)
detach()將一個元素從dom里移除, 但是并不卸載關聯的事件處理函數。這個方法可用于暫時性的將一個元素移除，執行相關操作，然后返回。var foo = $("#foo").click(function() {
// 相關操作
});
foo.detach();
// foo保留了相關處理函數
foo.appendto("body");
[b]新的unwrap()方法[/b] (documentation, commit)
unwrap()方法拿到一個已知的父元素的子元素，然后將父元素用子元素替換。(譯注: 將子元素從”包裹”里拿出來, 因名unwrap)。如此這般:
annie davey stevie annie davey stevie [b]dommanip方法里的緩存[/b] (commit) jquery會將jquery("")和.after(" ")一類方法創建的節點記入緩存。這樣, 對于利用這些方法, 使用字符串進行dom操作的頁面，性能將有極大的提高。
[b]無連接的節點間的before, after, replacewith操作[/b] (commit)
現在你可以對還沒有放置到dom tree上的節點進行before, after, 和replacewith的操作了。意味著你可以先對節點進行復雜的操作, 待完成后再放到合適的dom位置上。這樣也能盡量避免操作過程中造成重新排版。jquery("
").before("
hello ").appendto("body") .clone(true) 也會復制關聯數據 (clone 文檔, commit) 1.3版中, .clone(true)雖然也是深度復制, 但是沒有復制關聯的數據。1.4版里，它則會復制數據, 同時還包括所有的事件。這點上和jquery.extend在語義想同的, 所以普通對象和陣列會被復制, 但是自定義的對象則不會。 位移 (offset) [b].offset( coords | function )[/b] (.offset() 文檔, commit) 現在可以設置元素的位移了! 和所有的設置函數一樣, offset也可以接受一個函數作為第二個參數。 隊列 (queueing) 隊列經歷了一次大修, 使用隊列會比使用默認的fx更易掌握。 [b]新的 .delay() 方法[/b] (.delay() 文檔, commit) .delay()方法會根據參數滯后若干毫秒執行隊列里剩下的對象。默認的它會使用”fx”隊列。但你可以選擇性的通過delay方法的第二個參數選擇其他隊列。(譯注:每個隊列都以一個名字識別。)$("div").fadein().delay(4000).fadeout(); 隊列里的next (.queue() 文檔, commit) [p]jquery 1.4版里, 當隊列里的一個函數被調用的時候，第一個參數會被設為另一個函數。當后者被調用的時候, 會自動排除隊列里的下一個對象, 以此來推動隊列到下一步。[/p]jquery("div").queue("ajax", function(next) { var self = this; jquery.getjson("/update", function(json) { $(self).html(json.text); next(); }; }).queue("ajax", function() { $(this).fadein(); }); [b].clearqueue()[/b] (clearqueue 文檔, commit) 隊列可以被清空了。這個方法會移除隊列里所有未執行的函數, 但不會移除正在運行的函數。無參數的情況下調用.clearqueue()方法將會清空默認的”fx”隊列。 選擇符 (selectors) [b]“#id p”效率更高[/b] (commit) [p]所有以id開頭的選擇符都得到了優化, 能夠在瞬間得到返回值。所有以id為開頭的選擇符速度將一直快于其他選擇符。[/p] 頁面遍訪 (traversing) [b].index(), .index(string)[/b] (index 文檔, commit) .index() 方法經過重寫, 變得更加直觀和靈活。 [p]你可以獲得一個元素相對于同父元素的指數:[/p]// 計算第一個 元素在頁面上所有 該文章在 2010/4/26 23:40:37 編輯過 |
關鍵字查詢
相關文章
正在查詢... 
|
400 186 1886
