jQueryとJavaScript、DOM要素の取得記述の違い

// jQuery
$(selector).each(function(i, el){
 something...
});

// JavaScript
var elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){
    something...
});

// jQuery
$(el).after(htmlString); // 1
$(el).before(htmlString); // 2
$(el).children(); // 3
$(el).next(); // 4
$(el).parent(); // 5

// JavaScript
parent.appendChild(el); // 1
el.insertAdjacentHTML('beforebegin', htmlString); // 2
el.children // 3
el.nextElementSibling // 4
el.parentNode // 5

// jQuery
$(el).hasClass(className); // 指定のクラスが存在する場合はtrue、存在しない場合はfalseを返す

// JavaScript
var el = document.getElementById('container');
if (el.classList){
  el.classList.contains(className); // hasClass()と同様に、containsで論理値を返す
} else {
  // element.classNameから1つのクラスを抽出する正規表現
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);
}

// jQuery
$(el).offset();
>> {top: 11, left:11}

// JavaScript
var rect = el.getBoundingClientRect();
>> {top:11, height:11, left:11, right:11, bottom:11, width:11}

// jQuery
$(el).remove(); // マッチしている自身の要素も含めて、子要素も全て削除する

// JavaScript
el.parentNode.removeChild(el);

// jQuery
$(el).removeClass(className);

// JavaScript
if (el.classList) {
  el.classList.remove(className);
} else {
  el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}

// jQuery
$(el).attr('tabindex', 3);

// JavaScript
el.setAttribute('tabindex', 3);

// jQuery
$(el).toggleClass(className);

// JavaScript
el.classList.toggle(className);

// jQuery
$.parseHTML(htmlString);

// JavaScript
var parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};
parseHTML(htmlString);

// jQuery
$(el).on(eventName, eventHandler);

// JavaScript
el.addEventListener(eventName, eventHandler);