Micro API designed for use in bootstrapped bookmarklets.

Amoeba was made from the following assumptions:

1. Smaller size is more important than features; existing libraries are too big and may also collide with other scripts.

2. Only modern browsers (IE9+) need to be supported; users are expected to be intermediate to advanced users.

It currently weighs in at just 2Kb minified and gzipped.

Exposes the internal $ (get) and $$ (getAll) functions and _ (util) namespace. References are passed into the callback function as arguments (so you could call them whatever you like).

_amoeba(function($, $$, _){
	var page = $("#page");
	if (page.match(".active")) {
		var divs = page.getAll("div");
	}
});

Finds an element matching the supplied selector or wraps an existing element.

• selector - (String or Element) The CSS selector matching the element you want - or an existing element.
• parent - (Element) Optional. Root element for the search.

(Wrapper or null) An instance of Wrapper or null.

Returns an array of elements that match the supplied selector.

• selector - (String) The CSS selector matching the elements you want.
• parent - (Element) Optional. Root element for the search.

(Array) An array containing elements.

Holds the following utility functions:

• load
• request
• type
• extend
• toQuery
• fromQuery
• template
• create

Loads a script onto the page and optionally executes a callback function on load.

• url - (String) The url of the script to be loaded.
• func - (Function) Optional. A function that is called when the script has loaded.

(Element) A script element.

_.load("http://amoeba-js.net/js", function(){
	alert("script loaded");
});

Creates and sends an XMLHttpRequest.

• url - (String) The url of the script to be loaded.
• func - (Function) A function that is called with the XMLHttpRequest object as an argument when the script has loaded.
• options - (Object) Optional.
  • data - (Object) Optional. An object containing the key-value pairs sent with the request.
  • method - (String) Optional. The mode of the request; "get" or "post". Default is "get".
  • async - (Boolean) Optional. A boolean to set asynchronous mode on or off. Default is true.
  • headers - (Object) Optional. An Object containing additional headers.

(XMLHttpRequest) An XMLHttpRequest object.

_.request(
	"/api/data.json",
	function (data) {
		data = JSON.parse(data);
		console.log(data);
	},
	{
		data: {
			id: "0123456789"
		},
		method: "post"
	}
);

Identifies the type of the supplied variable.

• subject - (mixed) The variable whose type is to be identified.

(String) A string: "boolean", "number", "string", "array", "object", "function", "regexp", "date", "math", "location", "element", "nodelist", "htmlcollection" or "undefined".

var myVariable = ["hello", "world"];
var myType = _.type(myVariable);
// myType == "array"

Extends (or overwrite) a given object with the properties of the supplied object properties recursively.

• subject - (Object) Object to extend.
• properties - (Object) Object containing properties to extend with.

var myObject = {
	message: "hello",
	recipient: "steve"
};
_.extend(myObject, {recipient: "world"});
/*
	myObject == {
		message: "hello",
		recipient: "world"
	}
*/

Returns a query string built from the supplied object.

• subject - (Object) Object to transform into a query string.

var myObject = {
	message: "hello",
	recipient: "world"
};
var myQueryString = _.toQuery(myObject);
// myQueryString == "message=hello&recipient=world"

Returns an object containing the query string data contained in the supplied string.

• string - (String) The string to be transformed.

// location.href == "http://www.mydomain.com/index.php?message=hello&recipient=world"
var myObject = _.fromQuery(location.href);
/*
	myObject == {
		message: "hello",
		recipient: "world"
	}
*/

Returns a template string populated with the data of the supplied object.

• template - (String) A string with tokens.
• object - (Object) An object containing the data needed for populating the template.
• delimiters - (Array) Optional. An array containing 2 strings that define how tokens are marked up within the supplied template. Defaults are curly braces; "{" and "}".

var myTemplate = "{message}, {recipient}!";
var myObject = {
	message: "hello",
	recipient: "world"
};
var myMessage = _.template(myTemplate, myObject);
// myMessage == "hello, world!"

Returns a newly created DOM element with the supplied properties from the options object. The created element is appended to the parent element if supplied. If a context is The options argument can be omitted in favour of the parent argument.

• tag - (String) Name of the element.
• options - (Object) Optional. An object containing properties for the element.
• parent - (Element) Optional. An element to which the created element should be appended.
• context - (String) Optional. A string that specifies the relation to the parent element - see #.insert.

(Wrapper) A wrapped element.

var myElement = _.create(
	"button",
	{
		style: {
			backgroundColor: "red",
			borderColor:	"green",
			color:			"green"
		},
		innerHTML: "click",
		onclick: function(){
			alert("hello, world!");
		}
	},
	document.body,
	"top"
);
// myElement == <button style="background-color: red; border-color: green; color: green;" onclick="alert(\"hello, world!\");">click</button>

Wrapped elements have the following properties and methods available:

• el
• insert
• remove
• get
• getAll
• children
• siblings
• next
• prev
• contains
• matches
• addClass
• removeClass
• on
• off

The actual DOM element being wrapped.

Inserts the supplied content into the wrapped element.

• content - (String, Number, Element, Array or HtmlCollection) Content to be appended. If an array is supplied it should only consist of strings (text or html), numbers or elements.
• context - (String or Number) Optional. A string or number that specifies the relation to the parent element;
  • "top" - Insert as the first elements inside parent.
  • "bottom" - Insert as the last elements inside parent.
  • "before" - Insert before parent (outside).
  • "after" - Insert after parent (outside).
  • (Number) - Corresponds to the index of the childnodes where content will be inserted. Negative numbers have their index calculated in reverse. Default is "bottom".

(Wrapper) The wrapped element.

Remove the element from the DOM.

(Wrapper) The wrapped element.

Finds the first element that matches the provided selector.

• selector - (String) The CSS selector matching the element to be returned.

(Wrapper|Null) An element or null if no matching element is found.

var body = $("body");
var firstUserItem = body.get("ul.users li");
var checkedRadio = body.get("input[name='optIn'][type='radio'][checked]");

Returns an array containing all elements that match the supplied selector.

• selector - (String) See #.get.

(Array)

var body = $("body");
var userItems = body.getAll("ul.users li");

Returns an array of child elements. If the selector argument is supplied only the elements matching it will be returned.

• selector - (String) Optional. See #.get.

(Array)

var ul = $("ul");
var activeUserItems = ul.children(".active");

Returns an array of sibling elements. If the selector argument is supplied only the elements matching it will be returned.

• selector - (String) Optional. See #.get.

(Array)

var firstDiv = $("body div");
var otherDivs = firstDiv.siblings("div");

Returns the next sibling element. If the selector argument is supplied the first matching sibling element proceeding it will be returned.

• selector - (String) Optional. See #.get.

(Wrapper|Null)

var firstDiv = $("body div");
var nextDiv = firstDiv.next("div");

Returns the previous sibling element. If the selector argument is supplied the first matching sibling element preceding it will be returned.

• selector - (String) Optional. See #.get.

(Wrapper|Null)

var divs = $$("body > div");
var spanBeforeLastDiv = divs[divs.length - 1].prev("span");

Returns true if the supplied child is a descendant of the wrapped element.

• child - (Wrapper|Element) The element to test against.

(Boolean)

var body = $("body");
var div = $("div");
if (body.contains(div)) {
	// do stuff
}

Returns true or false for whether the supplied selector matches the element.

• selector - (String) Selector to match against wrapped element.

(Boolean)

$("div.class").matches(".class");

Adds the supplied classname if it doesn't exist on the wrapped element.

• className - (String) The classname to add.

(Wrapper) The wrapped element.

$("div.user").addClass("active");

Removes the supplied classname if it exists on the wrapped element.

• className - (String) The classname to remove.

(Wrapper) The wrapped element.

$("div.active").removeClass("active");

Add an event to the wrapped element.

• event - (String) The type of event to add. Can be extended with a selector to enable event delegation (note this has the side-effect of not working with #.off).
• func - (Function) The function to call on the event.

(Wrapper) The wrapped element.

$("div").on("click span", function(){
	// only react on clicks on span elements inside the div. 
});

Remove an event from the wrapped element.

• event - (String) The type of event to remove.
• func - (Function) The function to remove.

(Wrapper) The wrapped element.

var handleClick = function(){
	// do stuff
};
$("button").off("click", handleClick);