Guide · Open source
How to use You-Dont-Need-jQuery: native JavaScript replacements
Updated · written with AI from the project's own documentation and checked against our catalogue data
You-Dont-Need-jQuery is an open-source reference by camsong that lists common jQuery tasks next to their built-in browser JavaScript equivalents. It is aimed at front-end developers who already know jQuery, students learning the DOM, and teams deciding whether jQuery is still worth keeping. After working through it, you will be able to read a jQuery call and find its native counterpart, while knowing where the two behave differently.
You-Dont-Need-jQuerycamsong/You-Dont-Need-jQuery · ★ 20.1k · MIT Install options & downloads Quick start
- 1Clone the repository. Run git clone https://github.com/camsong/You-Dont-Need-jQuery to get a local copy of the README and examples.
- 2Open the README. Read the table of contents and jump to the section that matches the jQuery calls in your code, such as Query Selector or Events.
- 3Find your jQuery call. Locate the // jQuery line that matches what your code does today.
- 4Copy the native equivalent. Use the matching // Native line, checking any NOTE comments first.
- 5Test in your target browsers. Run the replacement in every browser you support, because the README says the alternatives are not completely equivalent in all cases.
What the project covers and who it is for
The README describes the project as a summary of most of the alternatives in native JavaScript to jQuery methods. Its sections cover query selectors, CSS and style, DOM manipulation, Ajax, events, utilities, promises and animation, plus a list of alternative projects and browser support notes.
It is a reference to read rather than a package to install. The README's only listed install step is cloning the repository with git clone https://github.com/camsong/You-Dont-Need-jQuery.
- Best for front-end developers who want native replacements for jQuery methods.
- Useful for maintaining sites that only need to support modern browsers.
- Helpful for students learning what the DOM and browser APIs can do without a library.
git clone https://github.com/camsong/You-Dont-Need-jQueryHow to read each example
Each entry is a short block with a jQuery line labelled // jQuery and a native line labelled // Native. Find the jQuery call you use today, then copy the native line that matches your task.
Some entries show more than one native option, marked with // or. Pick the one that fits your code. Where the README adds a NOTE comment, read it before copying the snippet.
// jQuery
$el.css('color');
// Native
// NOTE: returns the resolved value, e.g. 'rgb(255, 0, 17)' rather than '#f01'
getComputedStyle(el).color;Replace jQuery selectors with querySelector
For class, id and attribute selectors, the README uses document.querySelectorAll and document.querySelector. querySelector returns the first match, while querySelectorAll returns a static NodeList of all matches that supports forEach.
When nothing matches, jQuery returns an empty jQuery object and querySelectorAll returns an empty NodeList, but querySelector returns null. Check for null before using the result. The README also notes that getElementById, getElementsByClassName and getElementsByTagName are slightly faster, but they return live collections, so it recommends querySelector* unless you have measured a bottleneck.
- Query within an element: el.querySelectorAll('li') replaces $el.find('li').
- Find the nearest ancestor match: el.closest(selector) replaces $el.closest(selector).
- Read a form value: document.querySelector('#my-input').value replaces $('#my-input').val().
const first = document.querySelector('#id');
const all = Array.from(document.querySelectorAll('.class'));Change styles and classes
Setting a style uses el.style, and multiple properties can be set with Object.assign. Note that CSS property names such as border-color become camelCase keys such as borderColor in the JavaScript object.
Class handling uses el.classList with add, remove, contains and toggle, which map directly to jQuery's addClass, removeClass, hasClass and toggleClass.
el.style.color = '#f01';
Object.assign(el.style, { color: '#f01', borderColor: '#f02' });
el.classList.add(className);
el.classList.toggle(className);Know where the alternatives differ
The README states two cautions. First, jQuery remains a great library with many valid use cases, so you do not have to migrate. Second, the alternatives are not completely equivalent in all scenarios, so you should test each replacement before relying on it.
The snippets target current evergreen browsers (Chrome, Edge, Firefox and Safari). Internet Explorer fallbacks were removed. If you still need IE support, the README links to the last IE-compatible version at commit c4e00b3.
- Test every replacement in the browsers you support.
- Do not assume getComputedStyle returns the same string format as jQuery's css getter.
- Use the IE-compatible version if Internet Explorer support is required.
What people use it for
- Replacing $el.addClass and $el.toggleClass calls with classList methods in a site that only targets modern browsers.
- Swapping $('selector') queries for querySelectorAll when refactoring a small page.
- Studying how siblings, parents and closest elements are traversed with plain DOM properties.
- Deciding whether a jQuery dependency is still worth keeping in an existing project.
Frequently asked questions
Is You-Dont-Need-jQuery a library I can install?
No. The README presents it as a collection of examples, and its only listed setup step is to clone the repository with git clone. You then read the examples and copy the native JavaScript you need into your own code.
Is You-Dont-Need-jQuery free to use?
The project is licensed under the MIT licence, as listed in the project details. You can check the licence file in the repository for the full terms.
What browsers does it support?
The snippets target current evergreen browsers: Chrome, Edge, Firefox and Safari. Internet Explorer fallbacks have been removed, so IE support requires the older IE-compatible version the README links to.
Can I use these snippets as a drop-in replacement for jQuery?
Not safely without testing. The README warns that the alternatives are not completely equivalent in all scenarios and recommends testing each one before use.
What are alternatives to You-Dont-Need-jQuery?
The project lists You-Might-Not-Need-Jquery, Cash and Zepto as comparable projects. Cash and Zepto are jQuery-like libraries, while the other is a similar reference of alternatives.
Should I remove jQuery from my project?
The README says jQuery is still a great library with many valid use cases and that you do not have to migrate away if you do not want to. The project can help you judge whether a jQuery dependency is still needed.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
This guide suits front-end developers who know jQuery and want native replacements, especially on sites that only need modern browsers. It is a poor fit for projects that must support Internet Explorer, or for teams built on React, Angular or Vue who need framework-level solutions, and anyone expecting identical behaviour should test each replacement first.
Install options & downloads