You Don't Need jQuery

前端發(fā)展很快氯析,現(xiàn)代瀏覽器原生 API 已經(jīng)足夠好用。我們并不需要為了操作 DOM遏佣、Event 等再學(xué)習(xí)一下 jQuery 的 API。同時(shí)由于 React壁畸、Angular贼急、Vue 等框架的流行,直接操作 DOM 不再是好的模式捏萍,jQuery 使用場(chǎng)景大大減少太抓。本項(xiàng)目總結(jié)了大部分 jQuery API 替代的方法,暫時(shí)只支持 IE10+ 以上瀏覽器令杈。

目錄

  1. Translations
  2. Query Selector
  3. CSS & Style
  4. DOM Manipulation
  5. Ajax
  6. Events
  7. Utilities
  8. Alternatives
  9. Browser Support

Query Selector

常用的 class走敌、id、屬性 選擇器都可以使用 document.querySelectordocument.querySelectorAll 替代逗噩。區(qū)別是

  • document.querySelector 返回第一個(gè)匹配的 Element
  • document.querySelectorAll 返回所有匹配的 Element 組成的 NodeList掉丽。它可以通過(guò) [].slice.call() 把它轉(zhuǎn)成 Array
  • 如果匹配不到任何 Element跌榔,jQuery 返回空數(shù)組 [],但 document.querySelector 返回 null捶障,注意空指針異常僧须。當(dāng)找不到時(shí),也可以使用 || 設(shè)置默認(rèn)的值项炼,如 document.querySelectorAll(selector) || []

注意:document.querySelectordocument.querySelectorAll 性能很担平。如果想提高性能,盡量使用 document.getElementById锭部、document.getElementsByClassNamedocument.getElementsByTagName暂论。

  • 1.0 <a name='1.0'></a> Query by selector

    // jQuery
    $('selector');
    
    // Native
    document.querySelectorAll('selector');
    
  • 1.1 <a name='1.1'></a> Query by class

    // jQuery
    $('.css');
    
    // Native
    document.querySelectorAll('.css');
    
    // or
    document.getElementsByClassName('css');
    
  • 1.2 <a name='1.2'></a> Query by id

    // jQuery
    $('#id');
    
    // Native
    document.querySelector('#id');
    
    // or
    document.getElementById('id');
    
  • 1.3 <a name='1.3'></a> Query by attribute

    // jQuery
    $('a[target=_blank]');
    
    // Native
    document.querySelectorAll('a[target=_blank]');
    
  • 1.4 <a name='1.4'></a> Find sth.

    • Find nodes

      // jQuery
      $el.find('li');
      
      // Native
      el.querySelectorAll('li');
      
    • Find body

      // jQuery
      $('body');
      
      // Native
      document.body;
      
    • Find Attribute

      // jQuery
      $el.attr('foo');
      
      // Native
      e.getAttribute('foo');
      
    • Find data attribute

      // jQuery
      $el.data('foo');
      
      // Native
      // using getAttribute
      el.getAttribute('data-foo');
      // you can also use `dataset` if only need to support IE 11+
      el.dataset['foo'];
      
  • 1.5 <a name='1.5'></a> Sibling/Previous/Next Elements

    • Sibling elements

      // jQuery
      $el.siblings();
      
      // Native
      [].filter.call(el.parentNode.children, function(child) {
        return child !== el;
      });
      
    • Previous elements

      // jQuery
      $el.prev();
      
      // Native
      el.previousElementSibling;
      
      
    • Next elements

      // next
      $el.next();
      el.nextElementSibling;
      
  • 1.6 <a name='1.6'></a> Closest

    Closest 獲得匹配選擇器的第一個(gè)祖先元素取胎,從當(dāng)前元素開(kāi)始沿 DOM 樹(shù)向上湃窍。

    // jQuery
    $el.closest(queryString);
    
    // Native
    function closest(el, selector) {
      const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    
      while (el) {
        if (matchesSelector.call(el, selector)) {
          return el;
        } else {
          el = el.parentElement;
        }
      }
      return null;
    }
    
  • 1.7 <a name='1.7'></a> Parents Until

    獲取當(dāng)前每一個(gè)匹配元素集的祖先,不包括匹配元素的本身坝咐。

    // jQuery
    $el.parentsUntil(selector, filter);
    
    // Native
    function parentsUntil(el, selector, filter) {
      const result = [];
      const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    
      // match start from parent
      el = el.parentElement;
      while (el && !matchesSelector.call(el, selector)) {
        if (!filter) {
          result.push(el);
        } else {
          if (matchesSelector.call(el, filter)) {
            result.push(el);
          }
        }
        el = el.parentElement;
      }
      return result;
    }
    
  • 1.8 <a name='1.8'></a> Form

    • Input/Textarea

      // jQuery
      $('#my-input').val();
      
      // Native
      document.querySelector('#my-input').value;
      
    • Get index of e.currentTarget between .radio

      // jQuery
      $(e.currentTarget).index('.radio');
      
      // Native
      [].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
      
  • 1.9 <a name='1.9'></a> Iframe Contents

    jQuery 對(duì)象的 iframe contents() 返回的是 iframe 內(nèi)的 document

    • Iframe contents

      // jQuery
      $iframe.contents();
      
      // Native
      iframe.contentDocument;
      
    • Iframe Query

      // jQuery
      $iframe.contents().find('.css');
      
      // Native
      iframe.contentDocument.querySelectorAll('.css');
      

? 回到頂部

CSS & Style

  • 2.1 <a name='2.1'></a> CSS

    • Get style

      // jQuery
      $el.css("color");
      
      // Native
      // 注意:此處為了解決當(dāng) style 值為 auto 時(shí)墨坚,返回 auto 的問(wèn)題
      const win = el.ownerDocument.defaultView;
      // null 的意思是不返回偽類元素
      win.getComputedStyle(el, null).color;
      
    • Set style

      // jQuery
      $el.css({ color: "#ff0011" });
      
      // Native
      el.style.color = '#ff0011';
      
    • Get/Set Styles

      注意,如果想一次設(shè)置多個(gè) style泽篮,可以參考 oui-dom-utils 中 setStyles 方法

    • Add class

      // jQuery
      $el.addClass(className);
      
      // Native
      el.classList.add(className);
      
    • Remove class

      // jQuery
      $el.removeClass(className);
      
      // Native
      el.classList.remove(className);
      
    • has class

      // jQuery
      $el.hasClass(className);
      
      // Native
      el.classList.contains(className);
      
    • Toggle class

      // jQuery
      $el.toggleClass(className);
      
      // Native
      el.classList.toggle(className);
      
  • 2.2 <a name='2.2'></a> Width & Height

    Width 與 Height 獲取方法相同,下面以 Height 為例:

    • Window height

      // jQuery
      $(window).height();
      
      // Native
      // 不含 scrollbar帽撑,與 jQuery 行為一致
      window.document.documentElement.clientHeight;
      // 含 scrollbar
      window.innerHeight;
      
    • Document height

      // jQuery
      $(document).height();
      
      // Native
      document.documentElement.scrollHeight;
      
    • Element height

      // jQuery
      $el.height();
      
      // Native
      // 與 jQuery 一致(一直為 content 區(qū)域的高度)
      function getHeight(el) {
        const styles = this.getComputedStyle(el);
        const height = el.offsetHeight;
        const borderTopWidth = parseFloat(styles.borderTopWidth);
        const borderBottomWidth = parseFloat(styles.borderBottomWidth);
        const paddingTop = parseFloat(styles.paddingTop);
        const paddingBottom = parseFloat(styles.paddingBottom);
        return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
      }
      // 精確到整數(shù)(border-box 時(shí)為 height 值泼各,content-box 時(shí)為 height + padding + border 值)
      el.clientHeight;
      // 精確到小數(shù)(border-box 時(shí)為 height 值,content-box 時(shí)為 height + padding + border 值)
      el.getBoundingClientRect().height;
      
    • Iframe height

      $iframe .contents() 方法返回 iframe 的 contentDocument

      // jQuery
      $('iframe').contents().height();
      
      // Native
      iframe.contentDocument.documentElement.scrollHeight;
      
  • 2.3 <a name='2.3'></a> Position & Offset

    • Position

      // jQuery
      $el.position();
      
      // Native
      { left: el.offsetLeft, top: el.offsetTop }
      
    • Offset

      // jQuery
      $el.offset();
      
      // Native
      function getOffset (el) {
        const box = el.getBoundingClientRect();
      
        return {
          top: box.top + window.pageYOffset - document.documentElement.clientTop,
          left: box.left + window.pageXOffset - document.documentElement.clientLeft
        }
      }
      
  • 2.4 <a name='2.4'></a> Scroll Top

    // jQuery
    $(window).scrollTop();
    
    // Native
    (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
    

? 回到頂部

DOM Manipulation

  • 3.1 <a name='3.1'></a> Remove

    // jQuery
    $el.remove();
    
    // Native
    el.parentNode.removeChild(el);
    
  • 3.2 <a name='3.2'></a> Text

    • Get text

      // jQuery
      $el.text();
      
      // Native
      el.textContent;
      
    • Set text

      // jQuery
      $el.text(string);
      
      // Native
      el.textContent = string;
      
  • 3.3 <a name='3.3'></a> HTML

    • Get HTML

      // jQuery
      $el.html();
      
      // Native
      el.innerHTML;
      
    • Set HTML

      // jQuery
      $el.html(htmlString);
      
      // Native
      el.innerHTML = htmlString;
      
  • 3.4 <a name='3.4'></a> Append

    Append 插入到子節(jié)點(diǎn)的末尾

    // jQuery
    $el.append("<div id='container'>hello</div>");
    
    // Native
    let newEl = document.createElement('div');
    newEl.setAttribute('id', 'container');
    newEl.innerHTML = 'hello';
    el.appendChild(newEl);
    
  • 3.5 <a name='3.5'></a> Prepend

    // jQuery
    $el.prepend("<div id='container'>hello</div>");
    
    // Native
    let newEl = document.createElement('div');
    newEl.setAttribute('id', 'container');
    newEl.innerHTML = 'hello';
    el.insertBefore(newEl, el.firstChild);
    
  • 3.6 <a name='3.6'></a> insertBefore

    在選中元素前插入新節(jié)點(diǎn)

    // jQuery
    $newEl.insertBefore(queryString);
    
    // Native
    const target = document.querySelector(queryString);
    target.parentNode.insertBefore(newEl, target);
    
  • 3.7 <a name='3.7'></a> insertAfter

    在選中元素后插入新節(jié)點(diǎn)

    // jQuery
    $newEl.insertAfter(queryString);
    
    // Native
    const target = document.querySelector(queryString);
    target.parentNode.insertBefore(newEl, target.nextSibling);
    

? 回到頂部

Ajax

fetchfetch-jsonp 替代

? 回到頂部

Events

完整地替代命名空間和事件代理亏拉,鏈接到 https://github.com/oneuijs/oui-dom-events

  • 5.1 <a name='5.1'></a> Bind an event with on

    // jQuery
    $el.on(eventName, eventHandler);
    
    // Native
    el.addEventListener(eventName, eventHandler);
    
  • 5.2 <a name='5.2'></a> Unbind an event with off

    // jQuery
    $el.off(eventName, eventHandler);
    
    // Native
    el.removeEventListener(eventName, eventHandler);
    
  • 5.3 <a name='5.3'></a> Trigger

    // jQuery
    $(el).trigger('custom-event', {key1: 'data'});
    
    // Native
    if (window.CustomEvent) {
      const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
    } else {
      const event = document.createEvent('CustomEvent');
      event.initCustomEvent('custom-event', true, true, {key1: 'data'});
    }
    
    el.dispatchEvent(event);
    

? 回到頂部

Utilities

  • 6.1 <a name='6.1'></a> isArray

    // jQuery
    $.isArray(range);
    
    // Native
    Array.isArray(range);
    
  • 6.2 <a name='6.2'></a> Trim

    // jQuery
    $.trim(string);
    
    // Native
    string.trim();
    
  • 6.3 <a name='6.3'></a> Object Assign

    繼承扣蜻,使用 object.assign polyfill https://github.com/ljharb/object.assign

    // jQuery
    $.extend({}, defaultOpts, opts);
    
    // Native
    Object.assign({}, defaultOpts, opts);
    
  • 6.4 <a name='6.4'></a> Contains

    // jQuery
    $.contains(el, child);
    
    // Native
    el !== child && el.contains(child);
    

? 回到頂部
感謝:
https://github.com/oneuijs/You-Dont-Need-jQuery/
https://github.com/tomfanxiaojun/You-Dont-Need-jQuery/blob/master/README.zh-CN.md

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市及塘,隨后出現(xiàn)的幾起案子莽使,更是在濱河造成了極大的恐慌,老刑警劉巖笙僚,帶你破解...
    沈念sama閱讀 223,002評(píng)論 6 519
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件芳肌,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)亿笤,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,357評(píng)論 3 400
  • 文/潘曉璐 我一進(jìn)店門(mén)翎迁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人净薛,你說(shuō)我怎么就攤上這事汪榔。” “怎么了罕拂?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,787評(píng)論 0 365
  • 文/不壞的土叔 我叫張陵揍异,是天一觀的道長(zhǎng)全陨。 經(jīng)常有香客問(wèn)我爆班,道長(zhǎng),這世上最難降的妖魔是什么辱姨? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,237評(píng)論 1 300
  • 正文 為了忘掉前任柿菩,我火速辦了婚禮,結(jié)果婚禮上雨涛,老公的妹妹穿的比我還像新娘枢舶。我一直安慰自己,他們只是感情好替久,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,237評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布凉泄。 她就那樣靜靜地躺著蚯根,像睡著了一般颅拦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上右锨,一...
    開(kāi)封第一講書(shū)人閱讀 52,821評(píng)論 1 314
  • 那天绍移,我揣著相機(jī)與錄音蹂窖,去河邊找鬼恼策。 笑死涣楷,一個(gè)胖子當(dāng)著我的面吹牛狮斗,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播碳褒,決...
    沈念sama閱讀 41,236評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼折砸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼睦授!你這毒婦竟也來(lái)了摔寨?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,196評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤删顶,失蹤者是張志新(化名)和其女友劉穎逗余,沒(méi)想到半個(gè)月后录粱,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體关摇,經(jīng)...
    沈念sama閱讀 46,716評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡输虱,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,794評(píng)論 3 343
  • 正文 我和宋清朗相戀三年宪睹,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了亭病。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片罪帖。...
    茶點(diǎn)故事閱讀 40,928評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡整袁,死狀恐怖坐昙,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情疾棵,我是刑警寧澤痹仙,帶...
    沈念sama閱讀 36,583評(píng)論 5 351
  • 正文 年R本政府宣布嗜历,位于F島的核電站抖所,受9級(jí)特大地震影響田轧,放射性物質(zhì)發(fā)生泄漏鞍恢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,264評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蟆炊。 院中可真熱鬧涩搓,春花似錦、人聲如沸良拼。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,755評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至杀捻,卻和暖如春致讥,著一層夾襖步出監(jiān)牢的瞬間垢袱,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,869評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留爽锥,地道東北人畔柔。 一個(gè)月前我還...
    沈念sama閱讀 49,378評(píng)論 3 379
  • 正文 我出身青樓靶擦,卻偏偏與公主長(zhǎng)得像玄捕,于是被迫代替她去往敵國(guó)和親枚粘。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,937評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • You Don't Need jQuery 轉(zhuǎn)自You Don't Need jQuery 前端發(fā)展很快,現(xiàn)代瀏覽...
    HelloKang閱讀 468評(píng)論 0 1
  • 前端發(fā)展很快拟杉,現(xiàn)代瀏覽器原生API已經(jīng)足夠好用搬设。我們并不需要為了操作DOM、Event等再學(xué)習(xí)Jquery的API...
    我是白夜閱讀 709評(píng)論 0 50
  • 目錄 元素查找 class操作 節(jié)點(diǎn)操作 屬性操作 內(nèi)容操作 css操作 位置大小 事件 DOM加載完畢 綁定上下...
    北瀟閱讀 310評(píng)論 0 0
  • 今早晨會(huì)甩挫,我的伙伴提到了孩子的教育椿每,我突然想到前兩天间护,孩子問(wèn)我的問(wèn)題兑牡,她問(wèn),媽媽,我為什么要報(bào)這么多課外...
    一念之間_e481閱讀 790評(píng)論 2 4
  • 親愛(ài)的苞也, 你告訴我 這個(gè)世界會(huì)好嗎 宇宙能有多遠(yuǎn)垠限 地球還余多少時(shí)年 人生又剩幾何嘆惋 風(fēng)吹過(guò)耳畔 沒(méi)有告訴我答...
    幻惑閱讀 245評(píng)論 4 2