Prototype & jQuery

Prototype jQuery To and from JavaScript libraries. Remy Sharp (remysharp.com)

Why Prototype? • Extends the DOM and core JavaScript objects • An arsenal of utility functions Based on Prototype 1.5.1 & 1.6

Why jQuery • Centred around chaining and binding methods to objects and elements • Totally encapsulated • Aims to be exceptionally easy to develop with Based on jQuery 1.2.1

Differences in Native Support • Prototype has: • jQuery has: • Class creation • No Conﬂict ($) • Try.these • Effects • Position, Range Non-exhaustive list, and in most case, the functionality can be implemented with plugins.

Syntax Comparison

Dollar Variable • Prototype uses $ for id based selection • jQuery $ = CSS based selector (= $$ in Prototype) Note that Prototype will return element objects or arrays of elements for most methods. jQuery will usually return a jQuery object (which looks like an array in Firebug).

$ Example Prototype $('speech1').show(); jQuery $('#speech1').show();

CSS Based Selectors • Prototype - $$ To narrow down it's context use Element.getElementsBySelector(selector) (or Element.select(selector) in 1.6) • jQuery - $ Virtually all of jQuery's DOM selection is done using CSS 1-3

Selector Examples Prototype $$('.dialog').invoke(‘show’); $('final-speech').getElementsBySelector ↩ ('DIV.final-dialog').each(Element.hide); // 1.6 $('final-speech').select('DIV.final- ↩ dialog').invoke('hide');

Selector Examples jQuery $('.dialog').show(); $('#final-speech DIV.final-dialog') ↩ .hide();

DOM Ready Event • Prototype - uses Event object • jQuery - uses two types of syntax, both meaning the same thing jQuery uses different methods to execute the ready function when the DOM is ready, using speciﬁc methods for IE and for Safari (http://tinyurl.com/p9pwe, http://tinyurl.com/2ya35y)

Ready Example Prototype Event.observe(window,'load',function(){}); Prototype 1.6 document.observe('contentloaded', function{}); jQuery $(document).ready(function(){}); // or $(function(){});

Iteration • Prototype - current active element, and position is passed in to callback function. [el1, el2].each(fn(el, i)) • jQuery - current element position passed in to callback function, and binds the function to current active element (i.e. this is set to the active element). • $([el1, el2]).each(fn(i))

DOM Walking • Prototype - up, down, next & previous • jQuery - parent/s, children, next, prev (& nextAll, prevAll)

DOM Manipulation • Prototype - Insertion class: After, Before, Bottom, Top, update (1.6 will add: Element.insert) • jQuery - after, before, append, prepend & html

Element Classes • Prototype - addClassName, removeClassName, toggleClassName, hasClassName • jQuery - addClass, removeClass, toggleClass, is (for class matching)

Events • Prototype - Event class: observe, stopObserving Prototype 1.6 will support Element.observe • jQuery - bind, unbind (also supports shortcuts: .click, .dblclick, .mouse*, .ready., .focus, .blur)

Bubbling • Prototype - Event.stop() • jQuery - return false or event.stopPropagation() (event is passed in to the callback)

Ajax Prototype new Ajax.Request(url[, options]) jQuery $.ajax(options) // url included in options

Ajax - Method Comparison Prototype jQuery onCreate beforeSend onSuccess success onException error onComplete complete

Ajax Examples Prototype new Ajax.Request(‘/profile’, { method: ‘post’, parameters:$H({‘action’:‘check_username’, ‘username’:$F(‘username’)}), onSuccess: function (j) { // do stuff with response } });

Ajax Examples jQuery $.ajax({ url: '/profile', data: {'action':'check_username', 'username': $('#username').val()}, type: 'post', success: function (json) { // do stuff with response } });

Plugins / Extensions Prototype Element.addMethods({myPlugin : function ↩ (element, args) { return element; }}); jQuery jQuery.fn.myPlugin = function (args) ↩ { return this; };

Browser Detection • Prototype - Prototype.Browser.IE, .Webkit, etc. • jQuery - jQuery.browser.msie, .safari, etc.

Resources Prototype jQuery API prototypejs.org/api docs.jquery.com/Core Tutorials prototypejs.org/learn docs.jquery.com/Tutorials Effects script.aculo.us interface.eyecon.ro

http://ajaxian.com	40866
http://jimneath.org	35305
http://web.enavu.com	17840
http://www.pinceladasdaweb.com.br	2107
http://phpspot.org	1833
http://blog.btmup.com	1342
http://remysharp.com	1298
http://blog.ericsk.org	1166
http://grochtdreis.de	1128
http://www.chazzuka.com	1069
http://www.webadictos.com.mx	874
http://icyleaf.com	840
http://www.ajaxian.com	832
http://tutsvalley.com	791
http://www.frogx3.com	764
http://firejune.com	572
http://www.slideshare.net	503
http://coliss.com	426
http://blog.dreamcss.com	419
http://www.icyleaf.cn	378
http://yuppframework.blogspot.com	337
http://blog.guoshuang.com	298
http://www.markdbd.com	287
http://cachina.wordpress.com	265
http://ji80903.tistory.com	241
http://www.ajaxman.net	236
http://weber.eti.br	224
http://ajaxed.ru	215
http://rhio.tistory.com	206
http://charlie-blog.com	184
http://ajaxus.net	178
http://marlo-strouven.blogspot.be	173
http://despuesdegoogle.com	162
http://www.netvibes.com	159
http://railser.cn	146
http://translate.googleusercontent.com	143
http://www.tatuin.biz	139
http://otherwi.se	127
http://blog.lamtruonghuy.info	124
http://www.gfxdizayn.com	120
http://www.blogandia.com	97
http://blog.ecmas4.com	95
http://navinyim.blogspot.com	87
http://www.asiermarques.com	82
http://www.mimul.com	75
http://webdev.blogli.co.il	73
http://calos-tw.blogspot.com	72
http://blog.cachina.com.br	60
http://www.ditii.com	57
http://www.btmup.com	57
http://kevin.wocal.cn	54

Prototype & jQuery

by Remy Sharp

Accessibility

Categories

Upload Details

Usage Rights

368 Embeds 117K

Statistics

Prototype & jQuery Presentation Transcript