Денис Чистяков: DOM, jQuery и все, все, все

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

2

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

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

4

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

5

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

6

Простейший DOM
0 .< D C Y E h m > h m l n = r "
1 !OTP tl<tl ag"u>
0 .< e d < i l > O < t t e < h a >
2 ha>tteDM/il>/ed
0 .< o y
3 bd>
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
4 fr ls=at" d"uh aavle"2" cin""
0.
5

<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"

0.
6

<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>

0.
7

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
8 /om

7

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


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

9

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

10

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

12

Поиск элементов
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

13

getElementById
dcmn.eEeetyd'uh)
ouetgtlmnBI(at';

0. <omcas"uh i=at"dt-au=13 ato=/>
1
fr ls=at" d"uh aavle"2" cin""
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0. <fr>
5
/om

14

getElementById
$'at';
(#uh)

1
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0. <fr>
5
/om

15

querySelector
dcmn.urSlco(.uh)
ouetqeyeetr'at';

1
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0. <fr>
5
/om

16

querySelector
$'at';
(.uh)

1
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0. <fr>
5
/om

17

querySelector
dcmn.urSlco([ae"oi"';
ouetqeyeetr'nm=lgn])

0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

18

querySelector
$'nm=lgn])
([ae"oi"';

0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

19

querySelectorAll
dcmn.urSlcoAl'nu,utn)
ouetqeyeetrl(iptbto';

0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

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

Ó

21

Итерирование по результатам
Вариант №1
0 .v r e e s = d c m n . u r S l c o A l ' n u , u t n )
1 a lm
0 .f r ( a i = 0 l = e e s l n t ; i < l i + {
2 o vr
,
lm.egh
; +)
0.
3
0 .}
4

vree =eesi;
a lm
lm[]

22

Вариант №2
0 .v r e e s = d c m n . u r S l c o A l ' n u , u t n )
1 a lm
0 .v r e e s i t = A r y p o o y e s i e c l ( l m )
2 a lmLs
ra.rttp.lc.alees;
0 .e e s i t f r a h f n t o ( l m {
3 lmLs.oEc(ucinee)
0.
4

…

0 .} ;
5 )

23

querySelectorAll
$'ipt)
(:nu';

0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

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

25

0 .$ ' i p t ) e c ( u c i n )
1 (:nu'.ahfnto({
0.
2

vr$tm=$ti)
a ie
(hs;

0 .} ;
3 )

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

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

28

Атрибуты и свойства
0 .v r f r = d c m n . e E e e t y d ' u h )
1 a om
ouetgtlmnBI(at';
0 .v r $ o m = $ f r )
2 a fr
(om;

1
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0. <fr>
5
/om

29

*Attribute
0 .f r . e A t i u e ' c i n ) > " "
1 omgttrbt(ato'; > /
0 .f r . a A t i u e ' e h d , ' O T ) > f l e
2 omhstrbt(mto' PS'; > as
0 .f r . e A t i u e ' e h d , ' O T )
3 omsttrbt(mto' PS';
0 .f r . a A t i u e ' e h d , ' O T ) > t u
4 omhstrbt(mto' PS'; > re
0 .f r . e o e t r b t ( m t o ' ;
5 omrmvAtiue'ehd)

30

*Attribute
0 .$ o m a t ( a t o ' ; > " "
1 fr.tr'cin) > /
0 .$ o m a t ( m t o ' ' O T )
2 fr.tr'ehd, PS';
0 .$ o m r m v A t ( m t o ' ;
3 fr.eoetr'ehd)

31

Data-атрибуты
0 .f r . a a e [' a u '] > " 2 "
1 omdtst vle ; > 13
0 .f r . a a e . a O n r p r y ' a u ' ; > t u
2 omdtsthswPoet(vle) > re
0 .f r . a a e . o = ' a '
3 omdtstfo
br;

1 fr ls=at" d"uh
aavle"2" cin""
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

32

Data-атрибуты
0 .$ o m d t (' a u ') > " 2 "
1 fr.aa vle ; > 13
0 .$ o m d t ( f o , ' a ' ;
2 fr.aa'o' br)

1 fr ls=at" d"uh
aavle"2" cin""
0.
2


0.
3


0.
4

<utnОпаиь/utn
bto>трвт<bto>

0 .< f r >
5 /om

33

Атрибуты !== свойства
0 .f r . e A t i u e ' c i n ) > " "
1 omgttrbt(ato'; > /
0 .f r . e A t i u e ' e h d ) > n l
2 omgttrbt(mto'; > ul
0 .f r . e A t i u e ' d ) > " u h
3 omgttrbt(i'; > at"

0 .f r . c i n > " t p / f d l . s e l n t "
1 omato; > ht:/idejhl.e/
0 .f r . e h d > " e "
2 ommto; > gt
0 .f r . d > " u h
3 omi; > at"

34

Атрибуты !== свойства
0 .$ o m a t ( a t o ' ; > " "
1 fr.tr'cin) > /
0 .$ o m a t ( m t o ' ; > u d f n d
2 fr.tr'ehd) > neie
0 .$ o m a t ( i ' ; > " u h
3 fr.tr'd) > at"

0 .$ o m p o ( a t o ' ; > " t p / f d l . s e l n t "
1 fr.rp'cin) > ht:/idejhl.e/
0 .$ o m p o ( m t o ' ; > " e "
2 fr.rp'ehd) > gt
0 .$ o m p o ( i ' > " u h
3 fr.rp'd; > at"

35

Классы
0 .f r .c a s a e; > " u h
1 om lsNm
> at"
0 .f r . l s N m + " f r " > " u h f r "
2 omcasae =
om; > at om

0 .f r .c a s i t. d ( f o )
1 om lsLs ad'o';
0 .f r . l s L s . t m 1 ; > " o m
2 omcasitie() > fr"
0 .f r . l s L s . o t i s ' o ' ; > t u
3 omcasitcnan(fo) > re
0 .f r . l s L s . e o e ' o ' ;
4 omcasitrmv(fo)

36

Классы
0 .$ o m a d l s ( f r ' ;
1 fr.dCas'om)
0 .$ o m h s l s ( f r ' ; > t u
2 fr.aCas'om) > re
0 .$ o m r m v C a s ' o m )
3 fr.eoels(fr';

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

38

createElement + appendChild
0 .v r e e = d c m n . r a e l m n ( s a ' ;
1 a lm
ouetcetEeet'pn)
0 .e e . l s N m = ' r o '
2 lmcasae
err;
0 .e e . e A t i u e ' d , ' u h e r r )
3 lmsttrbt(i' at-ro';
0 .e e . e A t i u e ' o ' ' a ' ;
4 lmsttrbt(fo, br)
0 .e e . e t o t n = " в д н н в р ы л г н и и п р л "
5 lmtxCnet
Вее еенй ои л аоь;
0 .d c m n . o y a p n C i d e e )
6 ouetbd.pedhl(lm;

39

createElement + appendChild
0 .v r $ l m = $ ' s a > , {
1 a ee
(<pn'
0.
2

i:"uherr,
d at-ro"

0.
3

cas [err]
ls: "ro",

0.
4

fo "a"
o: br,

0.
5

tx:"вдннвры лгниипрл"
et Вее еенй ои л аоь

0 .} . p e d o d c m n . o y ;
6 )apnT(ouetbd)

40

cloneNode
0 .v r e e = d c m n . r a e l m n ( s a ' ;
1 a lm
ouetcetEeet'pn)
0 .…
2
0 .v r c o e = e e . l n N d ( r e
3 a ln
lmcoeoetu)
0 .c o e i = ' a l e r r ;
4 ln.d
mi-ro'
0 .c o e t x C n e t = " е у а о ь о п а и ь п с м "
5 ln.etotn
Н длс трвт иьо;
0 .d c m n . o y a p n C i d e e )
6 ouetbd.pedhl(lm;
0 .d c m n . o y a p n C i d c o e ;
7 ouetbd.pedhl(ln)

41

cloneNode
0 .v r $ o y = $ d c m n . o y ;
1 a bd
(ouetbd)
0 .v r $ l m = $ ' s a > , { } ;
2 a ee
(<pn' …)
0 .v r $ l n = $ l m c o e t u )
3 a coe
ee.ln(re
0.
4

.rp'd,'alerr)
po(i' mi-ro'

0.
5

.et"еуаоьопаиьпсм"
tx(Н длс трвт иьо)

0 .$ o y a p n ( e e ) a p n ( c o e
6 bd.ped$lm.ped$ln)

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

44

Можно навешивать обработчики в HTML
0 .< o m c a s " u h i = a t "
1 fr ls=at" d"uh
0.
2

dt-au=13 ato=/ osbi=sbiHnlr)
a a v l e " 2 " c i n " " n u m t " u m t a d e ( ">

0.
3


0.
4


0.
5

<utn ocik"lcHnlr) Опаиь/utn
bto
n l c = c i k a d e ( "> т р в т < b t o >

0 .< f r >
6 /om

45

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

46

addEventListener
0 .v r f r = d c m n . e E e e t y d ' u h )
1 a om
ouetgtlmnBI(at';
0 .f r . d E e t i t n r ' u m t , s b i H n l r ;
2 omadvnLsee(sbi' umtade)

0 .v r b t o = d c m n . u r S l c o ( b t o ' ;
1 a utn
ouetqeyeetr'utn)
0 .b t o . d E e t i t n r ' l c ' c i k a d e )
2 utnadvnLsee(cik, lcHnlr;
0 .b t o . d E e t i t n r ' l c ' y t l c H n l r ;
3 utnadvnLsee(cik, eCikade)

47

addEventListener
0 .v r $ o m = $ ' a t ' ;
1 a fr
(#uh)
0 .$ o m o ( s b i ' s b i H n l r ;
2 fr.n'umt, umtade)

0 .v r $ u t n = $ ' u t n )
1 a bto
(bto';
0 .$ u t n o ( c i k , c i k a d e )
2 bto.n'lc' lcHnlr;
0.
3

.n'lc' ytlcHnlr;
o(cik, eCikade)

Существует два подхода

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

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

54

addEventListener
1 a utn
ouetqeyeetr'utn)
0 .b t o . d E e t i t n r ' l c ' c i k a d e , t u ;
2 utnadvnLsee(cik, lcHnlr
r e)
0 .b t o . d E e t i t n r ' l c ' y t l c H n l r t u ;
3 u t n a d v n L s e e ( c i k , e C i k a d e , r e)

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

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

61

addEventListener
1 a utn
ouetqeyeetr'utn)
0 .b t o . d E e t i t n r ' l c ' c i k a d e , f l e)
2 utnadvnLsee(cik, lcHnlr
as ;
0 .b t o . d E e t i t n r ' l c ' y t l c H n l r f l e)
3 utnadvnLsee(cik, eCikade, as ;

62

stopPropagation
1 a utn
ouetqeyeetr'utn)
0 .b t o . d E e t i t n r ' l c ' f n t o ( v n ) {
2 utnadvnLsee(cik, ucineet
0.
3

eet tprpgto(
v n .s o P o a a i n );

0 .} t u ;
4 , r e)

65

stopPropagation
1 a utn
ouetqeyeetr'utn)
0.
3

eet tprpgto(
v n .s o P o a a i n );

0 .} f l e)
4 , as ;

68

stopImmediatePropagation
1 a utn
ouetqeyeetr'utn)
0.
3

e e t t p m e i t P o a a i n );
v n .s o I m d a e r p g t o (

0 .} f l e)
4 , as ;

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

70

preventDefault
0 .v r l n = d c m n . u r S l c o ( a )
1 a ik
ouetqeyeetr'';
0 .l n . d E e t i t n r ' l c ' f n t o ( v n ) {
2 ikadvnLsee(cik, ucineet
0.
3

c n o e l g h s)
o s l . o (t i ;

0 .} f l e ;
4 , as)

< he=ht:/adxr"Yne<a
a rf"tp/yne.u>adx/>

71

preventDefault
0 .v r l n = d c m n . u r S l c o ( a )
1 a ik
ouetqeyeetr'';
0 .l n . d E e t i t n r ' l c ' f n t o ( v n ) {
2 ikadvnLsee(cik, ucineet
0.
3

e e t r v n D f u t );
v n .p e e t e a l (

0.
4

cnoelgti)
osl.o(hs;

0 .} f l e ;
5 , as)

< he=ht:/adxr"Yne<a
a rf"tp/yne.u>adx/>

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

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

74

Подключение jQuery на странице
0 .< D C Y E h m > h m l n = r "
1 !OTP tl<tl ag"u>
0 .< e d < i l > Q e y / i l > / e d
2 ha>ttejur<tte<ha>
0 .< o y
3 bd>
0 .< f r >
5 /om
0 .< c i t s c "/ a d x s / q e y 2 0 3 j u r . i . s >
6 s r p r = /y n e . t j u r / . . / q e y m n j "
0 .< s r p >
7 /cit
0 .< b d > / t l
8 /oy<hm>

75

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

76

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

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

Денис Чистяков: DOM, jQuery и все, все, все

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Денис Чистяков: DOM, jQuery и все, все, все (20)

More from Yandex (20)

Денис Чистяков: DOM, jQuery и все, все, все