JavaScript vs Jquery+CoffeeScript

A simple collections of examples for doing most common tasks in Raw JavaScript vs Jquery+CoffeeScript.

This page is build by hand using CSS3 and HTML5

Use the navigation menu on the left to navigate to a particular sub topic, note this page does not make use of any JS ;) and is heavy inspired by Eric Bidelman's Jq vs JS

Finally in case of any bugs, please feel free to contact me

Document is ready?

	
	// Raw JavaScript
		document.addEventListener("DOMContentLoaded", function() {
  		// body
	});

        
        // CoffeeScript+jQuery
        $ -> code

Query Selectors

	
          // Raw JavaScript
	 var links = document.querySelectorAll("a");

        
          // CoffeeScript+jQuery
          links = $ "a"

Creating a new Element

	
          // Raw JavaScript
          var newPara = document.createElement("p");

        
          // CoffeeScript+jQuery
          para = $ "<p>"

Add a class to an Element

	
          // Raw JavaScript
          newPara.classList.add("bar");

        
          // CoffeeScript+jQuery
          para.addClass "bar"

Toggle a class to an Element

	
          // Raw JavaScript
          newPara.classList.toggle("bar");

        
          // CoffeeScript+jQuery
          newPara.toggleClass "bar"

Add a click event to links

	
          // Raw JavaScript
	 [].forEach.call(document.querySelectorAll("a"), function(el) {
  	    el.addEventListener("click", function() {
             // body
           });
         });

        
          // CoffeeScript+jQuery
          $("a").click -> code

Appened Element to body

	
          // Raw JavaScript
          document.body.appendChild(document.createElement("p"));

        
          // CoffeeScript+jQuery
	  $("body").append $("<p>")

Add an attribute to an Element

	
          // Raw JavaScript
          document.querySelector("img").setAttribute("alt", "Me");

        
          // CoffeeScript+jQuery
          $("img:first").attr "alt", "Me"

Get parent node

	
          // Raw JavaScript
          var parent = document.getElementById("contact").parentNode;

        
          // CoffeeScript+jQuery
          parent = $("#contact").parent()

Clone an element

	
          // Raw JavaScript
          var twin = document.getElementById("contact").cloned(true);

        
          // CoffeeScript+jQuery
          twin = $("#contact").clone()

Clear child nodes.

	
          // Raw JavaScript
          var contact = document.getElementById("contact");
          while(contact.firstChild) contact.removeChild(contact.firstChild);

        
          // CoffeeScript+jQuery
          twin = $("#contact").empty()

Check if element has child nodes

	
          // Raw JavaScript
          if(!document.getElementById("contact").hasChildNodes()) { ... }

        
          // CoffeeScript+jQuery
          if $("#contact").is(":empty")
  	     //code

Get the next sibling of an element

	
          // Raw JavaScript
          var nextKin = document.getElementById("contact").nextSibling;

        
          // CoffeeScript+jQuery
          nextKin = $("#contact").next()

Ajax calls.

	
          // Raw JavaScript
          var xhr = new XMLHttpRequest();  
	  xhr.open("GET","/", false);  
	  xhr.send(null);
	  console.log(xhr.responseText);

        
          // CoffeeScript+jQuery
          $.ajax '/',
    	    type: 'GET'
            dataType: 'html'
          error: (jqXHR, textStatus, errorThrown) ->
               $('body').append "AJAX Error: #{textStatus}"
          success: (data, textStatus, jqXHR) ->
                 $('body').append "Successful AJAX call: #{data}"