kylebarrow / chibi Goto Github PK

A tiny JavaScript micro-library

JavaScript 58.09% HTML 41.91%

chibi's Introduction

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>

$(selector).hasClass(class)

Returns true if first matching element found includes the 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>
<div class="red">Foo</div>
<div class="mono">Bar</div>
<p>Foo</p>
<p class="mono">Bar</p>
<script>
	$('div').cls('red'); // returns true as the first div element includes the 'red' class
	$('p').cls('mono'); // returns undefined as the first paragraph element doesn't include the 'mono' class
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').html(); // returns an inner HTML "Foo" of the first paragraph element
	$('p').html('<i>Foobar</i>'); // Sets the inner HTML of all paragraph elements to "<i>Foobar</i>"
</script>
</body>
</html>

$(selector).htmlBefore(value)

Inserts html before all matching elements.

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

$(selector).htmlAfter(value)

Inserts html after all matching elements.

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

$(selector).htmlAppend(value)

Inserts html after all matching elements inner elements.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').htmlAppend('<i>Foobar</i>'); // Inserts "<i>Foobar</i>" after all paragraph child elements
</script>
</body>
</html>

$(selector).htmlPrepend(value)

Inserts html before all matching elements inner elements.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	$('p').htmlPrepend('<i>Foobar</i>'); // Inserts "<i>Foobar</i>" before all paragraph child elements
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p><a href="http://en.wikipedia.org/wiki/Foobar">Foobar</a></p>
<script>
	$('a').attr('href'); // returns the "href" property value "http://en.wikipedia.org/wiki/Foobar" of the first link element
	$('a').attr('target','_blank'); // sets the "target" property for all link elements to "_blank"
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p data-test="foo"></p>
<p data-test="bar"></p>
<script>
	$('p').data('test'); // returns "foo" for data key "test" of first paragraph element found
	$('p').data('test','foobar'); // sets the date key "test" value to "foobar" on all matching paragraph elements
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<form>
<input type="text" value="Foobar" name="text">
<select multiple="multiple">
	<option value="foo">Foo</option>
	<option value="bar" selected="selected">Bar</option>
</select>
</form>
<script>
	$('input').val(); // returns "Foobar"
	$('input').val('Foo Bar'); // sets the value for all input elements to "Foo Bar"
	$('select').val(); // returns "bar", the selected option value 
	$('select').val('foo'); // selects the option matching "foo"
	$('select').val(['foo','bar']); // selects the options matching "foo" or "bar" values
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<form>
<input type="checkbox" value="Foobar" name="chk">
</form>
<script>
	$('input').checked(true); // checks the checkbox
	$('input').checked(); // returns true
	$('input').checked(false); // unchecks the checkbox
	$('input').checked(); // returns false
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	function foo() {
		// Do awesome
	}

	$('p').on('click',foo); // adds the 'foo' click event listener to all paragraphs
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<p>Foo</p>
<p>Bar</p>
<script>
	function foo() {
		// Do awesome
	}

	$('p').on('click',foo); // adds the 'foo' click event listener to all paragraph elements
	$('p').off('click',foo); // removes the 'foo' click event listener from all paragraph elements
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<form>
<input type="text" value="Foobar" name="text">
</form>
<script>
	// XHR all form data using "GET" to "ajax.html"
	$('form').get('ajax.html');

	// XHR the JSON using "GET" to "ajax.html"
	$({text:'Foo Bar'}).get('ajax.html');

</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<script>
	// JSONP
	$().get('https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?',function(data,status){
		// Do awesome
	});

	// JSONP with JSON query
	$({sort: "created", direction: "asc", callback: "?"}).get('https://api.github.com/users/kylebarrow/repos',function(data,status){
		// Do awesome
	});
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<form>
<input type="text" value="Foobar" name="text">
</form>
<script>
	// XHR the JSON using "POST" to "ajax.html"
	$({text:'Foo Bar'}).post('ajax.html');	
	
	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$('form').post('ajax.html',function(data,status){
		// Do awesome
	},true);
</script>
</body>
</html>

$(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.

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<form>
<input type="text" value="Foobar" name="text">
</form>
<script>
	// XHR all form data using "GET" to "ajax.html"
	$('form').ajax('ajax.html');

	// XHR the JSON using "GET" to "ajax.html"
	$({text:'Foo Bar'}).ajax('ajax.html');

	// XHR all form data using "POST" to "ajax.html", returns responseText and status, adds a cache busting time stamp
	$('form').ajax('ajax.html',"POST",function(data,status){
		// Do awesome
	},true);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="chibi-min.js"></script>
</head>
<body>
<script>
	// JSONP
	$().ajax('https://api.github.com/users/kylebarrow/repos?sort=created&direction=asc&callback=?','GET',function(data,status){
		// Do awesome
	});

	// JSONP with JSON query
	$({sort: "created", direction: "asc", callback: "?"}).ajax('https://api.github.com/users/kylebarrow/repos','GET',function(data,status){
		// Do awesome
	});
</script>
</body>
</html>

Modify, build, contribute

npm install
gulp

FIN

chibi's People

Contributors

Stargazers

Watchers

Forkers

gijs mikeulkeul naugtur tjk dydycloud microjs andrewsmyk saas786 viplifes rskowera martinsv ericduran jagreehal yohn bitbonsai mbarki-mohamed avidys tegeek shamagir wix-alex enlore mightypork daicaga mazamengr mircode precociouslydigital mjuanfe kaperstone tony-kunliu onceclick ljmerza jl26123 ncou dandyxu flex2016 alxerg the-cc-dev vikingmage triptych sbaber977 myst6re zilveer nabeelafsardev marcin-majewski-sonarsource recongscript carlosestevezmrf samarpw carlosjordandev softexpert rsmaestro hnfork

chibi's Issues

AjaxStart and AjaxComplete Callback

Hi,

Would it possible if AjaxStart and AjaxComplete be incorporated in ChibiJS?

$().find use a function as filter

hi Kyle

There's any possibility find use a function as parameter using to filter nodes?
Something like this:

var foundElements = $("div").find( function(node) { 
// do something awesome here....
});

Event Delegation support

It would be nice if Chibi has Event Delegation support - maybe as the 2nd argument of .on(), like many of popular solutions out there. So code like this would be possible:

$('ul').on('click', 'li', foo);

Multiple forms using ajax on one page failing to get input data

When there are multiple forms on a page, the ajax function seems unable to obtain input values for all forms except the last one in the html flow. The actually ajax submission is made but without any data. Only the form that sits last in the html file is submitted with data.

I have tried various combinations using ajax(), post(), get() and the results are the same.

The forms themselves work just fine when I use a vanilla js ajax for each one, but fail using chibi's ajax functions.

Nodes variable is shared across all invocations of $()

Any invocation of $('selector') resets the nodes value. That can lead to very unexpected behavior.
Consider this scenario:

<p class="foo">footext</p>
<p class="bar">bartext</p>

var foo = $('.foo');
var bar = $('.bar');

console.log(foo.html());

bartext will be logged instead of the expected footext.

I would suggest not scoping nodes at the library level.

How can I change `content-type` in `POST` requests?

How do you select children with chibli?

Sorry if this is easy but is there a trick to searching all the children of an element?

Was trying:

$('#dropdown-main .dropdown').toggle();

$('#dropdown-main > .dropdown').toggle();

$('#dropdown-main > ul > li .dropdown').toggle();

$('#dropdown-main > ul > li > .dropdown').toggle();

$($('#dropdown-cart').find('.dropdown')).toggle();

.dropdown is not a direct descendant of #dropdown-main - any pointers in the right direction would be much appreciated.

Cheers

Idiomatic way to find out whether a checkbox is checked?

I'm having trouble using Chibi to determine whether a checkbox is checked.

<input type="checkbox" id="mycb">

I tried the following:

$('#mycb').checked //==undefined
$('#mycb').val() //=="on" if checkbox is ON or "null" if it is off
$('#mycb').attr('checked') //==null

I'm not sure if I should depend on the .val() returning on in all browsers.

On further inspection, I noticed that $('#mycb') returns an array instead of just a single checkbox (this is in Chrome 44 on Linux). Thus, I can use $('#mycb')[0].checked but again this seems to contradict the Chibi docs.

So, whats the idiomatic way to do this in Chibi? I have currently by-passed Chibi and am directly doing document.getElementById('mycb').checked for this particular case, but I'd prefer to use Chibi if there is a way.

Typescript definition files?

Are there any plans to provide a .d.ts file so that chibi can be used from Typescript?

General Questions

What do you mean "pointless"?
https://github.com/kylebarrow/chibi#a-dom-element-selector-pointless

Does chibi simplify cross-browser differences?

This article complains that jquery and vanilla js can't mix, cuz jq is all or nothing-- eg, doesn't return a nodelist. How about chibi?
"By returning a jQuery object rather than a NodeList, built-in browser methods are essentially off limits, meaning you’re locked into the jQuery way of doing everything."
https://css-tricks.com/now-ever-might-not-need-jquery/#article-header-id-15

thx!

How about event handling?

I like the idea of keeping it as small as possible, but by adding just a bit more code you can have a killer-feature.
Only thing I really hate doing in vanilla-javascript is cross-browser events and triggering them from code.
I guess it could be implemented in less than 1KB of minified code.

htmlAppend appends in reverse order?

That seems bit strange to me and I do not understand fully what happens there (I'm a javascript noob) but the effect is quite opposite to what I expect.

var data = self.model.getAll();
var template = new t(document.getElementById("nowplaying-data-t").innerHTML);
var html = template.render({data: data});
$("#nowplaying-info").htmlAppend(html);

I have some text rendered from template that contains 2 lines of text. Trying to debug in Chrome I see the order in html is right, but the result after htmlAppend is reversed. Everything is fine if I add this text using html.

How to resolve the conflict with jQuery?

Is .data() supported similarly to jQuery?

Is it possible to request/save data to an element?

Cross Domain Ajax?

I couldn't figure out a way to do cross-domain AJAX via JSONP using the provided AJAX method. Is it possible? If not, I'd love to see this supported; I'd then have absolutely no need for jQuery.

Framework vs Library

This does not look like a framework (library perhaps?)

Please see:
http://stackoverflow.com/q/3057526/1348195

http://martinfowler.com/bliki/InversionOfControl.html

Why you did not use Prototype Closure in building this library, which saves memory?

I tried but failed to build your library version in Prototype way. Can you tell me why it does not work in this way & why it does not return nodes as array to be used with Native JavaScript methods like forEach, slice. thanks

this isn't this on IE8..

http://jsfiddle.net/BySE9/

Works as expected on chrome etc.. returns undefined on IE..

Turns out this is the window on IE whereas it is what it's meant to be on Chrome. Unfortunately my JS knowledge isn't too great so please can you take a look? I love Chibi's smallness but this is a bit of a showstopper for me :(

Cheers,
John.

Chibi as implied global

Hi! I just meet chibi and I want to use it in a project. But how use it as an implied global in a more OO approach? I tried this:

(function ($) {
    // ...
}(chibi));

But without success... Can you help me with that?

Regards!

Please publish to npm

Would be great if we can have this published to npm, so can just have this with npm install. And processed with browserify or webpack.

$(document).width() in chibi?

Hi :)
How do I do $(document).width() as known in jQuery with chibi?

Thanks

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.