First things First

Before you can make use of a library, you must first download the library (or see my other post for some cool tips). The jQuery library is available here, MooTools here, and Prototype here.

Round 1: Ready, Fight

Generally you want to run the libraries as compressed as possible (or running off of Google’s servers), and so that is what we are going to compare: compressed file sizes. Some people really don’t care much about this, but for those who do, this can be a breaking point.

• jQuery- Compressed weighs in at 54kb
• Mootools- YUI Compressed comes to 63kb

The libraries come in at just about the same weight when compressed

Round 2: DOM Manipulation

Here is the task- Select the 5th element in a list that has the id of “test-list”. Copy that list item and then append it to the end of the list. We are going to assume that the library has already been initialized ($(function(){});, ect).

Code Samples

// jQuery Demonstration
var fifth_item = $("#test-list li:nth-child(5)").html();
$("#test-list").append(fifth_item);
 
// Shorter, but less readable
$("#test-list").append($("#test-list li:nth-child(5)").html());
 
// MooTools Demonstration
var fifth_item = $("#test-list li:nth-child(5)");
var test_list = $("test-list");test_list.inject(fifth_item);

All three libraries make the DOM Manipulation simple. With these three it really comes down to comfort. Personally I am more comfortable with the jQuery way of simple DOM manipulation.

Round 3: Strings and Arrays

The mission is to loop over an array, filter out any requested items, and then append the array to another array.

var myArray = ["brandon","james","hansen","says","hello"];
// jQuery Demonstration
$.grep(function(item,index){
return (item != "brandon" &;&item != "hello");
});
myArray.append(["melissa","also","says","hello"]);
 
// MooTools Demonstration
myArray.filter(function(item,index){
return (item != "brandon" &;&item != "hello");
});
myArray.extend(["melissa","also","says","hello"]);

Round 4: Ajax

The mission is to, on demand, load a remote page and pass it a variable. The script must then return the result (or error) to the browser.

// jQuery Demonstration
$("#click-me").click(function(){
$.post("test.php", { lang: "jQuery", competition: "MooTools" },  function(data){
$("#result").append(data);
} );
return false;
});
 
// MooTools Demonstration
$('ajax-replace').addEvent('click', function(event) {
//prevent the page from changing
event.stop();
//make the ajax call, replace text
var req = new Request.HTML({
method: 'get',
url: $('ajax-replace').get('href'),
data: { "lang": "MooTools", "competition": "jQuery" },
onComplete: function(response) {
$('result').inject(response);
}
}).send()});

Round 5: Visual Effects

I am not even going to run much of a test here. jQuery wasn’t really designed for visual effects, although there are a host of plugins available which aid in the process. MooTools, on the other hand, ships with a large number of FX, such as tween, morph, and others. Both libraries make basics like fading in and out, showing and hiding, and sliding rather easy.

Round 6: Extending the Core

It is not in the scope of this article to teach you how to extend the libraries with custom plugins. However, I do want to show how each library implements plugins. jQuery uses the fn.extend() method to extend the core library. This allows plugins to essentially become part of the core architecture. MooTools takes a slightly different approach and really extends the library much the same way that PHP and other languages use classes to extend base classes.

Let’s do a quick example with a cool plugin (totally made up) called “dominate”.

// jQuery Demonstration
$("#world").click(function(){
$(this).dominate({
destroy : "body",
create : "p"
});
})
 
// MooTools Demonstration
$("world").addEvent('click',function(event){
var dominate = new Dominate({
destroy : "body",
create : "p"
});
});

As you can see implementation of extensions is pretty simple. The jQuery implementation, I would have to say, is a little bit smoother and more transparent. But many developers are probably a lot more comfortable with the MooTools implementation.

It’s A Draw

Both languages have their strengths and weaknesses. jQuery attempts to be a lot more transparent in its power. MooTools has a lot more visual flare. Both libraries have extremely large, passionate followings. It is hard to argue against either library. They are both very exceptional and handle small and large tasks effortlessly.

Alıntı: http://melissa-brandon.com/2009/02/jquery-vs-mootools/

Benzer Yazılar:

jQuery ve LightBox

Turk-php de bir arkadaşımızın isteği üzerine lightbox hakkında bir örnek yaptım. Aslına

jQuery,JSON ve pHp Mükemmel Grup :)

Geçenlerde kkulife a galeri yapmaya çalışırken yeni bir olayla karşılaştım. JSON.. jQuery

Timthumb ile resim büyütme

Birçok wordpress temasında timthumb aktif olarak kullanılıyor. Bilmeyenler için kısaca açıklayayım timthumb’un

Google Page Rank Checker

Geçenlerde bay egonomik karşma bununla çıktı. Bu işte anlayın google page rank

Öğrenci adamın hali :)

New semester: Yeni Dönem ( vın vın vınnnn … ) At the

 
<link rel="stylesheet" type="text/css" href="main.css" media="screen" />
<link rel="stylesheet" type="text/css" href="lightbox.css" media="screen" />
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="lightbox.pack.js"></script>
 

Buradan gerekli dosyaları sitemize ekledik. main.css de ana sayfa düzeni bulunmakta. Sadece görünüm ile alakalı bişey olması yada olmaması lightbox un çalışmasına etkimeyecek.

 
    <script type="text/javascript">
	$(function() {
		$('#gallery a').lightBox({fixedNavigation:true});
	});
    </script>
 

Lightbox eklentimizi ekliyeceğimiz nesneyi seçtik. Ve olay bitti. Görüldüğü gibi jquery ve plugin olayları aslına bakılırsa o kadarda zor değil.

Çalışan örneğe buradan ulaşabilir ve örneği şuradan indirebilirsiniz.

Benzer Yazılar:

jQuery vs Mootools

For the past few years javascript libraries have dominated the market. Very

jQuery,JSON ve pHp Mükemmel Grup :)

Geçenlerde kkulife a galeri yapmaya çalışırken yeni bir olayla karşılaştım. JSON.. jQuery

PHP İle Resim Üzerine Yazı Yazma Scripti

Sahile, köprüye istediğimiz yazıyı yazdırdığımız birçok site mevcuttu bunları hepimiz biliyoruzdur. Fakat

PHP ile Rastgele Söz

Bazen projelerimizde rastgele sözler işimize yarayabilir. Tabiki bunu sadece söz ile kısıtlamamakta

3G Öldü..

Bildiğiniz üzere yakın zamanda patlama yaratan projem 3GNedir.net idi. 30 Temmuzdan sonra

jQuery nin türkiye mail grubu ile mesajlaşırken Hüseyin Berberoğlu saolsun aklımda bişeyler oluşturması amacı ile google da bu 3 lü yü arayabilirsin demişti. Bende hemen araştırmaya başladım ve karşıma güzel sonuçlar çıktı. Tabiki en güzeli erhan (Eburhan) dan geldi

JSON xml tarzında bir yapıya sahip. Jquery ile de güzelce kullanabiliyoruz. Büyük şirketler de apilerinde JSON a yer vermiş. Mesela yine kkulife a yapacağım video olayını bu yazıyı yazarken youtube apisine göz gezdirmemle çözmüş bulunmaktayım [ Teşekkürler Türker ]

Gelelim mevzumuza.. Erhanın sitesinde yazmıs olduğu güzel makaleyi burada da yayınlamak istiyorum.

Benzer Yazılar:

jQuery vs Mootools

For the past few years javascript libraries have dominated the market. Very

jQuery ve LightBox

Turk-php de bir arkadaşımızın isteği üzerine lightbox hakkında bir örnek yaptım. Aslına

Daha samimi..

Uzun zamandır yine bişeyeler yazamıyorum. Ne yaptığımında farkında değilim açıkcası. Vakit harcanıp

Google Page Rank Checker

Geçenlerde bay egonomik karşma bununla çıktı. Bu işte anlayın google page rank

ZARA Tasarımıcılarının Mükemmel Eseri !

Geçenlerde AnkaMall de dolanırken Zara Man ‘a gireyim dedim. Niyetim, var ise