from: replace jQuery
addClass(classNames = '') {
this.each((el) => {
classNames.split(' ').forEach((className) => {
el.classList.add(className);
});
});
return this;
}// Usage
$utils('ul li').addClass('myClass yourClass');append(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('beforeend', html);
} else {
el.appendChild(html);
}
});
return this;
}attr(name, value) {
if (value === undefined) {
if (!this.element) {
return '';
}
return this.element.getAttribute(name);
}
this.each((el) => {
el.setAttribute(name, value);
});
return this;
}children() {
return new Utils(this.element.children);
}closest(selector) {
if (!this.element) {
return this;
}
const matchesSelector =
this.element.matches ||
this.element.webkitMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.msMatchesSelector;
while (this.element) {
if (matchesSelector.call(this.element, selector)) {
return new Utils(this.element);
}
this.element = this.element.parentElement;
}
return this;
}css(css, value) {
if (value !== undefined) {
this.each((el) => {
Utils.setCss(el, css, value);
});
return this;
}
if (typeof css === 'object') {
for (const property in css) {
if (Object.prototype.hasOwnProperty.call(css, property)) {
this.each((el) => {
Utils.setCss(el, property, css[property]);
});
}
}
return this;
}
const cssProp = Utils.camelCase(css);
const property = Utils.styleSupport(cssProp);
return getComputedStyle(this.element)[property];
}data(name, value) {
return this.attr(`data-${name}`, value);
}each(func) {
if (!this.elements) {
return this;
}
if (this.elements.length !== undefined) {
[].slice.call(this.elements).forEach((el, index) => {
func.call(el, el, index);
});
} else {
func.call(this.element, this.element, 0);
}
return this;
}empty() {
this.each((el) => {
el.innerHTML = '';
});
return this;
}eq(index) {
return new Utils(this.elements[index]);
}find(selector) {
return new Utils(Utils.getSelector(selector, this.element));
}first() {
if (this.elements && this.elements.length !== undefined) {
return new Utils(this.elements[0]);
}
return new Utils(this.elements);
}get() {
return this.elements;
}hasClass(className) {
if (!this.element) {
return false;
}
return this.element.classList.contains(className);
}height() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.height.replace('px', ''));
}html(html) {
if (html === undefined) {
if (!this.element) {
return '';
}
return this.element.innerHTML;
}
this.each((el) => {
el.innerHTML = html;
});
return this;
}index() {
if (!this.element) return -1;
let i = 0;
do {
i++;
} while ((this.element = this.element.previousElementSibling));
return i;
}is(el) {
if (typeof el === 'string') {
return (
this.element.matches ||
this.element.matchesSelector ||
this.element.msMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.webkitMatchesSelector ||
this.element.oMatchesSelector
).call(this.element, el);
}
return this.element === (el.element || el);
}next() {
if (!this.element) {
return this;
}
return new Utils(this.element.nextElementSibling);
}nextAll(filter) {
if (!this.element) {
return this;
}
const sibs = [];
let nextElem = this.element.parentNode.firstChild;
do {
if (nextElem.nodeType === 3) continue; // ignore text nodes
if (nextElem === this.element) continue; // ignore this.element of target
if (nextElem === this.element.nextElementSibling) {
if (!filter || filter(this.element)) {
sibs.push(nextElem);
this.element = nextElem;
}
}
} while ((nextElem = nextElem.nextSibling));
return new Utils(sibs);
}off(event) {
if (!this.elements) {
return this;
}
Object.keys(Utils.eventListeners).forEach((eventName) => {
if (Utils.isEventMatched(event, eventName)) {
Utils.eventListeners[eventName].forEach((listener) => {
this.each((el) => {
el.removeEventListener(
eventName.split('.')[0],
listener
);
});
});
}
});
return this;
}offset() {
if (!this.element) {
return {
left: 0,
top: 0,
};
}
const box = this.element.getBoundingClientRect();
return {
top:
box.top +
window.pageYOffset -
document.documentElement.clientTop,
left:
box.left +
window.pageXOffset -
document.documentElement.clientLeft,
};
}offsetParent() {
if (!this.element) {
return this;
}
return new Utils(this.element.offsetParent);
}on(events, listener) {
if (!this.elements) {
return this;
}
events.split(' ').forEach((event) => {
if (!Array.isArray(Utils.eventListeners[event])) {
Utils.eventListeners[event] = [];
}
Utils.eventListeners[event].push(listener);
this.each((el) => {
el.addEventListener(event.split('.')[0], listener);
});
});
return this;
}one(event, listener) {
this.each((el) => {
new Utils(el).on(event, () => {
new Utils(el).off(event);
listener(event);
});
});
return this;
}outerHeight(margin) {
if (!this.element) {
return 0;
}
if (margin !== undefined) {
let height = this.element.offsetHeight;
const style = getComputedStyle(this.element);
height +=
parseInt(style.marginTop, 10) +
parseInt(style.marginBottom, 10);
return height;
}
return this.element.offsetHeight;
}outerWidth(margin) {
if (!this.element) {
return 0;
}
if (margin !== undefined) {
let width = this.element.offsetWidth;
const style = window.getComputedStyle(this.element);
width +=
parseInt(style.marginLeft, 10) +
parseInt(style.marginRight, 10);
return width;
}
return this.element.offsetWidth;
}parent() {
return new Utils(this.element.parentElement);
}parentsUntil(selector, filter) {
if (!this.element) {
return this;
}
const result = [];
const matchesSelector =
this.element.matches ||
this.element.webkitMatchesSelector ||
this.element.mozMatchesSelector ||
this.element.msMatchesSelector;
// match start from parent
let el = this.element.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 new Utils(result);
}position() {
return {
left: this.element.offsetLeft,
top: this.element.offsetTop,
};
}prepend(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('afterbegin', html);
} else {
el.insertBefore(html, el.firstChild);
}
});
return this;
}prev() {
if (!this.element) {
return this;
}
return new Utils(this.element.previousElementSibling);
}prevAll(filter) {
if (!this.element) {
return this;
}
const sibs = [];
while ((this.element = this.element.previousSibling)) {
if (this.element.nodeType === 3) {
continue; // ignore text nodes
}
if (!filter || filter(this.element)) sibs.push(this.element);
}
return new Utils(sibs);
}remove() {
this.each((el) => {
el.parentNode.removeChild(el);
});
return this;
}removeAttr(attributes) {
const attrs = attributes.split(' ');
this.each((el) => {
attrs.forEach((attr) => el.removeAttribute(attr));
});
return this;
}removeClass(classNames) {
this.each((el) => {
// IE doesn't support multiple arguments
classNames.split(' ').forEach((className) => {
el.classList.remove(className);
});
});
return this;
}siblings() {
if (!this.element) {
return this;
}
const elements = Array.prototype.filter.call(
this.element.parentNode.children,
(child) => child !== this.element
);
return new Utils(elements);
}text(text) {
if (text === undefined) {
if (!this.element) {
return '';
}
return this.element.textContent;
}
this.each((el) => {
el.textContent = text;
});
return this;
}toggleClass(className) {
if (!this.element) {
return this;
}
this.element.classList.toggle(className);
}trigger(event, detail) {
if (!this.element) {
return this;
}
const eventName = event.split('.')[0];
const isNativeEvent =
typeof document.body[`on${eventName}`] !== 'undefined';
if (isNativeEvent) {
this.each((el) => {
el.dispatchEvent(new Event(eventName));
});
return this;
}
const customEvent = new CustomEvent(eventName, {
detail: detail || null,
});
this.each((el) => {
el.dispatchEvent(customEvent);
});
return this;
}unwrap() {
this.each((el) => {
const elParentNode = el.parentNode;
if (elParentNode !== document.body) {
elParentNode.parentNode.insertBefore(el, elParentNode);
elParentNode.parentNode.removeChild(elParentNode);
}
});
return this;
}val(value) {
if (!this.element) {
return '';
}
if (value === undefined) {
return this.element.value;
}
this.element.value = value;
}width() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.width.replace('px', ''));
}wrap(className) {
this.each((el) => {
const wrapper = document.createElement('div');
wrapper.className = className;
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
});
return this;
}
A well-organized alphabetical list of jQuery alternative methods is an excellent resource for developers looking to modernize their code. By comparing traditional jQuery functions with native JavaScript equivalents, it simplifies the transition to cleaner, faster, and dependency-free development. The alphabetical format also makes it easy to find specific methods quickly, making this guide useful for both beginners learning JavaScript and experienced developers updating legacy projects. Movies7to