Chibi

A tiny JavaScript micro-library

Generate Convert Improve

Install / Use

/learn @kylebarrow/Chibi

About this skill

Quality Score

0/100

README

Chibi v3.0.9

A tiny JavaScript micro-library

Think it's OK to serve up 30KB over 3G just to manipulate a couple of DOM elements? Of course you don't because that's an asshat move and you're no asshat. You'll probably instead use a couple of lines of vanilla JavaScript, perhaps a little CSS :active with transitions, all while riding a unicorn bareback through a double rainbow, no hands.

Working on something a wee bit more complex? Unlike fat, grown-up frameworks and libraries, Chibi focuses on just the essentials, melted down and mixed with optimisation rainbows to create a really light micro-library that allows you to do awesome things, asshatory free.

The sweet, juicy bits

Chibi is really tiny: 7KB minified, 3KB gzipped, small enough to stick inline on single page web apps, saving an extra HTTP request.
Supports modern desktop and mobile browsers including Chrome, Firefox, Internet Explorer, Opera and Safari (see Browser Support below).
Even supports creaky old browsers like IE6, I don't know why you would do this.
No animation cruft, instead use CSS transitions like a nice person.
In modern browsers, Chibi typically executes DOM manipulation 20% to 50% faster than grown-up libraries.

The lumpy, chewy bits

Chibi's polyfill for document.querySelectorAll() is limited to browser CSS support and is not as fast as some dedicated selector engines. This means no input[type=text] or p:nth-child(even) selectors with IE6. Fortunately modern browser don't need this polyfill.
Ancient browsers that support neither document.querySelectorAll() nor window.getComputedStyle can bugger off.

Version 3 is a major update with many breaking changes. If it's difficult to embrace change, version 1 is still available here.

Browser Support

Chibi has been tested with and supports the following browsers:

Android Browser 2.1 or higher
Blackberry Browser 6 or higher
Chrome
Chrome Android
Firefox 3.5 or higher
Firefox Mobile
Internet Explorer 6 or higher
Internet Explorer Mobile 9 or higher
Opera 10 or higher
Opera Mini
Opera Mobile 10 or higher
Safari 3.2 or higher
Safari Mobile 3.2 or higher
Symbian^3 Browser or higher

Chibi should also work with any other browser that supports document.querySelectorAll().

Installation

Grab it from here or

npm install chibijs

Using Chibi

Chibi syntax is similar to that pioneered by jQuery: $(selector).method(). It intentionally uses the same $ namespace as jQuery because micro-libraries and grown-up libraries should never mix.

Chibi's supports standard CSS selectors but you can also pass in DOM elements directly:

CSS selector

$("p") // Returns an array of all paragraph elements
$("p").hide() // Hides all paragraphs
$("#foo").show() // Shows element with id equal to "foo"
$(".foo").hide() // Hides elements with "foo" CSS class

A DOM element selector, pointless

$(document.getElementsByTagName('p')).hide() // Hides all paragraphs

A more interesting DOM element selector

$($('p')[0]).hide() // Hides first paragraph

Methods

Chibi supports method chaining $(selector).method().anothermethod().evenmoremethods() of any method not returning a value (string, boolean, etc.).

$().ready(handler)

Fires handler when the DOM is ready.

Use to fire a function when the DOM is ready. Including a selector makes no sense for this method, don't do it.

$().ready(function(){
	// Do awesome
});

or perhaps

function foo() {
	// Do awesome
}

$().ready(foo);

$().loaded(handler)

Fires handler when the page is loaded.

Use to fire a function when the page is loaded. Including a selector makes no sense for this method, don't do it.

function foo() {
	// Do awesome
}

$().loaded(foo);

$(selector).each(function)

Executes a function on each matching element

each passes each matching element to the specified function.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	function foo(elm) {
		elm.style.color = "red";
	}

    $('p').each(foo); // Executes the foo function (sets the element style color to red) on all paragraph elements
    
    // An alternative way to achieve the above
    $('p').each(function(elm) {
		$(elm).css('color','red');  
    })
    
    
</script>
</body>
</html>

$(selector).first()

Finds the first matching element.

first will return an array containing the first matching element, useful when working with crappy browsers like IE6 with weak CSS pseudo support, especially when combined with method chaining.

$(selector).last()

Finds the last matching element.

last will return an array containing the last matching element.

$(selector).odd()

Finds matching odd elements.

odd will return an array containing matching odd elements.

$(selector).even()

Finds matching even elements.

even will return an array containing matching even elements.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<p>Foo</p>
<p>Bar</p>
<script>
    $('p').first(); // returns an array containing the first paragraph element
    $('p').last(); // returns an array containing the fourth paragraph element
    $('p').odd(); // returns an array of odd paragraph elements
    $('p').even(); // returns an array of even paragraph elements
</script>
</body>
</html>

$(selector).hide()

Hides matching elements.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').hide(); // hides all paragraph elements
</script>
</body>
</html>

$(selector).show()

Shows matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
p {display:none}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').show(); // shows all paragraph elements
</script>
</body>
</html>

$(selector).toggle()

Toggles visibility of matching elements.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p style="display:none">Bar</p>
<script>
	$('p').toggle(); // shows the second paragraph element, hides the first paragraph element
</script>
</body>
</html>

$(selector).remove()

Removes matching elements from the DOM tree.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').remove(); // removes all the paragraph elements from the DOM tree
</script>
</body>
</html>

$(selector).css(property, value)

Gets or optionally sets the CSS property for matching elements.

css with no value will return the CSS property string of the first matching element found. css will return the computed property value if the property isn't explicitly set which can vary between browsers. For example, an element with no explicit font weight will return 'normal' in Opera and Webkit browsers but '400' in Firefox and Internet Explorer browsers.

value will set the value of the CSS property for all matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p class="bold">Bar</p>
<script>
	$('p').css('font-weight'); // returns the "font-weight" of the first paragraph element
	$('p').css('color','red'); // sets all paragraph elements color to red
</script>
</body>
</html>

$(selector).getClass()

Gets class for first matching element found.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<div class="red">Foo</div>
<div class="mono">Bar</div>
<p >Foo</p>
<p class="mono">Bar</p>
<script>
	$('div').getClass(); // returns 'red', the class of the first div element
	$('p').getClass(); // returns undefined as the first paragraph element has no class set
</script>
</body>
</html>

$(selector).setClass(class)

Sets the class of all matching elements replacing any existing element class with this class.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p class="mono">Bar</p>
<script>
	$('p').setClass('red bold'); // sets the class to "red" and "bold" for all paragraph elements
</script>
</body>
</html>

$(selector).addClass(class)

Adds a class to all matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p class="mono">Bar</p>
<script>
	$('p').addClass('mono'); // adds the "mono" class to all paragraph elements
</script>
</body>
</html>

$(selector).removeClass(class)

Removes class from all matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p class="mono">Bar</p>
<script>
	$('p').removeClass('mono'); // removes the "mono" class from all paragraph elements
</script>
</body>
</html>

$(selector).toggleClass(class)

Toggles class for matching elements.

<!DOCTYPE html>
<html>
<head>
<style>
.bold {font-weight:900}
.red {color:red}
.mono {font-family:monospace}
</style>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p class="mono">Bar</p>
<script>
	$('p').toggleClass('mono'); // toggles the mono class on all paragraph elements
</script>
</body>
</html>

$(selec

Related Skills

node-connect

345.9k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

106.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

345.9k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

345.9k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。