jQuery 1.4版本的15個新功能（如今已經發布到jquery1.8,特別是加強版的live事件，支持 submit ， change ， focus 和 blur 事件）

1.jQuery()建立DOM元素：支持傳參設置屬性

以前，jQuery能夠經過 attr 方法設置元素的屬性，既可傳屬性的名和值，也能夠是包含幾組特定 屬性名值對 的 對象。在 jQuery 1.4 中，你能夠把一個參數對象做爲附屬參數傳給 jQuery 函數自己，同時建立HTML元素。

比方說你想要建立一個帶有幾個屬性的錨記元素（<a></a>）。在1.4中，一切如此簡單：

jQuery('<a></a>',{
id:'foo',
href:'http://google.com',
title:'BecomeaGoogler',
rel:'external',
text:'GotoGoogle!'
});

 

你大概也能猜到，這個錨記元素沒有的 text 屬性會調用 jQuery 的私有方法」.text()」 ，把元素裏的文字設置爲「Go to Google!」

針對這一用法，下面是更有用的實例：

jQuery('
<div>',{
id:'foo',
css:{
fontWeight:700,
color:'green'
},
click:function(){
alert('Foohasbeenclicked!');
}
});</div>

 

id 爲通常屬性，被直接加上了，而 css 和 click 則激發了相應的 jQuery 方法。在1.4之前，上面的代碼需寫成這個樣子：

jQuery('
<div>')
.attr('id','foo')
.css({
fontWeight:700,
color:'green'
})
.click(function(){
alert('Foohasbeenclicked!');
});</div>

 

2. parentsUntil()、prevUntil()、nextUntil()

1.4的DOM遍歷工具包裏又增長了3個新方法：nextUntil， prevUntil 和 parentsUntil。這些方法會按照特定的方向遍歷DOM，直到遇到知足指定選擇符的元素爲止。舉例來講，現 在咱們有一張水果名的清單：

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

 

咱們想挑選出全部在 Apple 後，Pear 前的全部條目。代碼十分簡單：

jQuery('ulli:contains(Apple)').nextUntil(':contains(Pear)');
//選出的是Banana,Grape,Strawberry

 

3. bind()、one()支持綁定多個事件

再也不須要把各個事件綁定方法「鏈」在一塊兒，如今你能夠把它們捆成一堆，以下：

jQuery('#foo).bind({
click:function(){
//dosomething
},
mouseover:function(){
//dosomething
},
mouseout:function(){
//dosomething
}
})

 

這一用法也適用於 「.one()」.

4. 動畫效果Easing的加強

在jQuery1.4之前版本只能爲一個動畫指定一種緩動效果。如今你能夠爲動畫的各 個屬性參數指定不一樣的緩動效果：

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

 

你也能夠在一個可選的動畫選項對象中爲 secialEasing 設置一系列名值對來徹底上面的工做：

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

 

5. 加強版的 live() 事件

jQuery 1.4 添加了對指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，咱們利用」.live()」 方法指派事件。當你想要爲多個元素註冊事件處理器時，這會很是有用。並且就算知足選擇符的元素是新出現的，這些事件也會繼續有效（使用 .live() 比不斷重複綁定要省力省心得多）。

不過，小心了！註冊 focus 和 blur 事件時你須要用 focusin 和 focusout 做爲事件名。

jQuery('input').live('focusin',function(){
//dosomethingwiththis
});

 

6. 使用proxy()函數指定this

jQuery 1.4 提供了一個全新的 proxy 函數，位於 jQuery 命名空間下。這一函數接受兩個參數，一個是「做用域」（scope）或者一個方法名，另外一個是某函數或者目標做用域（the intended scope）。

衆所周知， JavaScript的 this 關鍵字是一個很難把握的東西。有時候你並不想它表明一個元素，而想讓它表明你前面建立的某個對象。

例如，在這裏咱們建立了一個 app 對象，它擁有兩個屬性，一個是 clickHandler 方法，一個是負責參數配置的對象。

varapp={
config:{
clickMessage:'Hi!'
},
clickHandler:function(){
alert(this.config.clickMessage);
}
};

 

這個 clickHandler 方法，當像 app.clickHandler() 這樣調用時，app 就是其上下文，也就是說 this 關鍵字指向的是 app 。若是隻需簡單地調用，這樣的寫法沒什麼問題：

app.clickHandler();//"Hi!"isalerted

 

不過若是把它看成一個事件處理器：

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

 

當咱們點擊這個錨記時，並無達到預想的效果（沒東西 alert 出來）。這是由於 jQuery （以及大部分理智的事件模型），默認地，都會把處理器的上下文指定爲目標元素自己。也就是說，this 所表明正是被點擊的這個連接。而咱們想的是，this 應該繼續表明 app 。在jQuery 1.4中，實現這一目的十分簡單：

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

 

如今點擊全部錨記都會彈出「Hi!」了。

代理函數把你的函數包裹一圈，同時把函數內的 this 設定爲你想要東西。在其餘上下文應用場景，如把回調函數傳給其餘 jQuery 方法或插件，代理函數也能派上用場。

7. 動畫隊列延遲

如今，能夠給動畫隊列加一個延遲了。雖然這個功能能夠在任何隊列裏實現，但最經常使用的可能仍是延遲「fx 隊列」（」fx」 queue，jQuery默認的動畫隊列）。它能讓你在兩個動畫行爲之間暫停一下，而不用牽扯到回調函數和 setTimeout 之類的東西。.delay() 的第一個參數即你須要設定的延遲毫秒數：

jQuery('#foo')
.slideDown()//Slidedown
.delay(200)//Donothingfor200ms
.fadeIn();//Fadein

 

若是你想延遲一個除 fx 之外的隊列，把隊列名做爲第二個參數傳給 .delay() 就能夠了。

8. 使用has()檢測元素是否含有特定內容

jQuery 1.4 讓檢測一個元素（或集合）是否含有（.has()）某項東西更爲容易。其背後的機理和選 擇過濾器 :has()是同樣的。這個方法會從當前集合中選出知足任意指定條件之一的元素。

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

 

這條語句在全部DIV元素中挑出那些包含UL元素的。這種狀況可能用選擇過濾器 :has() 就行了，但當你要更程式化地過濾選擇集時 .has() 方法就十分有用了。

jQuery 1.4 還在 jQuery 命名空間下新增了一個 contains 函數。這是一個比較底層的函數，接受兩個 DOM 節點爲參數。返回一個布爾值，指示第二個元素是否包含在第一個元素中。例如：

jQuery.contains(document.documentElement, document.body); // 返回true – 確實包含在中

9. 給元素剝皮！

很早之前，jQuery 就能夠用 .wrap() 給元素裹一層皮。如今， jQuery 1.4 添加了 .unwrap() 方法，用以剝皮。看下面的DOM結構：

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

 

來把 p 元素外面的一層皮（div）剝掉：

jQuery('p').unwrap();

 

DOM 變成了：

<p>
Foo
</p>

 

總而言之，這個方法能夠把任意元素的父元素移除。

10. 使用detach()移除元素，而不刪除數據

之前有一個.remove()方法，是把元素剝離後拋棄。全新的 .detach() 方法可讓你把一個元素從DOM中剝離，而不丟失數據。囊括該元素的 jQuery 對象會在操做完成後還保留這個元素。數據能夠經過 .data() 或者 jQuery 事件系統中的任意事件處理器傳入 jQuery 對象。

當你須要把某個元素從DOM中移除，而後在未來某個場景中從新引入時，這個函數會頗有用。元素的事件句柄和其餘全部數據都會被保留。

varfoo=jQuery('#foo');
//綁定一個重要的事件處理器
foo.click(function(){
alert('Foo!');
});
foo.detach();//從DOM中移除
//…dostuff
foo.appendTo('body');//從新加入到DOM
foo.click();//彈出alert信息："Foo!"

 

11. index() 的功能加強

jQuery 1.4 爲您使用 .index() 提供了兩種新方法。之前，你必須把元素做爲參數傳給它，而後得到一個返回的數值，表明在當前集合中這個元素的索引。如今，若是不傳參數過去，返回的值就代 表某元素在其同輩中排行老幾。比方說下面的DOM：

<ul>
<li>Apple</li>
<li>Banana</li>
<li>Grape</li>
<li>Strawberry</li>
<li>Pear</li>
<li>Peach</li>
</ul>

 

你想要曉得點擊一個條目後它是列表中的第幾個，實現的代碼十分簡單：

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

 

jQuery 1.4 也容許你將選擇符做爲 .index() 的第一個參數。這樣作會返回當前元素在你指定的選擇符所匹配出的元素集合中的索引值。

還得提醒一點，這一方法返回的是數值，若是文檔中沒法找到指定條件的元素，會返回數值 -1 。

12. DOM 操做可接收回調函數

如今，大部分的DOM操做方法都支持了將 函數 做爲單一參數傳入（.css() 和 .attr() 傳入爲第二個參數）。這個函數會爲選擇集中的每個元素都跑一遍，從而爲相應操縱方法提供更「有個性」的值。

下列方法支持這一功能：

1. after()
2. before()
3. append()
4. prepend()
5. addClass()
6. toggleClass()
7. removeClass()
8. wrap()
9. wrapAll()
10. wrapInner()
11. val()
12. text()
13. replaceWith()
14. css()
15. attr()
16. html()

有了回調函數，你就能在選擇集中利用 this 關鍵字來訪問當前元素，用回調函數的第一個參數來訪問其索引值。

jQuery('li').html(function(i){
return'Indexofthislistitem:'+i;
});

 

還有還有，上面的某些方法還提供第二個參數供你利用。若是你調用的是一個設定型方法（如.html() 和 .attr(’href…) ），你還能取得當前值。例如：

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

 

如您所見，對於.css() 和 .attr() 方法來講，之因此要把函數做爲 第二個參數傳遞，是由於第一個參數要用來指定咱們須要修改的是哪個屬性：

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

 

13. 斷定對象類型:isEmptyObject、isPlainObject

jQuery 1.4 新增了兩個全新的輔助函數（都直接位於 jQuery 命名空間下），能夠幫助你判別你正在操縱的是何種對象。

第一個函數是 isEmptyObject, ，它返回一個布爾值，斷定對象是否爲空（）。第二個是 isPlainObject ，它返回的布爾值表明傳遞過去的參數是否爲JavaScript的簡單對象（plain object），也就是用 {} 或 new Object()建立的對象。

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

jQuery.isPlainObject({});//true
jQuery.isPlainObject(window);//false
jQuery.isPlainObject(jQuery());//false

 

14. Closest() 的功能加強

jQuery的.closest() 方法如今能夠接受一組選擇符做爲參數。當你須要遍歷某一元素的全部上級， 找到一個以上符合特定特徵的最近元素時，此功能就能派上用場。

並且，如今它還能接受上下文環境做爲第二個參數，也就是說你能夠控制DOM遍歷的深度或者說遠度。雖說你們可能不多會用到這兩個新特性，但一旦用 上效果是驚人的！

15. 新事件： focusIn 與 focusOut

如前所述，如今部署 focus 和 blur 事件時，你須要使用 focusin 和 focusout 這兩個新事件。這兩個事件幫助你在特定元素或者該元素的子元素 獲取/失去 焦點時採起行動。

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

 

值得說明的是，這兩個事件不會傳播開來（即所謂的「冒泡」），它們會被捕獲住。