首頁 > web前端 > js教程 > 主體

jquery1.9中刪除的die,browser,live,sub,toggle的替換方法介紹

黄舟
發布: 2017-06-26 09:52:15
原創
1754 人瀏覽過

jQuery 1.9變化有幾點,最重要的是標題所提到的browser,live,die,sub,toggle這幾個,如果你在使用過程中遇到高級版本不行,而低版本卻可以的時候,那你就要了解一下是不是版本升級帶來的影響了。之前也轉載過一篇「jQuery1.9升級和刪除的API指南」的文章,文裡面介紹了很多方面,其實很多我都沒用過,這上面的幾個,我也是熟悉過browser,live,toggle而已。 ·


jQuery.browser()

官方推薦修改方式是透過條件判斷來區分不同的瀏覽器·

<!--[if lt IE 9]><script src="http://m.cnblogs.com/109793/jquery-1.9.0.js" rel="nofollow"/><![endif]-->
<!--[if gte IE 9]>
<script src="http://m.cnblogs.com/109793/jquery-2.0.0.js" rel="nofollow"/>
<![endif]-->
登入後複製


如果必須繼續使用jQuery.browser()可以新增「jquery-browser」插件,但我沒有測試該插件。

對於你自己的專案功能檢測的需求, 我們強烈建議使用外部函式庫,例如Modernizr的,而不是依賴jQuery.support上的屬性。 (因為jQuery 內部需要使用support這些方法來進行檢測,所以它們會在每次載入頁面時被執行,但是當jQuery 的內部程式碼不再需要某些屬性時,它們就會被移除。)·

.live()

.live()方法在1.9中移除,@ZPS在郵件中已經告知大家。對於.live()方法的移除,升級比較簡單,只是將「.live()」替換為「.on()」。

.die()

相對於「.live()」方法的移除,「.die()」方法也從1.9移除,取而代之的是「.off( )”方法。如同在1.9之前,很多人只關注過「.live()」方法,卻不知道還有個「.die()」方法,或許還會有Coder不知道如何去掉.on()添加的事件,其實就是用「.off()」 進行刪除新增的事件。

jQuery.sub()

.sub()方法可以建立一個新的jQuery副本而不影響原有的jQuery物件,我對該方法的理解是:其實.sub()方法就是增加或重寫jQuery的方法或建立新plugin,有待討論。

從上面升級指南上來看,.sub()方法並沒有被removed,而是被moved到其他plugin,所以應該是還可以用的,只要引用對應的plugin。

官方給出的使用.sub()的兩個特定情況:一是在不改變原有方法的前提下提供一種簡單的重寫jQuery方法的途徑,二是幫助用戶解決jQuery plugin封裝與基本命名空間

.toggle(function, function, … )

下面這個jQuery外掛能夠還原1.8的toggle的功能,如果你需要,可以直接把下面這段程式碼拷貝到你的jQuery裡面,然後跟平常一樣使用toggle的功能即可。

//toggle plugin from caibaojian.com
$.fn.toggler = function( fn, fn2 ) {
    var args = arguments,guid = fn.guid || $.guid++,i=0,
    toggler = function( event ) {
      var lastToggle = ( $._data( this, "lastToggle" + fn.guid ) || 0 ) % i;
      $._data( this, "lastToggle" + fn.guid, lastToggle + 1 );
      event.preventDefault();
      return args[ lastToggle ].apply( this, arguments ) || false;
    };
    toggler.guid = guid;
    while ( i < args.length ) {
      args[ i++ ].guid = guid;
    }
    return this.click( toggler );
  };
登入後複製

其實toggle這個去掉主要是考慮到會混淆,而且jquery裡面已經可以實現了,這個是多餘出來的。

我們可以這樣子修改

//code from http://caibaojian.com/jquery1-9-tutorial.html
$(&#39;#example&#39;).click(function(){$("#exampleBox").toggle();})
登入後複製

改為

$(&#39;#example&#39;).click(function(){
    if($("#exampleBox").is(":visible")){
        $("#exampleBox").hide();
        do stuff
    }else{
        $("#exampleBox").show();
        do stuff
    }
})
$("#example").hover(function(){$("#exampleBox").toggle(); })
登入後複製

改為

$("#example").hover(function(){
$("#exampleBox").show();
},function(){
$("#exampleBox").hide();
});
登入後複製

豈不是更清晰明了

或是你也可以使用toggleClass來透過加入類別來顯示與隱藏。



以上是jquery1.9中刪除的die,browser,live,sub,toggle的替換方法介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板