bala.js

A function for elements selection in 280 ASCII chars

bala.js is a function that allows you easily select elements on a web page and get rid of jQuery in most of cases.

const buttons = $('.button');

You can use it as a global variable on your page

<script>
$=((e,n,t,c)=>(c=((i,o,r)=>(r=Object.create(t),i&&r.push(...i.dispatchEvent?[i]:"string"==typeof i?/</.test(i)?((o=e.createElement(o||n)).innerHTML=i,o.children):o?(o=c(o)[0])?o[n](i):r:e[n](i):i.length?i:t),r)),c.fn=t,c.one=((e,n)=>c(e,n)[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, ((e,n,t,c)=>(c=((i,o,r)=>(r=Object.create(t),i&&r.push(...i.dispatchEvent?[i]:"string"==typeof i?/</.test(i)?((o=e.createElement(o||n)).innerHTML=i,o.children):o?(o=c(o)[0])?o[n](i):r:e[n](i):i.length?i:t),r)),c.fn=t,c.one=((e,n)=>c(e,n)[0]),c))(document,"querySelectorAll",[]));

Or install it via NPM

npm install --save balajs

bala.js is inherited from Array.prototype which means it has the same set of methods as 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?

Different 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 (e. g. 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 $) which 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 = (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([
  {transform: 'translate(' + snowLeft + 'px, -100%)'},
  {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'}
], {
  duration: 1500,
  iterations: 10,
  delay: 300
});

Do you still need jQuery?