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 noinput[type=text]
orp:nth-child(even)
selectors with IE6. Fortunately modern browser don't need this polyfill. - Ancient browsers that support neither
document.querySelectorAll()
norwindow.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
// Returns an array of all paragraph elements // Hides all paragraphs // Shows element with id equal to "foo" // Hides elements with "foo" CSS class
A DOM element selector, pointless
// Hides all paragraphs
A more interesting DOM element selector
// 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.
;
or perhaps
{ // Do awesome} ;
$().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.
{ // Do awesome} ;
$(selector).each(function)
Executes a function on each matching element
each passes each matching element to the specified function.
FooBar
$(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.
FooBarFooBar
$(selector).hide()
Hides matching elements.
FooBar
$(selector).show()
Shows matching elements.
FooBar
$(selector).toggle()
Toggles visibility of matching elements.
FooBar
$(selector).remove()
Removes matching elements from the DOM tree.
FooBar
$(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.
FooBar
$(selector).getClass()
Gets class for first matching element found.
FooBarFooBar
$(selector).setClass(class)
Sets the class of all matching elements replacing any existing element class with this class.
FooBar
$(selector).addClass(class)
Adds a class to all matching elements.
FooBar
$(selector).removeClass(class)
Removes class from all matching elements.
FooBar
$(selector).toggleClass(class)
Toggles class for matching elements.
FooBar
$(selector).hasClass(class)
Returns true if first matching element found includes the class.
FooBarFooBar
$(selector).html(html)
Gets or optionally sets the inner HTML of matching elements.
html with no arguments will return the HTML string of the first matching element found.
If the html argument is specified, this will replace the inner HTML of all matching elements.
FooBar
$(selector).htmlBefore(value)
Inserts html before all matching elements.
FooBar
$(selector).htmlAfter(value)
Inserts html after all matching elements.
FooBar
$(selector).htmlAppend(value)
Inserts html after all matching elements inner elements.
FooBar
$(selector).htmlPrepend(value)
Inserts html before all matching elements inner elements.
FooBar
$(selector).attr(property, value)
Gets or optionally sets the property for all matching elements.
attr with no value argument will return the property string of the first matching element found.
value will set the value of the property for all matching elements.
Foobar
$(selector).data(key, value)
Gets or optionally sets the data key value for all matching elements.
data with no value argument will return the data key value of the first matching element found.
value will set the value of the data key for all matching elements.
$(selector).val(value)
Gets or optionally sets the value of matching form elements.
val with no arguments will return the value string of the first matching form element found. For select lists, Chibi will return the selected option value string, if any. For select lists with multiple selects, Chibi will return an array of selected option value strings, if any.
value will set the value of matching form field elements. For select lists, this will select the option matching this value. For select lists with multiple selects, passing an array of values will select all options in the select list matching these values.
Foo Bar
$(selector).checked(boolean)
Gets or optionally sets checked status of checkbox or radio elements.
checked with no arguments will return the checked boolean of the first matching element found.
boolean will set the checked status of matching checkbox or radio elements.
$(selector).on(event, listener)
Adds an event listener to all matching elements.
on adds an event listener to all matching elements. There is no need to use the HTML event format ('on' + event) as Chibi will automatically prefix the event as required. on also supports passing window
and document
as the selector.
FooBar
$(selector).off(event, listener)
Removed an event listener from all matching elements.
off removed an event listener from all matching elements. There is no need to use the HTML event format ('off' + event) as Chibi will automatically prefix the event as required. off also supports passing window
and document
as the selector.
FooBar
$(selector).get(url, callback, nocache, nojsonp)
Sends a GET AJAX request, optionally firing a callback with the XHR responseText
and status
. Alias of $(selector).ajax with GET method
When nocache is true, a _ts
time stamp is added to the URL to prevent caching, yes, I'm looking at you Android Browser and iOS 6.
get supports JSON as a selector ({name:value}), useful for when you want to send data without using form elements.
For cross-domain requests, get uses JSONP by default but this is overridden when nojsonp is true. JSONP requests will apply any callback to callback=?
or similar in the get url.
$(selector).post(url, callback, nocache)
Sends a POST AJAX request, optionally firing a callback with the XHR responseText
and status
. Alias of $(selector).ajax with POST method
When nocache is true, a _ts
time stamp is added to the URL to prevent caching.
post supports JSON as a selector ({name:value}), useful for when you want to send data without using form elements.
$(selector).ajax(url, method, callback, nocache, nojsonp)
Sends an AJAX request, optionally firing a callback with the XHR responseText
and status
ajax uses the GET method if none is specified. When nocache is true, a _ts
time stamp is added to the URL to prevent caching.
ajax supports JSON as a selector ({name:value}), useful for when you want to send data without using form elements.
For cross-domain requests, ajax uses JSONP by default but this is overridden when nojsonp is true. JSONP requests will apply any callback to callback=?
or similar in the ajax url. The method is obviously always GET
for JSONP requests.
Modify, build, contribute
npm installgulp