smallq v0.0.0

SmallQ

Extremely small jQuert-like library.

API

class SmallQ(selector: string)

const smq1 = new SmallQ('#id');
const smq2 = new SmallQ('.className');
const smq3 = new SmallQ('tagName');

$(selector: string): SmallQ

Shorthand to call new SmallQ().

forEach(fn: (element: HTMLElement) => void): this

$('.target').forEach(el => console.log(el));

text(text: string) => this

$('.target').text('text');

html(html: string) => this

$('.target').html('<div>html</div>');

attr(name: string, value: string) => this

$('.target').attr('aria-label', 'foo');

data(name: string, value: string) => this

$('.target').data('key', 'value');

css(object: CSSStyleDeclaration)

$('.target').css({
  border: 'solid 1px #000'
});

addClass(className: string) => this

$('.target').addClass('foo');

removeClass(className: string) => this

$('.target').removeClass('foo');

toggleClass(className: string) => this

$('.target').toggleClass('foo');

append(nodes: (string | Node)[]) => this

$('.target').append(node);

prepend(nodes: (string | Node)[]) => this

$('.target').prepend(node);

before(nodes: (string | Node)[]) => this

$('.target').before(node);

after(nodes: (string | Node)[]) => this

$('.target').after(node);

animate(keyframes: Keyframe[] | PropertyIndexedKeyframes | null, options?: number | KeyframeAnimationOptions | undefined) => this

$('.target').animate([
  { transform: 'translateY(0px)' },
  { transform: 'translateY(-300px)' }
], {
  duration: 1000,
  iterations: Infinity
});

on(type: string, listener: EventListenerOrEventListenerObject, options: AddEventListenerOptions)

$('button').on('click', () => console.log('clicked'));

off(type: string, listener: EventListenerOrEventListenerObject)

$('button').off('click');

License

MIT © Shogo Sensui