Download - Prototype Jquery
![Page 1: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/1.jpg)
Prototype ⇔ jQuery
Remy Sharp (remysharp.com)
To and from JavaScript libraries.
![Page 2: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/2.jpg)
Why Prototype?
• Extends the DOM and core JavaScript objects
• An arsenal of utility functions
Based on Prototype 1.5.1 & 1.6
![Page 3: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/3.jpg)
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
![Page 4: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/4.jpg)
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.
![Page 5: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/5.jpg)
Syntax Comparison
![Page 6: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/6.jpg)
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).
![Page 7: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/7.jpg)
$ Example
$('speech1').show();
Prototype
$('#speech1').show();
jQuery
![Page 8: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/8.jpg)
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
![Page 9: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/9.jpg)
Selector Examples
$$('.dialog').invoke(‘show’);
$('final-speech').getElementsBySelector ↩('DIV.final-dialog').each(Element.hide);
// 1.6$('final-speech').select('DIV.final- ↩dialog').invoke('hide');
Prototype
![Page 10: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/10.jpg)
Selector Examples
$('.dialog').show();
$('#final-speech DIV.final-dialog') ↩ .hide();
jQuery
![Page 11: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/11.jpg)
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 IE and for Safari (http://tinyurl.com/p9pwe, http://tinyurl.com/2ya35y)
![Page 12: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/12.jpg)
Ready Example
Event.observe(window,'load',function(){});Prototype
$(document).ready(function(){}); // or
$(function(){});
jQuery
document.observe('contentloaded', function{});
Prototype 1.6
![Page 13: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/13.jpg)
Iteration
• Prototype - current active element, and position is passed in to callback function.
• 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(el, i))
$([el1, el2]).each(fn(i))
![Page 14: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/14.jpg)
DOM Walking
• Prototype - up, down, next & previous
• jQuery - parent/s, children, next, prev (& nextAll, prevAll)
![Page 15: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/15.jpg)
DOM Manipulation
• Prototype - Insertion class: After, Before, Bottom, Top, update (1.6 will add: Element.insert)
• jQuery - after, before, append, prepend & html
![Page 16: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/16.jpg)
Element Classes
• Prototype - addClassName, removeClassName, toggleClassName, hasClassName
• jQuery - addClass, removeClass, toggleClass, is (for class matching)
![Page 17: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/17.jpg)
Events
• Prototype - Event class: observe, stopObservingPrototype 1.6 will support Element.observe
• jQuery - bind, unbind (also supports shortcuts: .click, .dblclick, .mouse*, .ready.,.focus, .blur)
![Page 18: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/18.jpg)
Bubbling
• Prototype - Event.stop()
• jQuery - return false or event.stopPropagation() (event is passed in to the callback)
![Page 19: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/19.jpg)
Ajax
new Ajax.Request(url[, options])
Prototype
$.ajax(options) // url included in options
jQuery
![Page 20: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/20.jpg)
Ajax - Method Comparison
Prototype jQuery
onCreate beforeSend
onSuccess success
onException error
onComplete complete
![Page 21: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/21.jpg)
Ajax Examples
new Ajax.Request(‘/profile’, { method: ‘post’, parameters:$H({‘action’:‘check_username’, ‘username’:$F(‘username’)}), onSuccess: function (j) { // do stuff with response }});
Prototype
![Page 22: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/22.jpg)
Ajax Examples
$.ajax({ url: '/profile', data: {'action':'check_username', 'username': $('#username').val()}, type: 'post', success: function (json) { // do stuff with response }});
jQuery
![Page 23: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/23.jpg)
Plugins / Extensions
Element.addMethods({myPlugin : function ↩(element, args) { return element; }});
Prototype
jQuery.fn.myPlugin = function (args) ↩{ return this; };
jQuery
![Page 24: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/24.jpg)
Browser Detection
• Prototype - Prototype.Browser.IE, .Webkit, etc.
• jQuery - jQuery.browser.msie, .safari, etc.
![Page 25: Prototype Jquery](https://reader033.vdocuments.net/reader033/viewer/2022051312/54689535b4af9fcd688b494a/html5/thumbnails/25.jpg)
Resources
Prototype jQuery
API
Tutorials
Effects
prototypejs.org/api docs.jquery.com/Core
prototypejs.org/learn docs.jquery.com/Tutorials
script.aculo.us interface.eyecon.ro