День 1
- Селекторы
- Фильтры
- Работа с атрибутами
- Обход DOM
- Манипуляции с DOM
- События
- Домашняя работа
Селекторы
//01
1) Базовые селекторы
$('*') - выбрать все элементы
$('#id') - выбрать по Id элемента
$('.class') - выбрать по классу элемента
$('tagName') - выбрать по тегу элементы
2) Комбинированные элементы
$('div ul') - ul является потомком div
$('div > ul') - ul является прямым потомком div
$('div + ul') - вернёт ul который будет идти за div
$('div ~ ul') - вернёт все ul который будут идти за div
$('div, ul, .nav)
3) селекторы по атрибутам
$('attrName') - все элементы с атрибутам attrName;
$('attrName = value') - все элементы у которых значение атрибута attrName равно value
$('attrName != value') - значение атрибута не совпадает с value
$('attrName ^= value') - значение атрибута начинается с value
$('attrName $= value') - значение атрибута заканчивается значением value
$('attrName *= value') - значение атрибута содержит подстроку равное value
$('attrName ~= value') - значение атрибута содержит слово value
4) Селекторы по фильтрации
$(':focus'), $(':hover') - элементы в соответствующем состоянии (focus, hover)
$(':first'), $(':last') - первый или последний найденный элемент
$(':eq(1)'), $('...').eq() - вернёт элемент под заданным номером среди выбранных (начало с "0")
$(':even'), $(':odd') - элементы с четным и нечетным номером позиции
$(':gt(n)') - элементы с индексом, который превышает n
$(':lt(n)') - элементы с индексом, который меньше n
:checked, :selected, :disabled, :enabled, :contains, :empty, :hidden, :visible
Фильтры
//02
.eq(), .first(), .last(), .slice(start, end), .not(), .has(DOMelement),
.is() - boolean,
.addBack() - добавить текущий набор к предыдущему
.end() - вернуться к предыдущему набору
.add() - добавить элемент в набор
.map(), .each()
.each() - вызывает функцию для каждого элемента в наборе
var heights = []; // переменная, которая будет хранить высоты элементов
$("div").each(function(indx, element){
heights.push($(element).height());
});
// в итоге, в переменную heights будут помещены значения высот всех div-элементов//05
.map() - вызывает заданную функцию для каждого элемента набора, и в итоге создает новый набор, составленный из значений, возвращенных этой функцией
var classes = $("div").map(function(indx, element){
return $(element).attr("class");
});Обход DOM
//03
.children() - возвращает все дочерние элементы
.find() - находит элемент по заданному селектору
.parent() - находит родителей у выбранных элементов
.next(), .prev() - находит элемент, который лежит непосредственно после или перед выбранным элементом
.nextAll(), nextUntil() - находит всё элементы, которые лежат после или перед выбранным элементом
Манипуляции с DOM
//04
.text() - изменяет или возвращает текст у выбранного элемента
.html() - изменяет или возвращает html у выбранного элемена
.text(function(I, oldText),
.html(function(I, oldText)
Работа с атрибутами
//07
.attr(name), .attr(name, value), .prop(), .addClass(), .removeClass(), .toggleClass()
События
//07
// Установим обработчик нажатия кнопкой мыши, элементу с идентификатором foo
$('#foo').on('click', function(){
alert('Вы нажали на элемент "foo"');
});
// Теперь, при нажатии на элемент foo, будет выведено сообщение.on('event', function(){...});
event.preventDefault() - отменят стандартное действие браузера
$('a').on('click', function(event){
# some code
event.preventDefault();
});event.stopPropagation() - останавливает "всплытие" вызова события к родительским элементам
$('a').click(function(event){
# some code
event.preventDefault();
});
<div id="demo">
<a href="js4.it">Link</a>
</div>
$('a').click(function(event){
event.preventDefault();
event.stopPropagation();
console.log('You have clicked the link.');
});
$('#demo').click(function(){
$(this).toggleClass('yellow');
console.log('You have clicked the demo div.');
});