最新消息:Excel无乱码转CSV,由于工作原因很少更新博客和回复大家的评论,非常抱歉。

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. // JQuery Shorthand
  6. $ ( “#item” ). click ( function () {
  7. // Code
  8. });
  1. // Prototype
  2. $ ( “#item” ). observe ( ‘click’ , function () {
  3. // code
  4. });

 

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

  1. $(“.classname”).bind(‘click’,function(){
  2. // code
  3. });
  4. // JQuery Shorthand
  5. $ ( “.classname” ). click ( function () {
  6. // code
  7. });

 

  1. // Prototype
  2. $$ ( “.classname” ). invoke ( ‘observe’ , ‘click’ , function () {
  3. // code
  4. });

 

结束终止事件

  1. // JQuery
  2. $ ( “#id” ). click ( function () {
  3. //code
  4. return false ;
  5. });
  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大部分是极为相似的,多用几次就都熟了。。

来源: http://sjolzy.cn/Difference-between-JQuery-and-Prototype-Summary.html

转载请注明:嗨酷哥,有你更酷! » JQuery和Prototype区别

与本文相关文章

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项