I love tiny libraries like this, have a ❤🦄
I hope the below gives you some inspiration, as if you want tiny and powerful (with support for IE!) my modified version of ki.js is pretty sweet:-
!function (b, c, d, e, f) { f = b['add' + e] function i(a, d, i) { for(d = (a && a.nodeType ? [a] : '' + a === a ? b.querySelectorAll(a) : c), i = d.length; i--; c.unshift.call(this, d[i])); } $ = function (a) { return /^f/.test(typeof a) ? /in/.test(b.readyState) ? setTimeout(function() { $(a); }, 9) : a() : new i(a); }; $[d] = i[d] = { on: function (a, b) { return this.each(function (c) { f ? c['add' + e](a, b, false) : c.attachEvent('on' + a, b) }) }, off: function (a, b) { return this.each(function (c) { f ? c['remove' + e](a, b) : c.detachEvent('on' + a, b) }) }, each: function (a, b) { for (var c = this, d = 0, e = c.length; d < e; ++d) { a.call(b || c[d], c[d], d, c) } return c }, splice: c.splice } }(document, [], 'prototype', 'EventListener');
This gives you: $('button').on('click', someAction); for event listeners (and .off to remove them)
$('button').on('click', someAction);
.off
$('div').each(function (elem, i) { to iterate over items
$('div').each(function (elem, i) {
$(function () { for document ready
$(function () {
All for 150 bytes gzipped!
And for extra features:-
var props = ['add', 'remove', 'toggle', 'has'], maps = ['add', 'remove', 'toggle', 'contains']; props.forEach(function(prop, index) { $.prototype[prop + 'Class'] = function(a) { return this.each(function(b) { if(a){ b.classList[maps[index]](a); } }); }; });
That gives us addClass removeClass toggleClass and hasClass.
addClass removeClass toggleClass and hasClass
And if you want the kitchen sink:-
$.prototype.css = function(a, b) { if (typeof(a) === 'object') { for(var prop in a) { this.each(function(c) { c.style[prop] = a[prop]; }); } return this; } else { return b === []._ ? this[0].style[a] : this.each(function(c) { c.style[a] = b; }); } }; $.prototype.text = function(a) { console.log(a); return a === []._ ? this[0].textContent : this.each(function(b) { b.textContent = a; }); }; $.prototype.html = function(a) { return a === []._ ? this[0].innerHTML : this.each(function(b) { b.innerHTML = a; }); }; $.prototype.attr = function(a, b) { return b === []._ ? this[0].getAttribute(a) : this.each(function(c) { c.setAttribute(a, b); }); }; $.param = function(obj, prefix) { var str = []; for(var p in obj) { var k = prefix ? prefix + "[" + p + "]" : p, v = obj[p]; str.push(typeof v == "object" ? $.param(v, k) : encodeURIComponent(k) + "=" + encodeURIComponent(v)); } return str.join("&"); }; $.prototype.append = function(a) { return this.each(function(b) { b.appendChild(a[0]); }); };
Although that would be 750 bytes gzipped so it might be a little large!
this library is even smaller, the open source world is really beautiful!
Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink.
Hide child comments as well
Confirm
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I love tiny libraries like this, have a ❤🦄
I hope the below gives you some inspiration, as if you want tiny and powerful (with support for IE!) my modified version of ki.js is pretty sweet:-
This gives you:
$('button').on('click', someAction);
for event listeners (and.off
to remove them)$('div').each(function (elem, i) {
to iterate over items$(function () {
for document readyAll for 150 bytes gzipped!
And for extra features:-
That gives us
addClass removeClass toggleClass and hasClass
.And if you want the kitchen sink:-
Although that would be 750 bytes gzipped so it might be a little large!
this library is even smaller, the open source world is really beautiful!