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

Быстрая разработка веб-интерфейсов на 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!

GeorgeKalashnikov@gmail.com