davidalphafox / bala

A function for elements selection

bala.js

A function for elements selection in 251 ASCII chars (less than ¼ KB)!

bala.js is a function that allows you to select elements on a web page and get rid of jQuery in most of cases. Think of it as of document.querySelectorAll on steroids.

const buttons = $('.button');

You can use it as a global variable

<script>
$=((a,b,c)=>(c=(d,e,f=Object.create(c.fn))=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.fn=[],c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll");
</script>

If you don't want to use $ variable just rename it.

foo=...
// instead of
$=...

And you can use it as a local variable in a script you make

((win, $) => {
    // your code starts here
    const divs = $('div');
    console.log(divs);
    // your code ends here
})(window, ((a,b,c)=>(c=(d,e,f=Object.create(c.fn))=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/</.test(d)?((e=a.createElement(e)).innerHTML=d,e.children):e?(e=c(e)[0])?e[b](d):f:a[b](d):d)),f),c.fn=[],c.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll"));

The function is also published on NPM

npm install balajs

bala.js is inherited from Array.prototype which means it has the same set of methods as the native array has.

• concat
• join
• pop
• push
• reverse
• shift
• slice
• sort
• splice
• toString
• unshift
• every
• filter
• forEach
• indexOf
• lastIndexOf
• map
• some
• copyWithin
• entries
• fill
• find
• findIndex
• includes
• keys
• values
• [Symbol.iterator]

More features?

Various types support

bala accepts many kinds of first argument and converts everything into bala instance

$('.one, #two')
$(document.querySelectorAll('.selector'));
$(document.body);
$(element.children);
$(jQuery('.selector'));
$([document.querySelector('.one'), document.querySelector('.two')])

That means when you make your own library (VanillaJS "plugin") you can use bala in case if you don't know which arg type will be passed by a programmer.

const myCoolLibrary = (el) => {
  el = $(el);
  // ...
};

$.one

Getting zero-indexed element in DOM libraries is annoying. bala has one little static method called $.one which selects only one element.

$.one('.button');
//vs
$('.button')[0];

This function is also created to get rid of extra variables (usually DOM libraries make two vars: $$ and $). It means you can import bala nicely via module system.

AMD

require(['path/to/bala/umd/bala.umd.js'], ($) => {
	// ...
});

CommonJS

const $ = require('path/to/bala/bala.umd.js');

CommonJS + NPM

const $ = require('balajs');

ECMAScript 2015

import $ from 'balajs';

Find elements inside another element

const elements = $('.my-selector', someParent);
// or
const element = $.one('.my-selector', someParent);

Parse HTML

Simple parsing.

const div = $('<div><span class="yeah"></span></div>');

Contextual HTML parsing

In case if you need to parse HTML which contains contextual elements (td, tr, option) you can pass a context tag name as a second argument.

const cells = $('<td>foo</td><td>bar</td>', 'tr')

Plugins

You can extend bala as easily as you do it with jQuery or Zepto. Use fn property to define your own plugin.

$.fn.toggle = function (boolean) {
    for(let node of this) {
        node.hidden = boolean;
    }
};

$('.button').toggle(false); // hides all buttons

I need more examples!

Add style

for(let element of $('.my-selector')) {
    element.style.color = 'red';
}

In case if you need to set style only for one element you can use $.one.

$.one('.my-selector').style.color = 'red';

Events delegation

for(let element of $('.my-selector')) {
    element.addEventListener('click', function ({ target }) {
        if (this.contains(target.closest('.delegated-selector'))) {
            alert('yep!');
        }
    });
}

Or

$.one('.my-selector').addEventListener('click', function ({ target }) {
    if (this.contains(target.closest('.delegated-selector'))) {
        alert('yep!');
    }
});

Elements removal

for(let element of $('.my-selector')) {
    element.remove();
}

Or

$.one('.my-selector').remove();

Animations

Use element.animate for smooth GPU-accelerated animations. You may need polyfill for Web Animations API.

$.one('.my-selector').animate({
    opacity: [0.5, 1],
    transform: ['scale(0.5)', 'scale(1)'],
}, {
    direction: 'alternate',
    duration: 500,
    iterations: Infinity,
});

Do you still need jQuery?