Core — F()

F() is the entry point — a tiny selector / wrapper around querySelectorAll that returns a chainable Collection. Passing a function is sugar for F.ready.

F()CollectionChainingF.ready

F(target)

F(".card")              // selector → Collection
F("<div>hello</div>")   // HTML string → new element(s)
F(element)                // wrap single element
F([el1, el2])             // array / NodeList / Collection
F(() => console.log("ready")) // → F.ready sugar
F(document) / F(window)

String starting with < and ending with > is treated as HTML and creates elements via <template>. Otherwise it's a CSS selector. Invalid selectors return an empty Collection (no throw).

Collection

Array-like + iterable. Chainable methods return this; getters return values.

const c = F(".card");
c.length; c[0]; [...c]; // iterable
c.get(0); c.get(-1); c.get(); // all elements
c.each((i, el) => console.log(i, el));
c.map((i, el) => el.textContent);
c.filter((i, el) => el.matches(".active"));
c.first(); c.last(); c.eq(2); // new Collection wrappers

Chaining

F(".card")
  .addClass("active")
  .attr("data-ready", "true")
  .css({ opacity: 1 })
  .on("click", handler)
  .animate({ opacity: [0.8, 1] }, { duration: 200 });

Every setter / mutator returns the same Collection for chaining.

F.ready

F.ready(() => {
  F(".button").on("click", () => F.toast("Ready!"));
});
// sugar:
F(() => console.log("DOM ready"));

Utilities — F.each / map / filter / extend / type

F.each([1,2,3], (i, v) => console.log(i, v));
F.each({ a: 1, b: 2 }, (k, v) => console.log(k, v));
F.map([1,2,3], v => v * 2);          // [2,4,6]
F.filter([1,2,3], v => v > 1);       // [2,3]
F.extend(target, source1, source2); // Object.assign
F.unique([1,1,2]);                    // [1,2]
F.type(null); // "null" | "array" | typeof
F.isEmpty([]); // true

Live demo

F(".demo") target

—

DOM →