Reference: Migrating from PrototypeJS to jQuery

Event Prototype jQuery Also recommended for coreBOS
Selecting DOM Elements $('id') jQuery("#id") document.getElementById("id")
$$(selector)[x] jQuery(selector).eq(x)
GET/SET content $F('id') jQuery("#id").val()
.innerHTML .html() document.getElementById(element).innerHTML
element.update('new content') element.html('new content'); vtlib_executeJavascriptInElement(document.getElementById(element)); document.getElementById(element).innerHTML='new_content'; vtlib_executeJavascriptInElement(document.getElementById(element));
.value = x .val(x)
Update style .style.x = 'y' .css({ x: 'y' })
.setStyle( style(s) ) .css( propertyName, value )
.hasClassName( className ) .hasClass( className )
.addClassName( className ) .addClass( className(s) )
Get/Set Attributes .checked .prop('checked')
disabled .prop('disabled')
.some_attr .attr('some_attr')
.getWidth() .width()
.empty() .is(':empty')
Effects .fade({duration: x}) .fadeOut(x * 1000)
.appear({duration: x}) .appear({duration: x})
Effect.Appear .fadeOut(x * 1000)
Effect.Appear fadeIn()
Effect.Fade fadeOut()
Event Handlers $(element_id).observe("click", function(event){ ... }) jQuery('#'+element_id).bind("click", function(jQueryEvent){ ... })
document.observe("dom:loaded", function() { ... }); $(document).ready()
Event.observe(element, eventName, handler) $('selector').bind(eventType, handler)
Sortable.create("element" { constraint:false, tag:'div', overlap:'Horizontal', handle:'headerrow', onUpdate:function(){ // do smth } }) jQuery("#element").sortabe({ constraint: false, tag: 'div', overlap: 'Horizontal', handle: '.headerrow', update: function () { //do smth } })
AJAX new Ajax.Request('index.php', { queue : {position : 'end', scope : 'command'}, method : 'post', postBody : "urlstring", onComplete : function(response) { // do smth } }); jQuery.ajax({ method: 'POST', url:'urlstring', }).done(function (response) { //do smth });
Updates