Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/finom/tsimmes
A function for elements selection
https://github.com/finom/tsimmes
bala dom-library jquery
Last synced: 3 days ago
JSON representation
A function for elements selection
- Host: GitHub
- URL: https://github.com/finom/tsimmes
- Owner: finom
- License: mit
- Created: 2015-12-22T11:18:03.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2024-10-28T22:46:07.000Z (3 months ago)
- Last Synced: 2025-01-12T23:05:25.459Z (10 days ago)
- Topics: bala, dom-library, jquery
- Language: JavaScript
- Size: 270 KB
- Stars: 228
- Watchers: 12
- Forks: 28
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
tsimmes [](https://badge.fury.io/js/tsimmes)
============
### A function for elements selection in 226 ASCII chars (less than ¼ KB)!
**tsimmes** 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
$=((a,b,c)=>(c=(d,e,f=[])=>(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.one=(a,b)=>c(a,b)[0],c))(document,"querySelectorAll");
```
*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 tsimmes
```
**tsimmes** 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
**tsimmes** 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 **tsimmes** 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. **tsimmes** 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 **tsimmes** nicely via module system.
**AMD**
```js
require(['path/to/tsimmes/umd/tsimmes.umd.js'], ($) => {
// ...
});
```
**CommonJS**
```js
const $ = require('path/to/tsimmes/tsimmes.umd.js');
```
**CommonJS + NPM**
```js
const $ = require('tsimmes');
```
**ECMAScript 2015**
```js
import $ from 'tsimmes';
```
### 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 = $('foobar', '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?