Last active
May 24, 2024 01:07
-
-
Save pseudosavant/b86eedd9960ade958d49447130c95811 to your computer and use it in GitHub Desktop.
Utility function that adds in some jQuery-like syntactic sugar
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // jQuery-like syntactic sugar. Only queries for one element. Does not loop over multiple like jQuery | |
| export function $(query) { | |
| if (typeof query === 'undefined') throw 'No query provided to $'; | |
| var el; | |
| if (typeof query.nodeType === 'string') { | |
| el = query; | |
| } else if (typeof query === 'string' && query[0] === '<') { | |
| const container = document.createElement('div'); | |
| container.innerHTML = query; | |
| el = container.firstChild; | |
| } else if (typeof query === 'string') { | |
| el = document.querySelector(query); | |
| } else { | |
| el = query; | |
| } | |
| if (el) { | |
| el.on = (e, fn, ...args) => { | |
| if (args.length > 0) { | |
| el.addEventListener(e, fn, ...args); | |
| } else { | |
| el.addEventListener(e, fn, false); | |
| } | |
| return el; | |
| }; | |
| el.off = (eventType, callback) => { el.removeEventListener(eventType, callback); return el; } | |
| el.once = (e, fn) => el.addEventListener(e, fn, {once: true}); | |
| el.trigger = (eventOrType, optDetail) => { | |
| const detail = (optDetail ? { detail: optDetail } : undefined); | |
| const e = (typeof eventOrType === 'string' ? new CustomEvent(eventOrType, detail) : eventOrType); | |
| el.dispatchEvent(e); | |
| return el; | |
| }; | |
| el.hasClass = c => el.classList.contains(c); | |
| el.addClass = c => { el.classList.add(c); return el; } | |
| el.removeClass = c => { el.classList.remove(c); return el; } | |
| el.toggleClass = c => { el.classList.toggle(c); return el; } | |
| el.append = element => { el.appendChild($(element)); return el; } | |
| el.remove = () => { | |
| if (el && el.parentNode) el.parentNode.removeChild(el); | |
| return el; | |
| } | |
| el.show = () => { el.style.display = 'initial'; return el; } | |
| el.attr = (name, val) => { | |
| if (isUndefined(val)) { | |
| return el.getAttribute(name); | |
| } else { | |
| el.setAttribute(name, val); | |
| return el; | |
| } | |
| }; | |
| el.removeAttr = name => { el.removeAttribute(name); return el; } | |
| el.val = () => el.value; | |
| el.find = q => $(q, el); | |
| el.parent = () => $(el.parentElement); | |
| el.html = h => { | |
| if (isUndefined(h)) { | |
| return el.innerHTML; | |
| } else { | |
| el.innerHTML = h; | |
| return el; | |
| } | |
| }; | |
| } | |
| function isUndefined(v) { | |
| return typeof v === 'undefined'; | |
| } | |
| return el; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { $ } from './jSugar.js'; | |
| const element = $('#myElement'); | |
| element.on('click', () => { | |
| console.log('Element clicked!'); | |
| }); |
Author
Author
2020-07-25:
- Added support for
removee.g.$('div').remove()
Author
2020-08-05:
- Added ability to query child elements. i.e.
$('div').find('span');
Author
2020-08-10:
- Added ability to add and remove CSS classes. i.e.
$('div').addClass('myFavClass');$('div').removeClass('myFavClass'); - Added ability to remove event listeners. i.e.
$('div').off('eventName', callbackFn);
Author
2020-09-29:
- Added
$.once(event, callback) - Added
$.attr(attr, val) - Added
$.removeAttr(attr) - Added
$.toggleClass(className) - Added
$.show()which sets the node styledisplaytoinitial - Changed
$.html()to function as a getter/setter like jQuery does. It used to be alias forinnerHTML.
Author
2021-03-03
- Added
$.parentto return the parent element of the selected element
Author
2024-05-23: Changed to module
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2020-07-22:
$('<div></div>')$('div').append('<div></div>')