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);
复制代码

转载于:https://juejin.im/post/5a3101256fb9a045263b95d5