title: Prototype and jQuery - Going from one to the other
gradient: top-bottom navy aqua

h1. Prototype vs jQuery  

To and from JavaScript libraries by "Remy Sharp":http://remysharp.com

(Adapted S9 Version from "Original PDF Slide Deck":http://www.slideshare.net/remy.sharp/prototype-jquery-going-from-one-to-the-other)

h1. Why Prototype?

* Extends the DOM and core JavaScript objects
* An arsenal of utility functions

Based on Prototype 1.5.1 & 1.6

h1. 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

h1. Differences in Native Support

Prototype has:

* Class creation
* Try.these
* Position, Range

jQuery has: 

* No Conflict (@$@) 
* Effects 

Non-exhaustive list, and in most case, the
functionality can be implemented with plugins.

h1. Syntax Comparison

* Dollar (@$@) Variable
* CSS Based Selectors
* DOM Ready Event
* Iteration
* DOM Walking
* DOM Manipulation
* Element Classes
* Events
* Bubbling
* Ajax
* Plugins / Extensions
* Browser Detection





h1. 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).

h1. @$@ Example

Prototype

{{{
$('speech1').show();
}}}

jQuery

{{{
$('#speech1').show();
}}}

h1. 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

h1. 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');
}}}

jQuery

{{{
$('.dialog').show();

$('#final-speech DIV.final-dialog').hide();
}}}

h1. 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 specific methods for Internet Explorer
and for Safari[1]

fn1. "@window.onload@ again":http://dean.edwards.name/weblog/2006/06/again/, "The @window.onload@ Problem Revisited":http://blog.outofhanwell.com/2006/06/08/the-windowonload-problem-revisited/

h1. Ready Example

Prototype

{{{
Event.observe(window,'load',function(){});
}}}

Prototype 1.6

{{{
document.observe('contentloaded',function{});
}}}

jQuery

{{{
$(document).ready(function(){});
 // or
$(function(){});
}}}

h1. 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))
}}}

h1. DOM Walking

Prototype - up, down, next & previous

jQuery - parent/s, children, next, prev (& nextAll, prevAll)


h1. DOM Manipulation

Prototype - Insertion class: After, Before, Bottom, Top, update (1.6 will add: @Element.insert@)

jQuery - after, before, append, prepend & html


h1. Element Classes

Prototype - @addClassName@, @removeClassName@, @toggleClassName@, @hasClassName@

jQuery - @addClass@, @removeClass@, @toggleClass@, is (for class matching)


h1. 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@)


h1. Bubbling

Prototype - @Event.stop()@

jQuery - return false or @event.stopPropagation()@ (event is passed in
to the callback)

h1. Ajax

Prototype

{{{
new Ajax.Request(url[, options])
}}}

jQuery

{{{
$.ajax(options) // url included in options
}}}

h1. Ajax - Method Comparison

| Prototype     | jQuery        |
| @onCreate@    | @beforeSend@  |
| @onSuccess@   | @success@     |
| @onException@ | @error@       |
| @onComplete@  | @complete@    |

h1. Ajax Examples

Prototype

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

jQuery

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

h1. Plugins / Extensions

Prototype

{{{
Element.addMethods({myPlugin : function(element, args) { return element; }});
}}}

jQuery

{{{
jQuery.fn.myPlugin = function (args) { return this; };
}}}

h1. Browser Detection

Prototype - @Prototype.Browser.IE@, @.Webkit@, etc.

jQuery - @jQuery.browser.msie@, @.safari@, etc.


h1. Resources

|      | Prototype | jQuery  |
| API       | "@prototypejs.org/api@":http://prototypejs.org/api | "@docs.jquery.com/Core@":http://docs.jquery.com/Core  |
| Tutorials | "@prototypejs.org/learn@":http://prototypejs.org/learn | "@docs.jquery.com/Tutorials@":http://docs.jquery.com/Tutorials  |
| Effects   | "@script.aculo.us@":http://script.aculo.us | "@interface.eyecon.ro@":http://interface.eyecon.ro  |