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) | ||
$(element).select( selector ) | $(element).find( selector ) | ||
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 | 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 }); |