Маленькая (3.2KB gcc+gzip) библиотека, созданная для применения в простых проектах. Там где применение полноценного фреймворка может оказаться слишком избыточным решением. С помощью библиотеки можно удобно работать с событиями, cookies, создавать анимационные эффекты и Drag & Drop интерфейсы.

Документация (устарела, актуальная внутри несжатой версии)

extend(obj, props)

Копирует свойства из props в obj. Возвращает obj.

var obj = {a: 1, b: 5};
_.extend(obj, {b: 10, c: 20});// {a: 1, b: 10, c: 20}

removeFromArray(arr, item)

Удаляет все вхождения item в arr. Возвращает arr.

var arr = ['Dog', 'Cat', 'Cow', 'Dog'];
_.removeFromArray(arr, 'Dog');// ['Cat', 'Cow']

arrayFromList(list)

Преобразует HTMLCollection, NodeList или arguments в нормальный массив.

_.arrayFromList(document.getElementsByTagName('*')).forEach(function(el) { /* ..... */ });

escapeRegExp(str)

Экранирует спецсимволы регулярного выражения.

_.escapeRegExp('{809050d2-9c07-c960-4c97-aaff5273e9e5}');// '\{809050d2\-9c07\-c960\-4c97\-aaff5273e9e5\}'

parseColor(strColor)

Преобразует строковое представление цвета в объект с ключами r, g, b. Понимает следующие форматы: #fff, #ffffff, fff, ffffff, rgb(255,255,255) и 16 именованных цветов.

_.parseColor('#ffff00');// {r: 255, g: 255, b: 0}

fixDomEvent(evt)

Восстанавливает свойства target, pageX, pageY, preventDefault и stopPropagation на объекте события evt. Возвращает evt.

document.onclick = function(evt) {
	alert(
		_.fixDomEvent(evt || event).target.tagName
	);
};

observeDomEvent(el, type, handler)

Добавляет обработчик события к элементу. Подробнее здесь: http://javascript.ru/tutorial/events/crossbrowser.

_.observeDomEvent(document, 'click', function(evt) {
	alert(
		evt.target.tagName
	);
});

stopDomEventObserving(el, type, handler)

Удаляет обработчик события.

getCssProp(el, prop)

Вычисляет действующее значение css-свойства у элемента.

<style type="text/css">
#div1 { width: 200px; }
</style>
<div id="div1"></div>
<script type="text/javascript">
_.getCssProp(document.getElementById('div1'), 'width');// '200px'
</script>

getPosition(el)

Вычисляет положение элемента относительно документа.

_.getPosition(document.getElementById('div1'));// {x: 50, y: 1009}

Animation(from, to, set[, options])

Создает экземпляр анимации.

var anim = new _.Animation(50, 100, function(value) { console.log(value); }, {speed: 10});
anim.start();
// 60
// 70
// 80
// 90
// 100

Методы: start - запускает анимацию, pause - останавливает, cancel - останавливает и возвращает в исходное состояние.

В options указываются: скорость анимации - speed, обработчик завершения анимации - oncomplete, уравнение перехода - transition. Можно указать скорость в процентах (скорость будет зависеть от разницы между from и to), для этого в качестве значения скорости используется строка представляющая число с добавленным в конце символом '%'. Если нужно определить только скорость можно указывать ее значение на месте options:

new _.Animation(50, 100, function(value) { console.log(value); }, '10%').start();
// 55
// 60
// 65
// 70
// 75
// 80
// 85
// 90
// 95
// 100

animate(el[, props[, options]])

Обертка над Animation. Запускает анимацию указанного набора (css-)свойств (props) элемента el. Возвращает el. В качестве значений в props указываются конечные значения анимации. Начальные значения вычисляются с помощью getCssProp. Значения цвета парсятся с помощью parseColor. Опции (options) определяются как для Animation, при этом oncomplete срабатывает только один раз после завершения анимации всех свойств.

<div id="div1" style="width: 100px; height: 100px; background: #f99; position: absolute; left: 100px; top: 100px;"></div>
<script type="text/javascript">
_.animate(document.getElementById('div1'), {left: 500, height: 400, backgroundColor: '#66f'}, '2%');
</script>

Можно переопределять способ получения и установки свойства. Например, при попытке анимировать скролл элемента указав в props объект {scrollTop: 500} функция попытается изменять el.style.scrollTop вместо атрибута el.scrollTop. Что бы "объяснить" функции как правильно анимировать это свойство, нужно определить функции _.getScrollTop и _.setScrollTop (первая буква свойства в верхнем регистре и добавляем 'get' и 'set') (используются только если определены обе функции):

<div id="div1" style="width: 100px; height: 100px; background: #f99; overflow: auto;">
	text<br />text<br />text<br />text<br />
	text<br />text<br />text<br />text<br />
	text<br />text<br />text<br />text<br />
	text<br />text<br />text<br />text<br />
</div>
<script type="text/javascript">
_.getScrollTop = function(el) {
	return el.scrollTop;
};

_.setScrollTop = function(el, value) {
	el.scrollTop = value;
};

var el = document.getElementById('div1');
_.animate(el, {scrollTop: el.scrollHeight}, '1%');
</script>

Таким же способом можно "объяснить" функции как анимировать прозрачность устанавливая style.filter вместо style.opacity в старых IE.

Если animate вызывается во время выполнения анимации, последняя прерывается, начинается новая.

Остановленную с помощью stopAnimation анимацию можно возобновить вызвав animate с указанием только первого аргумента.

stopAnimation(el)

Останавливает анимацию свойств элемента el. Возвращает el.

_.stopAnimation(document.getElementById('div1'));

Drag(el[, options])

Создает экземпляр контролирующий перетаскивание элемента мышью.

var drag = new Drag(document.getElementById('div1'));

Методы: destroy - отменяет перемещаемость элемента.

В options указываются: элемент при захвате которого начнется перетаскивание - startsFrom (если не определен, то им станет сам перемещаемый элемент - el), имена свойств изменяемых при перемещении - propX и propY (по умолчанию - 'left' и 'top', если определен как false, никаких изменений производиться не будет), обработчики событий - onstart, ondrag и onend.

В ondrag можно контролировать устанавливаемое значение, например, ограничить область перемещения:

_.limit = function(num, min, max) {
	return Math.min(max, Math.max(min, num));
};

new _.Drag(document.getElementById('div1'), {
	ondrag: function(evt) {
		this.valueX = _.limit(this.valueX, 100, 500);
		this.valueY = _.limit(this.valueY, 100, 500);
	}
});

getCookie(name)

Получает значение печеньки.

_.setCookie('cookie', 'test');
_.getCookie('cookie');// 'test'

setCookie(name, value[, attrs])

Устанавливает значение печеньки.

Если value равен null/undefined, будет установлена пустая строка. Если при этом не указан attrs.expires, он будет установлен в new Date(0). То есть полностью удалить печеньку можно так:

_.setCookie('cookie', null);