Clus - A minimalist JavaScript library for modern browsers.

Emoji Commit

Commit Type	Emoji
Initial Commit	🎉 :tada:
Structure	🎨 :art:
Documentation	📝 :memo:
New Idea	💡 :bulb:
New Feature	✨ :sparkles:
Bug	🐛 :bug:
Version Tag	🔖 :bookmark:
Performance	🐎 :racehorse:
Tooling	🔧 :wrench:
Tests	🚨 :rotating_light:
Deprecation	💩 :poop:
Work In Progress (WIP)	🚧 :construction:
Upgrading	⬆️ :arrow_up:

Example:

":art: fixing coding standard"

Usage

Install

$ npm i clus --save
# or
$ bower i clus

Global methods

• $.ajax()
• $.each()
• $.map()

Instance methods

• .ready()
• .addClass()
• .removeClass()
• .hasClass()
• .toggleClass()
• .append()
• .appendTo()
• .parent()
• .parents()
• .children()
• .each()
• .map()
• .on()
• .off()
• .trigger()
• .width()
• .height()

DOM

$(document).ready()

$(document).ready(function () {
    // DOM is ready
});

// or

$(function () {
    // DOM is ready
});

.addClass(className)

Example:

$('.hello').addClass('world');
$('p').addClass('hello world');
// or
$('p').addClass('hello').addClass('world');

.removeClass(className)

Example:

$('.hello').removeClass('hello').addClass('hi');
$('p').addClass('hello world').removeClass('hello world');
// or
$('p').addClass('hello world').removeClass('hello').removeClass('world');

.hasClass(className)

Example:

$('p').hasClass('hello'); // true
$('p').hasClass('world'); // false

.toggleClass(className)

Example:

$('p').toggleClass('hello');

.append(DOMString)

Example:

$('body').append('<h1>Hello Clus</h1>');

.appendTo(selector)

Example:

$('<h1>Hello Clus</h1>').appendTo('body');

.parent()

Example:

$('.hello').parent();

.parents()

Example:

$('.hello').parents();
$('.hello').parents('body');

.children()

Example:

$('.hello').children();
$('.hello').children('.world');

$.each()

Example:

$.each(['just', 'hello', 'world'], function (item, index) {
    console.log(item, index);
});
// just 0
// hello 1
// world 2

.each()

Example:

$('.hello').each(function (item, index) {
    $(this).addClass('world');
    console.log($(this));
});

$.map()

Example:

$.map(['just', 'hello', 'world'], function (item, index) {
    console.log(item, index);
});
// just 0
// hello 1
// world 2

.map()

Example:

$('.hello').map(function (item, index) {
    $(this).addClass('world');
    console.log($(this));
});

.on()

Example:

$('.hello').on('click', function () {
    console.log($(this));
});

$(document).on('click', '.hello', function () {
    console.log($(this));
});

.off()

Example:

let hello = function () {
    console.log('hello');
}
$(document).on('click', '.hello', hello);
$(document).off('click', '.hello', hello);

.trigger()

Example:

let data = {
    hello: 'hello',
};
$(document).on('hello', function (event) {
    console.log(event.detail); // { hello: "hello" }
});
$(document).trigger('hello', data);

.ajax()

Example:

$.ajax({
    type: 'GET',
    url: 'http://api.hello.com', // http://api.hello.com/?hello=hello&world=world
    data: {
        hello: 'hello',
        world: 'world',
    },
    success: function (data) {
        console.log(data);
    },
    error: function (error) {
        console.error(error);
    },
});

.width()

Example:

$(window).width()
$(document).width()
$('body').width()

.height()

Example:

$(window).height()
$(document).height()
$('body').height()