Tiny.jsA Tiny JavaScript Framework

Returns whether or not all the elements in the tiny object have the given class.

Adds the given class to all the elements in the tiny object.

Removes the given class from all the elements in the tiny object.

Sets the CSS of the elements in the tiny object. A property/value pair can be passed, or a JSON object, like so:

$('#foo').css('color', 'red'); // Works
$('#foo').css({
	'color': 'red',
	'background': 'black'
}); // Works

Hides all the elements in the tiny object.

Shows all the elements in the tiny object.

Toggles the visibility of the elements in the tiny object.

Much like the css method, the attribute method accepts either an attribute/value pair or a JSON object of key/value pairs:

$('#foo').attr('data-awesome', 'yes'); // Works
$('#foo').attr({
	'data-awesome': 'yes',
	'data-easy': 'yes'
}); // Works

Executes the function on each of the elements passed. The parameters passed are the key, and the object as a whole. For example:

$('pre').each(function(key, obj) {
	console.log(this); // The current object
	console.log(key); // The current position in the tiny object (e.g. 0)
	console.log(obj); // The tiny object
});

Returns whether all the elements pass a given filter. The filters are defined in $.is—this makes the filters extensible. Tiny.js comes with three built in filters:

• hidden—returns true if the element is hidden
• visible—returns true if the element is visible
• empty—returns true if the element has no child nodes

Extending the Tiny.js filters is easy: simply define a new filter on the $.is JSON object, and return true if the element passes the filter, and false otherwise:

// Define a new filter that returns whether or not the element has red text
$.is['colored-red'] = function() {
	return this.style.color === 'red';
};

Filters out the elements that do not pass the filter defined in $.is. See is() for more information about filters.

Updates the innerHTML of each of the elements. If no string is passed, it returns the innerHTML of the first element (or false if the element does not exist).

Updates the value of each of the elements (basically html() for inputs and textareas). If no string is passed, it returns the innerHTML of the first element (or false if the element does not exist).

Updates the innerHTML of each of the elements to match the template with the values substituted in for the placeholders. The template parameter accepts a string, a DOMObject, or a tiny object. Placeholders are defined as ${placeholdername}.

$('#foo').template('Hi, my name is ${name}', {
	'name': 'Bar'
}); // #foo's innerHTML is now 'Hello, my name is Bar'

Replaces each of the elements with its next sibling element. The element is removed if it does not have a next sibling. A simple selector (class name, tag name, or ID) can also be passed; if a selector is passed, each element is replaced with the next sibling element that matches that selector (or removed if there is no such element).

Replaces each of the elements with its previous sibling element. The element is removed if it does not have a previous sibling. A simple selector (class name, tag name, or ID) can also be passed; if a selector is passed, each element is replaced with the previous sibling element that matches that selector (or removed if there is no such element).

Replaces each of the elements with its parent element. The element is removed if it does not have a parent element. A simple selector (class name, tag name, or ID) can also be passed; if a selector is passed, each element is replaced with the first parent element that matches that selector (or removed if there is no such element).

Appends a new element to each of the elements in the tiny object. If an object is passed as the first parameter, that object is appended; if a string is passed, a new object is created and that is appended. If innerHTML and attributes parameters are passed, the innerHTML and the attributes of the element will also be set.

Prepends a new element to each of the elements in the tiny object (i.e. the object is added as the first child). If an object is passed as the first parameter, that object is appended; if a string is passed, a new object is created and that is appended. If innerHTML and attributes parameters are passed, the innerHTML and the attributes of the element will also be set.

Binds a function to an event. If a selector is passed as the second parameter, instead of a function, the event is delegated. For example:

// Bind the click event to #foo
$('#foo').on('click', function(e) {
	// Do something with this here
});

// Delegate the click event to any LIs inside #foo
$('#foo').on('click', 'li', function(e) {
	// Do something with the li here
});

Unbinds the event from each of the elements.

Performs an AJAX request for the given URL.

The options passed to $.ajax are in the form of a JSON object. An example using all the options would look like this:

$.ajax({
	url: 'http://something.com', // The URL that you are requesting
	type: 'get', // Whether you are performing a GET or POST request (defaults to get)
	data: 'foo=bar', // A string of the data you wish to send; if a JSON Object is passed it will be converted into a string
	success: function(msg, code) {
		// This function is called if the request is a success
		// Msg now holds the text response
		// Code holds the status code of the request
	},
	error: function(code) {
		// This function is called if the request fails
		// Code holds the status code of the request
		// If the code is 418 I'm a Teapot the browser could not create an AJAX request
	},
	async: true // Whether or not to perform the AJAX request asynchronously
});

Queries the DOM (or the parent if it is passed) for the selector. The same types of selectors are allowed as when creating the tiny object. This is a document.querySelectorAll polyfill (it uses the browser's native document.querySelectorAll if it exists).

Returns the more helpful type than typeof obj, using the function created by Angus Croll. For instance, $.type([1,2,3]) will return array, while typeof [1,2,3] will return object.