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

2,791 views
2,657 views

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,791
On SlideShare
0
From Embeds
0
Number of Embeds
161
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

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

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

    ×