網頁制作poluoluo文章簡介：jQuery 1.4 最近發布了。 超乎大家的預期，這次並非簡單的修修補補，1.4 包含了很多新特性、功能增強和性能提升！本文即向您介紹這些可能對你十分有用的新特性和優化增強。
jQuery 1.4 最近發布了。 超乎大家的預期，這次並非簡單的修修補補，1.4 包含了很多新特性、功能增強和性能提升！本文即向您介紹這些可能對你十分有用的新特性和優化增強。
你可以立刻下載jQuery 1.4試用： http://code.jquery.com/jquery-1.4.js
之前，jQuery可以通過 attr 方法設置元素的屬性，既可傳屬性的名和值，也可以是包含幾組特定 屬性名值對 的 對象。在 jQuery 1.4 中，你可以把一個參數對象作為第二個參數傳給 jQuery 函數本身，同時創建HTML元素。
比方說你想要創建一個帶有幾個屬性的錨記元素（<a></a>）。在1.4中，一切如此簡單：
jQuery('<a/>', {
id: 'foo',
href: 'http://google.com',
title: 'Become a Googler',
rel: 'external',
text: 'Go to Google!'
});
你大概也能猜到，這個錨記元素沒有的 text 屬性會調用 jQuery 的私有方法".text()" ，把元素裡的文字設置為“Go to Google!”
針對這一用法，下面是更有用的實例：
jQuery('<div/>', {
id: 'foo',
css: {
fontWeight: 700,
color: 'green'
},
click: function(){
alert('Foo has been clicked!');
}
});
id 為一般屬性，被直接加上了，而 css 和 click 則激發了相應的 jQuery 方法。在1.4以前，上面的代碼需寫成這個樣子：
jQuery('<div/>')
.attr('id', 'foo')
.css({
fontWeight: 700,
color: 'green'
})
.click(function(){
alert('Foo has been clicked!');
});
詳細了解 jQuery(…)
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('ul li:contains(Apple)').nextUntil(':contains(Pear)');
// 選出的是 Banana, Grape, Strawberry
詳細了解： prevUntil, nextUntil, parentsUntil
不再需要把各個事件綁定方法“鏈”在一起，現在你可以把它們捆成一堆，如下：
jQuery('#foo).bind({
click: function() {
// do something
},
mouseover: function() {
// do something
},
mouseout: function() {
// do something
}
})
這一用法也適用於 ".one()".
詳細了解 .bind(…)
以前只能為一個動畫指定一種緩動效果（easing，即動畫過程中的速度變化規律。jQuery 原生支持兩種緩動效果，swing（默認）和linear 。要使用其他效果，你需要自己另行下載。），現在你可以為動畫的各個屬性參數指定不同的緩動效果：
jQuery('#foo').animate({
left: 500,
top: [500, 'easeOutBounce']
}, 2000);
點此查看實際效果
你也可以在一個可選的動畫選項對象中為 secialEasing 設置一系列名值對來完全上面的工作：
jQuery('#foo').animate({
left: 500,
top: 500
}, {
duration: 2000,
specialEasing: {
top: 'easeOutBounce'
}
});
編輯注：我們的作者 James Padolsey 謙虛了，這一功能點是他想出來的哦！
詳細了解有關 per-property-easing 的內容
jQuery 1.4 添加了對指派 submit ， change ， focus 和 blur 事件的支持。在jQuery中，我們利用".live()" 方法指派事件。當你想要為多個元素注冊事件處理器時，這會非常有用。而且就算滿足選擇符的元素是新出現的，這些事件也會繼續有效（使用 .live() 比不斷重復綁定要省力省心得多）。
不過，當心了！注冊 focus 和 blur 事件時你需要用 focusin 和 focusout 作為事件名。
jQuery('input').live('focusin', function(){
// do something with this
});
jQuery 1.4 提供了一個全新的 proxy 函數，位於 jQuery 命名空間下。這一函數接受兩個參數，一個是“作用域”（scope）或者一個方法名，另一個是某函數或者目標作用域（the intended scope）。
眾所周知， JavaScript的 this 關鍵字是一個很難把握的東西。有時候你並不想它代表一個元素，而想讓它代表你前面創建的某個對象。
例如，在這裡我們創建了一個 app 對象，它擁有兩個屬性，一個是 clickHandler 方法，一個是負責參數配置的對象。
var app = {
config: {
clickMessage: 'Hi!'
},
clickHandler: function() {
alert(this.config.clickMessage);
}
};
這個 clickHandler 方法，當像 app.clickHandler() 這樣調用時，app 就是其上下文，也就是說 this 關鍵字指向的是 app 。如果只需簡單地調用，這樣的寫法沒什麼問題：
app.clickHandler(); // "Hi!" is alerted
不過如果把它當作一個事件處理器：
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 方法或插件，代理函數也能派上用場。
了解更多 jQuery.proxy
現在，可以給動畫隊列加一個延遲了。雖然這個功能可以在任何隊列裡實現，但最常用的可能還是延遲“fx 隊列”（"fx" queue，jQuery默認的動畫隊列）。它能讓你在兩個動畫行為之間暫停一下，而不用牽扯到回調函數和 setTimeout 之類的東西。.delay() 的第一個參數即你需要設定的延遲毫秒數：
jQuery('#foo')
.slideDown() // Slide down
.delay(200) // Do nothing for 200 ms
.fadeIn(); // Fade in
如果你想延遲一個除 fx 以外的隊列，把隊列名作為第二個參數傳給 .delay() 就可以了。
詳細了解 .delay(…)
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 - <body> 確實包含在 <html> 中
消息了解： .has(…), jQuery.contains(…)
很早以前，jQuery 就可以用 .wrap() 給元素裹一層皮。現在， jQuery 1.4 添加了 .unwrap() 方法，用以剝皮。看下面的DOM結構：
<div>
<p>Foo</p>
</div>
來把 p 元素外面的一層皮（div）剝掉：
jQuery('p').unwrap();
DOM 變成了：
<p>Foo</p>
總而言之，這個方法可以把任意元素的父元素移除。.
詳細了解 .unwrap(…)
以前有一個.remove()方法，是把元素剝離後拋棄。全新的 .detach() 方法可以讓你把一個元素從DOM中剝離，而不丟失數據。囊括該元素的 jQuery 對象會在操作完成後還保留這個元素。數據可以通過 .data() 或者 jQuery 事件系統中的任意事件處理器傳入 jQuery 對象。
當你需要把某個元素從DOM中移除，然後在將來某個場景中重新引入時，這個函數會很有用。元素的事件句柄和其他所有數據都會被保留。
var foo = jQuery('#foo');
// 綁定一個重要的事件處理器
foo.click(function(){
alert('Foo!');
});
foo.detach(); // 從DOM中移除
// … do stuff
foo.appendTo('body'); // 重新加入到DOM
foo.click(); // 彈出alert信息： "Foo!"
詳細了解 .detach(…)
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 。
詳細了解 .index(…)
現在，大部分的DOM操縱方法都支持了將 函數 作為單一參數傳入（.css() 和 .attr() 傳入為第二個參數）。這個函數會為選擇集中的每一個元素都跑一遍，從而為相應操縱方法提供更“有個性”的值。
下列方法支持這一功能：
有了回調函數，你就能在選擇集中利用 this 關鍵字來訪問當前元素，用回調函數的第一個參數來訪問其索引值。
jQuery('li').html(function(i){
return 'Index of this list item: ' + i;
});
還有還有，上面的某些方法還提供第二個參數供你利用。如果你調用的是一個設定型方法（如.html() 和 .attr('href...) ），你還能取得當前值。例如：
jQuery('a').attr('href', function(i, currentHref){
return currentHref + '?foo=bar';
});
如您所見，對於.css() 和 .attr() 方法來說，之所以要把函數作為第二個參數傳遞，是因為第一個參數要用來指定我們需要修改的是哪一個屬性：
jQuery('li').css('color', function(i, currentCssColor){
return i % 2 ? 'red' : 'blue';
});
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
了解更多： isPlainObject(…), isEmptyObject(…)
jQuery的.closest() 方法現在可以接受一組選擇符作為參數。當你需要遍歷某一元素的所有上級，找到一個以上符合特定特征的最近元素時，此功能就能派上用場。
而且，現在它還能接受上下文環境作為第二個參數，也就是說你可以控制DOM遍歷的深度或者說遠度。雖然說大家可能很少會用到這兩個新特性，但一旦用上效果是驚人的！
了解更多 .closest(…)
如前所述，現在部署 focus 和 blur 事件時，你需要使用 focusin 和 focusout 這兩個新事件。這兩個事件幫助你在特定元素或者該元素的子元素 獲取/失去 焦點時采取行動。
jQuery('form')
.focusin(function(){
jQuery(this).addClass('focused');
});
.focusout(function(){
jQuery(this).removeClass('focused');
});
值得說明的是，這兩個事件不會傳播開來（即所謂的“冒泡”），它們會被捕獲住。也就是說，外部元素（父輩）會在作孽的“目標”元素（causal "target" element）之前被觸發。
了解更多關於 focusIn 和 focusOut 事件的內容。
就是這樣... 我已經介紹完我覺得對你最有影響的一些新特性了。
如果你還不知道，那就趕快去看看 “14 days of jQuery”活動，為慶祝 jQuery 1.4 的發布和 jQuery 四歲生日而舉辦的超贊的線上活動。秀出你用 jQuery 寫的得意之作，贏得 MediaTemple 一年的主機使用權！
另外，別放了看看全新的 API 文檔 ！
原文
原文地址：http://net.tutsplus.com/tutorials/javascript-ajax/jquery-1-4-released-the-15-new-features-you-must-know/
轉載需保留出處。