tsimmes is a function that allows you to select elements on a web page. 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=[])=>(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");
</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=[])=>(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"));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]
tsimmes accepts many kinds of first argument and converts everything into array
$('.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.
const myCoolLibrary = (el) => {
el = $(el);
// ...
};Getting zero-indexed element in DOM libraries is annoying. tsimmes 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 tsimmes nicely via module system.
AMD
require(['path/to/tsimmes/umd/tsimmes.umd.js'], ($) => {
// ...
});CommonJS
const $ = require('path/to/tsimmes/tsimmes.umd.js');CommonJS + NPM
const $ = require('tsimmes');ECMAScript 2015
import $ from 'tsimmes';const elements = $('.my-selector', someParent);
// or
const element = $.one('.my-selector', someParent);Simple parsing.
const div = $('<div><span class="yeah"></span></div>');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')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';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!');
}
});for(let element of $('.my-selector')) {
element.remove();
}Or
$.one('.my-selector').remove();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?