A CodePen by Paul Reny. Doing without jQuery - Based on http://evanhahn.com/doing-without-jquery/.

index.html

<article>
  <h1>JavaScript equivalent to jQuery basics</h1>
  <p>... because loading 92Ko of jQuery to use less than 2% of it kind of sucks. Mostly inspired by <a href="http://evanhahn.com/doing-without-jquery/">Doing without jQuery</a> and <a href="http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/">From jQuery to JavaScript: A Reference</a>.</p>
  
<section>
  <h2>Selectors</h2>
  <h3>$() <span>(IE9+)</span></h3>
  <pre class="language-javascript"><code>var $ = function(el) {
   return document.querySelectorAll(el);
};</code></pre>
  <h3>$('#foo')</h3>
  <pre class="language-javascript"><code>document.getElementById('foo')</code></pre>
  <h3>$('.bar') <span>(IE9+)</span></h3>
  <pre class="language-javascript"><code>document.getElementsByClassName('bar')</code></pre>
  <h3>$('span')</h3>
  <pre class="language-javascript"><code>document.getElementsByTagName('span')</code></pre>
  <h3>$('#foo span')</h3>
  <pre class="language-javascript"><code>document.getElementById('foo').getElementsByTagName('span')</code></pre>
  <h3>$('html')</h3>
  <pre class="language-javascript"><code>document.documentElement</code></pre>
  <h3>$('head')</h3>
  <pre class="language-javascript"><code>document.head</code></pre>
  <h3>$('body')</h3>
  <pre class="language-javascript"><code>document.body</code></pre>
  <h3>$('#foo').parent()</h3>
  <pre class="language-javascript"><code>document.getElementById('foo').parentNode</code></pre>
  <h3>$('#foo').next()</h3>
  <pre class="language-javascript"><code>var next = document.getElementById('foo').nextSibling;
while( next.nodeType > 1 ) next = next.nextSibling</code></pre>
  </section>
  
  <section>
    <h2>Attributes</h2>
    <h3>$('#foo').html()</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').innerHTML</code></pre>
    <h3>$('#foo').html('Hello world!')</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').innerHTML = 'Hello world!'</code></pre>
    <h3>$('#foo').val()</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').value
</code></pre>
    <h3>$('#foo').addClass('bar')</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').className += ' bar'</code></pre>
    <h3>$('#foo').removeClass('bar')</h3>
    <pre class="language-javascript"><code>function removeClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ') + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace(' ' + className + ' ', ' ');
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    }
}
      
removeClass(document.getElementById('foo'), 'bar')</code></pre>
    <h3>$('#foo').hasClass('bar')</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').className.indexOf('bar') !== -1
</code></pre>
    <h3>$('#foo').toggleClass('bar')</h3>
    <pre class="language-javascript"><code>function toggleClass(elem, className) {
    var newClass = ' ' + elem.className.replace( /[\t\r\n]/g, ' ' ) + ' ';
    if (hasClass(elem, className)) {
        while (newClass.indexOf(' ' + className + ' ') >= 0 ) {
            newClass = newClass.replace( ' ' + className + ' ' , ' ' );
        }
        elem.className = newClass.replace(/^\s+|\s+$/g, '');
    } else {
        elem.className += ' ' + className;
    }
}
      
toggleClass(document.getElementById('foo'), 'bar')</code></pre>
  </section>
  
  <section>
    <h2>Styles</h2>
      <h3>$('#foo').hide()</h3>
      <pre class="language-javascript"><code>document.getElementById('foo').style.display = 'none'</code></pre>
    <h3>$('#foo').css('background-color', red')</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').style.backgroundColor = 'red'</code></pre>
    <h3>$('#foo').fadeOut(750)</h3>
    <pre class="language-javascript"><code>function fadeOut(ms, el) {
    var opacity = 1,
        interval = 50,
        gap = interval / ms;
        
    function func() { 
        opacity -= gap;
        el.style.opacity = opacity;
        
        if(opacity <= 0) {
            window.clearInterval(fading); 
            el.style.display = 'none';
        }
    }
    
    var fading = window.setInterval(func, interval);

}
      
fadeOut(750, document.getElementById('foo'))</code></pre>
    <h3>$('#foo').fadeIn(750)</h3>
    <pre class="language-javascript"><code>function fadeIn(ms, el) {
    var opacity = 0,
        interval = 50,
        gap = interval / ms;
        
    el.style.display = 'block';
    el.style.opacity = opacity;
    
    function func() { 
        opacity += gap;
        el.style.opacity = opacity;
        
        if(opacity >= 1) {
            window.clearInterval(fading);
        }
    }
    
    var fading = window.setInterval(func, interval);
    
}
      
fadeIn(750, document.getElementById('foo'))</code></pre>
  </section>
  
  <section>
    <h2>Events</h2>
      <h3>$(document).ready</h3>
      <pre class="language-javascript"><code>document.onreadystatechange = function() {
    if (document.readyState === 'complete') {
        // DOM is ready!
    }
};</code></pre>
    <h3>$('#foo').on('click', function() { ... })</h3>
    <pre class="language-javascript"><code>document.getElementById('foo').onclick = function() { ... }</code></pre>
  </section>
  
  <section>
    <h2>Others</h2>
    
    <h3>$('body').append("&lt;div id='a'&gt;b&lt;/div&gt;")</h3>
    <pre class="language-javascript"><code>var div = document.createElement('div');
div.id = 'a';
div.appendChild(document.createTextNode('b'));
document.body.appendChild(div);</code></pre>
    
    <h3>$("&lt;div id='a'&gt;b&lt;/div&gt;").appendTo('body')</h3>
    <pre class="language-javascript"><code>var div = document.createElement('div');
div.id = 'a';
div.appendChild(document.createTextNode('b'));
document.body.appendChild(div);</code></pre>
  </section>
  
</article>

style.scss

@import "compass";
html {
  font: 62.5%/1.55 "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

body {
  font-size: 1.6em;
}

article {
  padding: 20px;
}

h2 {
  border-bottom: 1px solid silver;
  padding-bottom: 5px;
}

h3 span {
  color: #999;
  font-size: 0.7em;
}

pre {
  border: 1px solid #ddd;
  border-radius: 3px;
  line-height: 1.4;
}