NanoJQ

A tiny, lightweight JavaScript framework inspired by jQuery

            
  $("#title").css("fontStyle", "italic");
            
          

Features

🪶

Lightweight

<1 KB gzipped vs. ~ 30 KB for jQuery

🔥

Blazing fast

Enhanced performance through focused featureset.

🎯

Focused functionality

Only the bare utilities to make life easier

Installation

Easy as cake!

<script src="https://github.com/MoPaMo/NanoJQ/raw/main/nanojq.min.js"></script>

API Reference

Selector

Use $(selector) to select elements. The selector can be a CSS selector string, an array of elements, or a single element.

Methods

.el(index)

Returns the element at the specified index, or the entire array of elements if no index is provided.

.remove()

Removes all selected elements from the DOM.

.hide()

Hides all selected elements.

.show()

Shows all selected elements.

.toggle()

Toggles the visibility of all selected elements.

.on(event, callback)

Adds an event listener to all selected elements.

.attr(name, value)

Gets or sets the value of an attribute for the selected elements.

.css(prop, value)

Gets or sets CSS properties for the selected elements.

.val(value)

Gets or sets the value of form elements.

.submit()

Submits the first form element in the selection.

.text(content)

Gets or sets the text content of the selected elements.

.html(content)

Gets or sets the HTML content of the selected elements.

Usage Example


// Select all paragraphs and add a click event
$('p').on('click', function() {
    $(this).css('color', 'red');
});
// Hide all elements with class 'hidden'
$('.hidden').hide();
// Get the value of an input
var inputValue = $('input#username').val();
// Set the HTML content of a div
$('#content').html('

New content

'); // Toggle visibility of elements $('.toggle-me').toggle();