jquery: быстрая разработка веб-интерфейсов на javascript
DESCRIPTION
jQuery: быстрая разработка веб-интерфейсов на JavaScript, Георгий Калашников, Клуб MAInfo.ruTRANSCRIPT
![Page 1: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/1.jpg)
Быстрая разработка веб-интерфейсов на JavaScriptГеоргий Калашников
Заседание #000012
![Page 2: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/2.jpg)
Зачем это и с чего всё началось?
– Сложность непосредственной работы с DOM
– Избыточность классического JS-кода
– Кроссбраузерность
![Page 3: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/3.jpg)
Holly Wars
Prototype/Scriptaculous (> 200Kb)
Mootools
Dojo
![Page 4: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/4.jpg)
jQuery
54.5 KB [15KB packed]CSS 1-3 и немного XPath IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
Огромное сообществоДоступная документацияЛёгкая расширяемость (1441 плагин)
![Page 5: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/5.jpg)
$
• $(селектор, [контекст])• $(HTML)• $(document | window | form)• $(function)
![Page 6: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/6.jpg)
$(document).ready()
<sctipt type=“text/javascript”>window.onload = myOnloadHandler;
</script>
$(document). ready (myInitFunction);function myInitFunction() {
$(“body”). append( $(“<h1>Hi, folks!</h1>”) );}
MyScript.js
<script type=“text/javascript” src=“MyScript.js”></script>
![Page 7: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/7.jpg)
Селекторы
• #id • tag• .class• * • selector1,
selector2, …, selectorN
• предок потомок• отец > сын• пред + след• пред ~ все след• [атрибут]• [атрибут = значение]• [атрибут != | *= | ^= | $=
значение]• [][]…[][]
![Page 8: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/8.jpg)
[Селектор] :фильтр
• :first /last• :not(селектор)• :even /odd• :eq(ind) /gt /lt/ • :header• :contains(текс
т)• :empty лист• :hidden /visible
• :input• :text• :button• :enabled• :checked • :selected• :contains(текс
т)• :empty
…
![Page 9: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/9.jpg)
Ещё раз о $
• eq( index )• filter ( выражение | function )• slice ( from, [to] )• get( index )• length
OMG это массив!
![Page 10: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/10.jpg)
Цепные вызовы — chaining
$(“div”). children(). hide(). end() . addClass(“c”);
![Page 11: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/11.jpg)
Долой унылые методы манипуляции с DOM!
html ( ) html ( val )text ( ) text ( val ) append ( content ) appendTo ( selector ) prepend ( content ) prependTo ( selector ) after ( content ) before ( content ) insertAfter ( content ) insertBefore
( content ) replaceWith ( content ) replaceAll ( selector )empty ( ) remove ( expr ) wrap ( html | elem ) wrapAll ( html | elem )wrapInner ( html | elem )clone ( [true] )
![Page 12: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/12.jpg)
картинка для привлечения внимания
![Page 13: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/13.jpg)
События
• bind( type, data, fn ) • one( type, data, fn ) • trigger( type, data ) • triggerHandler( type, data ) • unbind( type, fn )
![Page 14: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/14.jpg)
События → плюшки!
• hover ( over, out )• toggle ( [fn1, fn2, …,
fnN] )• click ( [fn] )• dbclick ( [fn] )• resize ( fn )• mouseover ( fn )• keypress ( [fn] )
blur( fn )change( fn )error( fn )focus( )focus( fn )keydown( fn )keypress( fn )keyup( fn )load( fn )mousedown( fn )mousemove( fn )mouseout( fn )mouseover( fn ) mouseup( fn )resize( fn )scroll( fn )select( fn )submit( fn )unload( fn )
![Page 15: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/15.jpg)
События → preventDefault
$(“a”). click ( myClickHandler );function myClickHandler ( event ){
// Перехода по ссылке не будетevent.preventDefault();$( this ) . hide();
}
![Page 16: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/16.jpg)
$.ajax();
![Page 17: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/17.jpg)
АЙ-АЙ
• $.ajax ( { } )• .load ( url, [data], [callback])• $.get ( url, [data], [callback], [type])• $.getJSON( url, [data], [callback])• $.post( url, [data], [callback], [type])
+ события ajaxError ( callback )
![Page 18: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/18.jpg)
Эффекты и анимация
• show / hide ( [speed], [callback] )• toggle ()• slideUp /slideDown /slideToggle (speed,
[clbk])• fadeIn / fadeOut(s, [cb]) / fadeTo(s, o, [cb])• animate()• stop()• queue() / dequeue()
![Page 19: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/19.jpg)
Plugins → свой плагин
( function($){ $. fn. myPlugin = function() { return this.each(function() { /* Пыщ!*/ }); }; })(jQuery);
Пример гов плохого кода
![Page 20: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/20.jpg)
Plugins → свой плагин 2
(function($) { $.fn.myPlugin = myPlugin; })(jQuery);
function myPlugin($){
return this.each(myPluginWithEach); }
function myPluginWithEach(){
$(this).hide();}
![Page 21: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/21.jpg)
Plugins → готовенькое
http://plugins.jquery.com/
http://bassistance.de/jquery-plugins/
http://ui.jquery.com/
![Page 22: jQuery: быстрая разработка веб-интерфейсов на JavaScript](https://reader035.vdocuments.site/reader035/viewer/2022062514/557f3344d8b42aba678b45ee/html5/thumbnails/22.jpg)
Ссылки
http://jquery.com/
http://visualjquery.com/
http://learningjquery.com/