※ 本文為 terievv 轉寄自 ptt.cc 更新時間: 2017-12-01 18:33:43
看板 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
※ 文章代碼(AID): #1PY757LI (Ajax)
※ 文章網址: https://www.ptt.cc/bbs/Ajax/M.1502114119.A.552.html
推 : 說到 each, 我對 jQuery 的 each 跟原生 JS 的 forEach1F 08/07 22:52
→ : callback 的參數順序不一樣感覺各種囧...
→ : jQuery 的 each 是 (index, element)=>...
→ : 原生 JS 的 forEach 是 (element, index) => ...
→ : callback 的參數順序不一樣感覺各種囧...
→ : jQuery 的 each 是 (index, element)=>...
→ : 原生 JS 的 forEach 是 (element, index) => ...
推 : element 先比較符合傳統5F 08/09 14:31
→ : 因為 Array.map() 也是先 value 才 index
→ : IE不支援就算了,Edge 不支援比較麻煩
→ : 因為 Array.map() 也是先 value 才 index
→ : IE不支援就算了,Edge 不支援比較麻煩
推 : 繼續努力,讓不能用的都可以用吧8F 08/14 09:22
推 : append 和 appendChild 不一樣也蠻冏的9F 09/08 00:42
→ : 請持續努力直到作出下一個jQuerylite10F 09/13 11:10
--
※ 看板: terievv 文章推薦值: 0 目前人氣: 0 累積人氣: 232
作者 jmlntw 的最新發文:
- DOM manipulation convenience methods 是 WHATWG 的 Living Standard, 提供更接近 jQuery 用法的 DOM API。 $(' …10F 4推
- JavaScript 在經過這幾年的進化之後, 原本大家習慣使用第三方函示庫(例如 jQuery)包裝的 DOM 操作方法, 現在都能夠使用原生的 JavaScript 來達成了。 參考: 【一、查詢 …27F 15推
- Mozilla 宣布將在 Firefox 57(預計2017年11月釋出)開始停止對於 XUL 和 Add-on SDK 附加元件的支援。未來只能使用新的 WebExtensions 架構。 (And …52F 28推 1噓
- 從 2016 年 10 月開始, Stylish 與其社群 userstyles.org 已經轉移所有權給了新主人 Justin Hindman 幾天前 Justin Hindman 宣布 Styli …17F 10推
- 來源:昨天的熊巫女生放送() 喜多村英梨(響裡面的人)畫的小町和響(泳裝 ver.) 安元表示:下次封面請妳來畫好了 然後是日岡本人畫的小町… ^q^30F 21推
點此顯示更多發文記錄
回列表(←)
分享