Migrate from Prototype to jQuery

One Prototype object only uses native method

change

var ele = $("some_id");
ele.innerHTML = "some-value";

to native javascript

var ele = document.getElementById("some_id");
ele.innerHTML = "some-value";

Checking null

Prototype	jQuery
`$("some_id") == null`	`jQuery("#some_id").length == 0`

Creating new element

Prototype

new Element("div")

jQuery

jQuery("<div>")

Traversing > Filtering

Prototype	jQuery
`$("radio_ele").checked`	`jQuery("#radio_ele").is(":checked")`
`$("some_id").visible()`	`jQuery("#some_id").is(":visible")`
`$("some_id") == target`	`jQuery("#some_id").is(jQuery(target))`
`$("some_id").descendantOf(target)`	`jQuer(target).has(jQuery("#some_id")).length`

Effects

Prototype	jQuery
Basics
`$("some_id").show()` `Element.show($("some_id"))`	`jQuery("#some_id").show()`
`$("some_id").hide()` `Element.hide($("some_id"))`	`jQuery("#some_id").hide()`
`$("some_id").toggle()`	`jQuery("#some_id").toggle()`

Manipulation

Prototype	jQuery
Class Attribute\|css
`$("some_id").addClassName("class-name")`	`jQuery("#some_id").addClass("class-name")`
`$("some_id").removeClassName("class-name")`	`jQuery("#some_id").removeClass("class-name")`
`$("some_id").hasClassName("class-name")`	`jQuery("#some_id").hasClass("class-name")`
DOM Insertion, Inside
`$("some_id").innerHTML` `$("some_id").innerHTML = "some-content"` `$("some_id").update("some-content")`	`jQuery("#some_id").html()` `jQuery("#some_id").html("some-content")`
`$("some_id").appendChild(childElement)`	`jQuery("#some_id").append(childElement)`
`$("r_id").parentNode.insertBefore($("new_id"),$("r_id"))`	`jQuery("#new_id").insertBefore(jQuery("#r_id"))`
DOM Removal
`$("some_id").remove()`	`$("#some_id").remove()`
General Attributes
`$("some_id").value` `$("some_id").value = "some-value"`	`jQuery("#some_id").val()` `jQuery("#some_id").val("some-value")`
`$("some_id").disabled = false`	`jQuery("#some_id").prop("disabled", false)`
Style Properties
`$("some_id").setStyle()`	`$("#some_id").css()`
`$("some_id").getWidth()` `$("some_id").getHeight()` `$("some_id")getDimensions()`	`jQuery("#some_id").width()` `jQuery("#some_id").height()`
`Element.cumulativeOffset($("some_id"))` `Position.cumulativeOffset($("some_id"));`	`jQuery("#some_id").offset()` `jQuery("#some_id").position()`

Events

Prototype	jQuery
Event Handler Attachment
`Event.observe($("some_id"),"click",function(){})` `Event.stopObserving($("some_id"),"click",function(){})`	`jQuer("#some_id").on("click",function(){})` `jQuer("#some_id").unbind("click",function(){})`
`function(){}.bind(context)`	`jQuery.proxy(function(){},context)`
`$("some_id").fire('some-event')`	`jQuery("#some_id").trigger('some-event')`
Form events
`$("some_id").focus()`	`jQuery("#some_id").focus()`

Ajax > Low-Level Interface

prototype

    new Ajax.Request(url,{
        requestHeaders : {Accept: 'application/json'},
        method : 'POST',
        parameters : 'p1=' + p1.value + '&p2=' + p2.value,
        onsuccess : handle_success_func(xhr){
            ...
            xhr.responseText.evalJSON();
            ...
        },
        onFailure : handle_failure_func(xhr){},
        onException : handle_exception_func(xhr){},
        onComplete : handle_complete_func(){}
    });

jQuery

    jQuery.ajax(url,{
        accepts : {Accept: 'application/json'},
        type : 'POST',
        data : {p1 : p1.value, p2 : p2.value},
        success : handle_success_func(data, textStatus, xhr){
            ...
            jQuery.parseJSON(xhr.responseText)
            ...
        },
        error : handle_error_func(xhr){},
        complete : handle_complete_func(){}
    });

Miscellaneous > Collection Manipulation | Traversing

Prototype	jQuery
`$("some_id").each(function(e){})`	`jQuery("#some_id").each(function(index,e){})`

Utilities

Prototype	jQuery
`someText.isJSON()`	`typeof jQuery.parseJSON(someText) === "object"`

prototype

$$("#enumerable").any(function(e){
    //some judgment on e
});

jQuery

// solution 1.Get the length of array which contains elements those satisfy a filter function
jQuery.grep(jQuery("#enumerable").toArray(), function(e){
    //return e meets the condition ?
}).length;

// solution 2.Using each loop
var satisfy = false;
$("#enumerable").each(function(index,e){
    if(/*e meets the condition*/){
        satisfy = true;
        return false;   //break loop
    }
});

Methods of Prototype those jQuery doesn’t exist.

1.prototype

someStr.escapeHTML();

using native javascript

someStr.replace("/&/g", "&amp;").replace("/</g", "&lt;").replace("/>/g", "&gt;");

2.prototype

[1, 7, -2, -4, 5].detect(function(n) { return n < 0; });

navtive javascript

var arr = [1, 7, -2, -4, 5];
for(var i=0,l=arr.length; i<l; i++){
    if(arr[i] < 0){
        return arr[i];
    }
}