jQuery with CoffeeScript

Safe jQuery Closure

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

(($) -> ) jQuery

View Compiled

(function($) { })(jQuery);

DOM Ready

$ -> console.log("DOM is ready")

View Compiled

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

Call Method with No Params

$(".submit").click -> console.log("submitted!")

View Compiled

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

Call Method with One Param

$(".button").on "click", -> console.log("button clicked!")

View Compiled

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

Call Method With Multiple Params

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

View Compiled

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

Params in the Anonymous Function

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

View Compiled

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

Returning False

$(".button").on "click", -> false

View Compiled

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

A Simple Plugin

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

View Compiled

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

Using Plugin

$("a").makeColor
   color: "green"

View Compiled

$("a").makeColor({ color: "green" });

Ajax

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

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

View Compiled

$.ajax({ 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); } });

Animation

Two ways.

div.animate {width: 200}, 2000 div.animate
  width: 200 height: 200 2000

View Compiled

div.animate({ width: 200 }, 2000); div.animate({ width: 200, height: 200 }, 2000);

Animation with Callback

div.animate
  color: red 2000 -> doSomething()

View Compiled

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

Chaining

Not too much different.

$("input") .val("") .css 'z-index': 5 .removeClass "fart"

View Compiled

$("input").val("").css({ 'z-index': 5 }).removeClass("fart");

Promises

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

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

View Compiled

$.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 ( => $(@).slideUp() ), 500

View Compiled

$(".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.