首先現(xiàn)在你可以從這里下載最新的1.4的版本了: http://code.jquery.com/jquery-1.4.js

1. 傳遞屬性給jQuery

1.4之前的版本中jQuery就通過(guò)"attr”方法支持了添加屬性到元素集合中，"attr”方法不僅可以傳遞屬性名和值，也可以傳遞包含有多個(gè)屬性的對(duì)象集合。在1.4中，除了可以創(chuàng)建新的對(duì)象，現(xiàn)在它更能將屬性對(duì)象作為參數(shù)傳遞給jQuery函數(shù)或?qū)ο笞陨怼Ｈ缒憧梢詣?chuàng)建一個(gè)含有多個(gè)屬性的鏈接元素，通過(guò)1.4代碼如下：

 jQuery('<a/>', { 
   id: 'gid', 
   href: 'http://www.google.com', 
   title: 'google非和諧版', 
   rel: 'external', 
   text: '進(jìn)入Google!' 
 }); 

你可能會(huì)注意到"text”屬性并且猜測(cè)它是干嗎的，因?yàn)閍標(biāo)簽是沒(méi)有"text”屬性的。呵呵，當(dāng)你傳遞某些屬性時(shí)，jquery 1.4同樣會(huì)檢查并使用它自己的方法。因此上面的"text”屬性可以讓jQuery調(diào)用它的".text()”方法并將"進(jìn)入Google!“作為它的唯一參數(shù)。

這里給出一個(gè)更好的例子：

 jQuery('<div/>', { 
   id: 'foo', 
   css: { 
     fontWeight: 700, 
     color: 'green' 
   }, 
   click: function(){ 
     alert('Foo被點(diǎn)擊過(guò)!'); 
   } 
 }); 

"id”屬性是作為一個(gè)普通屬性被添加的。但"css”和"click”屬性則對(duì)應(yīng)特定的jQuery方法。上面的代碼在1.4之前一種寫(xiě)法如下：

 jQuery('<div/>') 
   .attr('id', 'foo') 
   .css({ 
     fontWeight: 700, 
     color: 'green' 
   }) 
   .click(function(){ 
     alert('Foo被點(diǎn)擊過(guò)!'); 
   }); 

更多關(guān)于jQuery特性

2. 所有的東西都可以"until“了

1.4新增了三個(gè)對(duì)DOM操作的方法，他們分別是"nextUntil",  "prevUntil"  和  "parentsUntil"。 這些方法會(huì)按照某個(gè)順序去遍歷DOM對(duì)象直到滿足指定的篩選條件。假設(shè)我們有一個(gè)水果列表：

<ul>
  <li>蘋(píng)果</li>
  <li>香蕉</li>
  <li>葡萄</li>
  <li>草莓</li>
  <li>例子</li>
  <li>桃子</li>
</ul>

如果你想選擇所有在"Apple”和"Strawberry”之間的元素。代碼可以這樣寫(xiě)：

 jQuery('ul li:contains(蘋(píng)果)').nextUntil(':contains(梨子)'); 
 // 得到 香蕉，葡萄，草莓

更多關(guān)于: prevUntil, nextUntil, parentsUntil

3. 綁定多個(gè)事件

與通過(guò)jquery鏈綁定多個(gè)方法到一起相比，現(xiàn)在你可以通過(guò)一次調(diào)用來(lái)綁定所有這些事件，如：

jQuery('#foo).bind({ 
   click: function() { 
     // 具體代碼 
   }, 
   mouseover: function() { 
     // 具體代碼
   }, 
   mouseout: function() { 
     // 具體代碼 
   } 
 }) 

你也可以通過(guò) ".one()"方法操作。

更多關(guān)于.bind(…)

4. Per-Property Easing

與給一個(gè)動(dòng)畫(huà)僅僅定義一個(gè)緩動(dòng)效果相比，現(xiàn)在你可以給你想要添加動(dòng)畫(huà)效果的屬性定義不同的緩動(dòng)函數(shù)了。jQuery包含兩個(gè)緩動(dòng)函數(shù)，旋轉(zhuǎn)(默認(rèn))和線性移動(dòng)。如果你需要其他的效果的話，你需要去單獨(dú)下載它們 !

要給每個(gè)屬性指定一個(gè)緩動(dòng)函數(shù)的話，你可以簡(jiǎn)單的通過(guò)屬性數(shù)組來(lái)達(dá)到目的，在數(shù)組中，第一個(gè)值是你想要實(shí)現(xiàn)的效果值，第二個(gè)參數(shù)則是使用的緩動(dòng)函數(shù)，如：

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

查看代碼演示!

你也可以以鍵值對(duì)的形式在那些可選設(shè)置項(xiàng)中單獨(dú)指定屬性緩動(dòng)函數(shù)：

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

原文作者注 - 小小謙虛一下，這個(gè)新特性是作者James Padolsey的主意!

更多關(guān)于per-property easing

5. 新的Live事件!

1.4添加了對(duì)"submit”,"change”,"focus”,和"blur”事件的委托支持。在jQuery中，我們可以使用".live()”方法去委托事件。這在你需要注冊(cè)事件到大量元素中或新的元素需要不斷的被添加(使用".live()”會(huì)比不斷的重新綁定事件更高效)將會(huì)很有用。

但是，注意！如果你需要委托"focus”和"blur”事件的時(shí)候，你必須使用"focusin”和"focusout”事件名稱！

jQuery('input').live('focusin', function(){
  //具體操作
});

6. 控制函數(shù)的上下文

jQuery 1.4提供了一個(gè)新的叫"proxy”的函數(shù)，它在jQuery命名空間下。該函數(shù)需要兩個(gè)參數(shù)，不管是代碼域還是方法名，或者是函數(shù)和其所處的代碼域。t"this”關(guān)鍵字在JavaScrip中是相當(dāng)難掌握的。有時(shí)候你可能期待它指的是你之前創(chuàng)建的某個(gè)對(duì)象，而不是一個(gè)你可能沒(méi)想到的元素。

舉例說(shuō)明，假設(shè)我們有一個(gè)"app”對(duì)象，它有兩個(gè)屬性，一個(gè)是"clickHandler”方法, 另外一個(gè)則是一個(gè)config對(duì)象。

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

當(dāng)我們調(diào)用如"app.clickHandler()"時(shí)，"clickHandler"會(huì)將"app”作為其上下文。這意味著在這里"this"關(guān)鍵字將允許其訪問(wèn)"app"。這在我們簡(jiǎn)單調(diào)用下面函數(shù)時(shí)沒(méi)什么問(wèn)題：

app.clickHandler(); // "你好!" 消息觸發(fā)

讓我們?cè)囋噷⑵渥鳛槭录壎〞?huì)有什么情況：

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

當(dāng)我們點(diǎn)擊一個(gè)鏈接的時(shí)候什么都不會(huì)發(fā)生，函數(shù)不會(huì)工作。這是因?yàn)閖Query(其他任何正常的事件模型同樣如此)默認(rèn)會(huì)把目標(biāo)元素a設(shè)置成為事件的上下文。即"this”現(xiàn)在其實(shí)是指剛剛被點(diǎn)擊過(guò)的元素a。但我們實(shí)際上并不想這樣子的。我們期待"this”應(yīng)該被設(shè)置為"app”.在jQuery 1.4中實(shí)現(xiàn)這個(gè)再簡(jiǎn)單不過(guò)了：

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

現(xiàn)在無(wú)論什么時(shí)候一個(gè)鏈接被點(diǎn)擊到，"你好"的消息都會(huì)被觸發(fā)了！

proxy函數(shù)會(huì)返回一個(gè)你的函數(shù)被"包裝過(guò)"之后的對(duì)象，在該對(duì)象中，"this”被設(shè)置成任意你指定的對(duì)象。這在其他的情景下同樣有用，如傳遞回調(diào)函數(shù)給其他的jQuery對(duì)象或者一些插件的時(shí)候。

更多關(guān)于jQuery.proxy

7. 在動(dòng)畫(huà)中添加停頓

現(xiàn)在你可以再你的動(dòng)畫(huà)隊(duì)列中添加停頓效果了。事實(shí)上，任何隊(duì)列中都可以添加該函數(shù)，但最常用的情況應(yīng)該還是在使用"fx”隊(duì)列的時(shí)候。這允許你在多個(gè)動(dòng)作中間添加暫停而不需要通過(guò)回調(diào)函數(shù)去調(diào)用"setTimeout"。".delay()" 函數(shù)的第一個(gè)參數(shù)是你想停頓的毫秒數(shù)。

jQuery('#foo')
  .slideDown() // Slide down
  .delay(200) // 停頓 200 ms
  .fadeIn(); // Fade in

如果你想給其他不是默認(rèn)的"fx”的隊(duì)列也添加停頓的話，這時(shí)候，你需要將隊(duì)列名作為第二個(gè)參數(shù)傳遞給".delay()"。

更多關(guān)于.delay(…)

8. 檢查元素是否擁有某對(duì)象

通過(guò)".has()”方法，jQuery 1.4使得檢查一個(gè)元素(或者集合)是不是有某對(duì)象變得相當(dāng)簡(jiǎn)單。從程序角度看，它和jQuery的selector過(guò)濾器":has()”是一樣的。該方法會(huì)返回在當(dāng)前集合中所有包含有至少一個(gè)符合條件的元素?cái)?shù)組。

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

上面方法會(huì)返回所有包含有UL元素的DIV元素?cái)?shù)組。在這種情況下，你可能會(huì)更傾向于簡(jiǎn)單使用選擇器的過(guò)濾器(":has()"), 但當(dāng)你需要通過(guò)代碼過(guò)濾一個(gè)數(shù)組的時(shí)候，該方法仍會(huì)很有用。

1.4同樣在jQuery命名空間下添加了新的"contains"函數(shù)。這是一個(gè)低級(jí)的函數(shù)，它接受兩個(gè)DOM節(jié)點(diǎn)作為參數(shù)。它會(huì)返回一個(gè)布爾值來(lái)表示后面一個(gè)元素是否在前面一個(gè)元素中存在。如：

jQuery.contains(document.documentElement, document.body);
// 返回true - <body>在<html>存在

更多關(guān)于: .has(…), jQuery.contains(…)

9. 去掉元素的包裝

".warp()”已經(jīng)在jQuery中有段日子了，現(xiàn)在跟它對(duì)應(yīng)的".unwrap()”方法也被加進(jìn)到1.4中了。這個(gè)方法剛好跟warp()方法相反。假設(shè)有下面的DOM結(jié)構(gòu)：

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

我們可以用下面的函數(shù)去掉段落元素的外層：

jQuery('p').unwrap();

最終的DOM結(jié)構(gòu)如下：

注意，這個(gè)方法處理比較簡(jiǎn)單，它會(huì)移掉任何元素的父節(jié)點(diǎn)。

更多關(guān)于 .unwrap(…)

10. detach() vs remove()

新的".detach()”方法允許你從DOM中移掉元素，這跟".remove()”很像。但與".remove()”有本質(zhì)不同的是"detach()”不會(huì)將jQuery賦給該元素的數(shù)據(jù)也給注銷掉。這包含通過(guò)".data()”和其他任意的通過(guò)jQuery的事件系統(tǒng)添加的事件等數(shù)據(jù)。

如果你想從DOM中移除某個(gè)元素，但你又可能需要在后面的某個(gè)時(shí)候把該元素重新添加到DOM中的時(shí)候這個(gè)函數(shù)將會(huì)很有用，這時(shí)候該元素的事件和其他的數(shù)據(jù)都會(huì)被保留下來(lái)。

var foo = jQuery('#foo');
// 綁定一個(gè)重要的事件
foo.click(function(){
  alert('Foo!');
});
foo.detach(); // 從 DOM中移除事件
// … 其他操作
foo.appendTo('body'); // 將元素重新加入到 DOM
foo.click(); // 彈出 "Foo!"

更多 .detach(…)

11. index(…) 加強(qiáng)

jQuery 1.4中我們有兩種使用".index()”方法的方式。首先，你可以僅僅將一個(gè)元素自身作為參數(shù)，這樣你可以得到該元素在當(dāng)前集合中所處的索引位置值。

如果不設(shè)置參數(shù)的話，現(xiàn)在會(huì)返回該元素的兄弟節(jié)點(diǎn)。因此，假設(shè)有下面的DOM結(jié)構(gòu)：

<ul>
 <li>蘋(píng)果</li>
 <li>香蕉</li>
 <li>葡萄</li>
 <li>草莓</li>
 <li>例子</li>
 <li>桃子</li>
 </ul>

當(dāng)一個(gè)節(jié)點(diǎn)被點(diǎn)擊的時(shí)候，你如果想找到在所有的節(jié)點(diǎn)集合中被單擊的節(jié)點(diǎn)的位置，你可以這樣寫(xiě)：

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

jQuery 1.4還允許你指定一個(gè)選擇器作為".index()”的第一個(gè)參數(shù)，這樣它會(huì)返回該元素在選擇器中產(chǎn)生的元素集合中的位置。

最后需要注意的是，如果該元素在集合中存在的話，該函數(shù)會(huì)返回一個(gè)其位置的整數(shù)，如果不存在，則返回-1。

更多關(guān)于 .index(…)

12. DOM 操作的方法支持回調(diào)函數(shù)

大部分對(duì)DOM進(jìn)行操作的函數(shù)現(xiàn)在都支持傳遞函數(shù)作為唯一參數(shù)了(如果是".css()”和".attr()”的情況的話，它會(huì)作為第二參數(shù))。該函數(shù)會(huì)在集合中的每個(gè)元素上都執(zhí)行一次，從而確定哪些應(yīng)作為該函數(shù)的實(shí)際值提供給回調(diào)函數(shù)調(diào)用。

下面給出所有支持該功能的函數(shù)列表:

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

通過(guò)回調(diào)函數(shù)，你可以通過(guò)"this”訪問(wèn)數(shù)組中的當(dāng)前元素，還可以通過(guò)第一個(gè)參數(shù)得到它在數(shù)組中的位置。

jQuery('li').html(function(i){
  return '該列表中的索引位置: ' + i;
});

同樣，你也可以通過(guò)上面的某些方法得到另外一個(gè)參數(shù)，如果你調(diào)用一個(gè)setter方法(如".html()”或".attr(‘href')")你就可以直接訪問(wèn)當(dāng)前的值了。如：

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

正如上面看到的，在使用".css()" 和 ".attr()" 方法時(shí)，因?yàn)榈谝粋€(gè)參數(shù)需要被用作指定那些你需要設(shè)置或改變的屬性名，你需要將回調(diào)函數(shù)作為第二參數(shù)。

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

13. 對(duì)象類型判斷

jQuery 1.4添加了兩個(gè)新的方法(直接放到了jQuery命名空間下面)以方便我們來(lái)判斷當(dāng)前處理的對(duì)象的類型。

首先是方法"isEmptyObject”，顧名思義，這個(gè)函數(shù)會(huì)返回一個(gè)布爾值來(lái)表明傳遞的對(duì)象是不是空對(duì)象(缺乏屬性--無(wú)論是對(duì)象自身還是繼續(xù)的對(duì)象)。其次是方法"isPlainObject”，它會(huì)返回一個(gè)布爾值來(lái)表明操作的對(duì)象是否是一個(gè)簡(jiǎn)單的js對(duì)象(指通過(guò)"{ }"或者"new Object”創(chuàng)建的對(duì)象)。

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

更多關(guān)于: isPlainObject(…), isEmptyObject(…)

14. Closest(…) 增強(qiáng)

jQuery的".closest()”方法現(xiàn)在可以接受一組選擇器了。如果開(kāi)發(fā)人員想遍歷一個(gè)元素的祖先，并在其中查找離其最近的那些符合某些特征的節(jié)點(diǎn)的時(shí)候，這會(huì)很有用。

另外，該函數(shù)現(xiàn)在也接受將上下文作為第二參數(shù)了。這意味著你現(xiàn)在可以控制你想在DOM中遍歷的元素范圍了。雖然這兩種情況我們一般很少用到，不過(guò)它們?cè)趈Query內(nèi)部被很好的使用。

更多關(guān)于 .closest(…)

15. 新的事件! focusIn 和focusOut

上文已經(jīng)提到，為了委托"focus”和"blur”事件你需要這些新的事件，它們是"focusin”和"focusout”。這些新的事件將允許你在一個(gè)元素或其子元素獲取焦點(diǎn)的時(shí)候進(jìn)行相應(yīng)操作。

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

同時(shí)應(yīng)該注意的是這兩個(gè)事件都不是按冒泡順序傳遞，它們將按捕獲順序觸發(fā)。這意味著最外層的(也即祖先)元素會(huì)在實(shí)際節(jié)點(diǎn)事件觸發(fā)前被觸發(fā)。

更多關(guān)于 focusIn 和 focusOut 事件。

大家開(kāi)始玩轉(zhuǎn)jQuery 1.4吧。它是目前jQuery發(fā)布的一個(gè)最有前瞻性，最多特性支持和表現(xiàn)最好的一個(gè)版本！

好了，本文就到這里了。我已經(jīng)開(kāi)始準(zhǔn)備跟隨這個(gè)改變了，我相信這些改變同樣會(huì)讓你印象深刻的！

如果你還沒(méi)準(zhǔn)備好，你可以看看 "jQuery14天", 一個(gè)專門(mén)為jQuery 1.4為做的在線站點(diǎn)，對(duì)了，另外還是為了慶祝jQeury的四歲生日！

最后不要忘了去閱讀 API 文檔 !

JavaScript技術(shù)：jQuery 1.4 15個(gè)你應(yīng)該知道的新特性(譯)，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。