flashy.js - A lightweight JQuery like syntax

readme.md

flashy.js

A lightweight JQuery like syntax enabler for my StaticSiteGenerator projects.

I copied the base idea from blinq.js.
Also i seen this pretty neat implementation the first time from Wes Bos.

Notes:

• For a single selector (querySelector) use the $ function
• For a multi selector (querySelectorAll) use the $$ function
• The on() function works on all possible results (querySelector & querySelectorAll and all elements, document, window)

Samples

Single selection

// Instead of
document.querySelector(".card").addEventListener("click", handleClick);
// Use
$(".card").on("click", handleClick);

Multi selection

// Instead of
document
  .querySelectorAll(".card")
  .forEach((card) => card.addEventListener("click", handleClick));
// Use
$$(".card").on("click", handleClick);

Use any array method on NodeLists

const test = $$(".card").map((card) => card.textContent);
console.log("HTMLElement content", test); // ['card1', 'card2']

flashy.js

//###################################################
//                  flashy.js
//###################################################

window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);

Node.prototype.on = window.on = function (name, onFn) {
  this.addEventListener(name, onFn);
};

NodeList.prototype.__proto__ = Array.prototype;

NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, onFn) {
  this.map((x) => x.addEventListener(name, onFn));
};