15個(gè)你必須了解的新功能：jQuery 1.4發(fā)布

2212

jquery 1.4 最近發(fā)布了。這并不像一些人猜測(cè)的那樣只是一個(gè)維護(hù)版本；它是一個(gè)維護(hù)版本。 1.4 中包含許多新功能、增強(qiáng)功能和性能改進(jìn)！這篇文章介紹了您可能會(huì)發(fā)現(xiàn)有益的新功能和增強(qiáng)功能。

您現(xiàn)在可以在這里下載 jQuery 1.4：http://code.jquery.com/jquery-1.4.js

1。將屬性傳遞給 jQuery(…)

在 1.4 之前，jQuery 支持通過有用的“attr”方法向元素集合添加屬性，該方法可以傳遞屬性名稱和值，也可以傳遞指定多個(gè)屬性的對(duì)象。 jQuery 1.4 添加了在創(chuàng)建元素時(shí)將屬性對(duì)象作為第二個(gè)參數(shù)傳遞給 jQuery 函數(shù)本身的支持。

假設(shè)您需要?jiǎng)?chuàng)建一個(gè)具有多個(gè)屬性的錨元素。對(duì)于 1.4，它就像這樣簡(jiǎn)單：

jQuery('<a></a>', {     id: 'foo',     href: 'http://google.com',     title: 'Become a Googler',     rel: 'external',     text: 'Go to Google!' });

您可能已經(jīng)注意到“text”屬性 – 您可能想知道它在那里做什么，畢竟錨點(diǎn)沒有“text”屬性！嗯，當(dāng)您傳遞某些屬性時(shí)，jQuery 1.4 使用它自己的方法。因此，上面指定的“text”屬性將導(dǎo)致 jQuery 調(diào)用“.text()”方法，傳遞“Go to Google!”作為其唯一的論據(jù)。

一個(gè)更好的實(shí)際例子：

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

“id”被添加為常規(guī)屬性，但“css”和“click”屬性會(huì)觸發(fā)對(duì)每個(gè)相應(yīng)方法的調(diào)用。上面的代碼，在 1.4 版本之前，應(yīng)該這樣寫： 

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

了解有關(guān) jQuery 的更多信息(…)

2。一切“直到”！

1.4 中的 DOM 遍歷庫中添加了三個(gè)新方法，“nextUntil”、“prevUntil”和“parentsUntil”。這些方法中的每一個(gè)都會(huì)以某個(gè)方向遍歷 DOM，直到滿足傳遞的選擇器為止。那么，假設(shè)您有一份水果清單：











    

  • Apple
    • 

  • Banana
    • 

  • Grape
    • 

  • Strawberry
    • 

  • Pear
    • 

  • Peach
    • 



您想要選擇“Apple”之后的所有項(xiàng)目，但您想在到達(dá)“Strawberry”后停止。簡(jiǎn)單得不能再簡(jiǎn)單了：




jQuery('ul li:contains(Apple)').nextUntil(':contains(Pear)'); // Selects Banana, Grape, Strawberry 






詳細(xì)了解：prevUntil、nextUntil、parentsUntil


3。綁定多個(gè)事件處理程序


您可以將它們?nèi)考械酵粋€(gè)調(diào)用中，而不是將一堆事件綁定方法鏈接在一起，如下所示：




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






這也適用于“.one()”。


了解有關(guān) .bind(…) 的更多信息


4。每個(gè)屬性的寬松


您現(xiàn)在可以為要設(shè)置動(dòng)畫的每個(gè)屬性定義不同的緩動(dòng)函數(shù)，而不是僅為單個(gè)動(dòng)畫定義一個(gè)緩動(dòng)函數(shù)。 jQuery 包含兩個(gè)緩動(dòng)函數(shù)：swing（默認(rèn)）和 Linear。對(duì)于其他的，您需要單獨(dú)下載它們！


要為每個(gè)屬性指定緩動(dòng)函數(shù)，只需將屬性定義為數(shù)組，第一個(gè)值是您想要為該屬性設(shè)置動(dòng)畫的值，第二個(gè)值是要使用的緩動(dòng)函數(shù)：




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






查看此代碼的實(shí)際效果！


您還可以在可選選項(xiàng)對(duì)象中將每個(gè)屬性的緩動(dòng)函數(shù)定義為“specialEasing”對(duì)象中的屬性名稱-值對(duì)：




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






編者注 – 本文作者 James Padolsey 很謙虛。這個(gè)新功能是他的主意！ 


了解有關(guān)按屬性緩動(dòng)的更多信息


5。新的現(xiàn)場(chǎng)活動(dòng)！


jQuery 1.4 添加了對(duì)委托“提交”、“更改”、“焦點(diǎn)”和“模糊”的支持強(qiáng)>”事件。在 jQuery 中，我們使用“.live()”方法來委托事件。當(dāng)您必須在許多元素上注冊(cè)事件處理程序，并且隨著時(shí)間的推移可能會(huì)添加新元素時(shí)（使用“.live()”比不斷重新綁定成本更低），這非常有用。


但是，要小心！如果您想委托“，則必須使用事件名稱“focusin”和“focusout”焦點(diǎn)”和“模糊”事件！




jQuery('input').live('focusin', function(){     // do something with this }); 






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


jQuery 1.4 在 jQuery 命名空間下提供了一個(gè)新的“proxy”函數(shù)。該函數(shù)接受兩個(gè)參數(shù)，要么是“范圍”和方法名稱，要么是函數(shù)和預(yù)期范圍。 JavaScript 的“this”關(guān)鍵字可能很難掌握。有時(shí)您不希望它是一個(gè)元素，而是您之前創(chuàng)建的一個(gè)對(duì)象。


例如，這里我們有一個(gè)“app”對(duì)象，它有兩個(gè)屬性，一個(gè)“clickHandler”方法和一個(gè)配置對(duì)象：




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






 “clickHandler”方法，當(dāng)像“app.clickHandler()”這樣調(diào)用時(shí)，將以“app”作為其上下文，這意味著“this”關(guān)鍵字將允許它訪問“ app”。如果我們簡(jiǎn)單地調(diào)用：




app.clickHandler(); // "Hi!" is alerted 






讓我們嘗試將其綁定為事件處理程序：




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






當(dāng)我們單擊錨點(diǎn)時(shí)，它似乎不起作用（沒有任何警報(bào)）。這是因?yàn)?jQuery（以及大多數(shù)理智的事件模型）默認(rèn)情況下會(huì)將處理程序的上下文設(shè)置為目標(biāo)元素，也就是說，剛剛單擊的元素將可以通過“this”訪問。但我們不希望這樣，我們希望將“this”設(shè)置為“app”。在 jQuery 1.4 中實(shí)現(xiàn)這一點(diǎn)再簡(jiǎn)單不過了：




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






現(xiàn)在，每當(dāng)點(diǎn)擊錨點(diǎn)時(shí)，“嗨！”將會(huì)收到警報(bào)！


代理函數(shù)返回函數(shù)的“包裝”版本，并將“this”設(shè)置為您指定的任何內(nèi)容。它在其他上下文中也很有用，例如將回調(diào)傳遞給其他 jQuery 方法或插件。


了解有關(guān) jQuery.proxy


7。延遲動(dòng)畫隊(duì)列


您現(xiàn)在可以向動(dòng)畫隊(duì)列添加延遲。事實(shí)上，這適用于任何隊(duì)列，但其最常見的用例可能是“fx”隊(duì)列。這允許您在動(dòng)畫之間暫停，而不必混亂回調(diào)和調(diào)用“setTimeout”。 “.delay()”的第一個(gè)參數(shù)是您想要延遲的毫秒數(shù)。




jQuery('#foo')     .slideDown() // Slide down     .delay(200) // Do nothing for 200 ms     .fadeIn(); // Fade in 






如果您想要延遲默認(rèn)“fx”隊(duì)列以外的隊(duì)列，則需要將隊(duì)列名稱作為第二個(gè)參數(shù)傳遞給“.delay()”。


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


8。檢查元素是否有某物


jQuery 1.4 可以輕松檢查元素（或集合）“.has()”是否有某些內(nèi)容。這相當(dāng)于 jQuery 的選擇器過濾器“:has()”的編程方式。此方法將選擇當(dāng)前集合中至少包含一個(gè)符合傳遞選擇器的元素的所有元素。




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






這將選擇包含 UL 元素的所有 DIV 元素。在這種情況下，您可能只使用選擇器過濾器（“:has()”），但是當(dāng)您需要以編程方式過濾集合時(shí)，此方法仍然有用。


jQuery 1.4 還揭示了 jQuery 命名空間下的“contains”函數(shù)。這是一個(gè)接受兩個(gè) DOM 節(jié)點(diǎn)的低級(jí)函數(shù)。它將返回一個(gè)布爾值，指示第二個(gè)元素是否包含在第一個(gè)元素中。例如




jQuery.contains(document.documentElement, document.body); // Returns true -  is within  






閱讀更多內(nèi)容：.has(…), jQuery.contains(…)


9。展開元素！


我們使用“.wrap()”方法已經(jīng)有一段時(shí)間了。 jQuery 1.4 添加了“.unwrap()”方法，其作用完全相反。如果我們假設(shè)以下 DOM 結(jié)構(gòu)：




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






我們可以像這樣展開段落元素：




jQuery('p').unwrap(); 






生成的 DOM 結(jié)構(gòu)將是：




<p>Foo</p> 






本質(zhì)上，此方法只是刪除任何元素的父元素。


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


10。刪除元素而不刪除數(shù)據(jù)


新的“.detach()”方法允許您從 DOM 中刪除元素，與“.remove()”方法非常相似。這種新方法的主要區(qū)別在于它不會(huì)破壞 jQuery 在該元素上保存的數(shù)據(jù)。這包括通過“.data()”添加的數(shù)據(jù)以及通過 jQuery 事件系統(tǒng)添加的任何事件處理程序。


當(dāng)您需要從 DOM 中刪除元素，但您知道稍后需要將其添加回來時(shí)，這會(huì)很有用。其事件處理程序和任何其他數(shù)據(jù)都將保留。




var foo = jQuery('#foo');  // Bind an important event handler foo.click(function(){     alert('Foo!'); });  foo.detach(); // Remove it from the DOM  // … do stuff  foo.appendTo('body'); // Add it back to the DOM  foo.click(); // alerts "Foo!" 






了解有關(guān) .detach(…)


11。索引（…）增強(qiáng)功能


jQuery 1.4 為您提供了兩種使用“.index()”方法的新方法。以前，您只能傳遞一個(gè)元素作為其參數(shù)，并且您希望返回一個(gè)數(shù)字，指示該元素在當(dāng)前集合中的索引。


現(xiàn)在不傳遞任何參數(shù)會(huì)返回元素在其同級(jí)元素中的索引。因此，假設(shè)以下 DOM 結(jié)構(gòu)：
















    

  • Apple
    • 

  • Banana
    • 

  • Grape
    • 

  • Strawberry
    • 

  • Pear
    • 

  • Peach
    • 



當(dāng)單擊一個(gè)列表項(xiàng)時(shí)，您想要找出被單擊元素在所有其他列表項(xiàng)中的索引。很簡(jiǎn)單：




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






jQuery 1.4 還允許您指定一個(gè)選擇器作為“.index()”的第一個(gè)參數(shù)，這樣做將為您提供從該選擇器生成的集合中當(dāng)前元素的索引。


您應(yīng)該注意，此方法返回的是一個(gè)整數(shù)，如果在文檔中找不到傳遞的選擇器/元素，它將返回 -1。 


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


12。 DOM 操作方法接受回調(diào)


大多數(shù) DOM 操作方法現(xiàn)在支持傳遞函數(shù)作為唯一參數(shù)（或第二個(gè)參數(shù)，在“.css()”和“.attr()”的情況下）。此函數(shù)將在集合中的每個(gè)元素上運(yùn)行，以確定應(yīng)用作該方法的實(shí)際值的內(nèi)容。 


以下方法具有此功能：


    

  • 之后
    • 

  • 之前
    • 

  • 追加
    • 

  • 前置
    • 

  • 添加類
    • 

  • 切換類
    • 

  • 刪除類
    • 

  • 包裹
    • 

  • 包裹所有
    • 

  • 包裹內(nèi)部
    • 

  • 值
    • 

  • 文本
    • 

  • 替換為
    • 

  • CSS
    • 

  • 屬性
    • 

  • html
    • 



在回調(diào)函數(shù)中，您可以通過“this”訪問集合中的當(dāng)前元素，并通過第一個(gè)參數(shù)訪問其索引。




jQuery('li').html(function(i){     return 'Index of this list item: ' + i; }); 






此外，使用上述某些方法，您還將獲得第二個(gè)參數(shù)。如果您調(diào)用 setter 方法（例如“.html()”或“.attr(‘href)”），您將可以訪問當(dāng)前值。例如




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






如您所見，使用“.css()”和“.attr()”方法，您可以將該函數(shù)作為第二個(gè)參數(shù)傳遞，因?yàn)榈谝粋€(gè)參數(shù)將用于命名您想要更改的屬性：




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






13。確定對(duì)象的類型


jQuery 1.4 添加了兩個(gè)新的輔助函數(shù)（直接存儲(chǔ)在 jQuery 命名空間下），可幫助您確定正在處理的對(duì)象類型。


首先，有“isEmptyObject”，該函數(shù)返回一個(gè)布爾值，指示傳遞的對(duì)象是否為空（缺乏屬性 – 直接和繼承）。其次，“isPlainObject”，它將返回一個(gè)布爾值，指示傳遞的對(duì)象是否是純 JavaScript 對(duì)象，即通過“{}”或“new Object()”創(chuàng)建的對(duì)象。 




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






了解更多： isPlainObject(…), isEmptyObject(…)


14。最近的（…）增強(qiáng)功能


jQuery 的“.closest()”方法現(xiàn)在接受選擇器數(shù)組。當(dāng)您想要遍歷元素的祖先，查找（多個(gè)）具有某些特征的最接近元素時(shí)，這非常有用。


此外，它現(xiàn)在接受上下文作為第二個(gè)參數(shù)，這意味著您可以控制 DOM 遍歷的距離或距離。這兩個(gè)增強(qiáng)功能都適用于罕見的用例，但它們?cè)趦?nèi)部使用時(shí)效果很好！


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


15。新活動(dòng)！ focusIn 和 focusOut


如上所述，要委托“focus”和“blur”事件，您必須使用這些新事件，稱為“focusin”和“focusout”。這些事件允許您在元素或元素的后代獲得焦點(diǎn)時(shí)采取操作。 




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






您還應(yīng)該注意，這兩個(gè)事件都不會(huì)傳播（“冒泡”）；他們被俘虜了。這意味著最外層（祖先）元素將在因果“目標(biāo)”元素之前被觸發(fā)。 


了解有關(guān) focusIn 和 focusOut 事件的更多信息。


享受 jQuery 1.4，迄今為止最受期待、功能最豐富、性能最佳的 jQuery 版本！


嗯，就是這樣！我已盡力涵蓋我認(rèn)為會(huì)對(duì)您產(chǎn)生影響的變化！


如果您還沒有看過，您應(yīng)該查看“jQuery 14 天”，這是一場(chǎng)精彩的在線活動(dòng)，標(biāo)志著 jQuery 1.4 的發(fā)布以及 jQuery 的四周年生日！


并且不要忘記查看新的 API 文檔！


編寫 Plus 教程


您知道嗎，為我們編寫 PLUS 教程和/或截屏視頻最多可賺取 600 美元？ 我們正在尋找有關(guān) HTML、CSS、PHP 和 JavaScript 的深入且編寫良好的教程。如果您有能力，請(qǐng)通過 nettuts@tutsplus.com 聯(lián)系 Jeffrey。


請(qǐng)注意，實(shí)際報(bào)酬將取決于最終教程和截屏視頻的質(zhì)量。 


 15個(gè)你必須了解的新功能：jQuery 1.4發(fā)布


    

  • 在 Twitter 上關(guān)注我們，或訂閱 Nettuts+ RSS Feed 以獲取網(wǎng)絡(luò)上最好的 Web 開發(fā)教程。 
    • 




                    

        
? 版權(quán)聲明
THE END
模板教程
# 回調(diào)函數(shù)
    

    
喜歡就支持一下吧
點(diǎn)贊12
        分享