# balajs
> A function for elements selection
Latest version **2.0.2** (published 2022-08-02) · MIT license · 0 weekly downloads
> **Deprecated.** This package is deprecated.
## Install
```sh
npm install balajs
pnpm add balajs
yarn add balajs
bun add balajs
```
## Health
**Score 10/100 (F)** — status: deprecated.
Negative: deprecated.
## Facts
| | |
|---|---|
| Version | 2.0.2 |
| Published | 2022-08-02 |
| First published | 2015-12-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 228 |
| Author | Andrey Gubanov |
| Maintainers | finom |
| Keywords | jquery, dom, library, balalaika |
## Links
- npm: https://www.npmjs.com/package/balajs
- Repository: https://github.com/finom/bala
- Homepage: https://github.com/finom/bala#readme
- Issues: https://github.com/finom/bala/issues
- npm.io page: https://npm.io/package/balajs
## Alternatives
- [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads
- [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads
- [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads
- [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads
- [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads
## Recent versions
- 2.0.2 (latest) — 2022-08-02
- 2.0.1 — 2022-08-02
- 2.0.0 — 2022-07-28
- 1.0.10 — 2020-10-12
- 1.0.9 — 2020-10-12
- 1.0.8 — 2020-10-12
- 1.0.7 — 2017-08-09
- 1.0.6 — 2017-04-14
- 1.0.5 — 2017-04-06
- 1.0.4 — 2017-04-06
- 1.0.3 — 2017-03-30
- 1.0.1 — 2017-03-16
- 1.0.0 — 2017-03-15
- 0.1.9 — 2016-01-03
- 0.1.8 — 2016-01-03
- … 8 more at https://npm.io/package/balajs/versions
## README
bala.js [](https://badge.fury.io/js/balajs)
============
### A function for elements selection in 226 ASCII chars (less than ¼ KB)!
**bala.js** is a function that allows you to select elements on a web page. Think of it as of `document.querySelectorAll` on steroids.
```js
const buttons = $('.button');
```
You can use it as a global variable
```html
```
*If you don't want to use ``$`` variable just rename it.*
```js
foo=...
// instead of
$=...
```
And you can use it as a local variable in a script you make
```js
((win, $) => {
// your code starts here
const divs = $('div');
console.log(divs);
// your code ends here
})(window, ((a,b,c)=>(c=(d,e,f=[])=>(d&&f.push(...(d.dispatchEvent?[d]:""+d===d?/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.
## More features?
### Various types support
**bala** accepts many kinds of first argument and converts everything into array
```js
$('.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.
```js
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.
```js
$.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**
```js
require(['path/to/bala/umd/bala.umd.js'], ($) => {
// ...
});
```
**CommonJS**
```js
const $ = require('path/to/bala/bala.umd.js');
```
**CommonJS + NPM**
```js
const $ = require('balajs');
```
**ECMAScript 2015**
```js
import $ from 'balajs';
```
### Find elements inside another element
```js
const elements = $('.my-selector', someParent);
// or
const element = $.one('.my-selector', someParent);
```
### Parse HTML
Simple parsing.
```js
const 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.
```js
const cells = $('foo | bar | ', 'tr')
```
## I need more examples!
### Add style
```js
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``.
```js
$.one('.my-selector').style.color = 'red';
```
### Events delegation
```js
for(let element of $('.my-selector')) {
element.addEventListener('click', function ({ target }) {
if (this.contains(target.closest('.delegated-selector'))) {
alert('yep!');
}
});
}
```
Or
```js
$.one('.my-selector').addEventListener('click', function ({ target }) {
if (this.contains(target.closest('.delegated-selector'))) {
alert('yep!');
}
});
```
### Elements removal
```js
for(let element of $('.my-selector')) {
element.remove();
}
```
Or
```js
$.one('.my-selector').remove();
```
### Animations
Use [element.animate](https://developers.google.com/web/updates/2014/05/Web-Animations-element.animate-is-now-in-Chrome-36) for smooth GPU-accelerated animations. You may need [polyfill for Web Animations API](https://github.com/web-animations/web-animations-js).
```js
$.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?
---
_Source: https://npm.io/package/balajs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._