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

  • View
    1.855

  • Download
    10

Embed Size (px)

Transcript

1. DOM, jQuery . yadi.sk/d/4PUvH1NwAKes2 JsFiddle jsfiddle.net/dench/RHtRZ/8/ 2. 2 JavaScript !== : WebOS, Firefox OS, Chrome OS : Node.JS, SpiderMonkey, Rhino : MS Office, OpenOffice 3. API 4. 4DOM 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 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 ipt ye"et au=" ae"oi"0. 60. 70 .< 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 = 11. 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 ipt ye"et au=" ae"oi"0. 30. 40 .< f r > 5 /om 13. 13getElementById dcmn.eEeetyd'uh) ouetgtlmnBI(at';0. 1 fr ls=at" d"uh aavle"2" cin"" 0. 2 ipt ye"et au=" ae"oi"0. 30. 40. 5 /om 14. 14getElementById $'at'; (#uh)0. 1 fr ls=at" d"uh aavle"2" cin"" 0. 2 ipt ye"et au=" ae"oi"0. 30. 40. 5 /om 15. 15querySelector dcmn.urSlco(.uh) ouetqeyeetr'at';0. 1 fr ls=at" d"uh aavle"2" cin"" 0. 2 ipt ye"et au=" ae"oi"0. 30. 40. 5 /om 16. 16querySelector $'at'; (.uh)0. 1 fr ls=at" d"uh aavle"2" cin"" 0. 2 ipt ye"et au=" ae"oi"0. 30. 40. 5 /om 17. 17querySelector 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 ipt ye"et au=" ae"oi"0. 30. 40 .< f r > 5 /om 18. 18querySelector $'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 ipt ye"et au=" ae"oi"0. 30. 40 .< f r > 5 /om 19. 19querySelectorAll 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 ipt ye"et au=" ae"oi"0. 30. 40 .< f r > 5 /om 20. NodeList Array forEach, map .. ! 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 .} 4vree =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. 40 .} ; 5 ) 23. 23querySelectorAll $'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 ipt ye"et au=" ae"oi"0. 30. 40 .< f r > 5 /om 24. 25. 25 0 .$ ' i p t ) e c ( u c i n ) 1 (:nu'.ahfnto({ 0. 2vr$tm=$ti) a ie (hs;0 .} ; 3 ) 26. Sizzle 27. 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. 1 fr ls=at" d"uh aavle"2" cin"" 0. 2 ipt ye"et au=" ae"oi"0. 30. 40. 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. 31Data- 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 ipt ye"et au=" ae"oi"0. 30. 4 32. 32Data- 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 ipt ye"et au=" ae"oi"0. 30. 40 .< 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 om0 .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'; 37. 38. 38createElement + 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. 39createElement + appendChild 0 .v r $ l m = $ ' s a > , { 1 a ee ( , { } ; 2 a ee (0. 3 ipt ye"et au=" ae"oi"0. 40. 5 < b t o >0 .< f r > 6 /om 45. 45 ? JS HTML HTML 46. 46addEventListener 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. 47addEventListener 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) 48. (Capturing) (Bubbling) 49. (Capturing) 50. (Capturing) 51. (Capturing) 52. (Capturing) 53. (Capturing) 54. 54addEventListener 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) 55. (Bubbling) 56. (Bubbling) 57. (Bubbling) 58. (Bubbling) 59. (Bubbling) 60. jQuery 61. 61addEventListener 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. 62stopPropagation 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. 3eet tprpgto( v n .s o P o a a i n );0 .} t u ; 4 , r e) 63. stopPropagation 64. stopPropagation 65. 65stopPropagation 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. 3eet tprpgto( v n .s o P o a a i n );0 .} f l e) 4 , as ; 66. stopPropagation 67. stopPropagation 68. 68stopImmediatePropagation 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. 3e 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 ; 69. 70. 70preventDefault 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. 3c n o e l g h s) o s l . o (t i ;0 .} f l e ; 4 , as)< he=ht:/adxr"Yneadx/> 71. 71preventDefault 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. 3e e t r v n D f u t ); v n .p e e t e a l (0. 4cnoelgti) osl.o(hs;0 .} f l e ; 5 , as)< he=ht:/adxr"Yneadx/> 72. jQuery 73. jQuery , return false 74. 74 jQuery 0 .< D C Y E h m > h m l n = r " 1 !OTP tl 0 .< e d < i l > Q e y / i l > / e d 2 ha>ttejur 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 75. 75jQuery tips and tricks jQuery-, $ live- 30 Days to Learn jQuery map, grep, proxy 76. 76 / / 77. dench@yandex-team.ru twitter.com/denchistyakov