microQuery.js

What is it?

microQuery.js is a tiny (~1KB gzipped) JavaScript utility that brings back the simplicity and convenience of jQuery’s $() syntax — for faster coding, cleaner code, and fewer keystrokes.

ℹ️ Note: code written for microQuery.js will run with jQuery.js. Not vice versa.

It covers just the essentials: DOM selection, events, class manipulation, content updates, and $.ajax() — all chainable, all modern, with none of jQuery’s overhead or legacy features.

microQuery doesn’t try to replicate jQuery — it simply offers a minimal set of helpers for the 95% of everyday DOM tasks, and leaves everything else to plain JavaScript.

Why use it?

• Small footprint
• Familiar API
• No dependencies
• Ideal for PHP/JS projects, static sites, or custom CMSes
• Demo
• microQuery.js Github

📦 Features

• DOM ready shorthand ($(fn))
• Core traversal and selection (.find(), .children(),.siblings(),.add(),.index()`)
• Class manipulation (.addClass(), .removeClass(), .toggleClass())
• Event binding (.on())
• Form value handling (.val())
• Text and HTML helpers (.text(), .html())
• Attributes and properties (.attr(), .prop(), .data())
• Inline styles (.css())
• Basic visibility (.show(), .hide())
• DOM insertion (.append(), .prepend())
• AJAX ($.ajax())

🚫 Not Supported (Intentionally)

microQuery keeps it minimal on purpose — if you need these, use jQuery or plain JS.

• .click(), .focus(), .submit(), etc. (use .on("event", fn) instead)
• .animate(), .fadeIn(), .slideUp() (use CSS transitions)
• .closest(), .parents(), .next(), .prev() and other complex traversal
• .remove(), .empty() (use el.remove() or el.innerHTML = "")
• Event namespaces, .trigger(), .queue(), and plugins
• Full jQuery compatibility — not the goal!

📦 When to Use microQuery

🔧 Usage

Include the script:

<script src="microQuery.min.js"></script>

🧪 Examples

DOM Ready

$(function () {
  console.log('DOM is ready');
});

Select Elements

$('.btn');         // by class
$('#output');      // by ID

Core traversal and selection

$('#container').find('.item').addClass('highlight');
$('#parent').children('.child').addClass('x'); 
$('.a').add($('#b')).addClass('highlight');

Event Listener

$('.btn').on('click', function () {
  alert('Clicked!');
});

Class Methods

$('.btn').addClass('active');
$('.btn').removeClass('active');
$('.btn').toggleClass('active');

Text & HTML

$('#output').text('Hello');
$('#output').html('<strong>Hi</strong>');

Attributes & Props

$('#link').attr('href', 'https://itnb.com');
$('#check').prop('checked', true);

$('#el').data('key', 'value');         
const val = $('#el').data('key');  

CSS

$('.btn').css('color', 'red');

Form Values

$('#name').val('Jane');
let name = $('#name').val();

AJAX

$.ajax({
  url: '/api/data',
  success: function (data) {
    console.log(data);
  }
});

Chaining

$('.btn')
  .addClass('primary')
  .text('Save')
  .on('click', saveData);

Iterate Over Elements

$('.item').each(function (el, i) {
  console.log(i, el.textContent);
});

Toggle Visibility (via CSS)

$('.modal').css('display', 'none');
$('.btn').on('click', () => {
  $('.modal').css('display', 'block');
});

Combine Selectors

$('.btn, .link').addClass('interactive');

Example Usage

// Example Usage
$(function () {
  $('.btn').on('click', function () {
    $('.btn').toggleClass('highlight');

    $.ajax({
      method: 'POST',
      url: '/api/data',
      data: { id: 123 },
      success: data => {
        $('#output').text(data.message);
      }
    });
  });
});

🔒 License

MIT License — (c) 2024–2025 itnb.com
Not affiliated with the jQuery Foundation.