jQuery with CoffeeScript

Avatar of Chris Coyier
Chris Coyier on (Updated on )

UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today.

I don’t always write CoffeeScript, but when I do, I’m probably using jQuery too; I always forget the syntax for stuff. So I’m going to write it all down here so I can reference it until I memorize it.

Note that the compiled example doesn’t include the automatic closure around everything you get in CoffeeScript.

Safe jQuery Closure

So you can use the $ safely (common in WordPress):

(($) ->
) jQuery
(function($) {


DOM Ready

$ ->
  console.log("DOM is ready")
$(function() {
  return console.log("DOM is ready");

Call Method with No Params

$(".submit").click ->
$(".submit").click(function() {
  return console.log("submitted!");

Call Method with One Param

$(".button").on "click", ->
  console.log("button clicked!")
$(".button").on("click", function() {
  return console.log("button clicked!");

Call Method With Multiple Params

$(document).on "click", ".button2", ->
  console.log("delegated button click!")
$(document).on("click", ".button2", function() {
   return console.log("delegated button click!");

Params in the Anonymous Function

$(".button").on "click", (event) ->
  console.log("button clicked!")
$(".button").on("click", function(event) {
  console.log("button clicked!");
  return event.preventDefault();

Returning False

$(".button").on "click", ->
$(".button").on("click", function() {
  return false;

A Simple Plugin

  makeColor: (options) ->
    settings = 
      option1: "red"
    settings = $.extend settings, options
    return @each () ->
        color: settings.color
  makeColor: function(options) {
    var settings;
    settings = {
      option1: "red"
    settings = $.extend(settings, options);
    return this.each(function() {
      return $(this).css({
        color: settings.color

Using Plugin

   color: "green"
  color: "green"


Note the string interpolation in there too, that’s nice.

   url: "some.html"
   dataType: "html"
   error: (jqXHR, textStatus, errorThrown) ->
     $('body').append "AJAX Error: #{textStatus}"
   success: (data, textStatus, jqXHR) ->
     $('body').append "Successful AJAX call: #{data}"
  url: "some.html",
  dataType: "html",
  error: function(jqXHR, textStatus, errorThrown) {
    return $('body').append("AJAX Error: " + textStatus);
  success: function(data, textStatus, jqXHR) {
    return $('body').append("Successful AJAX call: " + data);


Two ways.

div.animate {width: 200}, 2000

  width: 200
  height: 200
  width: 200
}, 2000);

  width: 200,
  height: 200
}, 2000);

Animation with Callback

  color: red
  color: red
}, 2000, function() {
  return doSomething();


Not too much different.

    'z-index': 5
  .removeClass "fart"
  'z-index': 5


The last line gets returned here when it doesn’t really need to but whatever.

  $.get("/feature/", (html) ->
    globalStore.html = html;
  $.get("/style.css", (css) ->
    globalStore.css = css;
).then -> 
  $("<style />").html(globalStore.css).appendTo("head")
$.when($.get("/feature/", function(html) {
  return globalStore.html = html;
}), $.get("/style.css", function(css) {
  return globalStore.css = css;
})).then(function() {
  $("<style />").html(globalStore.css).appendTo("head");
  return $("body").append(globalStore.html);

Fat Arrow to Retain `this`

Otherwise inside the setTimeout you wouldn’t have a reference to the button.

$(".button").click ->
  setTimeout ( =>
  ), 500
$(".button").click(function() {
  return setTimeout(((function(_this) {
    return function() {
      return $(_this).slideUp();
  })(this)), 500);

Here’s the lot of them in a Pen if you wanna tinker.