You might not need jQuery——笔记

元素操作
jQuery

$(el).addClass(className);

JS

if(el.classList) {
    el.classList.add(className);
else
    el.className += " " + className;

jQuery

$(el).after(htmlString);

JS

el.insertAdjacentHTML('afterend', htmlString);

jQuery

$(el).before(htmlString);

JS

el.insertAdjacentHTML('beforebegin', htmlString);

element.insertAdjacentHTML(position, text)

insertAdjacentHTML() 将指定的文本解析为HTML或XML，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接innerHTML操作更快。

position是相对于元素的位置，并且必须是一下字符串之一：
'beforebegin' 元素自身的前面
'afterbegin' 插入元素内部的第一个子节点之前
'beforeend' 插入元素内部的最后一个子节点之后
'afterend' 元素自身的后面

text是要被解析为HTML或XML，并插入到DOM树中的字符串

jQuery

$(el).find(selector).length;

JS

el.querySelector(selector) !== null

element = document.querySelector(selectors);

返回文档中匹配指定的选择器组的第一个元素(使用深度优先先序遍历文档的节点 | 并且通过文档标记中的第一个元素，并按照子节点数量的顺序迭代顺序节点)。

selectors是一个字符串，包含一个或是多个CSS选择器，多个则以逗号分隔。

jQuery

$(selector).each(function(i, el){

});

JS

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

});

elementList = document.querySelectorAll(selectors);

以nodeList形式（object）返回文档中匹配指定的选择器组的所有元素。

jQuery

$(el).hasClass(className);

JS

if (el.classList)
  el.classList.contains(className);
else
  new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className);