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	27667
http://web.enavu.com	12133
http://phpspot.org	1833
http://www.pinceladasdaweb.com.br	1818
http://remysharp.com	1298
http://blog.ericsk.org	1166
http://grochtdreis.de	1128
http://www.chazzuka.com	1069
http://blog.btmup.com	1032
http://www.webadictos.com.mx	874
http://icyleaf.com	833
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://www.icyleaf.cn	378
http://blog.guoshuang.com	298
http://www.markdbd.com	287
http://yuppframework.blogspot.com	264
http://ji80903.tistory.com	241
http://www.ajaxman.net	236
http://ajaxed.ru	215
http://rhio.tistory.com	206
http://weber.eti.br	198
http://charlie-blog.com	184
http://ajaxus.net	178
http://despuesdegoogle.com	162
http://www.netvibes.com	159
http://railser.cn	140
http://www.tatuin.biz	139
http://cachina.wordpress.com	129
http://otherwi.se	127
http://blog.lamtruonghuy.info	124
http://www.gfxdizayn.com	120
http://translate.googleusercontent.com	107
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://www.ditii.com	57
http://www.btmup.com	57
http://blog.cachina.com.br	55
http://www.laweba.net	54
http://kevin.wocal.cn	54
http://www.acalbuquerque.blog.br	50

Prototype & jQuery

by Remy Sharp on Oct 25, 2007

Accessibility

Categories

Tags

Upload Details

Usage Rights

352 Embeds 101K

Statistics

Prototype & jQuery — Presentation Transcript