4. 4
DOM
— Document Object Model — это API, для чтения и редактирования
содержимомого HTML и XML-документов
— Это дерево, узлами которого могут быть элементы, текст,
комментарии, атрибуты и другие
5. 5
Что позволяет нам DOM?
— Получать доступ к узлу или набору узлов
— Обход дерева
— Изменять атрибуты узла
— Добавлять / удалять / клонировать узлы
— Обрабатывать события на узлах
6. 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. 7
Что такое jQuery?
— JS-библиотека, призванная сделать код удобнее и более
кроссбраузерным
— Главный слоган „Write less, do more“ — «Пиши меньше, получай
больше»
— Всё API нацелено сделать код короче, понятнее и исправить
шороховатости в нативных реализациях
8. Что такое jQuery?
— Был разработан и презентован Джоном Резигом в 2006
— Продолжает развиваться и сейчас
— Код постоянно претерпевает рефакторинг и оптимизации
9. 9
Что такое jQuery?
— Используется практически всеми крупнейшими компаниями (Яндекс,
Google, Mozilla)
— Имеет обширное комьюнити и огромное количество plugin`ов
— Есть расширения для UI и мобильных приложений
10. 10
Волшебный $
— Переменные в JS могут начинаться с букв и некоторых символов
— jQuery — одна из первых библиотек, начавших использовать $ в
качестве пространства имен
— jur ==$
Qey =
12. 12
Поиск элементов
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
17. 17
querySelector
dcmn.urSlco([ae"oi"';
ouetqeyeetr'nm=lgn])
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
18. 18
querySelector
$'nm=lgn])
([ae"oi"';
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
19. 19
querySelectorAll
dcmn.urSlcoAl'nu,utn)
ouetqeyeetrl(iptbto';
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
21. 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
ouetqeyeetrl(iptbto';
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. 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
ouetqeyeetrl(iptbto';
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. 23
querySelectorAll
$'ipt)
(:nu';
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
28. 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;
0. <omcas"uh i=at"dt-au=13 ato=/>
1
fr ls=at" d"uh aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0. <fr>
5
/om
29. 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. 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. 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;
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh
aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
32. 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)
0 .< o m c a s " u h i = a t " d t - a u = 1 3 a t o = / >
1 fr ls=at" d"uh
aavle"2" cin""
0.
2
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
3
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
0.
4
<utnОпаиь/utn
bto>трвт<bto>
0 .< f r >
5 /om
33. 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. 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. 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. 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. 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. 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. 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. 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)
43. Все элементы DOM и jQuery
могут реагировать на те или
иные события
44. 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
<nu tp=tx"vle" nm=lgn>
ipt ye"et au=" ae"oi"
0.
4
<nu tp=pswr"vle" nm=pswr"
ipt ye"asod au=" ae"asod>
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. 45
Почему это плохо?
— Нельзя навешать более одного обработчика на узел
— JS и HTML становятся тесно связаны
— Неинтуитивно
— При изменении HTML необходимо всегда помнить про атрибуты с
обработчиками
— Нельзя динамически навешивать обработчики
46. 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. 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)
54. 54
addEventListener
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 , 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)
60. В jQuery все события
всплывающие из соображений
кроссбраузерности
61. 61
addEventListener
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 , 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. 62
stopPropagation
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 ' 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. 65
stopPropagation
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 ' 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 .} f l e)
4 , as ;
68. 68
stopImmediatePropagation
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 ' f n t o ( v n ) {
2 utnadvnLsee(cik, ucineet
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. 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. 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/>
73. В jQuery этого же эффекта
можно достигнуть, выполнив
return false в теле
обработчика
74. 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 .< 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 .< 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. 75
jQuery tips and tricks
— Называйте jQuery-переменные, начиная с $
— Всегда кэшируйте результаты селекторов
— Используйте live-события по возможности
— Посмотрите „30 Days to Learn jQuery“
— Используйте map, grep, proxy и другие утилиты
76. 76
Мы научились
— Получать доступ к узлу или набору узлов
— Обход дерева
— Изменять атрибуты узла
— Добавлять / удалять / клонировать узлы
— Обрабатывать события на узлах
