Diferencias entre Prototype y jQuery

Page last edited hace 2059 días 13 horas
De Solaris-ES
Saltar a: navegación, buscar

Configuración de Frameworks[editar]

Importante:Es posible utilizar los dos frameworks al mismo tiempo, pero no es recomendado. Esto puede ser útil al 
momento de migrar de uno a otro. Para esto tenemos que utilizar la función de jQuery "jQuery.noConflict();"


Configuración de Framework jQuery[editar]

* Framework completo recomendado para desarrollo 
<script type='text/javascript'   src='/js/jquery-1.7.1.js'></script>

* Framework mínimo recomendado para producción 
<script type='text/javascript'   src='/js/jquery-1.7.1.min.js'></script>


Configuración de framework Prototype[editar]

<script type='text/javascript'          src='/js/prototype.js'></script>
<script type='text/javascript'          src='/js/scriptaculous.js'></script>
<script type='text/javascript'          src='/js/stereotabs.js'></script>
<script type='text/javascript'          src='/js/effects.js'></script>
<script type='text/javascript'          src='/js/ie5.js'></script>
<script type='text/javascript'          src='/js/window.js'></script>



Diferencias entre los dos frameworks jQuery Vs. Prototype[editar]

jQuery                                            Prototype  
-------------------------------------------------------------------------------------------------
jQuery('#id').val();                              $F('id');
jQuery('#id').val("algo");                        $('id').value = "algo";
jQuery('#id').html("Hola");                       $('id').update("Hola");
jQuery('#id').show();                             $('id').show();
jQuery('#id').hide();                             $('id').hide();
jQuery('#id').focus();                            $('id').focus();
jQuery('#id').attr('disabled', false);            $('id').disable();
jQuery('#id').attr('disabled', true);             $('id').enable();
jQuery('#id').attr('class', "nueva clase");       $('id').className="nueva clase";
jQuery('#id').css('height','100px');              $('id').setStyle({height: '100px'});
jQuery('#id').offset().top;                       $('id').offsetTop;
jQuery('#id').height();                           $('id').clientHeight;
jQuery('#id').prop("selectedIndex",0)             $('id').selectedIndex = 0;
jQuery('input').each(function(e) {} );            $$('input').each(function(e) {} );
jQuery                                            Prototype  
-------------------------------------------------------------------------------------------------
jQuery(element).find( selector );                 $(element).select( selector );
jQuery(element).html(HTML);                       $(element).innerHTML = "HTML";
jQuery(element).html(HTML);                       $(element).update( HTML );
jQuery(element).text(TEXT);                       $(element).innerText = "TEXT";
jQuery(element).css( propertyName, value )        $(element).setStyle( style(s) )
jQuery(element).css( propertyName )               $(element).getStyle( propertyName )
jQuery(element).attr('className')                 $(element).classNames()
jQuery(element).hasClass( className )             $(element).hasClassName( className )
jQuery(element).toggleClass( className )          $(element).toggleClassName( className )
jQuery(element).addClass( className(s) )          $(element).addClassName( className )
jQuery(element).removeClass( className(s) )       $(element).removeClassName( className )
jQuery(element).attr( attributeName )             $(element).readAttribute( attributeName )
jQuery(element).attr( attributeName, value )      $(element).writeAttribute( attribute(s) )
jQuery(element).width()                           $(element).getWidth()
jQuery(element).height()                          $(element).getHeight()
jQuery(element).width(value)                      -
jQuery(element).height(value)                     -
jQuery(element).is(':empty')                      $(element).empty()
jQuery('selector').bind(eventType, handler)       Event.observe(element, eventName, handler)
jQuery(selector).unbind(eventtype, handler)       Event.stopObserving(element, eventName, handler)
jQuery(document).ready()                          document.observe("dom:loaded", function() {} );
event.target                                      Event.findElement(event, tagName)
jQuery.ajax( settings )                           new Ajax.Request(url[, options])
-                                                 new Ajax.PeriodicalUpdater(container, url[, options]) 
-                                                 new Ajax.Updater(container, url[, options]) 
jQuery(element).append()                          Element.insert(element, { position: content }
jQuery(element).appendTo()
jQuery(element).prepend()
jQuery(element).prependTo()
jQuery(element).before()
jQuery(element).after()
jQuery(element).insertBefore()
jQuery(element).insertAfter()

Funciones Utiles de jQuery[editar]

  • Control de Navegadores
jQuery.browser.msie;    // 'true' para navegadores de la familia Internet Explorer
jQuery.browser.mozilla; // 'true' para navegadores de la familia Firefox
jQuery.browser.opera;   // 'true' para navegadores de la familia Opera
jQuery.browser.safari;  // 'true' para navegadores de la familia Safari
  • Se ejecuta cuando el documento esta cargado
jQuery(document).ready(function() {} );
  • Se ejecuta al cargar la imagen
jQuery('#idImageX').load(function()  {} );
  • Asigna un evento click a un elemento.
jQuery('#id').click(function () { alert('ClickMe') });
jQuery(document).ready(function() { jQuery('#comprobar').click(comprobar); });
  • Ejecuta el evento 'mouseover' sobre un 'div' con id 'menu'
jQuery('div#menu').mouseover();                            
  • Establece la función manejadora del evento 'onblur' a los elementos de un formulario
jQuery('#formulario:input').blur(function() { valida($(this)); }); 
  • Permite ejecutar dos funciones de forma alterna cada vez que se pincha sobre un elemento
jQuery("#id").toggle 
(
 function() { alert("Me acabas de activar"); },
 function() { alert("Me acabas de desactivar");}
);
  • Petición GET
jQuery.get(url, datos, funcion);
  • Petición GET simple
jQuery.get('/ruta/hasta/pagina.php');
  • Petición GET con envío de parámetros y función que procesa la respuesta
jQuery.get('/ruta/hasta/pagina.php', { articulo: '34' }, function(datos) { alert('Respuesta = '+datos); });

Nota: Para un apeticion POST la funcion es jQuery.post()
  • Oculta todos los enlaces de la página
jQuery('a').hide();
  • Muestra todos los 'div' que estaban ocultos
jQuery('div:hidden').show();
  • Muestra los 'div' que estaba ocultos y oculta los 'div' que eran visibles
jQuery('div').toggle();
  • Obtiene el valor de una propiedad CSS, en este caso, solo para el primer 'div' de la página
jQuery('div').css('background');
  • Establece el valor de una propiedad CSS, en este caso, para todos los 'div' de la página
jQuery('div').css('color', '#000000');
  • Establece varias propiedades CSS, en este caso, para todos los 'div' de la página
jQuery('div').css({ padding: '3px', color: '#CC0000' }); 
  • Obtiene la altura en píxel del primer 'div' de la página
jQuery('div').height();
  • Establece la altura en píxel de todos los 'div' de la página
jQuery('div').height('150px');
  • Obtiene la anchura en píxel del primer 'div' de la página
jQuery('div').width();
  • Establece la anchura en píxel de todos los 'div' de la página
jQuery('div').width('300px'); 




Diferencias en Ajax[editar]

Metodos[editar]

jQuery         Prototype
-------------------------------
beforeSend     onCreate
success        onSuccess
error          onException
complete       onComplete

Parametros[editar]

jQuery         Prototype
-------------------------------
async          asynchronous
url            url
timeout        -
type           method
data           parameters
-              evalScripts
dataType       responseText, responseXML, responseJSON
cache          -
traditional    -

Descripcion de los Parametros de Ajax en jQuery[editar]

url         : La URL del servidor a la que se realiza la petición 
data        : Información que se incluye en la petición. Se utiliza para enviar parámetros al servidor. 
              Si es una cadena de texto, se envía tal cual, por lo que su formato debería ser 
              parametro1=valor1&parametro2=valor2. También se puede indicar un array asociativo de pares clave/valor 
              que se convierten automáticamente en una cadena tipo query string
dataType    : El tipo de dato que se espera como respuesta. Si no se indica ningún valor, jQuery lo deduce a partir 
              de las cabeceras de la respuesta. Los posibles valores son: xml (se devuelve un documento XML 
              correspondiente al valor responseXML), html (devuelve directamente la respuesta del servidor mediante 
              el valor responseText), script (se evalúa la respuesta como si fuera JavaScript y se devuelve el resultado) 
              y json (se evalúa la respuesta como si fuera JSON y se devuelve el objeto JavaScript generado)
type        : El tipo de petición que se realiza. Su valor por defecto es GET, aunque también se puede utilizar el método POST
async 	     : Indica si la petición es asíncrona. Su valor por defecto es true, el habitual para las peticiones AJAX
contentType : Indica el valor de la cabecera Content-Type utilizada para realizar la petición. Su valor por defecto 
              es application/x-www-form-urlencoded
ifModified  : Permite considerar como correcta la petición solamente si la respuesta recibida es diferente de la 
              anterior respuesta. Por defecto su valor es false
processData : Indica si se transforman los datos de la opción data para convertirlos en una cadena de texto. 
              Si se indica un valor de false, no se realiza esta transformación automática
timeout     : Indica el tiempo máximo, en milisegundos, que la petición espera la respuesta del servidor antes de 
              anular la petición
cache       : Establece si la petición será guardada en la cache del navegador.
traditional : Si su valor es true, se utiliza el estilo de serialización de datos utilizado antes de jQuery 1.4.
beforeSend  : Permite indicar una función que modifique el objeto XMLHttpRequest antes de realizar la petición. 
              El propio objeto XMLHttpRequest se pasa como único argumento de la función
success     : Permite establecer la función que se ejecuta cuando una petición se ha completado de forma correcta. 
              La función recibe como primer parámetro los datos recibidos del servidor, previamente formateados según 
              se especifique en la opción dataType
complete    : Permite establecer la función que se ejecuta cuando una petición se ha completado (y después de ejecutar, 
              si se han establecido, las funciones de success o error). La función recibe el objeto XMLHttpRequest como 
              primer parámetro y el resultado de la petición como segundo argumento
error       : Indica la función que se ejecuta cuando se produce un error durante la petición. 
              Esta función recibe el objeto XMLHttpRequest como primer parámetro, una cadena de texto indicando el 
              error como segundo parámetro y un objeto con la excepción producida como tercer parámetro

textStatus  : "success", "notmodified", "error", "timeout", "abort", or "parsererror"

jqXHR
Metodos de jqXHR: 
  readyState
  status
  statusText
  responseXML and/or responseText when the underlying request responded with xml and/or text, respectively
  setRequestHeader(name, value) which departs from the standard by replacing the old value with the new one 
                                rather than concatenating the new value to the old one
  getAllResponseHeaders()
  getResponseHeader()
  abort()



Ejemplos de funciones con los dos Frameworks[editar]

Ejemplo 1[editar]

Versión jQuery[editar]

jQuery('#menu').load
(
   '<?=$LIBRARYPATH?>', 
   'OPCION=SHOWTREE', 
   function(response, status, xhr) 
   { 
    if (status == "timeout") { jQuery('#menu').html("Information Temporarily Unavailable"); };
    if (status == "error")   { jQuery('#menu').html("Information Temporarily Unavailable"); };
    if (status == "success") { tree.reset(); tree.init(); }
   }
);

Versión Prototype[editar]

new Ajax.Updater('menu', '<?php echo $LIBRARYPATH; ?>', 
{
   method: 'post',
   parameters : 'OPCION=SHOWTREE',
   asynchronous: false,
   evalScripts:true,
   onComplete: function(resp) { tree.reset(); tree.init(); },
   onFailure : function(resp) { alert(resp.responseText); }
});


Ejemplo 2[editar]

Versión jQuery[editar]

jQuery.ajax
({
  async:true, 
  url: serverPage,
  timeout: 60000,
  type:'POST',
  data: argumentos, 
  beforeSend: function()               { jQuery('#'+objID).html(HTMLResp); },
  error:      function()               { jQuery('#'+objID).html("Information Temporarily Unavailable"); },
  success:    function(responseText)   { jQuery('#'+objID).html(responseText); },
  complete:   function(objeto, status) { jQuery('#logs').load(serverPage, 'OPCION=SHOWLOGS', function(response, status, xhr) { jQuery('#logs').html(response);} ); }
});	

Versión Prototype[editar]

$(objID).update(HTMLResp);
new Ajax.Updater(objID, serverPage, 
{
  method: 'post',
  parameters : argumentos,
  asynchronous: true,
  evalScripts:true,
  onComplete: function(resp) { new Ajax.Updater('logs', serverPage, {method: 'post',parameters : 'OPCION=SHOWLOGS'}); },
  onFailure : function(resp) { $(id).update("Information Temporarily Unavailable"+resp.responseText); }
});

Ejemplo 3[editar]

Versión jQuery[editar]

var periodicalUpdater = function() 
{
 jQuery.ajax({
   url: 'http://www.example.com/api/get/status.html',
   dataType: 'text',
   success: function(code) {
       jQuery("#statusContainer").html(code);
   }
 });
};
setInterval(periodicalUpdater, 1000);

Versión Prototype[editar]

new Ajax.PeriodicalUpdater(container, url[, options])

Ejemplo 4[editar]

Versión jQuery[editar]

var periodicalExecuter = function() { ... };
setInterval(periodicalExecuter, 1000);

Versión Prototype[editar]

new PeriodicalExecuter(function(pe) { ... }, interval)