fluent.js
About
fluent.js is light-weight dom library.
This supports following functions.
API
Core
Constructor
$([selector][, context])
each(callback)
$("div").each(function(element, index) {
//any process
});
Event
bind(type, callback)
var clickCallback = function(e) {
console.log(e);
};
$("#id").bind("click", clickCallback);
//bind event to element
unbind(type, callback)
var clickCallback = function(e) {
console.log(e);
};
$(".class").unbind("click", clickCallback);
//unbind event from element
delegate(type, selector, callback)
var touchstartCallback = function(e) {
console.log(e);
}
$("#parentId").delegate("touchstart", ".childClass", touchstartCallback);
//start to delegate event
//elements will be searched by selector and fired
//in context which Fluent object contains
undelegate(type, selector, callback)
var touchendCallback = function(e) {
console.log(e);
};
$(".parentClass").undelegate("touchend", ".childClass", touchendCallback);
//end to delegate event
Traversing
filter(callback)
var filtered = $("article").filter(function() {
return element.classList.contains("hoge");
});
//filter elements with callback function
map(callback)
var mapped = $("section").map(function(element) {
return element.classList.add("hoge")
});
//execute callback to elements,
//and return affected elements as Fluent object
find(selector)
var foundElements = $("body").find(".className");
Manipulation
html(value)
$(".className").html("<div>12345</div>");
//set value to innerHTML property
text(value)
$("li").text("setText");
//set value to textContent property
val(value)
$("input").val("value");
//set value to value property
attr(key, value)
$("img").attr("src", "http://.../hoge.png");
//set value to attribute
data(data, value)
$("span").data("tmp", "keepvalue");
//set value to dataset
css(key, value)
$("div").css("color", "red");
//set value to key of style structure
addClass(value)
$(".testClass").addClass("addClass");
//add class to elements
removeClass(value)
$(".testClass").removeClass("removeClass");
//remove class from elements
toggleClass(value)
$(".testClass").toggleClass("toggleClass");
//toggle class of elements
append()
$("#container").append(elements);
//append element
prepend()
$("#container").prepend(elements);
//insert element
show()
$(".testClass").show();
//show elements
hide()
$(".testClass").hide();
//hide elements
others are to be announced...
License
Copyright 1000ch
Lisenced under the GPL Lisence version 3.