Along with the web version, we offer a CLI (Command Line Interface) tool. This allows you to convert jQuery to JavaScript directly from your terminal, making it even easier to integrate the conversion process into your workflow and handle large-scale projects efficiently.
To get started, install the replace-jquery using npm:
npm install -g replace-jquery
replace-jquery src/sample.js out.js
replace-jquery "src/*.js" out.js
replace-jquery --build-all out.js
replace-jquery --methods "addClass, removeClass, attr" -o utils.js
Please note that, the utility functions generated by replace-jquery are not completely equivalent to jQuery methods in all scenarios. Please consider this as a starting point and validate before you adopt it.
The jQuery to JavaScript converter is designed to replicate the functionality of jQuery through generated vanilla JavaScript. Once you convert your code, the resulting output acts as your own utility library, mirroring jQuery’s behavior. The generated JavaScript methods are chainable and applicable across all matching elements, just like jQuery. After conversion, simply replace the jQuery dependency in your project with the newly created output. Please note that maintaining the generated code, should modifications be necessary, will be your responsibility.
Note: The below code is just to demonstrate the basics concepts and not covered all scenarios.
Suppose, you have the below jQuey code in your codebase
$(".vue").siblings().addClass("highlight");
<ul>
<li class="jquery">jQuery</li>
<li class="react">React</li>
<li class="vue">Vue.js</li>
<li class="angular">Angular</li>
<li class="lit">Lit</li>
</ul>
.highlight {
background-color: red;
color: #fff;
}
The generated output is shown below. It supports chainable methods similar to jQuery. You can rename the $utils alias to $ to more closely resemble jQuery syntax and replace the jQuery library with the code provided
export class Utils {
constructor(selector) {
this.elements = Utils.getSelector(selector);
this.element = this.get(0);
return this;
}
static getSelector(selector, context = document) {
if (typeof selector !== 'string') {
return selector;
}
if (isId(selector)) {
return document.getElementById(selector.substring(1))
}
return context.querySelectorAll(selector);
}
each(func) {
if (!this.elements) {
return this;
}
if (this.elements.length !== undefined) {
[].forEach.call(this.elements, func);
} else {
func(this.element, 0);
}
return this;
}
siblings() {
if (!this.element) {
return this;
}
const elements = [].filter.call(
this.element.parentNode.children,
(child) => child !== this.element
);
return new Utils(elements);
}
get(index) {
if (index !== undefined) {
return this.elements[index];
}
return this.elements;
}
addClass(classNames = '') {
this.each((el) => {
// IE doesn't support multiple arguments
classNames.split(' ').forEach((className) => {
el.classList.add(className);
});
});
return this;
}
}
export default function $utils(selector) {
return new Utils(selector);
}
$utils(".vue").siblings().addClass("highlight");
Below is a list of alternative methods in pure JavaScript that replace common jQuery functions. We have intentionally excluded functions like Ajax, recommending the use of more efficient libraries like axios or the native fetch API for such functionalities.
Adds the specified class(es) to each element in the set of matched elements.
addClass(classNames = '') {
this.each((el) => {
classNames.split(' ').forEach((className) => {
el.classList.add(className);
});
});
return this;
}
// Usage
$utils('ul li').addClass('myClass yourClass');
Insert content, specified by the parameter, to the end of each element in the set of matched elements.
append(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('beforeend', html);
} else {
el.appendChild(html);
}
});
return this;
}
Get the value of an attribute for the first element in the set of matched elements or set one or more attributes for every matched element.
attr(name, value) {
if (value === undefined) {
if (!this.element) {
return '';
}
return this.element.getAttribute(name);
}
this.each((el) => {
el.setAttribute(name, value);
});
return this;
}
Get the children of each element in the set of matched elements, optionally filtered by a selector.
children() {
return new Utils(this.element.children);
}
For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.
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;
}
Get the computed style properties for the first element in the set of matched elements.
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];
}
Store arbitrary data associated with the matched elements.
data(name, value) {
return this.attr(`data-${name}`, value);
}
Iterate over a jQuery object, executing a function for each matched element.
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;
}
Remove all child nodes of the set of matched elements from the DOM.
empty() {
this.each((el) => {
el.innerHTML = '';
});
return this;
}
Reduce the set of matched elements to the one at the specified index.
eq(index) {
return new Utils(this.elements[index]);
}
Get the descendants of each element in the current set of matched elements, filtered by a selector, jQuery object, or element.
find(selector) {
return new Utils(Utils.getSelector(selector, this.element));
}
Reduce the set of matched elements to the first in the set.
first() {
if (this.elements && this.elements.length !== undefined) {
return new Utils(this.elements[0]);
}
return new Utils(this.elements);
}
Load data from the server using a HTTP GET request.
get() {
return this.elements;
}
Determine whether any of the matched elements are assigned the given class.
hasClass(className) {
if (!this.element) {
return false;
}
return this.element.classList.contains(className);
}
Get the current computed height for the first element in the set of matched elements.
height() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.height.replace('px', ''));
}
Get the HTML contents of the first element in the set of matched elements.
html(html) {
if (html === undefined) {
if (!this.element) {
return '';
}
return this.element.innerHTML;
}
this.each((el) => {
el.innerHTML = html;
});
return this;
}
Search for a given element from among the matched elements.
index() {
if (!this.element) return -1;
let i = 0;
do {
i++;
} while ((this.element = this.element.previousElementSibling));
return i;
}
Check the current matched set of elements against a selector, element, or jQuery object and return true if at least one of these elements matches the given arguments.
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);
}
Get the immediately following sibling of each element in the set of matched elements. If a selector is provided, it retrieves the next sibling only if it matches that selector.
next() {
if (!this.element) {
return this;
}
return new Utils(this.element.nextElementSibling);
}
Get all following siblings of each element in the set of matched elements, optionally filtered by a selector.
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);
}
Remove an event handler.
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;
}
Get the current coordinates of the first element in the set of matched elements, relative to the document.
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,
};
}
Get the closest ancestor element that is positioned.
offsetParent() {
if (!this.element) {
return this;
}
return new Utils(this.element.offsetParent);
}
Attach an event handler function for one or more events to the selected elements.
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;
}
Attach a handler to an event for the elements. The handler is executed at most once per element per event type.
one(event, listener) {
this.each((el) => {
new Utils(el).on(event, () => {
new Utils(el).off(event);
listener(event);
});
});
return this;
}
Get the current computed outer height (including padding, border, and optionally margin) for the first element in the set of matched elements.
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;
}
Get the current computed outer width (including padding, border, and optionally margin) for the first element in the set of matched elements.
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;
}
Get the parent of each element in the current set of matched elements, optionally filtered by a selector.
parent() {
return new Utils(this.element.parentElement);
}
Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector, DOM node, or jQuery object.
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);
}
Get the current coordinates of the first element in the set of matched elements, relative to the offset parent.
position() {
return {
left: this.element.offsetLeft,
top: this.element.offsetTop,
};
}
Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.
prepend(html) {
this.each((el) => {
if (typeof html === 'string') {
el.insertAdjacentHTML('afterbegin', html);
} else {
el.insertBefore(html, el.firstChild);
}
});
return this;
}
Get the immediately preceding sibling of each element in the set of matched elements. If a selector is provided, it retrieves the previous sibling only if it matches that selector.
prev() {
if (!this.element) {
return this;
}
return new Utils(this.element.previousElementSibling);
}
Get all preceding siblings of each element in the set of matched elements, optionally filtered by a selector, in the reverse document order.
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 the set of matched elements from the DOM.
remove() {
this.each((el) => {
el.parentNode.removeChild(el);
});
return this;
}
Remove an attribute from each element in the set of matched elements.
removeAttr(attributes) {
const attrs = attributes.split(' ');
this.each((el) => {
attrs.forEach((attr) => el.removeAttribute(attr));
});
return this;
}
Remove a single class or multiple classes from each element in the set of matched elements.
removeClass(classNames) {
this.each((el) => {
// IE doesn't support multiple arguments
classNames.split(' ').forEach((className) => {
el.classList.remove(className);
});
});
return this;
}
Get the siblings of each element in the set of matched elements, optionally filtered by a selector.
siblings() {
if (!this.element) {
return this;
}
const elements = Array.prototype.filter.call(
this.element.parentNode.children,
(child) => child !== this.element
);
return new Utils(elements);
}
Get the combined text contents of each element in the set of matched elements, including their descendants.
text(text) {
if (text === undefined) {
if (!this.element) {
return '';
}
return this.element.textContent;
}
this.each((el) => {
el.textContent = text;
});
return this;
}
Add or remove one or more classes from each element in the set of matched elements, depending on either the class’s presence or the value of the state argument.
toggleClass(className) {
if (!this.element) {
return this;
}
this.element.classList.toggle(className);
}
Execute all handlers and behaviors attached to the matched elements for the given event type.
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;
}
Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.
unwrap() {
this.each((el) => {
const elParentNode = el.parentNode;
if (elParentNode !== document.body) {
elParentNode.parentNode.insertBefore(el, elParentNode);
elParentNode.parentNode.removeChild(elParentNode);
}
});
return this;
}
Get the current value of the first element in the set of matched elements.
val(value) {
if (!this.element) {
return '';
}
if (value === undefined) {
return this.element.value;
}
this.element.value = value;
}
Get the current computed width for the first element in the set of matched elements.
width() {
if (!this.element) {
return 0;
}
const style = window.getComputedStyle(this.element, null);
return parseFloat(style.width.replace('px', ''));
}
Wrap an HTML structure around each element in the set of matched elements.
wrap(className) {
this.each((el) => {
const wrapper = document.createElement('div');
wrapper.className = className;
el.parentNode.insertBefore(wrapper, el);
wrapper.appendChild(el);
});
return this;
}
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。