JQuery和Prototype区别小结

jQuery使用得比较顺手也比较喜欢,不得已也要用Prototype,小小整理下区别。。

页面载入

  1. // JQuery
    
  2. $ ( document ). ready ( function () {
  3.         // Code
  4. });

 

  1. // JQuery Shorthand
    
  2. $ ( function () {
  3.         // Code
  4. });

 

  1. // Prototype
    
  2. document . observe ( 'dom:loaded' , function () {
  3.         // Code
  4. });

 

根据ID获取

  1. // JQuery
    
  2. $ ( "#idname" );
  1. // Prototype
    
    
  2. $ ( "idname" );

 

根据类名

  1. // JQuery
    
  2. $ ( ".classname" );
  1. // Prototype
    
    
  2. $$ ( '.classname' );

 

根据第一个符合的类名

  1. // JQuery
    
  2. $ ( ".classname:first-child" );
  1. // Prototype
    
    
  2. $$ ( '.classname' )[ 0 ];

 

根据ID绑定监听事件

  1. // JQuery 
    
  2. $ ( "#item" ). bind ( 'click' , function () {
  3.         // Code
  4. });
  5.  
  6. // JQuery Shorthand
  7. $ ( "#item" ). click ( function () {
  8.         // Code
  9. });
  1. // Prototype
    
  2. $ ( "#item" ). observe ( 'click' , function () {
  3.         // code
  4. });

 

根据符合的类名绑定监听事件

  1. $(".classname").bind('click',function(){
    
  2.         // code
  3. });
  4.  
  5. // JQuery Shorthand
  6. $ ( ".classname" ). click ( function () {
  7.         // code
  8. });

 

  1. // Prototype
    
  2. $$ ( ".classname" ). invoke ( 'observe' , 'click' , function () {
  3.         // code
  4. });

 

结束终止事件

  1. // JQuery
    
  2. $ ( "#id" ). click ( function () {
  3.  
  4.         //code
  5.         return false ;
  6. });
  1. // Prototype
    
  2. $ ( "id" ). observe ( 'click' , function ( e ) {
  3.         //code
  4.         Event . stop ( e );
  5. });

 

处理观察的元素

  1. // JQuery
    
  2. $ ( '#idname' ). click ( function () {
  3.         this . hide (); // Hide the item clicked
  4. });
  1. // Prototype
    
  2. $ ( 'idname' ). observe ( 'click' , function ( e ) {
  3.         el = e . findElement ;
  4.         el . hide (); // hide the item clicked
  5. });

 

根据ID操作类名

  1. // JQuery
    
  2. $ ( '#id' ). addClass ( 'red' );
  3. $ ( '#id' ). removeClass ( 'red' );
  1. // Prototype
    
  2. $ ( 'id' ). addClassName ( 'red' );
  3. $ ( 'id' ). removeClassName ( 'red' );

 

根据类名操作类名。。

  1. // JQuery
    
  2. $ ( '.class' ). addClass ( 'red' );
  3. $ ( '.class' ). removeClass ( 'red' );
  1. // Prototype
    
  2. $$ ( '.class' ). invoke ( 'addClassName' , 'red' );
  3. $$ ( '.class' ). invoke ( 'removeClassName' , 'red' );

 

AJAX请求和JSON应用

  1. $.get(url,function(data){
            alert(data . name );
    
  2. }, 'JSON' );

 

  1. // Prototype
    new   Ajax . Request ( url ,   {
  2.         method : 'get' ,
  3.         onSuccess : function ( transport , json ) {
  4.                 alert ( json . name );
  5.         }
  6. });

可以得出结论:jQuery和Prototype大部分是极为相似的,多用几次就都熟了。。

本文永久地址:https://sjolzy.cn/Difference-between-JQuery-and-Prototype-Summary.html

--EOF--

随机文章

已有 3 条评论

  1. Im not that much of a online reader to be honest but your blogs really nice, keep it up! I'll go ahead and bookmark your site to come back later. All the best kdefdedgfkddekdf

  2. mbtzapatosmbtzapatos

    谢谢分享

  3. lonleelonlee

    不错,感谢分享。

添加新评论