'

Быстрая разработка веб-интерфейсов на JavaScript

Понравилась презентация – покажи это...





Слайд 0

Быстрая разработка веб-интерфейсов на JavaScript Георгий Калашников Заседание #000012


Слайд 1

Зачем это и с чего всё началось? Сложность непосредственной работы с DOM Избыточность классического JS-кода Кроссбраузерность


Слайд 2

Holly Wars Prototype/Scriptaculous (> 200Kb) Mootools Dojo


Слайд 3

jQuery 54.5 KB [15KB packed] CSS 1-3 и немного XPath IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Огромное сообщество Доступная документация Лёгкая расширяемость (1441 плагин)


Слайд 4

$ $(селектор, [контекст]) $(HTML) $(document | window | form) $(function)


Слайд 5

$(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>


Слайд 6

Селекторы #id tag .class * selector1, selector2, …, selectorN предок потомок отец > сын пред + след пред ~ все след [атрибут] [атрибут = значение] [атрибут != | *= | ^= | $= значение] [][]…[][]


Слайд 7

[Селектор] :фильтр :first /last :not(селектор) :even /odd :eq(ind) /gt /lt/ :header :contains(текст) :empty лист :hidden /visible :input :text :button :enabled :checked :selected :contains(текст) :empty …


Слайд 8

Ещё раз о $ eq( index ) filter ( выражение | function ) slice ( from, [to] ) get( index ) length OMG это массив!


Слайд 9

Цепные вызовы — chaining $(“div”). children(). hide(). end() . addClass(“c”);


Слайд 10

Долой унылые методы манипуляции с 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] )


Слайд 11

картинка для привлечения внимания


Слайд 12

События bind( type, data, fn ) one( type, data, fn ) trigger( type, data ) triggerHandler( type, data ) unbind( type, fn )


Слайд 13

События > плюшки! 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 )


Слайд 14

События > preventDefault $(“a”). click ( myClickHandler ); function myClickHandler ( event ) { // Перехода по ссылке не будет event.preventDefault(); $( this ) . hide(); }


Слайд 15

$.ajax();


Слайд 16

АЙ-АЙ $.ajax ( { } ) .load ( url, [data], [callback]) $.get ( url, [data], [callback], [type]) $.getJSON( url, [data], [callback]) $.post( url, [data], [callback], [type]) + события ajaxError ( callback )


Слайд 17

Эффекты и анимация show / hide ( [speed], [callback] ) toggle () slideUp /slideDown /slideToggle (speed, [clbk]) fadeIn / fadeOut(s, [cb]) / fadeTo(s, o, [cb]) animate() stop() queue() / dequeue()


Слайд 18

Plugins > свой плагин ( function($) { $. fn. myPlugin = function() { return this.each(function() { /* Пыщ!*/ }); }; })(jQuery); Пример гов плохого кода


Слайд 19

Plugins > свой плагин 2 (function($) { $.fn.myPlugin = myPlugin; })(jQuery); function myPlugin($) { return this.each(myPluginWithEach); } function myPluginWithEach() { $(this).hide(); }


Слайд 20

Plugins > готовенькое http://plugins.jquery.com/ http://bassistance.de/jquery-plugins/ http://ui.jquery.com/


Слайд 21

Ссылки http://jquery.com/ http://visualjquery.com/ http://learningjquery.com/


Слайд 22

Да прибудет с вами сила jQuery! GeorgeKalashnikov@gmail.com


×

HTML:





Ссылка: