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

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

• 1.
  Быстрая разработка веб-интерфейсов на JavaScript Георгий Калашников Заседание #000012
• 2.
  Зачем это ис чего всё началось? Сложность непосредственной работы с DOM Избыточность классического JS- кода Кроссбраузерность
• 3.
  Holly Wars Prototype/Scriptaculous (> 200Kb) Mootools Dojo
• 4.
  jQuery 54.5 KB [15KB packed] CSS 1-3 и немного XPath IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+ Огромное сообщество Доступная документация Лёгкая расширяемость (1441 плагин)
• 5.
  $ $( селектор, [ контекст ]) $(HTML) $(document | window | form) $(function)
• 6.
  $(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>
• 7.
  Селекторы #id tag .class * selector1, selector2, …, selectorN предок потомок отец > сын пред + след пред ~ все след [ атрибут ] [ атрибут = значение ] [ атрибут != | *= | ^= | $= значение ] [][]…[][]
• 8.
  [ Селектор ]: фильтр :first /last :not( селектор ) :even /odd :eq(ind) /gt /lt/ :header :contains( текст ) :empty лист :hidden /visible :input :text :button :enabled :checked :selected :contains( текст ) :empty …
• 9.
  Ещё раз о $ eq( index ) filter ( выражение | function ) slice ( from, [to] ) get( index ) length OMG это массив!
• 10.
  Цепные вызовы — chaining $(“div”). children(). hide(). end() . addClass(“c”);
• 11.
  Долой унылые методыманипуляции с 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] )
• 12.
  картинка для привлечениявнимания
• 13.
  События bind( type,data, fn ) one( type, data, fn ) trigger( type, data ) triggerHandler( type, data ) unbind( type, fn )
• 14.
  События -> плюшки! 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 )
• 15.
  События -> preventDefault $(“a”). click ( myClickHandler ); function myClickHandler ( event ) { // Перехода по ссылке не будет event.preventDefault(); $( this ) . hide(); }
• 16.
  $.ajax();
• 17.
  АЙ-АЙ $.ajax ({ } ) .load ( url, [data], [callback]) $.get ( url, [data], [callback], [type]) $.getJSON( url, [data], [callback]) $.post( url, [data], [callback], [type]) + события ajaxError ( callback )
• 18.
  Эффекты и анимация show / hide ( [speed], [callback] ) toggle () slideUp /slideDown /slideToggle (speed, [clbk]) fadeIn / fadeOut(s, [cb]) / fadeTo(s, o, [cb]) animate() stop() queue() / dequeue()
• 19.
  Plugins ->свой плагин ( function($) { $. fn. myPlugin = function() { return this.each(function() { /* Пыщ! */ }); }; })(jQuery); Пример гов плохого кода
• 20.
  Plugins ->свой плагин 2 (function($) { $.fn.myPlugin = myPlugin; })(jQuery); function myPlugin($) { return this.each(myPluginWithEach); } function myPluginWithEach() { $(this).hide(); }
• 21.
  Plugins ->готовенькое http://plugins.jquery.com/ http://bassistance.de/jquery-plugins/ http://ui.jquery.com/
• 22.
  Ссылки http://jquery.com/ http://visualjquery.com/http://learningjquery.com/
• 23.
  Да прибудет свами сила jQuery ! [email_address]