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 ! [email_address]