Documentation

Everything starts with $(). A jsKjs set is a real Array subclass, so native methods (map, spread, for...of) work alongside the chainable API.

$('.card')                    // CSS selector
$('li', '#menu')              // scoped to context
$(document.body)              // wrap a node
$('<div class="x">Hi</div>')  // create elements
$(() => console.log('DOM ready'));

$('.item').each(function (i, el) {
  console.log(i, el.id, this === el); // true
});

$('.item').get();    // [el, el, el]
$('.item').get(-1);  // last raw element

$('.item').eq(1).addClass('second');
$('.item').eq(-1).text('last');

$('li').first().addClass('head');
$('li').last().addClass('tail');

$('.active').index();  // e.g. 2

$('.card').add('.banner').addClass('highlight');

Read and write element content and form values.

$('#box').html();               // read
$('#box').html('<b>New</b>');   // write

$('#title').text('Safe & sound');

$('#email').val();          // 'a@b.c'
$('#agree').val(true);      // checks the box
$('#tags').val();           // ['js', 'css'] for multi-select

HTML attributes, DOM properties, and per-element data storage (backed by a WeakMap, so removed elements are garbage-collected automatically).

$('img').attr('src');
$('img').attr('alt', 'Logo');
$('a').attr({ href: '/', title: 'Home' });

$('input').removeAttr('disabled');

$('#opt-in').prop('checked');       // true/false
$('button').prop('disabled', true);

<div id="u" data-config='{"admin":true}'></div>

$('#u').data('config').admin;       // true (parsed)
$('#u').data('profile', { id: 7 }); // store anything
$('#u').data();                     // all data merged

$('#u').removeData('profile');

Space-separated multi-class strings are supported everywhere.

$('.card').addClass('active highlight');

$('.card').removeClass('active');
$('.card').removeClass(); // wipe class attribute

$('.menu').toggleClass('open');
$('.menu').toggleClass('open', isOpen);

if ($('#panel').hasClass('open')) close();

Styles, sizes, positions, scrolling, visibility. Numbers get px automatically (except unitless properties like opacity); CSS custom properties (--vars) are supported.

$('.card').css('color');            // computed
$('.card').css('margin-top', 20);   // → '20px'
$('.card').css({ opacity: .5, '--accent': 'red' });

$('.card').width();     // 320
$('.card').height(200); // set
$(window).width();      // viewport

const { top } = $('#hero').offset();

const p = $('.tooltip').position();

$(window).scrollTop();      // read page scroll
$('#panel').scrollTop(0);   // scroll to top

$('.modal').show();
$('.hint').toggle();        // flip
$('.hint').toggle(isAdmin); // force

All insertion methods accept HTML strings, elements, jsKjs sets, or plain text — and multiple arguments at once.

$('#list').append('<li>End</li>');
$('#list').prepend($('<li>Start</li>'));

$('.section').before('<hr>');

$('<li>New</li>').appendTo('#list');

$('img').wrap('<figure class="frame">');

$('.toast').remove();

$('#results').empty();

$('#template-row').clone().appendTo('#table');

$('.old-banner').replaceWith('<div class="new">Hi</div>');

Walk the tree. Every method returns a new chainable set; results are deduplicated.

$('#app').find('.btn').addClass('ready');

$('.item').filter('.active');
$('.item').filter((i, el) => el.dataset.price > 100);

$('.item').not('.sold-out').show();

if ($(e.target).is('button')) { … }

$(e.target).closest('.card').addClass('selected');

$('.btn').parent();
$('.btn').parents('.section');

$('#list').children('li.active');

$('.tab.active').siblings().removeClass('active');

$('.step.current').next().addClass('upcoming');

Modern event handling with delegation, namespaces, once-only handlers, and custom events with payloads.

$('.btn').on('click', e => save());
$('.btn').on('click.menu keydown.menu', handler);

// Delegation — survives DOM swaps
$('#list').on('click', '.item', function (e) {
  $(this).toggleClass('selected');
});

$('#intro').one('click', dismiss);

$('.btn').off('click');
$('.btn').off('.menu');   // whole namespace
$('.btn').off();          // everything

$('#app').on('cart:add', (e, item) => render(item));
$('#app').trigger('cart:add', { sku: 'A-1' });

$('.card').hover(
  function () { $(this).addClass('lift'); },
  function () { $(this).removeClass('lift'); });

$('#save').click(() => submit());
$('#save').click();     // programmatic click

$('#search').focus();          // focus the field
$('#search').focus(onFocus);   // bind

Powered by fetch. Every call returns a native Promise (so await just works) with jQuery-style .done/.fail/.always shims attached.

const p = $.ajax({
  url: '/api/items', method: 'POST',
  data: { title: 'Hello' }, json: true,
  headers: { 'X-Token': 'abc' }, timeout: 5000,
});
p.done(d => render(d)).fail(err => alert(err.status));
// or simply:  const d = await p;

const html = await $.get('/partials/nav.html');
$.get('/api/search', { q: 'cats' }, render);

await $.post('/api/save', { name: 'Ada' });

const users = await $.getJSON('/api/users');

$('#panel').load('/partials/news.html');
$('#panel').load('/page.html #main');

$('#signup').serialize(); // "name=Ada&plan=pro"

const { email } = $('#signup').serializeObject();

htmx-style: describe requests in HTML with kj-* attributes and never write the handler. A MutationObserver auto-binds content added later, including content swapped in by Hyper itself.

<button kj-get="/api/joke" kj-target="#out">Joke</button>

<form kj-post="/api/subscribe" kj-target="#msg">
  <input name="email" type="email">
  <button>Subscribe</button>
</form>

<button kj-get="/api/stats" kj-target="#stats">Refresh</button>

<button kj-delete="/api/items/7" kj-target="#row-7"
        kj-swap="outerHTML">Delete</button>

<input name="q" kj-get="/api/search"
       kj-trigger="keyup delay:300ms" kj-target="#results">

<div kj-get="/api/comments" kj-trigger="revealed">…</div>
<span kj-get="/api/price" kj-trigger="every 10s"></span>

<button kj-delete="/api/acct" kj-confirm="Really delete?">✕</button>

<button kj-get="/slow" kj-indicator="#spinner">Go</button>
<span id="spinner" hidden>Loading…</span>

<button kj-post="/api/filter" kj-include="#filters"
        kj-vals='{"page": 2}' kj-target="#grid">Next</button>

<a kj-get="/products?page=2" kj-target="#grid"
   kj-push-url="true">Page 2</a>

$('#btn').on('kj:error', (e, d) =>
  toast('Failed: ' + d.error.status));
$('#grid').on('kj:load', highlightNew);

Alpine-style: declare state on an element with kj-data; bind it with directives. Mutating state re-renders the component. No virtual DOM, no build step. Inside expressions, $el is the element and $event the event.

<div kj-data="{ count: 0, open: false }">…</div>
<div kj-data="dropdown">…</div>  <!-- registered -->

<span kj-text="count"></span>
<p kj-text="name ? 'Hi ' + name : 'Who?'"></p>

<ul kj-show="open">…</ul>

<input kj-model="email">
<input type="checkbox" kj-model="agreed">

<button @click="count++">+1</button>
<form @submit.prevent="save()">…</form>
<input @keyup.enter="search($el.value)">

<img :src="user.avatar" :alt="user.name">
<button :disabled="saving">Save</button>
<div :class="open ? 'expanded' : ''">…</div>

$.component('counter', () => ({
  count: 0,
  init() { console.log('mounted'); },
}));
// <div kj-data="counter">…</div>

const cart = $.store('cart', {
  items: [],
  get total() { return this.items.length; },
});
cart.items.push({ sku: 'A-1' }); // UI updates

const state = $.reactive({ x: 1 });

GSAP-style tweening on requestAnimationFrame. Transform shorthands (x, y, rotate, scale…) plus any numeric CSS property. Durations in seconds. All tweens return Promises.

$.to('.card', { x: 200, rotate: 10, opacity: .8,
                duration: .6, ease: 'back.out' });

await $.to('#modal', { opacity: 0, duration: .3 });
$('#modal').hide();

$.from('.hero h1', { y: 40, opacity: 0,
  duration: .8, ease: 'power2.out' });

$.fromTo('.badge', { scale: 0 },
  { scale: 1, duration: .5, ease: 'elastic.out' });

$.timeline({ duration: .5, ease: 'power2.out' })
  .from('.hero',    { opacity: 0 })
  .from('.hero h1', { y: 30 })
  .from('.hero p',  { y: 30 }, '<')   // together
  .to('.cta',       { scale: 1.1 });

$.to('.item', { y: 0, opacity: 1,
  duration: .4, stagger: .08 });

$.to('.ball', { y: 200, ease: 'bounce.out', duration: 1 });
$.to('.dot',  { x: 100, ease: t => t * t });

The classics, rebuilt on the Motion engine. Durations in milliseconds, exactly as jQuery developers expect.

$('.toast').fadeIn(300);
$('.toast').fadeOut(300, function () { $(this).remove(); });

$('#faq-answer').slideToggle(250);

$('.box').animate({ marginLeft: 100, opacity: .5 }, 600);

Small helpers on the $ namespace.

$.each({ a: 1, b: 2 }, (k, v) => console.log(k, v));

$.map([1, 2], n => [n, n * 10]); // [1,10,2,20]

$.extend(defaults, options);
$.extend(true, config, { api: { retries: 3 } });

$('#q').on('input', $.debounce(search, 300));

$(window).on('scroll', $.throttle(onScroll, 100));

$.param({ a: 1, b: 'x y' }); // "a=1&b=x+y"

const [li] = $.parseHTML('<li>Hi</li>');

$('#out').html('<b>' + $.escape(userInput) + '</b>');

const id = $.uuid();

$.isPlainObject({});   // true
$.isArray('nope');     // false

const j = $.noConflict();
j('#app').addClass('ready');

console.log($.version); // "1.0.0"