DOM & jQuery

DOM, jQuery и все
все все
На Яндеск.Диске yadi.sk/d/4PUvH1NwAKes2
На JsFiddle jsfiddle.net/dench/RHtRZ/8/

Среда выполнения
— JavaScript !== Браузер
— Браузер в том числе
— ОС: WebOS, Firefox OS, Chrome OS
— Сервер: Node.JS, SpiderMonkey, Rhino
— Офисные приложения: MS Office, OpenOffice
2

Различные среды
предоставляют различный API
для работы с ними

DOM
— Document Object Model — это API, для чтения и редактирования
содержимомого HTML и XML-документов
— Это дерево, узлами которого могут быть элементы, текст,
комментарии, атрибуты и другие
4

Что позволяет нам DOM?
— Получать доступ к узлу или набору узлов
— Обход дерева
— Изменять атрибуты узла
— Добавлять / удалять / клонировать узлы
— Обрабатывать события на узлах
5

Простейший DOM
01.
02.
03.
04.
05.
06.
07.
08.
<!DOCTYPE html><html lang="ru">
<head><title>DOM</title></head>
<body>
<form class="auth" id="auth" data-value="123" action="/">
<input type="text" value="" name="login">
<input type="password" value="" name="password">
<button>Отправить</button>
</form>
6

Что такое jQuery?
— JS-библиотека, призванная сделать код удобнее и более
кроссбраузерным
— Главный слоган „Write less, do more“ — «Пиши меньше, получай
больше»
— Всё API нацелено сделать код короче, понятнее и исправить
шороховатости в нативных реализациях
7

— Был разработан и презентован Джоном Резигом в 2006
— Продолжает развиваться и сейчас
— Код постоянно претерпевает рефакторинг и оптимизации

— Используется практически всеми крупнейшими компаниями (Яндекс,
Google, Mozilla)
— Имеет обширное комьюнити и огромное количество plugin`ов
— Есть расширения для UI и мобильных приложений
9

Волшебный $
— Переменные в JS могут начинаться с букв и некоторых символов
— jQuery — одна из первых библиотек, начавших использовать $ в
качестве пространства имен
— jQuery === $
10

Поиск элементов
01.
02.
03.
04.
05.
</form>
12

getElementById
document.getElementById('auth');
</form>
01.
02.
03.
04.
05.
13

getElementById
$('#auth');
</form>
01.
02.
03.
04.
05.
14

querySelector
document.querySelector('.auth');
</form>
01.
02.
03.
04.
05.
15

querySelector
$('.auth');
</form>
01.
02.
03.
04.
05.
16

querySelector
document.querySelector('[name="login"]');
01.
02.
03.
04.
05.
</form>
17

querySelector
$('[name="login"]');
01.
02.
03.
04.
05.
</form>
18

querySelectorAll
document.querySelectorAll('input,button');
01.
02.
03.
04.
05.
</form>
19

NodeList не Array ¶ методов
forEach, map и т.п. — нет!

Итерирование по результатам
Вариант №1
var elems = document.querySelectorAll('input,button');
for (var i = 0, l = elems.length; i < l; i++) {
var elem = elems[i];
01.
02.
03.
04.
}
21

Вариант №2
var elems = document.querySelectorAll('input,button');
var elemsList = Array.prototype.slice.call(elems);
elemsList.forEach(function(elem) {
…
});
01.
02.
03.
04.
05.
22

querySelectorAll
$(':input');
01.
02.
03.
04.
05.
</form>
23

Все методы поиска
возвращают коллекции и
предоставляют методы для
итерирования по ним

01.
02.
03.
$(':input').each(function(){
var $item = $(this);
});
25

Для поиска используется
библиотека Sizzle

Атрибуты и свойства

Атрибуты и свойства
var form = document.getElementById('auth');
var $form = $(form);
</form>
01.
02.
01.
02.
03.
04.
05.
28

*Attribute
01.
02.
03.
04.
05.
form.getAttribute('action'); >> "/"
form.hasAttribute('method', 'POST'); >> false
form.setAttribute('method', 'POST');
form.hasAttribute('method', 'POST'); >> true
form.removeAttribute('method');
29

*Attribute
01.
02.
03.
$form.attr('action'); >> "/"
$form.attr('method', 'POST');
$form.removeAttr('method');
30

Data-атрибуты
form.dataset['value']; >> "123"
form.dataset.hasOwnProperty('value'); >> true
form.dataset.foo = 'bar';
01.
02.
03.
01.
02.
03.
04.
31

Data-атрибуты
01.
02.
$form.data('value'); >> "123"
$form.data('foo', 'bar');
01.
02.
03.
04.
05.
</form>
32

Атрибуты !== свойства
01.
02.
03.
form.getAttribute('action'); >> "/"
form.getAttribute('method'); >> null
form.getAttribute('id'); >> "auth"
01.
02.
03.
form.action; >> "http://fiddle.jshell.net/"
form.method; >> "get"
form.id; >> "auth"
33

Атрибуты !== свойства
01.
02.
03.
$form.attr('action'); >> "/"
$form.attr('method'); >> undefined
$form.attr('id'); >> "auth"
01.
02.
03.
34
$form.prop('action'); >> "http://fiddle.jshell.net/"
$form.prop('method'); >> "get"
$form.prop('id'; >> "auth"

Классы
01.
02.
form.className; >> "auth"
form.className += " form"; >> "auth form"
01.
02.
03.
04.
form.classList.add('foo');
form.classList.item(1); >> "form"
form.classList.contains('foo'); >> true
form.classList.remove('foo');
35

Классы
01.
02.
03.
$form.addClass('form');
$form.hasClass('form'); >> true
$form.removeClass('form');
36

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

createElement + appendChild
01.
02.
03.
04.
05.
06.
38
var elem = document.createElement('span');
elem.className = 'error';
elem.setAttribute('id', 'auth-error');
elem.setAttribute('foo', 'bar');
elem.textContent = "Введен неверный логин или пароль";
document.body.appendChild(elem);

createElement + appendChild
01.
02.
03.
04.
05.
06.
var $elem = $('<span>', {
id: "auth-error",
class: ["error"],
foo: "bar",
text: "Введен неверный логин или пароль"
}).appendTo(document.body);
39

cloneNode
01.
02.
03.
04.
05.
06.
07.
40
var elem = document.createElement('span');
…
var clone = elem.cloneNode(true)
clone.id = 'mail-error';
clone.textContent = "Не удалось отправить письмо";
document.body.appendChild(elem);
document.body.appendChild(clone);

cloneNode
01.
02.
03.
04.
05.
06.
var $body = $(document.body);
var $elem = $('<span>', {…});
var $clone = $elem.clone(true)
.prop('id', 'mail-error')
.text("Не удалось отправить письмо")
$body.append($elem).append($clone)
41

Все элементы DOM и jQuery
могут реагировать на те или
иные события

Можно навешивать обработчики в HTML
01.
02.
03.
04.
05.
06.
<form class="auth" id="auth"
data-value="123" action="/" onsubmit="submitHandler()">
<button onclick="clickHandler()">Отправить</button>
</form>
44

Почему это плохо?
— Нельзя навешать более одного обработчика на узел
— JS и HTML становятся тесно связаны
— Неинтуитивно
— При изменении HTML необходимо всегда помнить про атрибуты с
обработчиками
— Нельзя динамически навешивать обработчики
45

addEventListener
01.
02.
var form = document.getElementById('auth');
form.addEventListener('submit', submitHandler);
01.
02.
03.
46
var button = document.querySelector('button');
button.addEventListener('click', clickHandler);
button.addEventListener('click', yetClickHandler);

addEventListener
var $form = $('#auth');
$form.on('submit', submitHandler);
var $button = $('button');
$button.on('click', clickHandler);
.on('click', yetClickHandler);
01.
02.
01.
02.
03.
47

Существует два подхода
— Перехват событий (Capturing)
— Всплывающие события (Bubbling)

Перехват событий (Capturing)

addEventListener
01.
02.
03.
54
button.addEventListener('click', clickHandler, true);
button.addEventListener('click', yetClickHandler, true);

Всплывающие события (Bubbling)

В jQuery все события
всплывающие из соображений
кроссбраузерности

addEventListener
01.
02.
03.
61
button.addEventListener('click', clickHandler, false);
button.addEventListener('click', yetClickHandler, false);

stopPropagation
01.
02.
03.
04.
button.addEventListener('click', function(event) {
event.stopPropagation();
}, true);
62

stopPropagation
01.
02.
03.
04.
event.stopPropagation();
}, false);
65

stopImmediatePropagation
01.
02.
03.
04.
event.stopImmediatePropagation();
}, false);
68

У многих элементов есть
действия по умолчанию

preventDefault
01.
02.
03.
04.
var link = document.querySelector('a');
link.addEventListener('click', function(event) {
console.log(this);
}, false);
<a href="http://yandex.ru">Yandex</a>
70

preventDefault
01.
02.
03.
04.
05.
var link = document.querySelector('a');
link.addEventListener('click', function(event) {
event.preventDefault();
console.log(this);
}, false);
<a href="http://yandex.ru">Yandex</a>
71

В jQuery методы также
доступны у объекта события

В jQuery этого же эффекта
можно достигнуть, выполнив
return false в теле
обработчика

Подключение jQuery на странице
01.
02.
03.
04.
05.
06.
07.
08.
74
<!DOCTYPE html><html lang="ru">
<head><title>jQuery</title></head>
<body>
</form>
<script src="//yandex.st/jquery/2.0.3/jquery.min.js">
</script>
</body></html>

jQuery tips and tricks
— Называйте jQuery-переменные, начиная с $
— Всегда кэшируйте результаты селекторов
— Используйте live-события по возможности
— Посмотрите „30 Days to Learn jQuery“
— Используйте map, grep, proxy и другие утилиты
75

Мы научились
— Получать доступ к узлу или набору узлов
— Обход дерева
— Изменять атрибуты узла
— Добавлять / удалять / клонировать узлы
— Обрабатывать события на узлах
76

Спасибо
dench@yandex-team.ru
twitter.com/denchistyakov

DOM & jQuery

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to DOM & jQuery

Similar to DOM & jQuery (20)

DOM & jQuery