jbone

jBone

http://kupriyanenko.github.io/jbone/

JavaScript Library for DOM manipulation in modern browsers with jQuery-compatible API.

Replacement jQuery for Backbone in browsers (2.5kb gzipped, faster than jQuery/Zepto)

Why jBone?

jBone is extremely small (2.5kb) and realy fast library. Main jBone idea - it's as much as possible to use native JavaScript methods in your project.

jBone it is ideal solutions for applications based on Backbone and running on mobile devices. jBone project was created to allow people using Backbone without jQuery.

Get it

With bower

$ bower install jbone --save

With component

component install kupriyanenko/jbone

With nodejs or browserify

$ npm install jbone --save

Use it

Add a <script> element for jbone.js

<script src="path/to/jbone/dist/jbone.js"></script>

Or include like npm module (with nodejs or browserify)

var $ = require('jbone');

And write awesome code:

var $input = $("<input>", {
    "class": "name"
}).val("John");

$input.on("click.space", function(e) {
    console.log("clicked on", this);
});

$input.trigger("click");

$input.off(".space");

Extend it

jBone.fn.addClass = function(className) {
    var i = 0,
        length = this.length;

    for (; i < length; i++) {
        this[i].classList.add(className);
    }

    return this;
};

$(".header").addClass("loaded");

AJAX, Deferred

This part is not covered on jBone. Yuo can select one of a huge amount implementations AJAX and Promises/A+.

For example: when, Q, simply-deferred, AJAX.

Example AJAX connecting:

// connect reqwest on your page https://rawgithub.com/ded/reqwest/master/reqwest.min.js

jBone.ajax = reqwest.compat;

$.ajax({
    url: "http://example.com"
});

Example Deferred connecting:

// connect simply-deferred on your page https://rawgithub.com/sudhirj/simply-deferred/master/deferred.min.js

Deferred.installInto(jBone);

var deferred = $.Deferred();

$.when(deferred).then(function(response) {
    // some code
});

API

jBone

• jBone(selector[, context])
• jBone(element)
• jBone(elementArray)
• jBone(jBoneObject)
• jBone(html[, attributes])

Attributes

• .attr(attributeName)
• .attr(attributeName, value)
• .attr(attributes)
• .val()
• .val(value)
• .css(propertyName, value)
• .css(properties)

Data

• .data(key, value)
• .data(obj)
• .data(key)
• .data()

Event

• .on(event[, selector], handler)
• .one(event[, selector], handler)
• .off(event[, handler])
• .trigger(event)

Manipulation

• .html()
• .html(content)
• .append(content)
• .appendTo(target)
• .empty()
• .remove()

Traversing

• .find(selector)
• .get(index)
• .eq(index)
• .parent()
• .toArray()

Utilities

• jBone.merge(first, second)
• jBone.contains(container, contained)
• jBone.extend(target[, object1][, objectN])

Array methods

• .pop()
• .push()
• .reverse()
• .shift()
• .sort()
• .splice()
• .unshift()
• .concat()
• .join()
• .slice()
• .indexOf()
• .forEach()
• .every()
• .some()
• .filter()
• .map()
• .reduce()
• .reduceRight()

Running the Tests

Node

1. npm install
2. npm test

Browsers

1. bower install
2. Open page with tests in browser test/tests.html