在线亚洲AV日韩AV综合AV,国产订精品电影,久久国产精品蜜

      <thead id="u9ncv"><del id="u9ncv"><rp id="u9ncv"></rp></del></thead>

        <thead id="u9ncv"></thead>

        <thead id="u9ncv"><s id="u9ncv"></s></thead>

          <strike id="u9ncv"></strike>
          <table id="u9ncv"><form id="u9ncv"></form></table>
        1. <strike id="u9ncv"></strike>
        2. 使用幫助 | 聯系電話:400-880-0256 0769-23037585 21686281

          閱讀 jQuery 源碼的18個驚喜

          作者:admin 發表于:2014-07-29 點擊:1030  保護視力色:

          我熱愛 jQuery,且盡管我認為自己算是一名高級 JavaScript 開發者,我從來沒有試過由頭到尾把 jQuery 的源碼看一遍,直到現在。這里分享一些我一路下來學到的東西:

          注意:我使用?$.fn.method()?語法來表示調用一組匹配元素的方法。比如當我說?$.fn.addClass,則表示$('div').addClass('blue')?或者?$('a.active').addClass('in-use')?此類的用法。$.fn?是 jQuery 包裝元素的原型。

          1. Sizzle 的權重:Sizzle?是 jQuery 用于在 DOM 找元素的的選擇器引擎,基于 CSS 選擇器。正是它將?$('div.active')轉換成可操作的元素數組。我知道 Sizzle 占了 jQuery 相當大的部分,但它的龐大還是嚇到了我。按行數來說它很無疑是 jQuery 中唯一最龐大的特性。我估計它占了總代碼庫的 22%,而第二大的特性——?$.ajax?只占了 8%。

          2. $.grep:這個方法與 Underscore 的?_.filter?類似。接受兩個參數,一個元素數組和一個函數,對每個元素依次執行函數,返回執行結果為 true 的元素數組。

          3. 冒泡禁止:jQuery 明文禁止?load?事件冒泡。從內部看,jQuery 在所有的?load?事件中傳入特殊的?noBubble: true標記,所以?image.load?事件才不會冒泡到?window?上錯誤地觸發?window.load?事件。

          4. 默認動畫速度:jQuery 通過快速連續地改變樣式屬性來實現元素動畫效果。每一次小改變被稱作一個?tick。默認動畫速度是每13毫秒運行一次?tick,要改變速度你可以重寫?jQuery.fx.interval?成你想要的整數。

          5. fn.addClass 可以接受函數:我們通常向?$.fn.addClass?提供一個包含類名的字符串來創建元素。但它也可以接受一個函數。這個函數必須返回一個字符串,多個類名間要以空格隔開。這里還有個彩蛋,這個函數接受已匹配元素的索引作為參數,你可以用這個特性來構造智能變化的類名。

          6.?fn.removeClass 也一樣:與上文的一樣,它也可以接受一個函數。這個函數也會自動接收元素的索引。
          7.?:empty 偽選擇器:可以方便地用來匹配沒有孩子的元素。

          8.?:lt 與 :gt 偽選擇器:它們會根據元素在匹配集合中的索引來匹配元素。比如?$('div:gt(2)')?會返回所有的?div,除了前三個(從0開始)。如果你傳入一個負數,它會倒過來從尾開始數。

          9.?$(document).ready() 的承諾:?jQuery 貌似是用回了自己的東西。在內部,可信賴的?$(document).ready()?使用了一個 jQuery 延遲來確定 DOM 在什么時候完全加載。

          10. $.type:?大家肯定能熟練使用?typeof?來確定數據類型,但你知不知道 jQuery 提供了一個?.type()?方法?jQuery 版比原生版更加智能。比如?typeof (new Number(3))?返回?object,而?$.type(new Number(3))?則返回?number。更新:正如 ShirtlessKirk 在評論中指出,$.type?返回其對象的?.valueOf()?屬性。所以更準確的說法應該是?$.type?告訴你一個對象的返回值的類型。

          11. $.fn.queue:你可以通過?$(‘div’).queue()?查看一個元素的效果隊列,很方便地了解元素還剩余多少效果。更有用的是,你可以直接操作隊列去添加效果。從 jQuery 文檔摘錄的:

          $( document.body ).click(function() {
          $( "div" )
              .show( "slow" )
              .animate({ left: "+=200" }, 2000 )
              .queue(function() {
                  $( this ).addClass( "newcolor" ).dequeue();
              })
              .animate({ left: "-=200" }, 500 )
              .queue(function() {
                  $( this ).removeClass( "newcolor" ).dequeue();
              })
              .slideUp();
          });

          12. 禁用元素不會觸發 click 事件:jQuery 默認不會為禁用的元素執行?click?事件,有了這個優化,你無需自己用代碼再檢查一遍。

          13. $.fn.on 可以接受對象:你知道?$.fn.on?可以接受一個對象來一次過連接多個事件嗎?jQuery 文檔的例子:

          $( "div.test" ).on({
          click: function() {
              $( this ).toggleClass( "active" );
          }, mouseenter: function() {
              $( this ).addClass( "inside" );
          }, mouseleave: function() {
              $( this ).removeClass( "inside" );
          }
          });

          14. $.camelCase:這個有用的方法可以將連字符式的字符串轉換成駝峰式的字符串。

          15. $.active:調用?$.active?返回 XHR (XML Http Request) 查詢的個數。利用它可以手動制定 AJAX 請求的并發上限。

          16. $.fn.parentsUntil / $.fn.nextUntil / $.fn.prevUntil:我比較熟悉?.parents()、.next()?和?.prev(),卻不知道原來還有其它的方法。它們會匹配所有的 雙親/下一個/前一個 元素直到(until)遇到符合終止條件的元素。

          17. $.fn.clone 參數:當你用?.clone()?克隆一個元素,你可以用?true?作為第一個參數來克隆該元素的數據屬性(data attributes)和事件。

          18. 更多的 $.fn.clone 參數:除了上面的方法外,你還可以再傳多一個?true?參數來克隆該元素所有孩子的數據屬性和事件。這叫做“深克隆”。第二個參數的默認值與第一個一樣(第一個默認false)。所以當第一個參數是?true?而你想讓第二個參數也是?true?時,完全可以忽略第二個參數。

          閱讀 jQuery 源碼的18個驚喜,首發于博客 - 伯樂在線。

          在线亚洲AV日韩AV综合AV,国产订精品电影,久久国产精品蜜