День 1

• Селекторы
• Фильтры
• Работа с атрибутами
• Обход DOM
• Манипуляции с DOM
• События
• Домашняя работа

Селекторы

http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80%D1%8B

//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

Фильтры

http://jquery.page2page.ru/index.php5/%D0%A0%D0%B0%D0%B1%D0%BE%D1%82%D0%B0_%D1%81_%D0%BD%D0%B0%D0%B1%D0%BE%D1%80%D0%BE%D0%BC_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%BE%D0%B2#.D0.A4.D0.B8.D0.BB.D1.8C.D1.82.D1.80.D0.B0.D1.86.D0.B8.D1.8F_.D0.BD.D0.B0.D0.B1.D0.BE.D1.80.D0.B0

//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();
});

http://stepansuvorov.com/blog/2013/05/%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D0%B5-preventdefault-stoppropagation-%D0%B8-stopimmediatepropagation/

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.');
});