[教學] 越來越像 jQuery 的原生 JavaScript

看板Ajax作者jmlntw (吉米林)時間6年前 (2017/08/07 21:55)推噓4(4推 0噓 6→)

留言10則, 4人參與討論串1/1

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

08/07 22:52, , 1^F

08/07 22:52, 1^F

→

LPH66

08/07 22:53, , 2^F

08/07 22:53, 2^F

→

LPH66

08/07 22:53, , 3^F

08/07 22:53, 3^F