专业网站建设品牌，十四年专业建站经验，服务6000+客户--广州京杭网络

免费热线：400-683-0016      微信咨询  |  联系我们

• 网站首页
• 网站建设
• 短视频
• 网站推广
• 网站模板
• 客户案例
• 资讯动态
• 关于我们

JQuery和Prototype区别小结

当前位置：网站建设 > 技术支持

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大部分是极为相似的，多用几次就都熟了。。