jsKjs Get jsKjs

Core · jQuery-compatible

Selectors & collections

Everything starts with $(). Pass it a CSS selector, an element, an HTML string or a function, and get back a chainable collection that is also a real Array.

What you get

jsKjs hands every selector straight to the browser's own querySelectorAll. There is no selector engine to download or execute, so anything your browser understands — :has(), :is(), :not(a, b), attribute operators — works on day one. An invalid selector throws a clear error instead of quietly matching nothing.

The collection you get back extends Array. Chain jQuery-style methods such as .addClass(), or use native array features directly: spread it, destructure it, loop it with for…of, or .map() it into plain values.

The five ways to call $()

  • $('.card') — select by CSS selector (optionally scoped: $('li', '#menu')).
  • $(element) / $(window) — wrap something you already have.
  • $([el1, el2]) or $(nodeList) — wrap any iterable of nodes.
  • $('<li class="x">Hi</li>') — create elements from HTML.
  • $(fn) — run code when the DOM is ready.

Live · Selector playground

  • Tween Engine Tee
  • Selector Socks −20%
  • Easing Mug
  • Stagger Stickers −50%
  • Delegation Deskmat

  
  
View the source for this demo
HTML
<div class="row">
  <label for="sel-in" class="sr-only">CSS selector</label>
  <input id="sel-in" type="text" value=".sale" spellcheck="false" autocomplete="off" style="max-width:300px;font-family:var(--mono)">
  <button id="sel-go" type="button">Select</button>
</div>
<div class="row" id="sel-presets" style="margin-top:10px" aria-label="Example selectors">
  <button type="button" class="chip" data-sel="li">li</button>
  <button type="button" class="chip" data-sel=".sale">.sale</button>
  <button type="button" class="chip" data-sel="li:nth-child(odd)">li:nth-child(odd)</button>
  <button type="button" class="chip" data-sel="[data-stock='0']">[data-stock='0']</button>
  <button type="button" class="chip" data-sel="li:has(b)">li:has(b)</button>
  <button type="button" class="chip" data-sel="li:not(.sale, [data-stock='0'])">li:not(.sale, …)</button>
</div>
<ul id="shelf" class="list-plain" style="margin-top:14px">
  <li data-stock="4">Tween Engine Tee</li>
  <li class="sale" data-stock="12">Selector Socks <b>−20%</b></li>
  <li data-stock="0">Easing Mug</li>
  <li class="sale" data-stock="2">Stagger Stickers <b>−50%</b></li>
  <li data-stock="7">Delegation Deskmat</li>
</ul>
<pre class="out" id="sel-out" aria-live="polite"></pre>
JavaScript
function run(selector) {
  $('#shelf li').css('background', '');
  let $hits;
  try {
    $hits = $(selector, '#shelf');            // native querySelectorAll, scoped
  } catch (err) {
    $('#sel-out').text('✗ Not a valid CSS selector: ' + selector);
    return;
  }
  $hits.css('background', 'color-mix(in srgb, var(--core) 22%, transparent)');
  const names = $hits.map(el => el.firstChild.textContent.trim());   // it's an Array
  $('#sel-out').text("$('" + selector + "', '#shelf') → " + $hits.length + ' match(es)\n' + JSON.stringify(names));
}

$('#sel-go').on('click', () => run($('#sel-in').val()));
$('#sel-in').on('keyup', e => { if (e.key === 'Enter') run($('#sel-in').val()); });
$('#sel-presets').on('click', '[data-sel]', function () {
  $('#sel-in').val(this.dataset.sel);
  run(this.dataset.sel);
});
run('.sale');



  
More examples
Create, scope and wrap
JavaScript
const $card = $('<article class="card"><h3>New</h3></article>').appendTo('#grid');
$('.price', '#cart').addClass('updated');      // only inside #cart
$(document.body).attr('data-ready', '');

$(() => console.log('DOM ready'));
It is an Array — use that
JavaScript
const ids = $('[data-id]').map(el => el.dataset.id);   // plain array of strings
for (const img of $('img[loading="lazy"]')) observer.observe(img);
const [first, second] = $('.step');
const total = $('.line-item').reduce((sum, el) => sum + +el.dataset.price, 0);

  
API
$(selector [, context]) · $(element) · $(html) · $(fn)
The heart of the library. Accepts a CSS selector (optionally scoped to a context), a DOM node, window, a NodeList/array, an HTML string (creates elements), or a function (runs on DOM ready).
Reference: $() →
.each((index, element) => {}) → self
Iterate the set jQuery-style. Inside the callback, this is the current element.
Reference: .each() →
.get([index]) → element | element[]
Without arguments returns a plain array of all elements; with an index returns that raw element (negative indexes count from the end). Bracket access $(x)[0] also works.
Reference: .get() →
.eq(index) → KJ
Reduce the set to the element at the given index, returned as a new chainable set. Negative indexes count from the end.
Reference: .eq() →
.first() → KJ · .last() → KJ
Shortcuts for .eq(0) and .eq(-1).
Reference: .first() / .last() →
.index([element]) → number
Without arguments, the position of the first element among its siblings. With an element, its position within this set.
Reference: .index() →
.add(selector | elements) → KJ
Merge more elements into the set (deduplicated).
Reference: .add() →

  
Migrating
Coming from jQueryIdentical calls. jQuery-only pseudo-selectors such as :first, :eq() and :visible are not CSS, so use .first(), .eq() or .filter(). Native array methods like .map() return plain arrays — wrap with $() to keep chaining.

  
Related features
Core
DOM traversal
Walk the DOM with find(), closest(), parent(), parents(), children(), siblings(), next(), prev(), filter(), not() and is() — every result chainable and de-duplicated..
Open →Core
DOM manipulation
Insert, move, clone, wrap and remove elements with the jQuery API you know — .append(), .prepend(), .before(), .after(), .clone(), .empty() — on modern DOM primitives..
Open →Core
Event delegation
Handle clicks on thousands of rows — including rows added later — with a single listener using .on(event, selector, handler).
Open →