幸福的猪窝

转一篇， JQuery 与 Prototype 的使用异同

页面载入

// JQuery
	$ ( document ). ready ( function () {
	        // Code
	});

// JQuery Shorthand
	$ ( function () {
	        // Code
	});

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

根据ID获取

// JQuery
$ ( "#idname" );

// Prototype
$ ( "idname" );

根据类名

// JQuery
$ ( ".classname" );

// Prototype
$$ ( '.classname' );

根据第一个符合的类名

// JQuery
$ ( ".classname:first-child" );

// Prototype
$$ ( '.classname' )[ 0 ];

根据ID绑定监听事件

// JQuery
$ ( "#item" ). bind ( 'click' , function () {
	        // Code
	});
	// JQuery Shorthand
	$ ( "#item" ). click ( function () {
	        // Code
	});

// Prototype
$ ( "#item" ). observe ( 'click' , function () {
	        // code
	});

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

// JQuery
	$(".classname").bind('click',function(){
	 // code
	});
	// JQuery Shorthand
	$ ( ".classname" ). click ( function () {
	        // code
	});

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

结束终止事件

// JQuery
$ ( "#id" ). click ( function () {
	        //code
	        return false ;
	});

// Prototype
$ ( "id" ). observe ( 'click' , function ( e ) {
	        //code
	        Event . stop ( e );
	});

处理观察的元素

// JQuery
$ ( '#idname' ). click ( function () {
	        this . hide (); // Hide the item clicked
	});

// Prototype
$ ( 'idname' ). observe ( 'click' , function ( e ) {
	        el = e . findElement ;
	        el . hide (); // hide the item clicked
	});

根据ID操作类名

// JQuery
	$ ( '#id' ). addClass ( 'red' );
	$ ( '#id' ). removeClass ( 'red' );

// Prototype
	$ ( 'id' ). addClassName ( 'red' );
	$ ( 'id' ). removeClassName ( 'red' );

根据类名操作类名。。

// JQuery
	$ ( '.class' ). addClass ( 'red' );
	$ ( '.class' ). removeClass ( 'red' );

// Prototype
	$$ ( '.class' ). invoke ( 'addClassName' , 'red' );
	$$ ( '.class' ). invoke ( 'removeClassName' , 'red' );

AJAX请求和JSON应用

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

// Prototype
new   Ajax . Request ( url ,   {
	        method : 'get' ,
	        onSuccess : function ( transport , json ) {
	                alert ( json . name );
	        }
	});

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