Migrating prototype.js functionality to jQuery

Posted By : Panaru Chaudhary | 11-Jan-2017

Migrating Prototype.js JQuery

I have used both and like both. It really depends on your project's requirements. To me, it seems like both platforms came from 2 different directions because of 2 
different requirements. They were both created out of the need to solve programming issues to help build websites/applications faster and better.


1.)Prototype's selector returns  DOM elements . 


like as  :

$("element_id)                   //returns DOM objects where we can use javascript functionality on this object.
$("element_id).scrollTop;
 

but jQuery  Does not 

$("element_id")                 //returns jquery object where we can't use  javascript functionality  on this object
 

WhereAs   

$("#element_id")[0]                       //returns DOM elements 
$("#element_id")[0].scrollTop;


2.) DOM Ready 
    
Initializing on DOM ready is done with Prototype’s observe method as:
      

document.observe("dom:loaded", function(){ ... });


In jQuery:
     

$(document).ready(function(){
.............................
}) ;

OR

$(function(){ ... });

I’m mostly writing this for the next time I have to migrate Prototype to jQuery.    

 

3.) Iterating over an array

Prototype adds an each method to Array.
 

var arr=['jai','hind','jai','bharat'];     
arr.each(function(item){ 
                            // where item returns -> jai , hind and  so on...
});

jQuery can iterate over arrays.   

arr.each(function(item , value ){ 
      where item returns ->  0, 1 ,2 so on (i mean it's return index number of array) and
      where  value returns      -> jai , hind so on
  });

  OR

$.each(arr,function(value ){     // value returns      -> jai , hind so on....
    });
4.) Binding Custom Event

Binding custom event  to DOM elements in Prototype   

$("element_id").observe("remove:event", function(event){ ... });
then fire this custom event on it using   
$("element_id").fire("remove:event");    
Binding custom event  to DOM elements in jquery   
$('#element_id').bind("remove:event", function(event){ ... });   
then fire this custom event using
$("element_id").trigger("remove:event");   

                                                                                                                                                                                                                                             

THANKS

About Author

Author Image
Panaru Chaudhary

Panaru is a bright Java developer with good knowledge in Core java , advance Java, Spring , Hibernate and jQuery.

Request for Proposal

Name is required

Comment is required

Sending message..