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 = $;
})();
@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