From jQuery to plain JavaScript

1-jquery.js

(function() {
  
  // written with jQuery

  $('.dribbble-link img').each(function(i, e) {
    e = $(e);
    e.attr('src', e.attr('src').replace('_teaser', ''));
  });

  $('ol.dribbbles li.group').css('width', '420px');

  $('ol.dribbbles li div.dribbble-img').css({ width: '400px', height: '300px' });

  $('ol.dribbbles li div.dribbble-img img').css('max-width', '400px');

})();

2-javascript.js

(function() {
  
  // plain JavaScript

  var imgs = document.querySelectorAll('.dribbble img');
  for (var i = 0; i < imgs.length; i++) {
    var img = imgs.item(i);
    img.src = img.src.replace('_teaser', '');
    img.style.maxWidth = '400px';
  }

  var liGroups = document.querySelectorAll('ol.dribbbles li.group');
  for (var i = 0; i < liGroups.length; i++) {
    liGroups.item(i).style.width = '420px';
  }

  var imgWrappers = document.querySelectorAll('ol.dribbbles li div.dribbble-img');
  for (var i = 0; i < imgWrappers.length; i++) {
    var wrap = imgWrappers.item(i);
    wrap.style.width = '400px';
    wrap.style.height = '300px';
  }

})();

3-javascript-dry.js

(function() {
  
  // cleaned up by abstracting the query & looping into a helper function

  var loop = function(selector, callback) {
    var els = document.querySelectorAll(selector);
    for (var i = 0; i < els.length; i++) {
      callback(els.item(i));
    }
  }

  loop('.dribbble img', function(el) {
    el.src = el.src.replace('_teaser', '');
    el.style.maxWidth = '400px';
  });

  loop('ol.dribbbles li.group', function(el) {
    el.style.width = '420px';
  });

  loop('ol.dribbbles li div.dribbble-img', function(el) {
    el.style.width = '400px';
    el.style.height = '300px';
  });

})();

4-actually.js

(function() {
  
  // actually, instead of doing of our for loop as in the previous example,
  // we can just piggy-back Array's forEach method

  var loop = function(selector, callback) {
    Array.prototype.forEach.call(document.querySelectorAll(selector), callback);
  }

  loop('.dribbble img', function(el) {
    el.src = el.src.replace('_teaser', '');
    el.style.maxWidth = '400px';
  });

  loop('ol.dribbbles li.group', function(el) {
    el.style.width = '420px';
  });

  loop('ol.dribbbles li div.dribbble-img', function(el) {
    el.style.width = '400px';
    el.style.height = '300px';
  });

})();