An ultra-light, jQuery-like micro-library for selecting DOM elements and manipulating them.

jkq.js

(function() {
    'use strict';

    /**
     * Core method, similar to jQuery (only simpler)
     *
     * @param  {String|HTMLElement} s     The CSS selector to search for or HTML element to wrap with functionality
     * @param  {HTMLElement}        root  OPTIONAL An HTML element to start the element query from
     * @return {Array}                    The collection of elements, wrapped with functionality (see API methods)
     */
    function $(s, root) {
        root = root || document;
        if (typeof(s) === 'string') {
            return wrap([].slice.call( root.querySelectorAll(s) ));
        } else if (s.tagName) {
            return wrap( [s] );
        } else {
            return [];
        }
    }

    /* ---------------- API methods ----------------- */

    var api = {
        append: append,
        prepend: prepend,
        addClass: addClass,
        removeClass: removeClass,
        toggleClass: toggleClass,
        css: css,
        find: find,
        data: data,
        on: on
    };

    function append(el) {
        var html = (typeof(el) === 'string') ? el : el.outerHTML;
        this.innerHTML += html;
    }

    function prepend(el) {
        var html = (typeof(el) === 'string') ? el : el.outerHTML;
        this.innerHTML = html + this.innerHTML;
    }

    function addClass(c) {
        this.classList.add(c);
    }

    function removeClass(c) {
        this.classList.remove(c);
    }

    function toggleClass(c) {
        if (this.classList.contains(c)) {
            this.classList.remove(c);
        } else {
            this.classList.add(c);
        }
    }

    function css(props) {
        var el = this;
        Object.keys(props).forEach(function(prop) {
            el.style[prop] = props[prop];
        });
    }

    function find(s) {
        return $(s, this);
    }

    function data(a, v) {
        a = a || '';
        if (v === undefined) {
            return this.getAttribute('data-' + a);
        } else {
            this.setAttribute('data-' + a, v);
        }
    }

    function on(e, s, f) {
        if (typeof(f) !== 'function') {
            f = s;
            s = null;
        }
        if (s) {
            var orig = this;
            orig.addEventListener(e, function(evt) {
                $(s, orig).forEach(function(el) {
                    if (el === evt.target) {
                        f.call(el, evt);
                    } else if (isChild(evt.target, el)) {
                        f.call(el, evt);
                    }
                });
            });
        } else {
            this.addEventListener(e, f);
        }
    }

    /* ------------- Private Methods -------------- */

    function isChild(el, p) {
        if (!el || !p || !p.childNodes || !p.childNodes.length) {
            return false;
        }
        return ([].slice.call(p.childNodes).filter(function(n) {
            var found = (n === el);
            if (!found && n.childNodes && n.childNodes.length) {
                return isChild(el, n);
            }
            return found;
        })).length;
    }

    function wrap(list) {
        Object.keys(api).forEach(function(f) {
            list[f] = function() {
                var args = arguments;
                var result;
                if (Array.isArray(this)) {
                    result = [];
                    this.forEach(function(root) {
                        var fnResult = api[f].apply(root, [].slice.call(args));
                        if (Array.isArray(fnResult)) {
                            result = result.concat(fnResult);
                        } else if (fnResult !== undefined) {
                            result.push(fnResult);
                        }
                    });

                    if (f === 'find') {
                        wrap(result);
                    } else {
                        result = (result.length && result) || undefined;
                    }
                } else {
                    result = api[f].apply(this, [].slice.call(args));
                }

                return (result === undefined) ? this : result;
            };
        });
        return list;
    }

    window.jkq = $;

})();

@asdrubalp9 None of this worked :(
I just wanted to use the mighty dollar sign function. So I ended up using this small piece of code and it works

function $(el) {
    const type = el.charAt(0)
    switch (type) {
        case "#":
            return document.querySelector(el)
            break;
        case ".":
            return document.querySelectorAll(el)
            break;
        default:
            return document.getElementsByTagName(el)
    }
}

good for you, but I don't see this scaling, especially when you want to select a class, because sometimes you want to select an item and you are returning an array of elements. <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> Libre de virus. www.avast.com <https://www.avast.com/sig-email?utm_medium=email&utm_source=link&utm_campaign=sig-email&utm_content=webmail> <#DAB4FAD8-2DD7-40BB-A1B8-4E2AA1F9FDF2> El lun, 2 may 2022 a las 12:16, kawsaramin101 ***@***.***>) escribió:

…

***@***.**** commented on this gist. ------------------------------ @asdrubalp9 <https://github.com/asdrubalp9> None of this worked :( I just wanted to use the mighty dollar sign function. So I ended up using this small piece of code and it works function $(el) { const type = el.charAt(0) switch (type) { case "#": return document.querySelector(el) break; case ".": return document.querySelectorAll(el) break; default: return document.getElementsByTagName(el) } } — Reply to this email directly, view it on GitHub <https://gist.github.com/a3fdd362d572f04397a01084c492716e#gistcomment-4151873>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACXUUJBFDN2MPDRQL5T3ZG3VH75XDANCNFSM5UXEW4UA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

This code does NOT add window.$, it adds window.jkq = $; (check line 149). I wrote this for a small static site I was building, not as a jQuery replacement, so didn't want to overwrite that window.$ in case someone had both libraries in place. You could use this library by adding this line at the very very top of your own code:

window.$ = window.jkq;