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