Jquery与YUI详细比较

DOM Ready

1. Jquery

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

2. YUI

   Y.on("domready", function(e){
       // Code
   });
                           

选择器支持

<div class="demo">this is a div</div>
<div class="foo">this is a div</div>
<div class="foo">this is a div</div>

1. Jquery

   $(".demo");
   $("div.foo:first")
   $('div:even')
   $(':radio')
   $('div:gt(n)');

2. YUI

   Y.one(".demo");
   Y.one("div.foo")
   Y.all('div').even()
   Y.all('input[type=radio]')
   Y.all(Y.all('div')._nodes.slice(n + 1))

DOM操作

<div class="demo">this is a div</div>

1. Jquery

   $(".demo").append("
   hi, I'm Adam.
   
   ");
   $("<div/>");
   $("#id3").remove();
   .html("foo")
   $('div').concat($('p'))

2. YUI

   Y.one(".demo").append("
   hi, I'm Adam.
   
   ");
   Y.Node.create("<div/>");
   Y.one("#id3").remove(); 
   .set("innerHTML", "foo")
   Y.all(
       Y.all('div')._nodes.concat(
           Y.all('p')._nodes
       )
   )                        

设置/获取DOM信息

<div class="demo">this is a div</div>

1. Jquery

   $(".demo").width();
   $(".demo").addClass("foo");
   $(".demo").removeClass('foo').addClass('bar');
   $(".demo").css({
       height:  100,
       width:   100,
       display: 'block'
   });           

2. YUI

   Y.one(".demo").get("offsetWidth");
   Y.one(".demo").addClass("foo");
   Y.one(".demo").replaceClass('foo', 'bar');
   Y.one(".demo").setStyles({
       height:  100,
       width:   100,
       display: 'block'
   });               

    

事件处理

<div class="demo">this is a div</div>

1. Jquery

   $(".demo").click(function(e){alert(this);});
   $("#id")
   .click(function(){
   $(this).css({ background: "red" });
   })
   .mouseout(function(){
   $(this).css({ background: "blue" });
   });     

2. YUI

   Y.one(".demo").on('click', function(e){alert(this);});
   Y.one("#id").on({
   click: function(e) {
   this.setStyle("background", "red");
   },
   mouseout: function(e) {
   this.setStyle("background", "blue");
   }
   });      

网络特性

1. Jquery

   $.post('http://www.sina.com/', 'name=adam', function(o){});
   $("#id").load("ajax.html");
   
   // Advanced
   $.ajax({
   url: "ajax.html",
   type: "GET",
   success: function(req){
   $("#id").html(req);
   }
   }); 

    

2. YUI

   var cfg = {
   	start: function(){},
   	complete: function(){},
   	failure: function(){}
   };
   Y.io('http://www.sina.com/', cfg);
   Y.io("ajax.html",{
   method: "GET",
   on: {
   success: function(id, req, args){
   Y.one("#id").setContent(req.responseText);
   }
   }
   }); 

动画效果

1. Jquery

   $("#id").animate(
       { height: 20 },
       1500,
       "easeOutBounce"
   );                         

2. YUI

   new Y.Anim({
   node: "#id",
   to: {
   height: 20,
   },
   duration: 1.5,
   easing: Y.Easing.bounceOut
   }).run();                         

工具(浏览器类型/面向对象)

1. Jquery

   $.browser.msie;
   var settings = { validate: false, limit: 5, name: "foo" };
   var options = { validate: true, name: "bar" };
   $.extend(settings, options);//settings == { validate: true, limit: 5, name: "bar" }
   var Developer = $.inherit({
   __constructor : function(name){
   this.name = name;
   this.company = "New Company";
   },
   
   task: function(){
   return "Development";
   },
   
   info: function(){
   alert(this.name + ", " + this.task() + ", " + this.company);
   }
   });
   
   var Designer = $.inherit(Developer, {
   task: function(){
   return "Design";
   }
   });
   
   var newDeveloper = new Developer("Tim");
   var newDesigner = new Designer("Tom");
   
   neuerDeveloper.info(); // Output: "Tim, Development, New Company"
   newDesigner.info(); // Output: "Tom, Design, New Company" 

2. YUI

   Y.UA.ie;
   Y.extend;
   Y.augment;
   Y.clone;
   Y.merge;
   Y.mix;
   var Developer = Y.Base.create("developer", Y.Base, [], {
   task: function(){
   return "Development";
   },
   info: function(){
   alert(this.get("name") + ", " + this.task() + ", " + this.get("company"));
   }
   }, {
   ATTRS: {
   name: {},
   company: {
   value: "New Company"
   }
   }
   });
   
   var Designer = Y.Base.create("designer", Developer, [], {
   task: function(){
   return "Design";
   }
   });
   
   var newDeveloper = new Developer({ name: "Tim" });
   var newDesigner = new Designer({ name: "Tom" });
   
   newDeveloper.info(); // Output: "Tim, Development, New Company"
   newDesigner.info(); // Output: "Tom, Design, New Company" 

    

自定义函数

1. Jquery

   jQuery.fn.customFunction = function(parameter){
   this.css({
   "background": parameter.color,
   "border": parameter.border
   });
   };
   
   $("#id").customFunction({
   color: "red",
   border: "3px blue solid"
   }); 
   

2. YUI

   Y.Node.prototype.customFunction = function(parameter){
   this.setStyles({
   background: parameter.color,
   border: parameter.border
   });
   };
   
   Y.one("#id").customFunction({
   color: "red",
   border: "3px blue solid"
   }); 
   					

代码组织形式

1. Jquery

   <script type="text/javascript" src="jquery.js"></script>
   

2. YUI

   <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script>
   YUI().use('node', function(Y) {
       Y.one('#demo');
   });	

相关组件

1. Jquery

   Plugins...

2. YUI

   Slider, Tabview, TreeView, ImageLoader, Drag&Drop, Animation...