Umbrella JS
Tiny library for DOM manipulation and events
https://cdn.jsdelivr.net/npm/umbrellajs
Intuitive and Documented
It is strongly influenced by jQuery with many similar methods so you'll feel at ease developing with Umbrella.
However there are some extra features like .handle() and some methods like .append() are more flexible:
// Simple events like jQuery
u("button").on('click', function () {
alert("Hello world");
});
// Send form through AJAX when submitted
u('form.login').handle('submit', e => {
console.log(u(e.target).serialize());
});
Tiny and Clear
2.5kb when gzipped means it will load in a snap on mobile. The core is reusable so new features are also tiny.
You can see two features of Umbrella JS source code on the right, or check it all on Github:
Source on Github// Find the nodes matched by a selector
u.prototype.find = function (selector) {
return this.map(function (node) {
return u(selector || "*", node);
});
};
// Check if any node matches the selector
u.prototype.is = function (selector) {
return this.filter(selector).length > 0;
};
Tested and Performant
The speed is similar to jQuery and there are many tests with edge cases.
They run on development, on deploy and live in different browsers so you know everything will work as expected.
it("can select by class", function () {
expect(u('.demo').length).to.equal(1);
});
it("can select li inside ul", function () {
var ul = base.find('li').closest('ul');
expect(ul.length).to.equal(1);
});
MIT License
If you love something set it free. This license allows you to use Umbrella JS in a broad variety of projects.
MIT LicenseSpecial Thanks
- Contributors for helping Umbrella to improve
- You Might Not Need jQuery for its awesomeness
- Picnic CSS for making the website look alive
- Browser Stack for cross-browser checks
- Can I use? for compatibility checks