jQuery 1.4官方文檔中文版
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
為了慶祝jquery的四周歲生日, jquery的團(tuán)隊(duì)榮幸的發(fā)布了jquery javascript庫(kù)的最新主要版本! 這個(gè)版本包含了大量的編程，測(cè)試，和記錄文檔的工作，我們?yōu)榇烁械胶茯湴痢?/p> 我要以個(gè)人的名義感謝 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。謝謝他們?cè)谛迯?fù)bug和完成這次發(fā)布上所做的工作。 下載(downloading) 按照慣例，我們提供了兩份jquery的拷貝，一份是最小化的(我們現(xiàn)在采用google closure作為默認(rèn)的壓縮工具了)，一份是未壓縮的(供糾錯(cuò)或閱讀)。 jquery壓縮 (23kb gzipped) jquery常規(guī) (154kb) 另外，google也在他們的服務(wù)器上放置了一份jquery的拷貝。這份拷貝會(huì)自動(dòng)的最小化然后壓縮 – 并且放在google最快的緩存服務(wù)器上。 http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js你可以在你的站點(diǎn)上直接引用上面的url，這樣就可以享受迅速加載jquery的性能優(yōu)勢(shì)了。 就jquery1.4來(lái)說(shuō)，我們努力的減少大規(guī)模升級(jí)中的麻煩 – 通過(guò)保持所有public函數(shù)的簽名。即使如此，還請(qǐng)通讀可能會(huì)造成問(wèn)題的變更列表，這樣能夠了解哪些變更可能會(huì)給你的應(yīng)用造成問(wèn)題。 (功能) features 下面的內(nèi)容概括了jquery1.4里加入的變更和功能。另外所有的變更都已經(jīng)在jquery 1.4 的文檔里記錄了。 熱門方法經(jīng)過(guò)了性能上的大”檢修” 不少比較熱門的和常用的jquery方法在1.4里被重寫了。(譯注:重寫了方法的內(nèi)部，外部調(diào)用沒(méi)有大幅度改變) 我們分析源碼的時(shí)候發(fā)現(xiàn)我們能夠獲得大幅的性能提升，通過(guò)把jquery和自己比較: 查看內(nèi)部函數(shù)被調(diào)用了多少次，然后努力降低源碼的復(fù)雜度(譯注:計(jì)算機(jī)算法中的complexity) view the cropped chart. 在1.4版里我們顯著的降低了大部分熱門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().這樣代碼就可以這樣寫: // 找出所有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 + " (新窗口打開)"; }); ajax 嵌套參數(shù)的序列化 (jquery.param() 文檔, commit 1, commit 2)jquery 1.4在jquery.param方法里加入了嵌入?yún)?shù)序列化的支持，借用了php編程里興起的，而后又被ruby on rails推廣開來(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 }); 更多信息參見: jquery.param() 文檔, jquery.ajax() 文檔, commit, code json和腳本類型通過(guò)”content-type”自動(dòng)識(shí)別。 (jquery.ajax 文檔, commit 1, commit 2)如果一個(gè)ajax請(qǐng)求的回復(fù)的媒體類型是json(application/json), datatype默認(rèn)設(shè)為”json”(如果datatype沒(méi)有被指明)。另外，如果回復(fù)的媒體類型是 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)獲取。 明確設(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ù)類別所造成的問(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(' ')
.attr("alt", function(index, value) {
return "please, " + value;
});
.val( function ) (.val() 文檔)
jquery("input:text.food").hide();
jquery("
現(xiàn)在當(dāng)你需要使用jquery函數(shù)創(chuàng)建一個(gè)元素的時(shí)候，你可以同時(shí)附遞一個(gè)對(duì)象來(lái)指定屬性值和事件: jquery(" ", { id: "foo", css: { height: "50px", width: "50px", color: "blue", backgroundcolor: "#ccc" }, click: function() { $(this).css("backgroundcolor", "red"); } }).appendto("body");對(duì)象里的鍵值的名字與相關(guān)的jquery的方法的名字是對(duì)應(yīng)的，對(duì)象的值會(huì)被作為參數(shù)傳遞給jquery的方法。 (譯注:譬如$("link", {css:{background:"#ccc"}});相當(dāng)于$("link")).css("background", "#ccc"); .eq(-n), .get(-n) (負(fù)指數(shù)) (.eq() 文檔, .get() 文檔, commit) 你現(xiàn)在可以在.get()和.eq()方法里使用負(fù)數(shù)。譬如，你要選擇倒數(shù)第2個(gè)div元素，或者是倒數(shù)第2個(gè)dom對(duì)象:$("div").eq(-2); $("div").get(-2); 新的.first()和.last()方法 (.first() 文檔, .last() 文檔, commit) 方便起見, 新增的.first()和.last()方法等同于.eq(0)和.eq(-1). 新的.toarray()方法 (.toarray() 文檔, commit) .get()方法自始就是從jquery集合里返回一個(gè)陣列。為了能夠更明確, 你可以用.toarray()來(lái)達(dá)到一樣的效果。(譯注:這里應(yīng)該是為了以后的版本留出空間，譬如以后可能會(huì)加入.tolist()方法，到時(shí)候就會(huì)易于區(qū)分。) 不過(guò)，和.get()不一樣的是，.toarray()不接受參數(shù)。 jquery()返回一個(gè)空集 (jquery() 文檔, commit) 在jquery 1.3中,jquery()方法返回僅包括document的jquery集合。這個(gè)可以用來(lái)創(chuàng)建一個(gè)空集，然后動(dòng)態(tài)加入一些元素。注: jquery().ready()方式在1.4中依然有效，但是被指示陳舊了。請(qǐng)使用jquery(document).ready()或者jquery(function(){})。 jquery(“tag”) (element selector 文檔, commit)當(dāng)使用單個(gè)標(biāo)簽名字的時(shí)候jquery會(huì)使用更快捷的路徑。 jquery(“”), jquery(“”) 和 jquery(“”) (jquery() 文檔, commit)
現(xiàn)在這三個(gè)方法都使用同一個(gè)代碼路徑了(document.createelement), 來(lái)優(yōu)化jquery("")的性能。注意，如果你指定了屬性，將會(huì)使用瀏覽器本身的語(yǔ)法分析(通過(guò)設(shè)置innerhtml)。
樣式 (css)
.css()方法在性能是以前的2倍。 
.addclass(), .removeclass(), 和 .hasclass()這幾個(gè)方法在性能上是以前的3倍
.toggleclass()可以切換多個(gè)css類了 (.toggleclass() 文檔, commit)
你可以通過(guò).toggleclass()調(diào)用多個(gè)css類的名字來(lái)切換他們。$("div").toggleclass("current active");
數(shù)據(jù)
.data()返回對(duì)象, .data(object)設(shè)置對(duì)象 (.data() 文檔, commit 1, commit 2)
有時(shí)候你可能需要在一個(gè)元素上附加一個(gè)復(fù)雜的對(duì)象。一個(gè)常見的例子是你需要從一個(gè)元素身上復(fù)制所有的數(shù)據(jù)到令一個(gè)元素上。在jquery 1.4里, 不使用任何參數(shù)調(diào)用.data()時(shí)，.data會(huì)返回一個(gè)復(fù)雜對(duì)象。(譯注: 包含所有鍵-值對(duì)的對(duì)象。) 調(diào)用.data(object) 則會(huì)設(shè)置這個(gè)對(duì)象。注意這個(gè)對(duì)象還包括了元素上綁定的事件，所以用的時(shí)候要小心。
除非需要, 不然不會(huì)創(chuàng)建數(shù)據(jù)緩存。 (commit 1, commit 2, commit 3)
jquery使用一個(gè)獨(dú)特的自定義屬性來(lái)獲取特定元素上附加的數(shù)據(jù)。當(dāng)查找數(shù)據(jù)，但是沒(méi)有新加的數(shù)據(jù)的時(shí)候，jquery會(huì)盡量避免創(chuàng)建這個(gè)自定義屬性。這樣可能會(huì)提高性能，同時(shí)還會(huì)在這種情況下避免污染dom。 效果 (effects) 單個(gè)屬性緩進(jìn)緩出 (per-property easing 文檔, commit) 除了能夠給一個(gè)動(dòng)態(tài)效果指定緩進(jìn)出函數(shù)外，你現(xiàn)在可以指定每個(gè)屬性的緩進(jìn)出函數(shù)了。james padolsey的blog上有更進(jìn)一步的信息和演示。$("#clickme").click(function() { $("div").animate({ width: ["+=200px", "swing"], height: ["+=50px", "linear"], }, 2000, function() { $(this).after("animation complete. ");
});
});
事件 (events)
新方法: jquery.proxy() (jquery.proxy() documenation, commit 1, commit 2)
如果你需要保證一個(gè)函數(shù)內(nèi)的”this”恒定地保持某個(gè)值, 你可以用jquery.proxy獲得一個(gè)相同作用域的函數(shù)。var obj = {
name: "john",
test: function() {
alert( this.name );
$("#test").unbind("click", obj.test);
}
};
$("#test").click( jquery.proxy( obj, "test" ) );
多個(gè)事件綁定 (.bind() 文檔)
你可以通過(guò)遞入一個(gè)對(duì)象來(lái)一次性綁定元素的多個(gè)事件。 $("div.test").bind({ click: function(){ $(this).addclass("active"); }, mouseenter: function(){ $(this).addclass("inside"); }, mouseleave: function(){ $(this).removeclass("inside"); } }); ‘change’和’submit’事件規(guī)范化 (change 文檔, submit 文檔) 普通的或是即時(shí)的change和submit事件可以在各種瀏覽器上穩(wěn)定工作了。我們覆蓋了ie里的change和submit, 替換為與其他瀏覽器相同的事件。 新的事件: ‘focusin’ and ‘focusout’ (.focusin() 文檔, .focusout() 文檔, commit) focusin和focusout在一般情況下等同于focus和blur, 但是多了向父元素傳遞的作用。如果你自己編寫你的事件代理模式(todo), 這個(gè)功能將對(duì)你有很大幫助。請(qǐng)注意對(duì)focus和blur使用live()方法將不會(huì)起作用; 在設(shè)計(jì)的時(shí)候我們根據(jù) dom事件規(guī)范決定不使其向父元素傳遞事件。$("form").focusout(function(event) { var tgt = event.target; if (tgt.nodename == "input" && !tgt.value) { $(tgt).after("nothing here"); } }); 所有的事件都可以成為即時(shí)事件 (.live() 文檔) 除了ready, focus (用focusin), 和 blur (用focusout)以外, 所有能用.bind()綁定的事件都可以成為即時(shí)事件。 在live()所支持的事件里，我們對(duì)能夠支持下面這幾個(gè)額外的事件感到尤其驕傲。通過(guò).live()里的事件代理, 1.4版實(shí)現(xiàn)了對(duì)change, submit, focusin, focusout, mouseenter, 以及mouseleave事件的跨瀏覽器支持。 注: 如果你需要即時(shí)的focus事件，你應(yīng)該用focusin和focusout, 而不要用focus和blur, 因?yàn)榫拖袂懊嫣岬降? focus和blur不向上傳遞。 還有, live()也接受數(shù)據(jù)對(duì)象作為參數(shù)了, 同bind()方法一樣 (commit) live/die也支持環(huán)境變量了 (commit)現(xiàn)在可以在綁定事件的時(shí)候給選擇符指定一個(gè)環(huán)境。如果環(huán)境被指定了, 只有屬于這個(gè)環(huán)境下的元素才會(huì)被綁定事件。在創(chuàng)建即時(shí)事件的時(shí)候, 元素本身不需要已經(jīng)被定義, 但是環(huán)境必須被創(chuàng)建。 確定ready事件至少含有body元素 (commit) jquery現(xiàn)在會(huì)檢查body是不是存在，如果不存在，會(huì)對(duì)body進(jìn)行輪流探詢。 在不需要手動(dòng)處理內(nèi)存溢出的非ie瀏覽器中, 卸載的速度提高了。 (commit) dom操作 (manipulation)在jquery 1.4里一系列的dom操作方法的性能都有巨大的提升。 .append(), .prepend(), .before(), and .after()的性能提高了。
.html()的性能提高到以前的3倍。
.remove()和.empty()的速度則達(dá)到以前的4倍. 
新方法: .detach() (.detach() 文檔, commit)
detach()將一個(gè)元素從dom里移除, 但是并不卸載關(guān)聯(lián)的事件處理函數(shù)。這個(gè)方法可用于暫時(shí)性的將一個(gè)元素移除，執(zhí)行相關(guān)操作，然后返回。var foo = $("#foo").click(function() {
// 相關(guān)操作
});
foo.detach();
// foo保留了相關(guān)處理函數(shù)
foo.appendto("body");
新的unwrap()方法 (documentation, commit)
unwrap()方法拿到一個(gè)已知的父元素的子元素，然后將父元素用子元素替換。(譯注: 將子元素從”包裹”里拿出來(lái), 因名unwrap)。如此這般:
annie davey stevie annie davey stevie dommanip方法里的緩存 (commit) jquery會(huì)將jquery("")和.after(" ")一類方法創(chuàng)建的節(jié)點(diǎn)記入緩存。這樣, 對(duì)于利用這些方法, 使用字符串進(jìn)行dom操作的頁(yè)面，性能將有極大的提高。
無(wú)連接的節(jié)點(diǎn)間的before, after, replacewith操作 (commit)
現(xiàn)在你可以對(duì)還沒(méi)有放置到dom tree上的節(jié)點(diǎn)進(jìn)行before, after, 和replacewith的操作了。意味著你可以先對(duì)節(jié)點(diǎn)進(jìn)行復(fù)雜的操作, 待完成后再放到合適的dom位置上。這樣也能盡量避免操作過(guò)程中造成重新排版。jquery("
").before("
hello ").appendto("body") .clone(true) 也會(huì)復(fù)制關(guān)聯(lián)數(shù)據(jù) (clone 文檔, commit) 1.3版中, .clone(true)雖然也是深度復(fù)制, 但是沒(méi)有復(fù)制關(guān)聯(lián)的數(shù)據(jù)。1.4版里，它則會(huì)復(fù)制數(shù)據(jù), 同時(shí)還包括所有的事件。這點(diǎn)上和jquery.extend在語(yǔ)義想同的, 所以普通對(duì)象和陣列會(huì)被復(fù)制, 但是自定義的對(duì)象則不會(huì)。 位移 (offset) .offset( coords | function ) (.offset() 文檔, commit) 現(xiàn)在可以設(shè)置元素的位移了! 和所有的設(shè)置函數(shù)一樣, offset也可以接受一個(gè)函數(shù)作為第二個(gè)參數(shù)。 隊(duì)列 (queueing) 隊(duì)列經(jīng)歷了一次大修, 使用隊(duì)列會(huì)比使用默認(rèn)的fx更易掌握。 新的 .delay() 方法 (.delay() 文檔, commit) .delay()方法會(huì)根據(jù)參數(shù)滯后若干毫秒執(zhí)行隊(duì)列里剩下的對(duì)象。默認(rèn)的它會(huì)使用”fx”隊(duì)列。但你可以選擇性的通過(guò)delay方法的第二個(gè)參數(shù)選擇其他隊(duì)列。(譯注:每個(gè)隊(duì)列都以一個(gè)名字識(shí)別。)$("div").fadein().delay(4000).fadeout(); 隊(duì)列里的next (.queue() 文檔, commit)jquery 1.4版里, 當(dāng)隊(duì)列里的一個(gè)函數(shù)被調(diào)用的時(shí)候，第一個(gè)參數(shù)會(huì)被設(shè)為另一個(gè)函數(shù)。當(dāng)后者被調(diào)用的時(shí)候, 會(huì)自動(dòng)排除隊(duì)列里的下一個(gè)對(duì)象, 以此來(lái)推動(dòng)隊(duì)列到下一步。 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) 隊(duì)列可以被清空了。這個(gè)方法會(huì)移除隊(duì)列里所有未執(zhí)行的函數(shù), 但不會(huì)移除正在運(yùn)行的函數(shù)。無(wú)參數(shù)的情況下調(diào)用.clearqueue()方法將會(huì)清空默認(rèn)的”fx”隊(duì)列。 選擇符 (selectors) “#id p”效率更高 (commit)所有以id開頭的選擇符都得到了優(yōu)化, 能夠在瞬間得到返回值。所有以id為開頭的選擇符速度將一直快于其他選擇符。 頁(yè)面遍訪 (traversing) .index(), .index(string) (index 文檔, commit) .index() 方法經(jīng)過(guò)重寫, 變得更加直觀和靈活。你可以獲得一個(gè)元素相對(duì)于同父元素的指數(shù): // 計(jì)算第一個(gè)你也可以獲得一個(gè)元素在一個(gè)jquery元素集合中的指數(shù), 這個(gè)集合可以用一個(gè)選擇符或者是一個(gè)dom元素來(lái)指定: // 計(jì)算這個(gè) 元素在頁(yè)面上所有 |
關(guān)鍵字查詢
相關(guān)文章
正在查詢... 
|
400 186 1886
