Доброго времени суток уважаемые хабражители. Сегодня увидел один интересный проект на GitHub. Эта маленькая библиотека (Voyeur.min.js — 1.2kb) очень привлекает своим синтаксисом и неплохим функционалом.
Даже не переводя документацию с официального сайта, код можно понять интуитивно. По традиции приведу несколько примеров:
Поиск элементов
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 = "Хабр!"; });
Большое спасибо за внимание!
ссылка на оригинал статьи http://habrahabr.ru/post/186136/
Добавить комментарий