當今的前端環境發展迅速,現代瀏覽器已經提供了夠好用的 DOM/BOM API,我們不需要為了 DOM 操作或事件處理而從頭開始學 jQuery。同時,由於 React、Angular 和 Vue 等前端框架的普及,直接操作 DOM 變成了反模式,jQuery 的使用性大幅減少。本專案概述了大部份 Javascript 替代 jQuery 的方式,支援 IE 10 以上。
備註:jQuery 仍然是一個很棒的函式庫,有很多有效的案例。不用刻意為了變而改變 !
- Translations
- Query Selector
- CSS & Style
- DOM Manipulation
- Ajax
- Events
- Utilities
- Promises
- Animation
- Alternatives
- Browser Support
- 한국어
- 正體中文
- 简体中文
- Bahasa Melayu
- Bahasa Indonesia
- Português(PT-BR)
- Tiếng Việt Nam
- Español
- Русский
- Кыргызча
- Türkçe
- Italiano
- Français
- 日本語
- Polski
常見的 class、id、屬性等選擇器,我們可以使用 document.querySelector
或 document.querySelectorAll
替代。差別是
document.querySelector
返回第一個匹配的 Elementdocument.querySelectorAll
返回所有匹配的 Element 組成的 NodeList。它可以通過[].slice.call()
轉換成 Array 使用- 如果匹配不到任何 Element,jQuery 和
document.querySelectorAll
將會返回[]
,但document.querySelector
會返回null
。
注意:
document.querySelector
和document.querySelectorAll
效能很差。如果想提高效能,盡量使用document.getElementById
、document.getElementsByClassName
或document.getElementsByTagName
。
-
1.0 Query by selector 選擇器查詢
// jQuery $('selector'); // Native document.querySelectorAll('selector');
-
1.1 Query by class 查詢 class
// jQuery $('.class'); // Native document.querySelectorAll('.class'); // 或 document.getElementsByClassName('class');
-
1.2 Query by id 查詢 id
// jQuery $('#id'); // Native document.querySelector('#id'); // 或 document.getElementById('id');
-
1.3 Query by attribute 屬性查詢
// jQuery $('a[target=_blank]'); // Native document.querySelectorAll('a[target=_blank]');
-
1.4 Query in descendants 後代查詢
// jQuery $el.find('li'); // Native el.querySelectorAll('li');
-
1.5 Sibling/Previous/Next Elements 同層相鄰及前後元素
-
All siblings 同層相鄰 (兄弟元素)
// jQuery $el.siblings(); // Native - latest, Edge13+ [...el.parentNode.children].filter((child) => child !== el ); // Native (alternative) - latest, Edge13+ Array.from(el.parentNode.children).filter((child) => child !== el ); // Native - IE10+ Array.prototype.filter.call(el.parentNode.children, (child) => child !== el );
-
Previous sibling 同層前一個元素
// jQuery $el.prev(); // Native el.previousElementSibling;
-
Next sibling 同層後一個元素
// next $el.next(); // Native el.nextElementSibling;
-
All previous siblings 所有同層裡之前的元素
// jQuery (可選的過濾選擇器) $el.prevAll($filter); // Native (可選的過濾函式) function getPreviousSiblings(elem, filter) { var sibs = []; while (elem = elem.previousSibling) { if (elem.nodeType === 3) continue; // ignore text nodes if (!filter || filter(elem)) sibs.push(elem); } return sibs; }
-
All next siblings 所有同層裡之後的元素
// jQuery (可選的過濾選擇器) $el.nextAll($filter); // Native (可選的過濾函式) function getNextSiblings(elem, filter) { var sibs = []; var nextElem = elem.parentNode.firstChild; do { if (nextElem.nodeType === 3) continue; // ignore text nodes if (nextElem === elem) continue; // ignore elem of target if (nextElem === elem.nextElementSibling) { if (!filter || filter(elem)) { sibs.push(nextElem); elem = nextElem; } } } while(nextElem = nextElem.nextSibling) return sibs; }
-
一個篩選函式範例:
function exampleFilter(elem) {
switch (elem.nodeName.toUpperCase()) {
case 'DIV':
return true;
case 'SPAN':
return true;
default:
return false;
}
}
-
1.6 Closest 遍尋
Closest 返回匹配選擇器的第一個父元素,從當前元素開始沿 DOM 樹向上遍尋。
// jQuery $el.closest(queryString); // Native - 只支援最新版本,NO IE el.closest(selector); // Native - IE10+ 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 Parents Until
獲取當前每一個匹配元素的祖先們,不包含匹配元素本身,DOM node 或 jQuery 物件。
// jQuery $el.parentsUntil(selector, filter); // Native function parentsUntil(el, selector, filter) { const result = []; const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; // 從父母開始匹配 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 Form 表單
-
Input / Textarea 輸入欄位
// jQuery $('#my-input').val(); // Native document.querySelector('#my-input').value;
-
獲取 e.currentTarget 在
.radio
中的索引值// jQuery $('.radio').index(e.currentTarget); // Native Array.from(document.querySelectorAll('.radio')).indexOf(e.currentTarget); or Array.prototype.indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
-
-
1.9 Iframe Contents
$('iframe').contents()
在 jQuery 返回的是 iframe 内的document
-
Iframe contents
// jQuery $iframe.contents(); // Native iframe.contentDocument;
-
Iframe Query
// jQuery $iframe.contents().find('.css'); // Native iframe.contentDocument.querySelectorAll('.css');
-
-
1.10 獲取 body
// jQuery $('body'); // Native document.body;
-
1.11 獲取或設置屬性
-
Get an attribute 獲取屬性
// jQuery $el.attr('foo'); // Native el.getAttribute('foo');
-
Set an attribute 設置屬性
// jQuery, 請注意,這可以在記憶體中工作,無需更改 DOM $el.attr('foo', 'bar'); // Native el.setAttribute('foo', 'bar');
-
獲取
data-
屬性// jQuery $el.data('foo'); // Native (使用 `getAttribute`) el.getAttribute('data-foo'); // Native (如果只需要支援 IE 11 以上,可以使用 `dataset`) el.dataset['foo'];
-
-
1.12 包含字串的選擇器 (區分大小寫)
// jQuery $("selector:contains('text')"); // Native function contains(selector, text) { var elements = document.querySelectorAll(selector); return Array.from(elements).filter(function(element) { return RegExp(text).test(element.textContent); }); }
-
2.1 CSS
-
獲取樣式
// jQuery $el.css("color"); // Native // 注意: 已知問題,如果樣式的值為 'auto',將會返回 'auto' const win = el.ownerDocument.defaultView; // null 意指不返回偽樣式 win.getComputedStyle(el, null).color;
-
設置樣式
// jQuery $el.css({ color: "#ff0011" }); // Native el.style.color = '#ff0011';
-
獲取 / 設置樣式
注意:如果想一次設置多個樣式,可以參考 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 Width & Height
Width 與 Height 獲取方式相同,下面以 Height 為例:
-
Window height
// window height $(window).height(); // 沒有捲軸,行為像 jQuery window.document.documentElement.clientHeight; // 有捲軸 window.innerHeight;
-
Document height
// jQuery $(document).height(); // Native const body = document.body; const html = document.documentElement; const height = Math.max( body.offsetHeight, body.scrollHeight, html.clientHeight, html.offsetHeight, html.scrollHeight );
-
Element height
// jQuery $el.height(); // Native 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; } // 精準到整數(當 `border-box` 時為 `height - border` 值;當 `content-box` 時為 `height + padding` 值) el.clientHeight; // 精準到小數(當 `border-box` 時為 `height` 值;當 `content-box` 時為 `height + padding + border` 值) el.getBoundingClientRect().height;
-
-
2.3 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 Scroll Top
獲取元素滾動條的當前垂直位置。
// jQuery $(window).scrollTop(); // Native (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
-
3.1 Remove 移除
從 DOM 中移除元素。
// jQuery $el.remove(); // Native el.parentNode.removeChild(el);
-
3.2 Text 文字
-
Get text 獲取文字
返回元素的文本內容,包含其後代。
// jQuery $el.text(); // Native el.textContent;
-
Set text 設置文字
設置元素的文本內容。
// jQuery $el.text(string); // Native el.textContent = string;
-
-
3.3 HTML
-
Get HTML 獲取 HTML
// jQuery $el.html(); // Native el.innerHTML;
-
Set HTML 設置 HTML
// jQuery $el.html(htmlString); // Native el.innerHTML = htmlString;
-
-
3.4 Append 追加
Append 在父元素的最後一個子元素後追加子元素
// jQuery $el.append("<div id='container'>hello</div>"); // Native (HTML 字串) el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>'); // Native (元素) el.appendChild(newEl);
-
3.5 Prepend 前置
// jQuery $el.prepend("<div id='container'>hello</div>"); // Native (HTML 字串) el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>'); // Native (元素) el.insertBefore(newEl, el.firstChild);
-
3.6 insertBefore 在元素前方插入
在選取的元素前插入新節點
// jQuery $newEl.insertBefore(queryString); // Native (HTML 字串) el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>'); // Native (元素) const el = document.querySelector(selector); if (el.parentNode) { el.parentNode.insertBefore(newEl, el); }
-
3.7 insertAfter 在元素後方插入
在選取的元素插入新節點
// jQuery $newEl.insertAfter(queryString); // Native (HTML 字串) el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>'); // Native (元素) const el = document.querySelector(selector); if (el.parentNode) { el.parentNode.insertBefore(newEl, el.nextSibling); }
-
3.8 is
如果匹配 query selector,返回
true
// jQuery $el.is(selector); // Native el.matches(selector);
-
3.9 clone
創造一個深拷貝元素:此拷貝包含匹配元素及其所有後代元素和文本節點。
// jQuery. 將參數設為 `true` 以表示應將事件處理程序與元素一起複製。 $el.clone(); // Native el.cloneNode();
-
3.10 empty
移除所有子節點
// jQuery
$el.empty();
// Native
el.innerHTML = '';
- 3.11 wrap
把每個被選取的元素放到指定的 HTML 結構裡
// jQuery
$(".inner").wrap('<div class="wrapper"></div>');
// Native
Array.from(document.querySelectorAll('.inner')).forEach((el) => {
const wrapper = document.createElement('div');
wrapper.className = 'wrapper';
el.parentNode.insertBefore(wrapper, el);
el.parentNode.removeChild(el);
wrapper.appendChild(el);
});
-
3.12 unwrap
從 DOM 結構移除匹配元素的父元素
// jQuery $('.inner').unwrap(); // Native Array.from(document.querySelectorAll('.inner')).forEach((el) => { let elParentNode = el.parentNode if(elParentNode !== document.body) { elParentNode.parentNode.insertBefore(el, elParentNode) elParentNode.parentNode.removeChild(elParentNode) } });
-
3.13 replaceWith
用提供的新內容取代任何匹配元素集中的每個元素
// jQuery $('.inner').replaceWith('<div class="outer"></div>'); // Native (方案一) - 最新版或 Edge17+ Array.from(document.querySelectorAll('.inner')).forEach((el) => { const outer = document.createElement('div'); outer.className = 'outer'; el.replaceWith(outer); }); // Native Array.from(document.querySelectorAll('.inner')).forEach((el) => { const outer = document.createElement("div"); outer.className = "outer"; el.parentNode.replaceChild(outer, el); });
-
3.14 simple parse
解析 HTML / SVG / XML 字串
// jQuery $(`<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>`); // Native range = document.createRange(); parse = range.createContextualFragment.bind(range); parse(`<ol> <li>a</li> <li>b</li> </ol> <ol> <li>c</li> <li>d</li> </ol>`);
Fetch API 是一個用是來替換 XMLHttpRequest 執行 ajax 的新標準。適用於 Chrome 和 Firefox,你可以使用 polyfill 讓它在舊版瀏覽器上運行。。
IE9+ 請使用 github/fetch,IE8+ 請使用 fetch-ie8,JSONP 請使用 fetch-jsonp。
-
4.1 從伺服器載入數據並將返回的 HTML 放入匹配的元素中。
// jQuery $(selector).load(url, completeCallback) // Native fetch(url).then(data => data.text()).then(data => { document.querySelector(selector).innerHTML = data }).then(completeCallback)
完整的替代命名空間及事件處理,請參考 https://github.com/oneuijs/oui-dom-events
-
5.0 Document ready by
DOMContentLoaded
// jQuery $(document).ready(eventHandler); // Native // 檢查 DOMContentLoaded 是否已經完成 if (document.readyState !== 'loading') { eventHandler(); } else { document.addEventListener('DOMContentLoaded', eventHandler); }
-
5.1 使用 on 綁定事件
// jQuery $el.on(eventName, eventHandler); // Native el.addEventListener(eventName, eventHandler);
-
5.2 使用 off 綁定事件
// jQuery $el.off(eventName, eventHandler); // Native el.removeEventListener(eventName, eventHandler);
-
5.3 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);
大部份的 jQuery 實用工具都能在 native API 中找到。其它進階功能可以選用專注於穩定及效能的優質工具庫,推薦 lodash。
-
6.1 基本工具
- isArray
判斷參數是否為陣列。
// jQuery $.isArray(array); // Native Array.isArray(array);
- isWindow
判斷參數是否為 window
// jQuery $.isWindow(obj); // Native function isWindow(obj) { return obj !== null && obj !== undefined && obj === obj.window; }
- inArray
在陣列中搜尋指定值並返回索引值 (找不到則返回 -1)。
// jQuery $.inArray(item, array); // Native array.indexOf(item) > -1; // ES6-way array.includes(item);
- isNumeric
判斷傳入的參數是否為數字。 為了更好的準確性,請使用
typeof
確定型別,或參考下方type
範例。// jQuery $.isNumeric(item); // Native function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); }
- isFunction
判斷傳入的參數是否為 Javascript 函式。
// jQuery $.isFunction(item); // Native function isFunction(item) { if (typeof item === 'function') { return true; } var type = Object.prototype.toString.call(item); return type === '[object Function]' || type === '[object GeneratorFunction]'; }
- isEmptyObject
檢測物件是否為空值 (包含不可枚舉的屬性)
// jQuery $.isEmptyObject(obj); // Native function isEmptyObject(obj) { return Object.keys(obj).length === 0; }
- isPlainObject
檢測物件是否為純對象 (使用 “{}” 或 “new Object” 創建)
// jQuery $.isPlainObject(obj); // Native function isPlainObject(obj) { if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) { return false; } if (obj.constructor && !Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) { return false; } return true; }
- extend
將二個或多個物件的內容合併到一個新物件中,且不修改任一個參數。 object.assign 是 ES6 API,你也可以使用 polyfill。
// jQuery $.extend({}, object1, object2); // Native Object.assign({}, object1, object2);
- trim
刪除字串開頭和結尾的空白。
// jQuery $.trim(string); // Native string.trim();
- map
將陣列或物件裡的所有項目轉換為新的陣列項目。
// jQuery $.map(array, (value, index) => { }); // Native array.map((value, index) => { });
- each
通用迭代函式,可用於無縫迭代物件或陣列。
// jQuery $.each(array, (index, value) => { }); // Native array.forEach((value, index) => { });
- grep
找到陣列中符合過濾函式的元素。
// jQuery $.grep(array, (value, index) => { }); // Native array.filter((value, index) => { });
- type
檢測物件中的 JavaScript [Class] 內部型態。
// jQuery $.type(obj); // Native function type(item) { const reTypeOf = /(?:^\[object\s(.*?)\]$)/; return Object.prototype.toString.call(item) .replace(reTypeOf, '$1') .toLowerCase(); }
- merge
將二個陣列的內容合併到第一個陣列裡。
// jQuery, 不會刪除重複的項目 $.merge(array1, array2); // Native, 不會刪除重複的項目 function merge(...args) { return [].concat(...args) } // ES6-way, 不會刪除重複的項目 array1 = [...array1, ...array2] // Set version, 不會刪除重複的項目 function merge(...args) { return Array.from(new Set([].concat(...args))) }
- now
返回表示當前時間的數字。
// jQuery $.now(); // Native Date.now();
- proxy
傳入一個函式並返回一個新的函式,該函式綁定指定的上下文。
// jQuery $.proxy(fn, context); // Native fn.bind(context);
將類似陣列的物件轉換為真正的 JavaScript 陣列。
// jQuery $.makeArray(arrayLike); // Native Array.prototype.slice.call(arrayLike); // ES6-way: Array.from() method Array.from(arrayLike); // ES6-way: spread operator 展開運算式 [...arrayLike];
-
6.2 Contains
檢查 DOM 元素是否為其它 DOM 元素的後代。
// jQuery $.contains(el, child); // Native el !== child && el.contains(child);
-
6.3 Globaleval
執行一些 JavaScript 的全域域代碼。
// jQuery $.globaleval(code); // Native function Globaleval(code) { const script = document.createElement('script'); script.text = code; document.head.appendChild(script).parentNode.removeChild(script); } // 使用 eval,但 eval 的上下文是當前的,而 $.Globaleval 的上下文是 global 全域的。 eval(code);
-
6.4 parse
- parseHTML
將字串解析為 DOM nodes 陣列。
// jQuery $.parseHTML(htmlString); // Native function parseHTML(string) { const context = document.implementation.createHTMLDocument(); // Set the base href for the created document so any parsed elements with URLs // are based on the document's URL const base = context.createElement('base'); base.href = document.location.href; context.head.appendChild(base); context.body.innerHTML = string; return context.body.children; }
-
6.5 exists
-
exists
檢查元素是否存在於 DOM 裡。
// jQuery if ($('selector').length) { // exists } // Native var element = document.getElementById('elementId'); if (typeof(element) != 'undefined' && element != null) { // exists }
promise 表示異步操作的最終結果。 jQuery 用它自己的方式來處理 promises。原生 JavaScript 依據 Promises/A+ 標準來實現最小 API 處理 promises。
-
7.1 done, fail, always
done
會在 promise 解決時調用,fail
會在 promise 拒絕時調用,always
無論 promise 解決或拒絕時都會調用。// jQuery $promise.done(doneCallback).fail(failCallback).always(alwaysCallback) // Native promise.then(doneCallback, failCallback).then(alwaysCallback, alwaysCallback)
-
7.2 when
when
用於處理多個 promises。當全部 promises 被解決時返回,當任一 promises 被拒絕時拒絕。// jQuery $.when($promise1, $promise2).done((promise1Result, promise2Result) => { }); // Native Promise.all([$promise1, $promise2]).then([promise1Result, promise2Result] => {});
-
7.3 Deferred
Deferred 是創建 promises 的一種方式。
// jQuery function asyncFunc() { const defer = new $.Deferred(); setTimeout(() => { if(true) { defer.resolve('some_value_computed_asynchronously'); } else { defer.reject('failed'); } }, 1000); return defer.promise(); } // Native function asyncFunc() { return new Promise((resolve, reject) => { setTimeout(() => { if (true) { resolve('some_value_computed_asynchronously'); } else { reject('failed'); } }, 1000); }); } // Deferred way function defer() { const deferred = {}; const promise = new Promise((resolve, reject) => { deferred.resolve = resolve; deferred.reject = reject; }); deferred.promise = () => { return promise; }; return deferred; } function asyncFunc() { const defer = defer(); setTimeout(() => { if(true) { defer.resolve('some_value_computed_asynchronously'); } else { defer.reject('failed'); } }, 1000); return defer.promise(); }
-
8.1 Show & Hide
// jQuery $el.show(); $el.hide(); // Native // 更多 show 方法的細節,請參考 https://github.com/oneuijs/oui-dom-utils/blob/master/src/index.js#L363 el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block'; el.style.display = 'none';
-
8.2 Toggle
顯示或隱藏元素。
// jQuery $el.toggle(); // Native if (el.ownerDocument.defaultView.getComputedStyle(el, null).display === 'none') { el.style.display = ''|'inline'|'inline-block'|'inline-table'|'block'; } else { el.style.display = 'none'; }
-
8.3 FadeIn & FadeOut
// jQuery $el.fadeIn(3000); $el.fadeOut(3000); // Native fadeOut function fadeOut(el, ms) { if (ms) { el.style.transition = `opacity ${ms} ms`; el.addEventListener( 'transitionend', function(event) { el.style.display = 'none'; }, false ); } el.style.opacity = '0'; } // Native fadeIn function fadeIn(elem, ms) { elem.style.opacity = 0; if (ms) { let opacity = 0; const timer = setInterval(function() { opacity += 50 / ms; if (opacity >= 1) { clearInterval(timer); opacity = 1; } elem.style.opacity = opacity; }, 50); } else { elem.style.opacity = 1; } }
-
8.4 FadeTo
調整元素的透明度。
// jQuery $el.fadeTo('slow',0.15); // Native el.style.transition = 'opacity 3s'; // assume 'slow' equals 3 seconds el.style.opacity = '0.15';
-
8.5 FadeToggle
動畫調整透明度來顯示或隱藏。
// jQuery $el.fadeToggle(); // Native el.style.transition = 'opacity 3s'; const { opacity } = el.ownerDocument.defaultView.getComputedStyle(el, null); if (opacity === '1') { el.style.opacity = '0'; } else { el.style.opacity = '1'; }
-
8.6 SlideUp & SlideDown
// jQuery $el.slideUp(); $el.slideDown(); // Native const originHeight = '100px'; el.style.transition = 'height 3s'; // slideUp el.style.height = '0px'; // slideDown el.style.height = originHeight;
-
8.7 SlideToggle
滑動效果來顯示或隱藏元素。
// jQuery $el.slideToggle(); // Native const originHeight = '100px'; el.style.transition = 'height 3s'; const { height } = el.ownerDocument.defaultView.getComputedStyle(el, null); if (parseInt(height, 10) === 0) { el.style.height = originHeight; } else { el.style.height = '0px'; }
-
8.8 Animate
執行一組自定義動畫的 CSS 屬性。
// jQuery $el.animate({ params }, speed); // Native el.style.transition = 'all ' + speed; Object.keys(params).forEach((key) => { el.style[key] = params[key]; });
- You Might Not Need jQuery - Examples of how to do common event, element, ajax etc with plain javascript.
- npm-dom and webmodules - Organizations you can find individual DOM modules on NPM
Latest ✔ | Latest ✔ | 10+ ✔ | Latest ✔ | 6.1+ ✔ |
MIT