');
================================================
FILE: src/comparisons/elements/each/ie8.js
================================================
function forEachElement(selector, fn) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) fn(elements[i], i);
}
forEachElement(selector, function (el, i) {});
================================================
FILE: src/comparisons/elements/each/ie9.js
================================================
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function (el, i) {});
================================================
FILE: src/comparisons/elements/each/jquery.js
================================================
$(selector).each(function (i, el) {});
================================================
FILE: src/comparisons/elements/each/modern.js
================================================
document.querySelectorAll(selector).forEach((el, i) => {});
================================================
FILE: src/comparisons/elements/empty/ie8.js
================================================
while (el.firstChild) el.removeChild(el.firstChild);
================================================
FILE: src/comparisons/elements/empty/jquery.js
================================================
$(el).empty();
================================================
FILE: src/comparisons/elements/empty/modern.js
================================================
el.replaceChildren();
================================================
FILE: src/comparisons/elements/filter/ie8.js
================================================
function filter(selector, filterFn) {
var elements = document.querySelectorAll(selector);
var out = [];
for (var i = elements.length; i--; ) {
if (filterFn(elements[i])) out.unshift(elements[i]);
}
return out;
}
filter(selector, filterFn);
================================================
FILE: src/comparisons/elements/filter/ie9.js
================================================
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn);
================================================
FILE: src/comparisons/elements/filter/jquery.js
================================================
$(selector).filter(filterFn);
================================================
FILE: src/comparisons/elements/filter/modern.js
================================================
[...document.querySelectorAll(selector)].filter(filterFn);
================================================
FILE: src/comparisons/elements/find_children/ie8.js
================================================
el.querySelectorAll(selector);
================================================
FILE: src/comparisons/elements/find_children/jquery.js
================================================
$(el).find(selector);
================================================
FILE: src/comparisons/elements/find_children/modern.js
================================================
// For direct descendants only, see https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll#user_notes
el.querySelectorAll(`:scope ${selector}`);
================================================
FILE: src/comparisons/elements/find_elements/alternatives.json
================================================
{
"qwery": "https://github.com/ded/qwery",
"sizzle": "https://sizzlejs.com/"
}
================================================
FILE: src/comparisons/elements/find_elements/ie8.js
================================================
document.querySelectorAll('.my #awesome selector');
================================================
FILE: src/comparisons/elements/find_elements/jquery.js
================================================
$('.my #awesome selector');
================================================
FILE: src/comparisons/elements/find_selector/ie8.js
================================================
!!el.querySelector(selector);
================================================
FILE: src/comparisons/elements/find_selector/jquery.js
================================================
$(el).find(selector).length;
================================================
FILE: src/comparisons/elements/first/ie8.js
================================================
document.querySelector(el);
================================================
FILE: src/comparisons/elements/first/jquery.js
================================================
$(el).first();
================================================
FILE: src/comparisons/elements/get_attributes/ie8.js
================================================
el.getAttribute('tabindex');
================================================
FILE: src/comparisons/elements/get_attributes/jquery.js
================================================
$(el).attr('tabindex');
================================================
FILE: src/comparisons/elements/get_height/ie8.js
================================================
function getHeight(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle)
el = parseFloat(getComputedStyle(el, null).height.replace('px', ''));
else {
var c = el.currentStyle.height;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el;
}
getHeight(el);
================================================
FILE: src/comparisons/elements/get_height/ie9.js
================================================
parseFloat(getComputedStyle(el, null).height.replace('px', ''));
================================================
FILE: src/comparisons/elements/get_height/jquery.js
================================================
$(el).height();
================================================
FILE: src/comparisons/elements/get_height/modern.js
================================================
el.getBoundingClientRect().height;
================================================
FILE: src/comparisons/elements/get_html/ie8.js
================================================
el.innerHTML;
================================================
FILE: src/comparisons/elements/get_html/jquery.js
================================================
$(el).html();
================================================
FILE: src/comparisons/elements/get_outer_html/ie8.js
================================================
el.outerHTML;
================================================
FILE: src/comparisons/elements/get_outer_html/jquery.js
================================================
$(el).prop('outerHTML');
================================================
FILE: src/comparisons/elements/get_style/ie8.js
================================================
// Varies based on the properties being retrieved, some can be retrieved from el.currentStyle
// https://github.com/jonathantneal/Polyfills-for-IE8/blob/master/getComputedStyle.js
================================================
FILE: src/comparisons/elements/get_style/ie9.js
================================================
getComputedStyle(el)[ruleName];
================================================
FILE: src/comparisons/elements/get_style/jquery.js
================================================
$(el).css(ruleName);
================================================
FILE: src/comparisons/elements/get_text/ie8.js
================================================
el.textContent || el.innerText;
================================================
FILE: src/comparisons/elements/get_text/ie9.js
================================================
el.textContent;
================================================
FILE: src/comparisons/elements/get_text/jquery.js
================================================
$(el).text();
================================================
FILE: src/comparisons/elements/get_width/ie8.js
================================================
function getWidth(el) {
var d = /^\d+(px)?$/i;
if (window.getComputedStyle)
el = parseFloat(getComputedStyle(el, null).width.replace('px', ''));
else {
var c = el.currentStyle.width;
if (d.test(c)) el = parseInt(c);
else {
d = el.style.left;
var e = el.runtimeStyle.left;
el.runtimeStyle.left = el.currentStyle.left;
el.style.left = c || 0;
c = el.style.pixelLeft;
el.style.left = d;
el.runtimeStyle.left = e;
el = c;
}
}
return el;
}
getWidth(el);
================================================
FILE: src/comparisons/elements/get_width/ie9.js
================================================
parseFloat(getComputedStyle(el, null).width.replace('px', ''));
================================================
FILE: src/comparisons/elements/get_width/jquery.js
================================================
$(el).width();
================================================
FILE: src/comparisons/elements/get_width/modern.js
================================================
el.getBoundingClientRect().width;
================================================
FILE: src/comparisons/elements/has_class/ie10.js
================================================
el.classList.contains(className);
================================================
FILE: src/comparisons/elements/has_class/ie8.js
================================================
if (el.classList) el.classList.contains(className);
else new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
================================================
FILE: src/comparisons/elements/has_class/jquery.js
================================================
$(el).hasClass(className);
================================================
FILE: src/comparisons/elements/index/ie8.js
================================================
function index(el) {
if (!el) return -1;
var i = 0;
while (el) {
el = el.previousSibling;
if (el && el.nodeType === 1) i++;
}
return i;
}
================================================
FILE: src/comparisons/elements/index/ie9.js
================================================
function index(el) {
if (!el) return -1;
var i = 0;
while ((el = el.previousElementSibling)) {
i++;
}
return i;
}
================================================
FILE: src/comparisons/elements/index/jquery.js
================================================
$(el).index();
================================================
FILE: src/comparisons/elements/index/modern.js
================================================
[...el.parentNode.children].indexOf(el);
================================================
FILE: src/comparisons/elements/inner_height/jquery.js
================================================
$(el).innerHeight();
$(el).innerHeight(150);
================================================
FILE: src/comparisons/elements/inner_height/modern.js
================================================
function innerHeight(el, value) {
if (value === undefined) {
return el.clientHeight;
} else {
el.style.height = value;
}
}
innerHeight(el);
innerHeight(el, 150);
================================================
FILE: src/comparisons/elements/inner_width/jquery.js
================================================
$(el).innerWidth();
$(el).innerWidth(150);
================================================
FILE: src/comparisons/elements/inner_width/modern.js
================================================
function innerWidth(el, value) {
if (value === undefined) {
return el.clientWidth;
} else {
el.style.width = value;
}
}
innerWidth(el);
innerWidth(el, 150);
================================================
FILE: src/comparisons/elements/is_hidden/jquery.js
================================================
$(el).is(':hidden');
================================================
FILE: src/comparisons/elements/is_hidden/modern.js
================================================
function isHidden(el) {
return !(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}
================================================
FILE: src/comparisons/elements/is_visible/jquery.js
================================================
$(el).is(':visible');
================================================
FILE: src/comparisons/elements/is_visible/modern.js
================================================
function isVisible(el) {
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
}
================================================
FILE: src/comparisons/elements/last/ie8.js
================================================
var els = document.querySelectorAll(el);
els[els.length - 1];
================================================
FILE: src/comparisons/elements/last/jquery.js
================================================
$(el).last();
================================================
FILE: src/comparisons/elements/last/modern.js
================================================
[...document.querySelectorAll(el)].at(-1);
================================================
FILE: src/comparisons/elements/matches/ie8.js
================================================
el === otherEl;
================================================
FILE: src/comparisons/elements/matches/jquery.js
================================================
$(el).is($(otherEl));
================================================
FILE: src/comparisons/elements/matches_selector/ie8.js
================================================
var matches = function (el, selector) {
var _matches =
el.matches ||
el.matchesSelector ||
el.msMatchesSelector ||
el.mozMatchesSelector ||
el.webkitMatchesSelector ||
el.oMatchesSelector;
if (_matches) {
return _matches.call(el, selector);
} else {
if (el.parentNode === null) return false;
var nodes = el.parentNode.querySelectorAll(selector);
for (var i = nodes.length; i--; ) {
if (nodes[i] === el) return true;
}
return false;
}
};
matches(el, '.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/ie9.js
================================================
var matches = function (el, selector) {
return (
el.matches ||
el.matchesSelector ||
el.msMatchesSelector ||
el.mozMatchesSelector ||
el.webkitMatchesSelector ||
el.oMatchesSelector
).call(el, selector);
};
matches(el, '.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/jquery.js
================================================
$(el).is('.my-class');
================================================
FILE: src/comparisons/elements/matches_selector/modern.js
================================================
el.matches('.my-class');
================================================
FILE: src/comparisons/elements/next/ie8.js
================================================
// nextSibling can include text nodes
function nextElementSibling(el) {
do {
el = el.nextSibling;
} while (el && el.nodeType !== 1);
return el;
}
el.nextElementSibling || nextElementSibling(el);
================================================
FILE: src/comparisons/elements/next/ie9.js
================================================
el.nextElementSibling;
================================================
FILE: src/comparisons/elements/next/jquery.js
================================================
$(el).next();
================================================
FILE: src/comparisons/elements/next/modern.js
================================================
function next(el, selector) {
const nextEl = el.nextElementSibling;
if (!selector || (nextEl && nextEl.matches(selector))) {
return nextEl;
}
return null;
}
next(el);
// Or, with an optional selector
next(el, '.my-selector');
================================================
FILE: src/comparisons/elements/offset/ie8.js
================================================
function offset(el) {
var docElem = document.documentElement;
var rect = el.getBoundingClientRect();
return {
top:
rect.top +
(window.pageYOffset || docElem.scrollTop) -
(docElem.clientTop || 0),
left:
rect.left +
(window.pageXOffset || docElem.scrollLeft) -
(docElem.clientLeft || 0)
};
}
================================================
FILE: src/comparisons/elements/offset/ie9.js
================================================
function offset(el) {
box = el.getBoundingClientRect();
docElem = document.documentElement;
return {
top: box.top + window.pageYOffset - docElem.clientTop,
left: box.left + window.pageXOffset - docElem.clientLeft
};
}
================================================
FILE: src/comparisons/elements/offset/jquery.js
================================================
$(el).offset();
================================================
FILE: src/comparisons/elements/offset_parent/ie8.js
================================================
el.offsetParent || el;
================================================
FILE: src/comparisons/elements/offset_parent/jquery.js
================================================
$(el).offsetParent();
================================================
FILE: src/comparisons/elements/outer_height/ie8.js
================================================
el.offsetHeight;
================================================
FILE: src/comparisons/elements/outer_height/jquery.js
================================================
$(el).outerHeight();
================================================
FILE: src/comparisons/elements/outer_height_with_margin/ie8.js
================================================
function outerHeight(el) {
var height = el.offsetHeight;
var style = el.currentStyle || getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
return height;
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/ie9.js
================================================
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseFloat(style.marginTop) + parseFloat(style.marginBottom);
return height;
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/jquery.js
================================================
$(el).outerHeight(true);
================================================
FILE: src/comparisons/elements/outer_height_with_margin/modern.js
================================================
function outerHeight(el) {
const style = getComputedStyle(el);
return (
el.getBoundingClientRect().height +
parseFloat(style.marginTop) +
parseFloat(style.marginBottom)
);
}
outerHeight(el);
================================================
FILE: src/comparisons/elements/outer_width/ie8.js
================================================
el.offsetWidth;
================================================
FILE: src/comparisons/elements/outer_width/jquery.js
================================================
$(el).outerWidth();
================================================
FILE: src/comparisons/elements/outer_width_with_margin/ie8.js
================================================
function outerWidth(el) {
var width = el.offsetWidth;
var style = el.currentStyle || getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
return width;
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/ie9.js
================================================
function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseFloat(style.marginLeft) + parseFloat(style.marginRight);
return width;
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/jquery.js
================================================
$(el).outerWidth(true);
================================================
FILE: src/comparisons/elements/outer_width_with_margin/modern.js
================================================
function outerWidth(el) {
const style = getComputedStyle(el);
return (
el.getBoundingClientRect().width +
parseFloat(style.marginLeft) +
parseFloat(style.marginRight)
);
}
outerWidth(el);
================================================
FILE: src/comparisons/elements/parent/ie8.js
================================================
el.parentNode;
================================================
FILE: src/comparisons/elements/parent/jquery.js
================================================
$(el).parent();
================================================
FILE: src/comparisons/elements/parents/ie9.js
================================================
function parents(el, selector) {
var parents = [];
while ((el = el.parentNode) && el !== document) {
// See "Matches Selector" above
if (!selector || matches(el, selector)) parents.push(el);
}
return parents;
}
================================================
FILE: src/comparisons/elements/parents/jquery.js
================================================
$(el).parents(selector);
================================================
FILE: src/comparisons/elements/parents/modern.js
================================================
function parents(el, selector) {
const parents = [];
while ((el = el.parentNode) && el !== document) {
if (!selector || el.matches(selector)) parents.push(el);
}
return parents;
}
================================================
FILE: src/comparisons/elements/position/ie8.js
================================================
function position(el) {
var box = el.getBoundingClientRect();
var docElem = document.documentElement;
var marginLeft = 0;
var marginTop = 0;
if (typeof getComputedStyle === 'function') {
var style = window.getComputedStyle(el);
marginLeft = parseInt(style.marginLeft, 10);
marginTop = parseInt(style.marginTop, 10);
} else if (el.currentStyle) {
marginLeft = el.currentStyle['marginLeft']
? parseInt(el.currentStyle['marginLeft'], 10)
: 0;
marginTop = el.currentStyle['marginTop']
? parseInt(el.currentStyle['marginTop'], 10)
: 0;
}
return {
top: box.top + (window.pageYOffset || docElem.scrollTop) - marginTop,
left: box.left + (window.pageXOffset || docElem.scrollLeft) - marginLeft
};
}
================================================
FILE: src/comparisons/elements/position/jquery.js
================================================
$(el).position();
================================================
FILE: src/comparisons/elements/position/modern.js
================================================
function position(el) {
const {top, left} = el.getBoundingClientRect();
const {marginTop, marginLeft} = getComputedStyle(el);
return {
top: top - parseInt(marginTop, 10),
left: left - parseInt(marginLeft, 10)
};
}
================================================
FILE: src/comparisons/elements/position_relative_to_viewport/ie8.js
================================================
el.getBoundingClientRect();
================================================
FILE: src/comparisons/elements/position_relative_to_viewport/jquery.js
================================================
function offset(el) {
var offset = $(el).offset();
return {
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
};
}
================================================
FILE: src/comparisons/elements/prepend/ie8.js
================================================
parent.insertBefore(el, parent.firstChild);
================================================
FILE: src/comparisons/elements/prepend/jquery.js
================================================
$(parent).prepend(el);
================================================
FILE: src/comparisons/elements/prepend/modern.js
================================================
parent.prepend(el);
================================================
FILE: src/comparisons/elements/prev/ie8.js
================================================
// prevSibling can include text nodes
function previousElementSibling(el) {
do {
el = el.previousSibling;
} while (el && el.nodeType !== 1);
return el;
}
el.previousElementSibling || previousElementSibling(el);
================================================
FILE: src/comparisons/elements/prev/ie9.js
================================================
el.previousElementSibling;
================================================
FILE: src/comparisons/elements/prev/jquery.js
================================================
$(el).prev();
// Or, with an optional selector
$(el).prev('.my-selector');
================================================
FILE: src/comparisons/elements/prev/modern.js
================================================
function prev(el, selector) {
const prevEl = el.previousElementSibling;
if (!selector || (prevEl && prevEl.matches(selector))) {
return prevEl;
}
return null;
}
prev(el);
// Or, with an optional selector
prev(el, '.my-selector');
================================================
FILE: src/comparisons/elements/remove/ie8.js
================================================
if (el.parentNode !== null) {
el.parentNode.removeChild(el);
}
================================================
FILE: src/comparisons/elements/remove/jquery.js
================================================
$(el).remove();
// multiple elements
$(selector).remove();
================================================
FILE: src/comparisons/elements/remove/modern.js
================================================
el.remove();
// multiple elements
for (const el of document.querySelectorAll(selector)) {
el.remove();
}
================================================
FILE: src/comparisons/elements/remove_attributes/ie8.js
================================================
el.removeAttribute('tabindex');
================================================
FILE: src/comparisons/elements/remove_attributes/jquery.js
================================================
$(el).removeAttr('tabindex');
================================================
FILE: src/comparisons/elements/remove_class/ie10.js
================================================
el.classList.remove(className);
================================================
FILE: src/comparisons/elements/remove_class/ie8.js
================================================
function removeClass(el, className) {
var classes = className.split(' ');
for (var i = 0; i < classes.length; i++) {
if (el.classList) {
el.classList.remove(classes[i]);
} else {
el.className = el.className
.replace(new RegExp('(?:^|\\s)' + classes[i] + '(?:\\s|$)'), ' ')
.replace(new RegExp(/^\s+|\s+$/g), '');
}
}
}
================================================
FILE: src/comparisons/elements/remove_class/jquery.js
================================================
$(el).removeClass(className);
================================================
FILE: src/comparisons/elements/replace_from_html/ie8.js
================================================
el.outerHTML = string;
================================================
FILE: src/comparisons/elements/replace_from_html/jquery.js
================================================
$(el).replaceWith(string);
================================================
FILE: src/comparisons/elements/scroll_left/jquery.js
================================================
$(window).scrollLeft();
================================================
FILE: src/comparisons/elements/scroll_left/modern.js
================================================
function scrollLeft(el, value) {
var win;
if (el.window === el) {
win = el;
} else if (el.nodeType === 9) {
win = el.defaultView;
}
if (value === undefined) {
return win ? win.pageXOffset : el.scrollLeft;
}
if (win) {
win.scrollTo(value, win.pageYOffset);
} else {
el.scrollLeft = value;
}
}
================================================
FILE: src/comparisons/elements/scroll_top/jquery.js
================================================
$(window).scrollTop();
================================================
FILE: src/comparisons/elements/scroll_top/modern.js
================================================
function scrollTop(el, value) {
var win;
if (el.window === el) {
win = el;
} else if (el.nodeType === 9) {
win = el.defaultView;
}
if (value === undefined) {
return win ? win.pageYOffset : el.scrollTop;
}
if (win) {
win.scrollTo(win.pageXOffset, value);
} else {
el.scrollTop = value;
}
}
================================================
FILE: src/comparisons/elements/serialize/jquery.js
================================================
$(formElement).serialize();
================================================
FILE: src/comparisons/elements/serialize/modern.js
================================================
new URLSearchParams(new FormData(formElement)).toString();
================================================
FILE: src/comparisons/elements/set_attributes/ie8.js
================================================
el.setAttribute('tabindex', 3);
================================================
FILE: src/comparisons/elements/set_attributes/jquery.js
================================================
$(el).attr('tabindex', 3);
================================================
FILE: src/comparisons/elements/set_height/ie8.js
================================================
function setHeight(el, val) {
if (typeof val === 'function') val = val();
if (typeof val === 'string') el.style.height = val;
else el.style.height = val + 'px';
}
setHeight(el, val);
================================================
FILE: src/comparisons/elements/set_height/jquery.js
================================================
$(el).height(val);
================================================
FILE: src/comparisons/elements/set_html/ie8.js
================================================
el.innerHTML = string;
================================================
FILE: src/comparisons/elements/set_html/jquery.js
================================================
$(el).html(string);
================================================
FILE: src/comparisons/elements/set_style/ie8.js
================================================
// Use a class if possible
el.style.borderWidth = '20px';
================================================
FILE: src/comparisons/elements/set_style/jquery.js
================================================
$(el).css('border-width', '20px');
================================================
FILE: src/comparisons/elements/set_text/ie8.js
================================================
if (el.textContent !== undefined) el.textContent = string;
else el.innerText = string;
================================================
FILE: src/comparisons/elements/set_text/ie9.js
================================================
el.textContent = string;
================================================
FILE: src/comparisons/elements/set_text/jquery.js
================================================
$(el).text(string);
================================================
FILE: src/comparisons/elements/set_width/ie8.js
================================================
function setWidth(el, val) {
if (typeof val === 'function') val = val();
if (typeof val === 'string') el.style.width = val;
else el.style.width = val + 'px';
}
setWidth(el, val);
================================================
FILE: src/comparisons/elements/set_width/jquery.js
================================================
$(el).width(val);
================================================
FILE: src/comparisons/elements/siblings/ie8.js
================================================
var siblings = function (el) {
if (el.parentNode === null) return [];
var siblingElements = Array.prototype.slice.call(el.parentNode.children);
for (var i = siblingElements.length; i--; ) {
if (siblingElements[i] === el) {
return siblingElements.splice(i, 1);
}
}
return siblingElements;
};
siblings(el);
================================================
FILE: src/comparisons/elements/siblings/ie9.js
================================================
var siblings = function (el) {
if (el.parentNode === null) return [];
return Array.prototype.filter.call(el.parentNode.children, function (child) {
return child !== el;
});
};
siblings(el);
================================================
FILE: src/comparisons/elements/siblings/jquery.js
================================================
$(el).siblings();
================================================
FILE: src/comparisons/elements/siblings/modern.js
================================================
[...el.parentNode.children].filter((child) => child !== el);
================================================
FILE: src/comparisons/elements/toggle_class/ie10.js
================================================
el.classList.toggle(className);
================================================
FILE: src/comparisons/elements/toggle_class/ie8.js
================================================
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = -1;
for (var i = classes.length; i--; ) {
if (classes[i] === className) existingIndex = i;
}
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
================================================
FILE: src/comparisons/elements/toggle_class/ie9.js
================================================
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0) classes.splice(existingIndex, 1);
else classes.push(className);
el.className = classes.join(' ');
}
================================================
FILE: src/comparisons/elements/toggle_class/jquery.js
================================================
$(el).toggleClass(className);
================================================
FILE: src/comparisons/elements/unwrap/jquery.js
================================================
$(el).unwrap();
================================================
FILE: src/comparisons/elements/unwrap/modern.js
================================================
el.replaceWith(...el.childNodes);
================================================
FILE: src/comparisons/elements/val/jquery.js
================================================
$(el).val();
================================================
FILE: src/comparisons/elements/val/modern.js
================================================
function val(el) {
if (el.options && el.multiple) {
return el.options
.filter((option) => option.selected)
.map((option) => option.value);
} else {
return el.value;
}
}
================================================
FILE: src/comparisons/elements/wrap/jquery.js
================================================
el.wrap('');
================================================
FILE: src/comparisons/elements/wrap/modern.js
================================================
function wrap(el) {
const wrappingElement = document.createElement('div');
el.replaceWith(wrappingElement);
wrappingElement.appendChild(el);
}
================================================
FILE: src/comparisons/events/alternatives.json
================================================
{
"ftdomdelegate": "https://github.com/ftlabs/ftdomdelegate",
"defer": "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer",
"modules": "https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules"
}
================================================
FILE: src/comparisons/events/click/ie8.js
================================================
var onClick = function (element, handler) {
if (element.addEventListener) {
element.addEventListener('click', handler, false);
} else {
element.attachEvent('onclick', handler);
}
};
onClick(el, function () {});
================================================
FILE: src/comparisons/events/click/ie9.js
================================================
el.addEventListener('click', function () {});
================================================
FILE: src/comparisons/events/click/jquery.js
================================================
$(el).click(function () {});
================================================
FILE: src/comparisons/events/click/modern.js
================================================
el.addEventListener('click', () => {});
================================================
FILE: src/comparisons/events/delegate/ie8.js
================================================
document.addEventListener(
eventName,
function (e) {
// loop parent nodes from the target to the delegation node
for (
var target = e.target;
target && target != this;
target = target.parentNode
) {
if (target.matches(elementSelector)) {
handler.call(target, e);
break;
}
}
},
false
);
================================================
FILE: src/comparisons/events/delegate/jquery.js
================================================
$(document).on(eventName, elementSelector, handler);
================================================
FILE: src/comparisons/events/delegate/modern.js
================================================
document.addEventListener(eventName, (event) => {
if (event.target.closest(elementSelector)) {
handler.call(event.target, event);
}
});
================================================
FILE: src/comparisons/events/off/ie8.js
================================================
function removeEventListener(el, eventName, handler) {
if (el.removeEventListener) el.removeEventListener(eventName, handler);
else el.detachEvent('on' + eventName, handler);
}
removeEventListener(el, eventName, handler);
================================================
FILE: src/comparisons/events/off/ie9.js
================================================
el.removeEventListener(eventName, eventHandler);
================================================
FILE: src/comparisons/events/off/jquery.js
================================================
$(el).off(eventName, eventHandler);
================================================
FILE: src/comparisons/events/on/ie8.js
================================================
function addEventListener(el, eventName, handler) {
if (el.addEventListener) {
el.addEventListener(eventName, handler);
return handler;
} else {
var wrappedHandler = function (event) {
handler.call(el, event);
};
el.attachEvent('on' + eventName, wrappedHandler);
return wrappedHandler;
}
}
// Use the return value to remove that event listener, see #off
var handlerToRemove = addEventListener(el, eventName, handler);
================================================
FILE: src/comparisons/events/on/ie9.js
================================================
function addEventListener(el, eventName, eventHandler, selector) {
if (selector) {
var wrappedHandler = function (e) {
if (e.target && e.target.matches(selector)) {
eventHandler(e);
}
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
} else {
el.addEventListener(eventName, eventHandler);
return eventHandler;
}
}
// Use the return value to remove that event listener, see #off
addEventListener(el, eventName, eventHandler);
// Or when you want to delegate event handling
addEventListener(el, eventName, eventHandler, selector);
================================================
FILE: src/comparisons/events/on/jquery.js
================================================
$(el).on(eventName, eventHandler);
// Or when you want to delegate event handling
$(el).on(eventName, selector, eventHandler);
================================================
FILE: src/comparisons/events/on/modern.js
================================================
function addEventListener(el, eventName, eventHandler, selector) {
if (selector) {
const wrappedHandler = (e) => {
if (!e.target) return;
const el = e.target.closest(selector);
if (el) {
eventHandler.call(el, e);
}
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
} else {
const wrappedHandler = (e) => {
eventHandler.call(el, e);
};
el.addEventListener(eventName, wrappedHandler);
return wrappedHandler;
}
}
// Use the return value to remove that event listener, see #off
addEventListener(el, eventName, eventHandler);
// Or when you want to delegate event handling
addEventListener(el, eventName, eventHandler, selector);
================================================
FILE: src/comparisons/events/ready/ie8.js
================================================
function ready(fn) {
if (document.readyState != 'loading') {
fn();
} else if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', fn);
} else {
document.attachEvent('onreadystatechange', function () {
if (document.readyState != 'loading') fn();
});
}
}
================================================
FILE: src/comparisons/events/ready/ie9.js
================================================
function ready(fn) {
if (
document.attachEvent
? document.readyState === 'complete'
: document.readyState !== 'loading'
) {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
================================================
FILE: src/comparisons/events/ready/jquery.js
================================================
$(document).ready(function () {});
================================================
FILE: src/comparisons/events/ready/modern.js
================================================
function ready(fn) {
if (document.readyState !== 'loading') {
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
================================================
FILE: src/comparisons/events/trigger_custom/alternatives.json
================================================
{
"EventEmitter": "https://github.com/Wolfy87/EventEmitter",
"Vine": "https://github.com/arextar/Vine",
"microevent": "https://github.com/jeromeetienne/microevent.js"
}
================================================
FILE: src/comparisons/events/trigger_custom/ie8.js
================================================
// Custom events are not natively supported, so you have to hijack a random
// event.
//
// Just use jQuery.
================================================
FILE: src/comparisons/events/trigger_custom/ie9.js
================================================
if (window.CustomEvent && typeof window.CustomEvent === 'function') {
var event = new CustomEvent('my-event', {detail: {some: 'data'}});
} else {
var event = document.createEvent('CustomEvent');
event.initCustomEvent('my-event', true, true, {some: 'data'});
}
el.dispatchEvent(event);
================================================
FILE: src/comparisons/events/trigger_custom/jquery.js
================================================
$(el).trigger('my-event', {some: 'data'});
================================================
FILE: src/comparisons/events/trigger_custom/modern.js
================================================
const event = new CustomEvent('my-event', {detail: {some: 'data'}});
el.dispatchEvent(event);
================================================
FILE: src/comparisons/events/trigger_native/ie8.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else if (eventType === 'string') {
if (document.createEvent) {
var event = document.createEvent('HTMLEvents');
event.initEvent(eventType, true, false);
el.dispatchEvent(event);
} else {
el.fireEvent('on' + eventType);
}
} else {
el.dispatchEvent(eventType);
}
}
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
trigger(el, 'focus');
================================================
FILE: src/comparisons/events/trigger_native/ie9.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
var event;
if (eventType === 'string') {
event = document.createEvent('HTMLEvents');
event.initEvent(eventType, true, false);
} else {
event = eventType;
}
el.dispatchEvent(event);
}
}
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/document.createEvent
trigger(el, 'focus');
================================================
FILE: src/comparisons/events/trigger_native/jquery.js
================================================
$(el).trigger('focus');
================================================
FILE: src/comparisons/events/trigger_native/modern.js
================================================
function trigger(el, eventType) {
if (typeof eventType === 'string' && typeof el[eventType] === 'function') {
el[eventType]();
} else {
const event =
typeof eventType === 'string'
? new Event(eventType, {bubbles: true})
: eventType;
el.dispatchEvent(event);
}
}
trigger(el, 'focus');
// For a full list of event types: https://developer.mozilla.org/en-US/docs/Web/API/Event
trigger(el, new PointerEvent('pointerover'));
================================================
FILE: src/comparisons/utils/array_each/ie8.js
================================================
function forEach(array, fn) {
for (var i = 0; i < array.length; i++) fn(array[i], i);
}
forEach(array, function (item, i) {});
================================================
FILE: src/comparisons/utils/array_each/ie9.js
================================================
array.forEach(function (item, i) {});
================================================
FILE: src/comparisons/utils/array_each/jquery.js
================================================
$.each(array, function (i, item) {});
================================================
FILE: src/comparisons/utils/array_each/modern.js
================================================
array.forEach((item, i) => {});
================================================
FILE: src/comparisons/utils/bind/ie8.js
================================================
fn.apply(context, arguments);
================================================
FILE: src/comparisons/utils/bind/ie9.js
================================================
fn.bind(context);
================================================
FILE: src/comparisons/utils/bind/jquery.js
================================================
$.proxy(fn, context);
================================================
FILE: src/comparisons/utils/deep_extend/ie8.js
================================================
function deepExtend(out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
var obj = arguments[i];
if (!obj) continue;
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
var rawType = Object.prototype.toString.call(obj[key]);
if (rawType === '[object Object]') {
out[key] = deepExtend(out[key], obj[key]);
} else if (rawType === '[object Array]') {
out[key] = deepExtend(new Array(obj[key].length), obj[key]);
} else {
out[key] = obj[key];
}
}
}
}
return out;
}
deepExtend({}, objA, objB);
================================================
FILE: src/comparisons/utils/deep_extend/jquery.js
================================================
$.extend(true, {}, objA, objB);
================================================
FILE: src/comparisons/utils/deep_extend/modern.js
================================================
function deepExtend(out, ...arguments_) {
if (!out) {
return {};
}
for (const obj of arguments_) {
if (!obj) {
continue;
}
for (const [key, value] of Object.entries(obj)) {
switch (Object.prototype.toString.call(value)) {
case '[object Object]':
out[key] = out[key] || {};
out[key] = deepExtend(out[key], value);
break;
case '[object Array]':
out[key] = deepExtend(new Array(value.length), value);
break;
default:
out[key] = value;
}
}
}
return out;
}
deepExtend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/alternatives.json
================================================
{
"Lodash": "https://lodash.com/docs#assign",
"Underscore": "https://underscorejs.org/#extend",
"ECMA6": "https://www.2ality.com/2014/01/object-assign.html"
}
================================================
FILE: src/comparisons/utils/extend/ie8.js
================================================
var extend = function (out) {
out = out || {};
for (var i = 1; i < arguments.length; i++) {
if (!arguments[i]) continue;
for (var key in arguments[i]) {
if (arguments[i].hasOwnProperty(key)) out[key] = arguments[i][key];
}
}
return out;
};
extend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/jquery.js
================================================
$.extend({}, objA, objB);
================================================
FILE: src/comparisons/utils/extend/modern.js
================================================
const result = {...objA, ...objB};
================================================
FILE: src/comparisons/utils/index_of/ie8.js
================================================
function indexOf(array, item) {
for (var i = 0; i < array.length; i++) {
if (array[i] === item) return i;
}
return -1;
}
indexOf(array, item);
================================================
FILE: src/comparisons/utils/index_of/ie9.js
================================================
array.indexOf(item);
================================================
FILE: src/comparisons/utils/index_of/jquery.js
================================================
$.inArray(item, array);
================================================
FILE: src/comparisons/utils/is_array/ie8.js
================================================
isArray =
Array.isArray ||
function (arr) {
return Object.prototype.toString.call(arr) == '[object Array]';
};
isArray(arr);
================================================
FILE: src/comparisons/utils/is_array/ie9.js
================================================
Array.isArray(arr);
================================================
FILE: src/comparisons/utils/is_array/jquery.js
================================================
$.isArray(arr);
================================================
FILE: src/comparisons/utils/is_numeric/ie8.js
================================================
function isNumeric(num) {
if (typeof num === 'number') return num - num === 0;
if (typeof num === 'string' && num.trim() !== '')
return Number.isFinite ? Number.isFinite(+num) : isFinite(+num);
return false;
}
isNumeric(val);
================================================
FILE: src/comparisons/utils/is_numeric/jquery.js
================================================
$.isNumeric(val);
================================================
FILE: src/comparisons/utils/is_numeric/modern.js
================================================
function isNumeric(num) {
if (typeof num === 'number') return num - num === 0;
if (typeof num === 'string' && num.trim() !== '')
return Number.isFinite(+num);
return false;
}
isNumeric(val);
================================================
FILE: src/comparisons/utils/map/ie8.js
================================================
function map(arr, fn) {
var results = [];
for (var i = 0; i < arr.length; i++) results.push(fn(arr[i], i));
return results;
}
map(array, function (value, index) {});
================================================
FILE: src/comparisons/utils/map/ie9.js
================================================
array.map(function (value, index) {});
================================================
FILE: src/comparisons/utils/map/jquery.js
================================================
$.map(array, function (value, index) {});
================================================
FILE: src/comparisons/utils/map/modern.js
================================================
array.map((value, index) => {});
================================================
FILE: src/comparisons/utils/now/ie8.js
================================================
new Date().getTime();
================================================
FILE: src/comparisons/utils/now/ie9.js
================================================
Date.now();
================================================
FILE: src/comparisons/utils/now/jquery.js
================================================
$.now();
================================================
FILE: src/comparisons/utils/object_each/ie8.js
================================================
function objectEach(obj, callback) {
for (var key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
callback(key, obj[key]);
}
}
}
objectEach(obj, function (key, value) {});
================================================
FILE: src/comparisons/utils/object_each/jquery.js
================================================
$.each(obj, function (key, value) {});
================================================
FILE: src/comparisons/utils/object_each/modern.js
================================================
for (const [key, value] of Object.entries(obj)) {
}
================================================
FILE: src/comparisons/utils/parse_html/ie8.js
================================================
var parseHTML = function (str) {
var el = document.createElement('div');
el.innerHTML = str;
return el.childNodes;
};
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/ie9.js
================================================
var parseHTML = function (str) {
var tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = str;
return Array.prototype.slice.call(tmp.body.childNodes);
};
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/jquery.js
================================================
$.parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_html/modern.js
================================================
function parseHTML(str) {
const tmp = document.implementation.createHTMLDocument('');
tmp.body.innerHTML = str;
return [...tmp.body.childNodes];
}
parseHTML(htmlString);
================================================
FILE: src/comparisons/utils/parse_json/ie8.js
================================================
JSON.parse(string);
================================================
FILE: src/comparisons/utils/parse_json/jquery.js
================================================
$.parseJSON(string);
================================================
FILE: src/comparisons/utils/slice/ie8.js
================================================
function slice(els, start, end) {
var f = Array.prototype.slice;
try {
f.call(document.documentElement);
} catch (h) {
Array.prototype.slice = function (g, b) {
b = 'undefined' !== typeof b ? b : this.length;
if ('[object Array]' === Object.prototype.toString.call(this))
return f.call(this, g, b);
var e = [];
var a = this.length;
var c = g || 0;
c = 0 <= c ? c : Math.max(0, a + c);
var d = 'number' == typeof b ? Math.min(b, a) : a;
0 > b && (d = a + b);
d -= c;
if (0 < d)
if (((e = Array(d)), this.charAt))
for (a = 0; a < d; a++) e[a] = this.charAt(c + a);
else for (a = 0; a < d; a++) e[a] = this[c + a];
return e;
};
}
return els.slice(start, end);
}
slice(els, start, end);
================================================
FILE: src/comparisons/utils/slice/ie9.js
================================================
els.slice(begin, end);
================================================
FILE: src/comparisons/utils/slice/jquery.js
================================================
$(els).slice(begin, end);
================================================
FILE: src/comparisons/utils/to_array/ie8.js
================================================
function toArray(selector) {
var array = [];
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; i++) array.push(elements[i]);
return array;
}
================================================
FILE: src/comparisons/utils/to_array/jquery.js
================================================
$(selector).toArray();
================================================
FILE: src/comparisons/utils/to_array/modern.js
================================================
const array = [...document.querySelectorAll(selector)];
================================================
FILE: src/comparisons/utils/trim/ie8.js
================================================
string.replace(/^\s+|\s+$/g, '');
================================================
FILE: src/comparisons/utils/trim/ie9.js
================================================
string.trim();
================================================
FILE: src/comparisons/utils/trim/jquery.js
================================================
$.trim(string);
================================================
FILE: src/comparisons/utils/type/ie8.js
================================================
Object.prototype.toString
.call(obj)
.replace(/^\[object (.+)\]$/, '$1')
.toLowerCase();
================================================
FILE: src/comparisons/utils/type/jquery.js
================================================
$.type(obj);
================================================
FILE: src/components/CodeBlock.astro
================================================
---
import {Prism} from '@astrojs/prism';
export interface Props {
lang?: string;
code?: string;
}
const {lang, code} = Astro.props as Props;
---
{code && }
================================================
FILE: src/env.d.ts
================================================
///
================================================
FILE: src/lib/comparisons.ts
================================================
import path from 'node:path';
import process from 'node:process'; // Astro must be run while the current working directory is the repository root so that the comparison files can be detected.
import readFileTree from 'readfiletree';
import sortKeys from 'sort-keys';
import {engineOrder} from './newest-engine';
type FileTree = {[fileName: string]: string | FileTree};
type Engine = Array<{
language: string;
code: string;
}>;
interface Comparison {
engines: {
ie8?: Engine;
ie9?: Engine;
ie10?: Engine;
ie11?: Engine;
jquery: Engine;
modern?: Engine;
};
alternatives?: Record;
}
interface Category {
comparisons: Record;
alternatives?: Record;
}
type Comparisons = Record;
export default async function getComparisons(): Promise {
const fileTree: FileTree = await readFileTree(
path.join(process.cwd(), 'src', 'comparisons')
);
const categories = {};
for (const [categoryName, comparisons] of Object.entries(fileTree)) {
const category: Category = {
comparisons: {}
};
if (comparisons['alternatives.json']) {
category.alternatives = JSON.parse(comparisons['alternatives.json']);
delete comparisons['alternatives.json'];
}
for (const [comparisonName, engines] of Object.entries(comparisons)) {
const comparison: Comparison = {
engines: {
jquery: [
{
language: 'js',
code: engines['jquery.js']
}
]
}
};
delete engines['jquery.js'];
if (engines['alternatives.json']) {
comparison.alternatives = JSON.parse(engines['alternatives.json']);
delete engines['alternatives.json'];
}
for (const [engineFile, code] of Object.entries(engines)) {
const [engineName, extension] = engineFile.split('.');
if (!comparison.engines[engineName]) {
comparison.engines[engineName] = [];
}
comparison.engines[engineName].push({
language: extension,
code
});
}
for (const engines of Object.values(comparison.engines)) {
// Sorted in-place
engines.sort((a, b) => {
if (a.language === 'js') {
return -1;
}
if (b.language === 'js') {
return 1;
}
return a.language.localeCompare(b.language);
});
}
comparison.engines = sortKeys(comparison.engines, {
compare: (a, b) => engineOrder.indexOf(a) - engineOrder.indexOf(b)
});
category.comparisons[comparisonName] = comparison;
}
category.comparisons = sortKeys(category.comparisons);
categories[categoryName] = category;
}
return sortKeys(categories);
}
================================================
FILE: src/lib/newest-engine.ts
================================================
export const engineOrder = ['jquery', 'ie8', 'ie9', 'ie10', 'ie11', 'modern'];
export default function getNewestEngine(
engines: string[],
targetEngine?: string
): string {
engines = [...engines];
engines.sort((a, b) => engineOrder.indexOf(b) - engineOrder.indexOf(a));
engines = engines.filter((engine) => engine !== 'jquery');
if (!targetEngine) {
return engines[0];
}
return (
engines.find(
(engine) =>
engineOrder.indexOf(engine) <= engineOrder.indexOf(targetEngine)
) || engines[0]
);
}
================================================
FILE: src/pages/index.astro
================================================
---
import classNames from '@sindresorhus/class-names';
import CodeBlock from '../components/CodeBlock.astro';
import getNewestEngine from '../lib/newest-engine';
import getComparisons from '../lib/comparisons';
import isEven from '../utils/is-even';
import titleCase from '../utils/title-case';
const comparisons = await getComparisons();
---
You Might Not Need jQuery
You might not need jQuery
jQuery and its cousins are great, and by all means use them if it
makes it easier to develop your application.
If you're developing a library on the other hand, please take a moment
to consider if you actually need jQuery as a dependency. Maybe you
can include a few lines of utility code, and forgo the requirement.
If you're only targeting more modern browsers, you might not need anything
more than what the browser ships with.
At the very least, make sure you know what jQuery is doing for you, and what it's not. Some developers believe that jQuery is
protecting us from a great demon of browser incompatibility when,
in truth, post-IE8, browsers are pretty easy to deal with on their
own; and after the Internet Explorer era, the browsers do even
more.