- Javascript Core API extension
- HTML document traversal and manipulation
- Event-handling
- Ajax
- Animation
The library provides additional functionality for the Javascript core Array, String, Number, Function, Element classes. You can choose to either extend those classes with these methods via modifying the source and setting the Lib.__proto switches to true, or keep the functionality seperate.
var array1 = [1, 5, 8, 11];
Lib.utils.array.each(array1, function(val, index, arr) {
console.log('Element with index $(index) -> val: $(val)');
});
// Setting the Lib.__proto.Array switch to true enables the following
array1.each(function(val, index, arr) {
console.log('Element with index $(index) -> val: $(val)');
));Wrapper class Query with chainable methods and support for CSS selectors.
// Append 2 new child divs into element with id 'elem1' and iterate over its children.
Query("#elem1").append("<div>Div1</div>").append("<div>Div2</div>").children().each(function(el) {
window.alert(el.innerHTML);
});Append child div to element with id elem1 when button with button1 id is clicked.
Query("button#button1").click(function(ev) {
Query("#elem1").append("<div>div2</div>");
});Make a request to GET all listed universities in a specified country and do something once it is done depending on request-status.
var req = Lib.utils.ajax.request({
type: "GET",
url: "http://universities.hipolabs.com/search",
params: {
"country": "United States"
},
complete: function(xhr) {
// do something if the request is completed
},
error: function(xhr) {
// do something if the request fails
}
});Very slowly transition #elem1 CSS-style to specified animation_style.
var animation_style = {
"color": "red",
"width": "1250x",
"height": "200px",
"backgroundColor": "yellow",
"fontSize": "40pt",
"borderWidth": "5px",
"borderColor": "green",
};
Query("#elem1").animate(animation_style, "xx-slow");
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent