A small, modular, fast alternative to jQuery.
nQuery is currently in Alpha. It is therefore not recommended that you use nQuery in production yet.
At less than 10 KB minified, it's way smaller than jQuery 3.4.1's 87 KB size. It makes nQuery viable even for simple webpages.
nQuery is fast, and was designed from the beginning to offer simple, jQuery-compatible calls, but cutting out overhead and getting you closer to the raw attributes, functions, and events the browser already provides for you.
test/test.html
provides a few simple performance tests which you can run and verify for yourself.
We ran these tests using nQuery 0.2.0 in Chrome 79
Add/Remove Class (Queries and (Chained) Function Calls):
- jQuery 3.4.1 - 13.7±0.5 ns avg
- nQuery 0.2.0 - 6.2±0.1 ns avg
- Raw JS (querySelector/classList) - 5.5±0.1 ns avg
Having nearly double the overall performance is great in larger applications.
Add/Remove Class (Function Calls):
- jQuery 3.4.1 - 11.7±0.3 ns avg
- nQuery 0.2.0 - 4.8±0.1 ns avg
- Raw JS (querySelector/classList) - 4.9±0.05 ns avg
What's really impressive is that nQuery was able to beat plain javascript by 0.1 ns, something that came up even over multiple test runs.
Query Calls:
- jQuery 3.4.1 - 1.8±0.1 ns avg
- nQuery 0.2.0 - 1.3±0.1 ns avg
- Raw JS - 0.6±0.05 ns avg
Example code:
$(document).ready(() => {
console.log("Hello world! The document is ready.");
$("button").click(() => {
console.log("You clicked the button!");
$("button").first().addClass("clicked").removeClass("notclicked");
});
});
nQuery can act as a drop-in replacement for jQuery in simple applications.
nQuery is built with modern browser features in mind.
nQuery requires a JavaScript engine that supports ECMAScript 2015 features. (Arrow functions, classes).
nQuery is released under the permissive MIT license.
If there's a compatibility issue with one of these browsers, please report the issue so we can fix it.
- Chrome 60+
- Microsoft Edge 15+
- Firefox 55+
- Opera 47+
- Safari 10+
- iOS 10+
Effective 2020-09-12 (version 0.4.0), Internet Explorer is not supported in any way.
nQuery is built using Node.js. A recent Current or LTS version should work fine.
nQuery does not have runtime dependencies, only dev dependencies.
Build using npm run build
or npm start
(generates nquery.js
and nquery.min.js
file)
We have a dedicated test sandbox which also contains the benchmarks at test/test.html
.
Note: This is set up by default to use the uncompressed, development version of nQuery.
If you only need certain functions, any non-core function can be removed, and you can add your own using the primary function tree or with nQuery.fn.extend
(work in progress, not fully functional).
src/modules.js
is where the module index is stored. You can make your modifications here.
import append from "./element/append.mjs";
m.push(append);
Each entry looks something like this.
m
is the module list for Element objectsm_window
is the module list for Window objectsm_document
is the module list for Document objects
If a function works in more than one place, for example, the scroll event (works on elements or window), you can push it to multiple arrays.
let scroll = (...args) => eventHandler("scroll", ...args);
m.push(scroll);
m_window.push(scroll); // you can push to both!
window.nQuery
nQuery accessor. Always set.
window.$
nQuery accessor shorthand. Set by default.
window.jQuery
nQuery accessor. Optional; useful if you have code that accessed jQuery using window.jQuery
and you're switching to nQuery.
window.nQueryObject
The root nQuery object so your code can compare whether something is an instanceof nQueryObject
. You should not access this alone, as it's a superclass without methods.
window.nQueryDocument
window.nQueryElement
window.nQueryWindow
Extended classes of the nQueryObject
, but these are the objects that correspond with what functions it support. $("p")
is an instance of nQueryObject
and nQueryElement
but NOT nQueryWindow
, as an example.
Creating new objects with these alone is possible, but not recommended. window.$
/window.nQuery
will always create the correct object given the input.