Voyeur.js — маленькая и привлекательная библиотека для работы с DOM

от автора

Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.

image

Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:

Поиск элементов

Voyeur.div.h1; // body>div>h1. Возвращает элемент h1 Voyeur.div.h1.innerHTML = "Habrahabr"; //  Voyeur.div.ul.li; // Возвращает массив элементов списка  Voyeur.find("#example"); // Возвращает единственную ноду Voyeur.find(".example"); // Возвращает массив нод  Voyeur.find("#example").h1.em; //  

Callback функция

Voyeur.tag…use( callback(element) ) Root HTMLElement

Voyeur.div.ul.li.use(); // Возвращает элемент div Voyeur.div.ul.li.use(function(li, i) {         // Цикл по элементам списка         li.innerHTML = "List item #" + i; });  Voyeur.div.ul.use(function(ul) {         ul.style.background = "blue";         // Также возможно использовать li         ul.li; //.. }); 

Создание элементов

Voyeur.create.tag…mult( factor ) Array

Voyeur.create.div; // Возвращает элемент div Voyeur.create.div.h1; // Возвращает элемент h1 с родителем div Voyeur.create.div.h1.em; //  Voyeur.create.ul.li.mult(10).use(function(li, i) { // Создаем 10 элементов li       li.innerHTML = "Created list items!"; //  });  //Voyeur.tag...eq( begin , end ) HTMLElement|Array Voyeur.create.ul.li.mult(10).eq(7).innerHTML = "The 8th item.";  Voyeur.ul.li.eq(2, 6).use(function(li, i) {      li.create.em.innerText = "Хабр!"; }); 

Большое спасибо за внимание!

Планируете ли вы использовать Voyeur.js в дальнейшем?

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Никто ещё не голосовал. Воздержавшихся нет.

ссылка на оригинал статьи http://habrahabr.ru/post/186136/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *