A lightweight (2KB!) javascript library to do basic DOM updates, and ajax calls
Either grab xu
from the dist/
folder in the repo or
npm install --save xu
then either
var xu = require('xu')
(for browserify/webpack users)
or
include xu.js
in your html file
<script src="xu.min.js"></script>
and reference xu
in your javascript
// Gives you the element
var nav = xu('.nav');
// Can also be accessed dynamically (no variable declaration)
xu('#dropdown').css({
'display': 'block'
});
xu.js uses gulp to build
After making changes in src/xu.js
run
gulp build
And see changes reflected in dist/
xu.js is currently in development. Below are a list of all of the (currently) available functions
- css
- setClass
- appendClass
- removeClass
- hasClass
- toggleClass
- attr
- on
- text
- ajax
- get
- post
- each
Returns an array of all elements matching the selector
Usage:
xu(selector);
Example:
xu('.nav');
xu('#nav');
xu('[data-nav]');
Add styling to an element
Usage:
xu(selector).css(properties: object);
Example:
xu('.nav').css({
'display': 'block',
'position': 'relative',
'top': '50px',
'background': 'green'
});
Override the elements class names with the ones provided
Usage:
xu(selector).setClass(classes: string);
Example:
xu('.nav').setClass('nav navbar-default');
Append to the elements class names (not overriding)
Usage:
xu(selector).appendClass(classes: string);
Example:
xu('.nav').setClass('navbar-default navbar-static');
Removes the class specified from the selected element
Usage:
xu(selector).removeClass(className: string);
Example:
xu('img').removeClass('img-responsive');
Returns true or false if the class is present in the xu instance
Usage:
xu(selector).hasClass(className: string)
Example:
if (xu('.nav').hasClass('nav')) {
/* the element has the class */
} else {
/* ... */
}
Either adds or removes the specified class depending on if the element has it or not currently
Usage:
xu(selector).toggleClass(className: string);
Example:
xu('#dropdown').toggleClass('expanded');
When passed a string, returns the attribute of the element specified
When passed an object, sets the attributes specified on the element
Usage:
xu(selector).attr(attributeName: string);
xu(selector).attr(attributes: object);
Example:
xu('img').attr('src'); //returns src attribute i.e 'img/grass.png'
xu('img').attr({
src: 'img/water.png'
});
Replaces the text of the element, or if called without parameters returns the content of the element(s)
Usage:
// Getter
xu(selector).text();
// Setter
xu(selector).text(newText: string);
Example:
xu('.alert').text('Be careful!');
// returns 'Be careful!'
// If there are more than one '.alert' items it will return an array of strings
console.log(xu('.alert').text());
Basic GET/POST ajax calls. Returns a promise. Called without function parameters on xu (no brackets)
Usage:
xu.ajax(options: object).then(success: function, error: function);
Example:
// Default header for POST request is Content-type: application/json
xu.ajax({
method: 'get',
url: 'https://reddit.com/.json',
data: {
},
headers: {
}
})
.then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
Shorthand for xu.ajax get request
Usage:
xu.get(url: string).then(success: function, error: function);
xu.get('https://reddit.com/.json')
.then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
Shorthand for xu.ajax post request
Default Content-type of application/json
Usage:
xu.post(url: string, data: object, headers: object).then(success: function, error: function);
xu.post('http://example.com/submitForm', {username: 'joebob'}, {'Authorization', 'bearer <token>'})
.then(function(response) {
console.log(response);
}, function(error) {
console.log(error);
});
Iterate over arrays/objects with ease
Usage:
xu.each(object, callback(key, value));
xu.each(array, callback(index, value));
Example:
xu.each([1, 2, 3, 4, 5], function(index, value) {
console.log(index + ': ' + value);
});
xu.each({name: 'bob', age: 32}, function(key, value) {
console.log(key + ' = ' + value);
});
Iterate over all elements matching that query. Callback function takes an element parameter that is an instance of xu
so all of xu
's
functions are accessible via that variable.
Usage:
xu(selector: string).each(callback: function(iterator, element));
Example:
xu('li').each(function(iterator, element) {
console.log(iterator + ': ' + element.text());
});