DOM Query and Manipulation micro Library

[aagamezl]

🚀 Introducing nq.js (NitroQuery) – A Lightweight, High-Performance JavaScript Library for DOM Manipulation 🌐

We all know and love jQuery for its simplicity and convenience when it comes to DOM manipulation, but as our projects grow and modern JavaScript evolves, the need for something lighter, faster, and more optimized becomes clear. That’s why I’m excited to introduce nq.js – a minimalist DOM manipulation library built with performance in mind, providing the essential features of jQuery without the bloat.

🌟 What is nq.js?

nq.js is a compact, efficient, and modern DOM utility library designed to handle common DOM operations with ease. It’s your go-to tool for manipulating elements, adding event listeners, managing attributes, and even creating or removing HTML elements – all while keeping performance at the forefront.

Built to strike the perfect balance between functionality and speed, nq.js focuses on chainable methods and lightweight operations, offering a seamless development experience for both small and large projects.

Key Features

1. Minimalist & Fast: Designed with performance in mind, nq.js avoids unnecessary complexity and ensures fast DOM manipulation, avoiding heavy loops like .forEach().

2. Chaining Functionality: Just like jQuery, you can chain methods together for cleaner, more readable code:

nq('.my-element').addClass('active').html('Updated content').on('click', handler)

3. Flexible Element Creation: You can easily create and insert new elements with a string-based HTML approach:

nq('.container').append('<div class="new-item">Hello World!</div>')
nq('.container').append('div', { class: 'new-item' }).html('Hello World!')

4. Event Listeners Simplified: Adding, removing, or handling one-time event listeners is a breeze with .on(), .off(), and .one() methods:

nq('button').on('click', () => alert('Clicked!'))

5. Lightweight DOM Manipulation: Functions like .append(), .prepend(), .before(), and .after() allow you to insert elements or HTML exactly where you need them:

nq('.inner').before('<p class="notice">Important Notice</p>')

6. Class and Attribute Management: Toggling, adding, or removing classes and attributes is super simple:

nq('p').addClass('highlight').attr('data-id', '123')

✅ Pros

• Lightning Fast: Optimized for performance by using efficient loops and operations (AKA microoptimizations.).

• Small & Efficient: At just a fraction of the size of larger libraries like jQuery, nq.js delivers the functionality you need without the extra weight.

• Modern JavaScript: Built using ES6+ syntax, nq.js is ready for modern browsers and takes full advantage of JavaScript's latest capabilities.

• Familiar API: If you’ve used jQuery before, you’ll feel right at home with nq.js. Its API is intuitive, chainable, and simple to learn.

• Flexibility in Element Creation: Whether you prefer using string-based HTML insertion or tag-based element creation with attributes, nq.js supports both approaches.

• Chaining Support: Just like in jQuery, you can chain methods for a more fluent and readable codebase.

❌ Cons

• Not a Full jQuery Replacement: nq.js focuses on DOM manipulation and event handling but does not include jQuery’s AJAX features, animations, or extensive plugin ecosystem. It’s meant to be a lightweight DOM utility, not a feature-packed framework.

• Modern Browser Focus: nq.js is optimized for modern JavaScript environments and may not fully support older browsers without polyfills or additional modifications.

• Limited Features: While nq.js covers the most common use cases, it doesn’t include all the niche utilities jQuery has (but do you really need them all?).

[getify]

I can see this being useful!

[aagamezl]

I will make the PR today or tomorrow, I have the library ready.