jQuery与prototype的比较

jQuery与prototype的比较

 

        

                

     主要区别

Prototype	jQuery
Extends the DOM and core javascript objects.是在javascript核心上做文章，模拟传统的OO编程，选择器返回的对象是DOM对象。	全新的封装； 选择器选取的对象是jQuery对象。
提供一系列的实用函数

 

                

 

            Differences in Native Support

Prototype	jQuery
Class creation	No conflict($)
Try. These	Effects
Position, Range

 

               Syntax Comparison

Prototype	jQuery
Dollar变量
prototype uses $ for id based selection	jQuery $= CSS based selector(=$$ in Prototype).
$(‘speech1’).show();	$(‘#speech1’).show();
CSS based Selectors
$$ or Element.getElementsBySelector(selector)	$
$$(‘.dialog’).invoke(‘show’);	$(‘.dialog’).show();
DOM Ready Event
Event.observe(window,’load’,function(){});	$(document).ready(function{});
$$(‘.dialog’).invoke(‘show’);	$(‘.dialog’).show();
DOM Manipulation
Insertion class: After,Before,Bottom,Top,update	after,before,append,prepend,html.
Element Classes
addClassName,removeClassName, toggleClassName,hasClassName	addClass,removeClass,toggleClass,is
Elements
Event class:observe,stopObserving	Bind,unbind,同时支持.click,.dbclick,等等
Ajax
New Ajax.Request(url,[,option])	$.ajax(options) //url inclued in options
Method Comparison
oncreate(), onSuccess(), onException(), onComplete()	beforeSend(), success(), error(), complete()
Plugins/Extensions
Element.addMethods({myPlugin:function (element,args){return element;}});	jQuery.fn.myPlugin = function(args) {return this;};
Brower Detection
Prototype.Browser.IE,	jQuery.browser.msie
其他资源
API: prototypejs.org/api Tutorials: prototypejs.org/learn	API: docs.jquery.com/core Tutorials: docs.jquery.com/Tutorials