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"
$ npm i clus --save
# or
$ bower i clus
.ready()
.addClass()
.removeClass()
.hasClass()
.toggleClass()
.append()
.appendTo()
.parent()
.parents()
.children()
.each()
.map()
.on()
.off()
.trigger()
.width()
.height()
$(document).ready(function () {
// DOM is ready
});
// or
$(function () {
// DOM is ready
});
Example:
$('.hello').addClass('world');
$('p').addClass('hello world');
// or
$('p').addClass('hello').addClass('world');
Example:
$('.hello').removeClass('hello').addClass('hi');
$('p').addClass('hello world').removeClass('hello world');
// or
$('p').addClass('hello world').removeClass('hello').removeClass('world');
Example:
$('p').hasClass('hello'); // true
$('p').hasClass('world'); // false
Example:
$('p').toggleClass('hello');
Example:
$('body').append('<h1>Hello Clus</h1>');
Example:
$('<h1>Hello Clus</h1>').appendTo('body');
Example:
$('.hello').parent();
Example:
$('.hello').parents();
$('.hello').parents('body');
Example:
$('.hello').children();
$('.hello').children('.world');
Example:
$.each(['just', 'hello', 'world'], function (item, index) {
console.log(item, index);
});
// just 0
// hello 1
// world 2
Example:
$('.hello').each(function (item, index) {
$(this).addClass('world');
console.log($(this));
});
Example:
$.map(['just', 'hello', 'world'], function (item, index) {
console.log(item, index);
});
// just 0
// hello 1
// world 2
Example:
$('.hello').map(function (item, index) {
$(this).addClass('world');
console.log($(this));
});
Example:
$('.hello').on('click', function () {
console.log($(this));
});
$(document).on('click', '.hello', function () {
console.log($(this));
});
Example:
let hello = function () {
console.log('hello');
}
$(document).on('click', '.hello', hello);
$(document).off('click', '.hello', hello);
Example:
let data = {
hello: 'hello',
};
$(document).on('hello', function (event) {
console.log(event.detail); // { hello: "hello" }
});
$(document).trigger('hello', data);
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);
},
});
Example:
$(window).width()
$(document).width()
$('body').width()
Example:
$(window).height()
$(document).height()
$('body').height()