當我多年前初次接觸jQuery時我感覺我來到了程序員的天堂。它極大簡化了DOM操作。函數式編程變得如此容易，盡管更多適合RIA開發的框架近年來在浮現，但是我仍舊無法想象一個沒有jQuery的程序人生是多麼的罪惡，相信你也有同感~
而來到CoffeeScript的世界，同樣的美妙故事再次上演。在寫了幾行代碼後我相信你將不會再想念原生的Javascript了。CoffeeScript包含了許多新特性，當將它與jQuery結合時，你會發現一片新天地。
本文的目的就在於展示CoffeeScript和jQuery協同工作時美妙場景。
像老板一樣指揮你的代碼
CoffeeScript提供了一堆酷斃了的數組迭代方法。最好的事莫過於這不僅僅能工作於數組，還能工作於jQuery對象了。來行詩一般的代碼吧：
formValues = (elem.value for elem in $('.input'))
這行代碼將會被翻譯為如下的Javascript：
代碼如下:
var elem, formValues;
formValues = (function() {
var _i, _len, _ref, _results;
_ref = $('.input');
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
elem = _ref[_i];
_results.push(elem.value);
}
return _results;
})();
老實說最初這樣寫代碼確實讓人提心吊膽的，但是一旦你開始擁抱CoffeeScript的魔法時，你會愛上它的。
飛一般的方法綁定
在jQuery的回調中使用"=>"將會大大減省你手動綁定方法到對象的麻煩。還是來看段代碼吧：
代碼如下:object = func: -> $('#div').click => @element.css color: 'red'
下面是編譯輸出的Javascript：
代碼如下:
var object;
var __bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
object = {
func: function() {
return $('#div').click(__bind(function() {
return this.element.css({
color: 'red'
});
}, this));
}
};
代碼中的@element指向了一個jQuery的對象，該對象是在其他地方指定的——比如object.element = $('#some_div').
任何使用"=>"所指定的回調函數都會自動綁定到原來的對象上，沒錯，這很酷。
在2011年函數是這樣調用的
瞅一眼這個：
代碼如下:
$.post(
"/posts/update_title"
new_title: input.val()
id: something
-> alert('done')
'json'
)
使用CoffeeScript，多個參數可以寫成多行來調用，逗號和大括弧是可選的，這使得一些jQuery中簽名比較長的方法比如$.post() 和 $.animate() 等更加易讀。這兒還有一個例子：
代碼如下:
$('#thing').animate
width: '+20px'
opacity: '0.5'
2000
'easeOutQuad'
很美味的Coffee不是嗎？要注意第一個參數是一個匿名的對象，你甚至可以省略調用函數的元括弧。
讓初始化來的更性感吧
我最初開始使用jQuery時我是這樣做頁面初始化的：
代碼如下:
$(document).ready(function() {
some();
init();
calls();
})
CoffeeScript和新版的jQuery使得上面的代碼進化的如此性感：
代碼如下:
$->
some()
init()
calls()
函數定義語法在CoffeeScript裡本身已經非常酷了，能在上面這些場合使用使得其更酷了。你會發現所有需要回調的函數調用在CoffeeScript中都是如此簡單。
更多關於CoffeeScript請訪問其官網
注：已經有一本關於CoffeeScript的書在七月發行了，其中有一整章的內容是關於jQuery的。