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