Go back to the main page

jQuery Prototype equivs

This article is over 2 years old. Proceed with caution.

Regards ♨ – Minimul

 

Running braindump of equivalents between both frameworks and by no means comprehensive. No structure here, just my scribbled notes.

prototypejs Array.last()
[1,2].last(); # output 2
jquery
a = [1,2];
a[a.length - 1]; # output 2

prototypejs .next('li',3)
jquery nextAll('li')[2]

prototypejs Enumerable.each()
    ['Open','Save'].each(function(doc){
      select.push('');
    });
jquery
    $(['Open','Save']).each(function(index,doc){
      select.push('');
    });


prototypejs .down('li') : finds first match and returns
jquery
find('li').first() # this is much faster than li:first
find('li:first')

prototypejs .up('li)
.up('li') # finds first parent
jquery
closest('li')

prototypejs .up() no selector
jquery
    .parent()

prototypejs .down() no selector
jquery, no equivalent

protoypejs dom detection
    if(!$('addAnotherRow'))
        // do something if no dom el found 
jquery
    if($('#add-another-row').length === 0)
        // do something if no dom element found
    // or
    if(!$('#add-another-row').size())
        // do something if no dom element found

prototypejs new Element and .update()
      var link = '#{c}'.interpolate({ a: o.linkTitle, b: o.linkClassName, c: o.linkContent });
      var addAnotherRow = new Element('div', { 'id': 'addAnotherRow' }).update(link);
jquery
    // jquery : equiv is .html()
    var link = '' + o.linkContent + '';
    var addAnotherRow = $('
').html(link);

prototypejs event.stop()
jquery
    // jquery
    return false;
    // or
    event.preventDefault()

prototypejs .bindAsEventListener
  addAnotherRow.down('a').observe('click',this.add.bindAsEventListener(this));
jquery
   addAnotherRow.find('a').first().click($.proxy(this.add,this));

prototypejs .interpolate
    var link = '#{c}'.interpolate({ a: o.linkTitle, b: o.linkClassName, c: o.linkContent });
jquery, no equivalent

prototypejs cumulativeOffset
    var o = fileCabinet.cumulativeOffset();
jquery
    var o = fileCabinet.offset();

prototypejs pointerX,Y
    event.pointerY
    event.pointerX
jquery
    event.clientY
    event.clientX

prototypejs getWidth()/getHeight()
    $('rectangle').getWidth();
    $('rectangle').getHeight();
    // or
    Element.getDimensions();
jquery
    $('#rectangle').width();
    $('#rectangle').height();

prototypejs bindAsEventListener
      var mu = this.moveUnder.bindAsEventListener(fileCabinet,input);
      moveUnder: function(event,file){
        var fileCabinet = this;
        var o = fileCabinet.cumulativeOffset();
        .....
jquery
      chooseButton.bind('mousemove',{ input: input, choose: chooseButton }, this.moveUnder );
      moveUnder: function(event){
        var e = event,
            choose = event.data.choose,
            input = event.data.input,
            ....
      

prototypejs Element.getAttribute
    $('el').getAttribute('title');
jquery
    $('#el').attr('title');

#

prototypejs Element.activate
    $('el').activate()
jquery
    $('#el').focus().select()

prototypejs Element.writeAttribute
    $('el').writeAttribute('title','Click here for help');
jquery
    $('#el').attr('title','Click here for help');

Comment on this article?