Tire

Tire is a lightweight JavaScript library for modern browsers. The syntax is inspired from jQuery. It's modular so you can extend it however you like, also replace our features with your own.

Fixes for older browsers increase the file size and we don't want that. So if you like a library to support Internet Explorer 6 or 7, Tire isn't for you.

That said, all features can probably be rewritten/extended to add support for old browsers. In that case, you have to create a fork of Tire and fix it yourself.

Why did we create Tire?

To offer a more lightweight alternative to libraries such as jQuery, Prototype and Zepto. Sometimes you just need the most basic features and that's where Tire comes into the picture.

Browser support

Older browsers

Tire doesn't support Internet Explorer 6 or 7 as it would increase the file size.

Why don't you have this method?

We don't want to create a jQuery or Prototype clone. Nor do we want a big file size. Those are the biggest reasons we don't support all methods.

If you think that Tire need a certain method please create an issue and tell us why!

Download

Current release: 1.3.1

Please do not hotlink directly to the files hosted on code.tirejs.com. Download a local copy instead.

Source on GitHub

Core

$()

$(selector [, context]) Tire

$() is just a shortcut for tire(). If another framework or library is using $() and you like to continue to use it, you can use tire's $.noConflict() to fix it.

This function is used to create Tire collections, wrap DOM nodes or create elements from HTML string. Tire support the basic selectors, but in a modern browser advanced selectors are supported as well via document.querySelectorAll.

The function will take two parameters, the first is a selector and the second is the context (or attribute object) where you are searching for the DOM node. If no context is given the context will be document. If a tire collection is given it will just return the given collection.

$('#foo') // returns the element with the id foo

$('.bar') // returns all elements with the class name bar.

$('p') // returns all elements with the tag name p.

// More advanced selectors via document.querySelectorAll.

$('input[type=text]') // returns all input elements with the type text.

$('a, div') // returns all a and div elements;

$('ul li') // returns all li elements that are inside an ul tag.

$('ol > li') // the same as above but for ol tag.

$('<a />', { href: '#', title: 'a' }); // Add attributes to the tag (1.1.1+).

If a function is given it will be used as a callback for the dom ready event. $(function () {}) is a shortcut for $.ready() or $().ready. When the dom is ready, the function is executed.

$.contains

$.contains(container, contained) boolean

Check to see if a DOM element is a descendant of another DOM element.

$.each

$.each(object, callback) collection

Iterate over array items or object key-value pairs. 

$.each([1, 2, 3], function (index, item) {
  // Item is 1, 2, 3 and so on. Index is the position in the array
});

$.each({ hello: 'world' }, function (key, value) {
  // Key is `hello` and value is `world`
});

$.extend

$.extend(target, [source [, source2, ..]]) target

Extends target with members of other objects.

$.isArray

$.isArray(object) boolean

Returns true if the given object is an array. (Before 1.1.1 the name was $.isArr)

$.isFunction

$.isFunction(object) boolean

Returns true if the given object is a function. (Before 1.1.1 the name was $.isFun)

$.isNumeric

$.isNumeric(object) boolean

Returns true if the given object is a number. (Before 1.1.1 the name was $.isNum)

$.isString

$.isString(object) boolean

Returns true if the given object is a string. (Before 1.1.1 the name was $.isStr)

$.isObject

$.isObject(object) boolean

Returns true if the given object is an object. (Before 1.1.1 the name was $.isObj)

$.isPlainObject

$.isPlainObject(object) boolean

Returns true if the given object is a plain object.

$.isWindow

$.isWindow(object) boolean

Returns true if the given object is the window object.

$.matches

$.matches(element, selector) boolean

Returns true if the given element matches the given selector. $().is(selector) is an alias for it.

$.noConflict

$.noConflict([name]) Tire

Many JavaScript libraries use $ as a function or variable name, just as Tire does. If you like to use another JavaScript library alongside Tire, we can return control back of $ to the other library with $.noConflict.

If true is given as a parameter it will return control back to Tire if some other library is using it as variabel or function name.

$.trim

$.trim(string) string

The trim method returns the string stripped of whitespace from both ends. It does not affect the value of the string.

$.parseJSON

$.parseJSON(string) object or null

Parse JSON string to JSON object. This will also work for older browsers that don't include JSON.

$.parseJSON('{"a":"b"}') // Returns { "a": "b"} as an object

addClass

.addClass(name) Tire

Add class name to the selected elements. Multiple class names can be given in a space-separated string.

after

.after(html) Tire

Add html to the DOM after each element in the collection. The html can be HTML string or Tire collection.

append

.append(html) Tire

Append html to the DOM inside each element in the collection. The html can be a HTML string or Tire collection.

attr

.attr(name [, value]) value or Tire

Read or set DOM attributes. When no value is given it will read specified attribute from the first element and return the value of it. When a value is given, it sets the attribute to that value on each element in the collection.

The first argument of .attr can be an object containing all attributes. (1.1.1+) 

$('<a />').attr('href', '#');
$('<a />').attr({ href: '#' });

before

.before(html) Tire

Add html to the DOM before each element in the collection. The html can be a HTML string or Tire collection.

children

.children([selector]) Tire

Get immediate children of each element in the current collection. If a selector is given, it filters the results to only include the ones matching the CSS selector.

clone

.clone() Tire (1.1.1+)

Duplicate all elements in the Tire collection via deep clone. This method doesn't have an option for copying data and event handlers over to the new elements, as it has in jQuery.

closest

.closest(selector [, context]) Tire

Get the first element that matches the selector, beginning at the current element and progressing up through the DOM tree. Context can be a DOM element in which a matching element may be found. If no context is passed in then the context of the jQuery set will be used instead.

css

.css(property [, value]) value or Tire

Read or set CSS properties on DOM elements. When no value is given it will read specified CSS property from the first element and return the value of it. When a value is given, it sets the property to that value on each element in the collection.

data

.data(name [, value]) value or Tire (1.1.1+)

Works just like .attr(name [, value]) but only for data-* attributes. This implementation only stores strings.

When setting data:

When reading data:

each

.each(callback) Tire

Iterates trough every element in the collection. Inside the iterator function, the this keyword refers to the current item. If the iterator function returns false it will stop the iteration. Returns the Tire collection.

$('div').each(function () {
  $(this).trigger('tap');
});

empty

.empty() Tire

Clear DOM contents of each element in the collection. Returns the Tire collection.

eq

.eq(index) Tire

Get the element at position specified by index from the current collection.

$('div').eq(0); //=> Returns the first element

It's easy to extend Tire with .first() and .last() with .eq(index).

(function ($) {
  $.extend($.fn, {
    first: function () { return this.eq(0); },
    last: function () { return this.eq(-1); }
  });
}(tire));

filter

.filter(object) Tire

Extend Tire with custom filters. Inside the iterator function, the this keyword refers to the current item. If a string is given it will return all elements in the collection matching that selector.

// Returns all elements with the class `tire`
$('div').filter(function () {
  if ($(this).hasClass('tire')) return this;
});

$('div').filter('.wrapper'); // Returns all elements with CSS class name .wrapper

find

.find(selector) Tire

Find elements that match a CSS selector executed in the scope of nodes in the current collection.

get

.get(index) DOM element (1.1.1+)

Retrieve the DOM elements matched by the Tire object.

$('div').get(0) // returns the first div tag

$('div').get() // returns an array with all the div tags

hasClass

.hasClass(name) boolean

Check if the first element in the collection has the specified class.

hide

.hide() Tire

Hide each element in the collection by setting CSS display to none.

html

.html([html]) string or Tire

Read or set HTML contents of elements in the collection. When no html is given it will return innerHTML of the first element. When html is given it used to replace innerHTML of each element in the collection. The html can be a HTML string or Tire collection.

is

.is(selector) boolean

Returns true if the given element matches the given CSS selector. jQuery CSS extensions are not supported. Some will be supported later.

not

.not(selector) Tire

Filter the current collection to get a new collection of elements that don't match the CSS selector.

parent

.parent([selector]) Tire

Get immediate parents of each element in the collection. If CSS selector is given, filter results to include only ones matching the selector.

pluck

.pluck(property) array

Get values from a named property of each element in the collection. null and undefined will be removed before returning the array.

$('span').pluck('nodeName') //=> ['SPAN', 'SPAN']

prepend

.prepend(html) Tire

Prepend content to the DOM inside each element in the collection. The html can be a HTML string or Tire collection.

ready

.ready(callback) Tire

Attach an event handler for the DOMContentLoaded or onreadystatechange event that fires when the DOM on the page is ready.

remove

.remove() Tire

Remove all elements in the collection from their parent nodes, effectively detaching them from the DOM.

removeAttr

.removeAttr(name) Tire

Remove the specified attribute from all elements in the collection.

removeClass

.removeClass(name) Tire

Remove the specified class name from all elements in the collection.

show

.show() Tire

Restore the default value of CSS display property for each element in the collection.

text

.text(content) value or Tire

Get or set text content of each element in the collection. When no content is given it returns text content for the first element. When content is given it sets textContent for each element in the collection.

val

.val(value) value or Tire

Get or set the value of form controls. When no value is given, it returns the value of the first element. For <select multiple>, an array of values is returned.

Ajax

$.ajax

$.ajax(url [, callback]) xhr (or undefined if it's a JSONP request)

$.ajax(url [, options]) xhr (or undefined if it's a JSONP request)

$.ajax(options) xhr (or undefined if it's a JSONP request)

Perform an Ajax request. It can be a to local resource or JSONP. It´s an async Ajax request. No sync request is supported and no support is planned. As of version 1.2.0 CORS (Cross-origin resource sharing) is supported via the tire-cors plugin.

If a string is passed in as the first argument it will be the URL to request. The seconds argument should be a function that is used as success function if the request succeeds.

Note. If a URL contains callback=?, callback=string or dataType is jsonp it will be a JSONP request. The response data will automatic be parsed as a JSON object if it's a JSONP or JSON request.

Options

Options like async, global and context isn't supported.

$.ajax('http://echojson.com/hello/world?callback=?', function (data) {
  console.log('Hello %s!', data.hello); 
});

$.param

$.param(object) string

Serialize an object to a URL-encoded string representation for use in Ajax request query strings and post data.

$.param({ num: [1, 2, 3] })
// => "num[]=1&num[]=2&num[]=3"

Event

on

.on(events, callback) Tire

.on(events, selector, callback) Tire (1.2.0+)

Add an event handler function to one or more events to the selected elements. The event handler have one parameter, the event itself.

Delegated events is supported as of version 1.2.0.

$('a').on('click', function (e) {
  // Add on click event to all anchor elements
});

$('a').on('click touchstart', function (e) {
  // Add on click and touchstart event to all anchor elements
});

$('ul.list').on('click', 'li.item', function (e) {
  // Delegated event
  // Add on click event to all list elements with an 'item' class in all the ul's with a 'list' class
});

off

.off(events [, callback]) Tire

.off(events, selector [, callback]) Tire (1.2.0+)

Remove all event handler or a specified one from the selected elements.

Undelegated events is supported as of version 1.2.0.

// Remove all click events from anchor elements
$('a').off('click'); 

// Remove both click and tap events from anchor elements
$('a').off('click tap'); 

// Remove specified click event handler from anchor elements
$('a').off('click', eventHandler);

// Remove all the click events from the list elements with an 'item' class in all the ul's with a 'list' class
$('ul.list').off('click', 'li.item');

trigger

.trigger(eventName, data) Tire

Trigger the specified event on elements collection. When a data object is passed along with the event, it will become available as e.data in the eventHandler defined with on.

Trigger only takes one event name and not multiple like on and off.

$('a').trigger('click', {foo: 'bar'});

Changelog

1.3.1
1.3.0
1.2.0
1.1.1
1.1.0
1.0.2
1.0.1
1.0.0

Thanks

We like to thank all of the contributors. A personal thanks to Caroline Millgårdh that has helped as a sounding board and participated in writing this documentation.

Tire API is based on jQuery's Core API, which is released under the MIT license.

Thanks to Jerome Gravel-Niquet for DocumentUp. Tire using it to generate this documentation.

Copyright 2012-2013 Fredrik Forsmo. Tire is released under the terms of the MIT license.

Fork me on GitHub