1.1.0 • Published 8 years ago

uu-select v1.1.0

Weekly downloads
6
License
ISC
Repository
github
Last release
8 years ago

uuSelect

Pure JavaScript elements selector and helpers for classes, attributes or styles. It's very small: about 700 bytes when uglified and Gziped! The plugin is commonJS and AMD compliant.

Why this plugin ?

  • when jQuery is not an option
  • You are tired of the native DOM api syntax
  • you target only modern browsers >= IE10 (IE9, see below)
  • an easy way to loop through collection of elements

You can easily add IE9 browser support with this shim for classList.

Demo Codepen

NPM NPM page

npm install uu-select

Selectors

The __ function accept 2 parameters, a selector and a context (optional), that must be valid querySelectorAll selectors:

__(selector [, context]);

// example
__('.my-class img');
__('.my-class', '.wrapper-class');

Helpers

addClass

  • Add 1 or more classes:
    __(selector [, context]).addClass(className [, className]);

removeClass

  • Remove 1 or more classes:
    __(selector [, context]).removeClass(className [, className]);

toggleClass

  • Toggle 1 or more classes:
    __(selector [, context]).toggleClass(className [, className]);

hasClass

  • Check if at least 1 element has this class:
    __(selector [, context]).hasClass(className);
    // return true or false

attr

  • Get attribute's value:

    __(selector [, context]).attr(attributeName);
    // return its value
  • Set attribute and value (1 or more):

    __(selector [, context]).attr(attributeName, value);
    // or
    __(selector [, context]).attr({
        attributeName: value,
        attributeName: value
    });

removeAttr

  • Remove 1 or more attribute:
    __(selector [, context]).removeAttr(attributeName [, attributeName]);

css

  • Get a computed style value:

    __(selector [, context]).css(property);
    // return its value
  • Set styles:

    __(selector [, context]).css(property, value);
    // or
    __(selector [, context]).css({
        property: value,
        property: value
    });

on

  • addEventListener
    __(selector [, context]).on(event, listener [, capture]);
    // Don't use an anonymous function is you plan to remove that event later

off

  • removeEventListener
    __(selector [, context]).of(event, listener);