JSFiddle - React, Tailwind, and code Playground

by acbabis

HTML

<h1>jQ Super Lite</h1>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

JavaScript

const jqsl = function(selector) {
	const elems = Array.from(document.querySelectorAll(selector));
  const proxy = new Proxy(elems, {
  	get: function(target, key) {
    	const value = target[key];
      if(typeof value === 'function') {
      	return function() {
        	const ret = value.apply(target, arguments);
          return typeof ret === 'undefined' ? proxy : ret;
        }
      } else {
      	return value;
      }
    }
  });
  return proxy;
};

jqsl('li')
	.forEach(item=>item.style.color='red')
  .forEach(item=>item.style.fontWeight='bold')
  .filter((unused, i)=>i%2).forEach(item=>item.style.fontSize='2em');
  
jqsl('h1')[0].style.fontFamily = 'sans-serif';