88 kb is more than an entire page on my website so it is quite significant (I...

[Comment from a deleted post]

88 kb is more than an entire page on my website so it is quite significant (I presume that is before gzipping as I don't remember it being that large).

But it isn't really the page weight where it is an issue (as most sites are 1-2MB so 88kb in the scheme of things isn't massive), it is the CPU time needed to parse and compile 88kb of JavaScript.

Not an issue for a decent laptop or PC, a whole other ball game for a £200 mid-tier phone running at 1.5Ghz!

That is why jQuery is dying....sadly it is being replaced with 100+kb of React for static websites so it isn't like we have learned (React is great for complex applications, but if you are using it on a brochure website you are using a sledge hammer to put in a tack (a tiny nail)!)

If you like jQuery style syntax (as I do), here is 4kb raw, less than 2kb gzipped and compressed of JS I use for common jQuery style selection, event listeners, ajax etc.

It gives you:
.on, .off, .each, .parent, .first, addClass, hasClass, removeClass, toggleClass, .text, .html, .parent, .first, .attr and .ajax.

Can occasionally get upset with complex selectors but it works for 95% of stuff and I just fall back to vanilla when it doesn't like something.

Not to be used in production on large sites, fine for personal / side projects though!

!function (b, c, d, e, f) {

    f = b['add' + e]

    function i(a, d, i) {
        for (d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i]))
            ;
    }

    $ = function (a) {
        return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function () {
            $(a);
        }, 9) : a() : new i(a);
    };

    $[d] = i[d] = {
        on: function (a, b) {
            return this.each(function (c) {
                f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b)
            })
        },
        off: function (a, b) {
            return this.each(function (c) {
                f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b)
            })
        },
        each: function (a, b) {
            for (var c = this, d = 0, e = c.length; d < e; ++d) {
                a.call(b || c[d], c[d], d, c)
            }
            return c
        },
        splice: c.splice
    }
}(document, [], 'prototype', 'EventListener');
$.prototype.find = function (selector) {
    return $(selector, this);
};
$.prototype.parent = function () {
    return (this.length == 1) ? $(this[0].parentNode) : [];
};
$.prototype.first = function () {
    return $(this[0]);
};
$.prototype.focus = function () {
    return this[0].focus();
};
var props = ['add', 'remove', 'toggle', 'has'],
        maps = ['add', 'remove', 'toggle', 'contains'];
props.forEach(function (prop, index) {
    $.prototype[prop + 'Class'] = function (a) {
        return this.each(function (b) {
            if (a) {
                b.classList[maps[index]](a);
            }
        });
    };
});
$.prototype.css = function (a, b) {
    if (typeof (a) === 'object') {
        for (var prop in a) {
            this.each(function (c) {
                c.style[prop] = a[prop];
            });
        }
        return this;
    } else {

        return b === []._ ? this[0].style[a] : this.each(function (c) {
            console.log(a, b, c);
            c.style[a] = b;
        });
    }
};
$.prototype.text = function (a) {
    console.log(a);
    return a === []._ ? this[0].textContent : this.each(function (b) {
        b.textContent = a;
    });
};
$.prototype.html = function (a) {
    return a === []._ ? this[0].innerHTML : this.each(function (b) {
        b.innerHTML = a;
    });
};
$.prototype.attr = function (a, b) {
    return b === []._ ? this[0].getAttribute(a) : this.each(function (c) {
        c.setAttribute(a, b);
    });
};
$.param = function (obj, prefix) {
    var str = [];
    for (var p in obj) {
        var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p];
        str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v));
    }
    return str.join("&");
};
$.prototype.append = function (a) {
    return this.each(function (b) {
        b.appendChild(a[0]);
    });
};
$.ajax = function (a, b, c, d) {
    var xhr = new XMLHttpRequest();
    // 1 == post, 0 == get
    var type = (typeof (b) === 'object') ? 1 : 0;
    var gp = ['GET', 'POST'];
    xhr.open(gp[type], a, true);
    xhr.responseType = (typeof (c) === 'string') ? c : '';
    var cb = (!type) ? b : c;
    xhr.onerror = function () {
        cb(this, true);
    };
    xhr.onreadystatechange = function () {
        if (this.readyState === 4) {
            if (this.status >= 200 && this.status < 400) {
                cb(this.response, false);
            } else {
                cb(this, true);
            }
        }
    };
    if (type) {
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        xhr.send($.param(b));
    } else {
        xhr.send();
    }
    xhr = null;
};