Your SlideShare is downloading. ×
  • Like
jQuery: быстрая разработка веб-интерфейсов на JavaScript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

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

  • 2,358 views
Published

jQuery: быстрая разработка веб-интерфейсов на JavaScript, Георгий Калашников, Клуб MAInfo.ru

jQuery: быстрая разработка веб-интерфейсов на JavaScript, Георгий Калашников, Клуб MAInfo.ru

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
2,358
On SlideShare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
27
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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]