Micro API designed for use in bootstrapped bookmarklets.
Amoeba was made from the following assumptions:
-
Smaller size is more important than features; existing libraries are too big and may also collide with other scripts.
-
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:
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);