顯示廣告
隱藏 ✕
※ 本文為 terievv 轉寄自 ptt.cc 更新時間: 2017-12-01 18:33:43
看板 Ajax
作者 jmlntw (吉米林)
標題 [教學] 越來越像 jQuery 的原生 JavaScript
時間 Mon Aug  7 21:55:15 2017


https://dom.spec.whatwg.org/#interface-childnode

DOM manipulation convenience methods 是 WHATWG 的 Living Standard,

提供更接近 jQuery 用法的 DOM API。


【移除】

jQuery: $('.someClass').remove();

  原生: document.querySelector('.someClass').remove();

【Prepend】

jQuery: $('.someClass').prepend('hello world');

  原生: document.querySelector('.someClass').prepend('hello world');

【Append】

jQuery: $('.someClass').append('hello world');

  原生: document.querySelector('.someClass').append('hello world');

【Before】

jQuery: $('.someClass').before('hello world');

  原生: document.querySelector('.someClass').before('hello world');

【After】

jQuery: $('.someClass').after('hello world');

  原生: document.querySelector('.someClass').after('hello world');

【取代】

jQuery: $('.someClass').replaceWith(element);

  原生: document.querySelector('.someClass').replaceWith(element);

【For-Loop 所有相符的元素】

jQuery: $('.someClass').each(function () { ... });

  原生: document.querySelectorAll('.someClass').forEach(element => { ... })

(NodeList 可以直接 forEach() 了。)


【瀏覽器支援程度】

除了 IE 和 Edge 外其他主流瀏覽器的最新版本都 OK。

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 36.224.8.107
※ 文章代碼(AID): #1PY757LI (Ajax)
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1502114119.A.552.html
LPH66: 說到 each, 我對 jQuery 的 each 跟原生 JS 的 forEach1F 08/07 22:52
LPH66: callback 的參數順序不一樣感覺各種囧...
LPH66: jQuery 的 each 是 (index, element)=>...
LPH66: 原生 JS 的 forEach 是 (element, index) => ...
visa9527: element 先比較符合傳統5F 08/09 14:31
visa9527: 因為 Array.map() 也是先 value 才 index
visa9527: IE不支援就算了,Edge 不支援比較麻煩
shadowjohn: 繼續努力,讓不能用的都可以用吧8F 08/14 09:22
hijkxyzuw: append 和 appendChild 不一樣也蠻冏的9F 09/08 00:42
shadowjohn: 請持續努力直到作出下一個jQuerylite10F 09/13 11:10

--
※ 看板: terievv 文章推薦值: 0 目前人氣: 0 累積人氣: 226 
r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇