Skip to content

Instantly share code, notes, and snippets.

@jakerella
Last active May 3, 2024 01:49
Show Gist options
  • Save jakerella/a3fdd362d572f04397a01084c492716e to your computer and use it in GitHub Desktop.
Save jakerella/a3fdd362d572f04397a01084c492716e to your computer and use it in GitHub Desktop.
An ultra-light, jQuery-like micro-library for selecting DOM elements and manipulating them.
(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
Copy link

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

@kawsaramin101
Copy link

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

@asdrubalp9
Copy link

asdrubalp9 commented May 2, 2022 via email

@kawsaramin101
Copy link

@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)
    }
}

@asdrubalp9
Copy link

asdrubalp9 commented May 2, 2022 via email

@jakerella
Copy link
Author

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;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment