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 = $;

})();

I am getting error -
$ is not defined

I tried this code -

$("#someID").on("submit", function() { /*Some code*/ })
I included the whole code in script tag
Any help?

I am getting error - $ is not defined

I tried this code -

$("#someID").on("submit", function() { /*Some code*/ }) I included the whole code in script tag Any help?

@kawsaramin101 I think your code is running first and your library hasn't loaded and that's why it can't find the method.

you could try to make sure that your library is loading first and then that your code is runnning second

@asdrubalp9 I have my code after the library. Doesn’t work :(
For context, I am using Django template. I have the library in base.html and I extend base.html . I have a script block after the library in base.html . Then I write main code in script block in other templates.

Does this library works in your project? Can you show me some working code?

@*kawsaramin101* I haven't used it yet, I was looking for a slimmer version of jQuery, saw your comment and thought of chippin in. I doubt it matters what framework you're using unless it's a frontend framework, because your backend is generating the HTML to give it to the client, so depending on the order of things that the client is receiving, it will be rendering in his browser. If by any chance you have your JS in a separate file, add the deferred attribute, ie: <script src="yourfile.js" defer><script>, I'm not sure if this also works with inline JS. you could try this, but I'm not sure if this works with older browsers https://www.namehero.com/startup/how-to-defer-inline-javascript-finally/ <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 4:01, kawsaramin101 ***@***.***>) escribió:

…

***@***.**** commented on this gist. ------------------------------ @asdrubalp9 <https://github.com/asdrubalp9> I have my code after the library. Doesn’t work :( For context, I am using Django template. I have the library in base.html and I extend base.html . I have a script block after the library in base.html . Then I write main code in script block in other templates. Does this library works in your project? Can you show me some working code? — Reply to this email directly, view it on GitHub <https://gist.github.com/a3fdd362d572f04397a01084c492716e#gistcomment-4151442>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ACXUUJEUM5HAPTGWA3TB2NDVH6DVDANCNFSM5UXEW4UA> . You are receiving this because you were mentioned.Message ID: ***@***.***>

@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;