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
}); |