Методы получения элементов:
Y.one("selector");
Y.all("selector"); // тут на выходе мы получим так называемый NodeList
Методы получения атрибутов элементов:
Y.one("selector").get('id');
Y.one("selector").get('parentNode');
Y.one("selector").get('innerHTML');
Обьект Event, который передается первым аргументом в обработчик события, имеет два параметра:
e.target -- это дом-элемент, который дал жизнь событию.
e.currentTarget -- это дом-элемент к которому был прикреплен поточный слушатель события. Эти два параметра могут не совпадать, потому что дать жизнь событию мог к примеру дитя of e.currentTarget.
По поводу NodeList, мы можем в событиях работать как со всеми элементами одновременно, так и по потдельности:
Node queries
Когда селектор представлен css-выражением, чтобы можно было применять css3-выражения нужно явно подключить модуль "selector-css3".
Манипуляции с дом
node.appendChild("#demo p");//вставить ребенка за последним существующим
node.append("#demo p");//вставить ребенка за последним существующим
node.prepend("#demo p");//вставить ребенка первым
node.insert("#demo p", pos);//вставить ребенка перед позицией pos,
//также pos может быть дом-елементом ребенка, перед которым нужно вставить нового
Работа с классами
node.addClass(".myClass");
node.removeClass(".myClass");//only selected class, others leave
Перемещение по ДОМ дереву
node.ansector
node.next
node.previous
Мегаметод GET
node.get('children')
node.get('parentNode')
node.get('id')
node.get('winHeight')
node.get('docHeight')
node.get('docWidth')
Поддержка ARIA(Accessible Rich Internet Application)
Это описывающие атрибуты помогающие спецсканерам обьяснить людям с ограниченными возможностями, что делает приложение и как его воспринимать.
Фильтры
Y.one("selector");
Y.all("selector"); // тут на выходе мы получим так называемый NodeList
Методы получения атрибутов элементов:
Y.one("selector").get('id');
Y.one("selector").get('parentNode');
Y.one("selector").get('innerHTML');
Обьект Event, который передается первым аргументом в обработчик события, имеет два параметра:
e.target -- это дом-элемент, который дал жизнь событию.
e.currentTarget -- это дом-элемент к которому был прикреплен поточный слушатель события. Эти два параметра могут не совпадать, потому что дать жизнь событию мог к примеру дитя of e.currentTarget.
По поводу NodeList, мы можем в событиях работать как со всеми элементами одновременно, так и по потдельности:
<ul id="demo">
<li>lorem</li>
<li>ispum</li>
<li>dolor</li>
<li>sit</li>
</ul>
YUI().use('node', function(Y) {
var nodes = Y.all('#demo li');
var onClick = function(e) {
// this === nodes
this.setContent('thanks from all of us!');
// e.currentTarget === #demo li
e.currentTarget.setStyle('backgroundColor', 'green');
};
nodes.on('click', onClick);
});
Node queries
Когда селектор представлен css-выражением, чтобы можно было применять css3-выражения нужно явно подключить модуль "selector-css3".
Манипуляции с дом
node.appendChild("#demo p");//вставить ребенка за последним существующим
node.append("#demo p");//вставить ребенка за последним существующим
node.prepend("#demo p");//вставить ребенка первым
node.insert("#demo p", pos);//вставить ребенка перед позицией pos,
//также pos может быть дом-елементом ребенка, перед которым нужно вставить нового
Работа с классами
node.addClass(".myClass");
node.removeClass(".myClass");//only selected class, others leave
Перемещение по ДОМ дереву
node.ansector
node.next
node.previous
Мегаметод GET
node.get('children')
node.get('parentNode')
node.get('id')
node.get('winHeight')
node.get('docHeight')
node.get('docWidth')
Поддержка ARIA(Accessible Rich Internet Application)
Это описывающие атрибуты помогающие спецсканерам обьяснить людям с ограниченными возможностями, что делает приложение и как его воспринимать.
YUI().use('node', function(Y) {
Y.one('#rootmenu').set('role', 'menubar').all('.menu').setAttrs({ role: 'menu', 'aria-hidden': true });
});
Фильтры
nodes.filter(':not(.yui3-pass)').setContent('Click me too please!');
Комментариев нет:
Отправить комментарий