越來越像 jQuery 的原生 JavaScript

越來越像 jQuery 的原生 JavaScript
資料來源:
https://www.ptt.cc/bbs/Ajax/M.1502114119.A.552.html

作者jmlntw (吉米林)

看板Ajax

標題[教學] 越來越像 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 ※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1502114119.A.552.html

推 LPH66: 說到 each, 我對 jQuery 的 each 跟原生 JS 的 forEach 08/07 22:52

→ LPH66: callback 的參數順序不一樣感覺各種囧... 08/07 22:53

→ LPH66: jQuery 的 each 是 (index, element)=>... 08/07 22:53

→ LPH66: 原生 JS 的 forEach 是 (element, index) => ... 08/07 22:54

推 visa9527: element 先比較符合傳統 08/09 14:31

→ visa9527: 因為 Array.map() 也是先 value 才 index 08/09 14:32

→ visa9527: IE不支援就算了，Edge 不支援比較麻煩 08/09 14:34

推文自動更新已關閉