用 JS 原生方法超简单实现 jq 的 append, prepend, before, after

相当于 $(el).before('html' | element)

1.  
   el.insertAdjacentHTML('beforeBegin', 'html');
2.  
   el.insertAdjacentElement('beforebegin', element)

相当于 $(el).prepend('html' | element)

1.  
   el.insertAdjacentHTML('afterBegin', 'html');
2.  
   el.insertBefore(element, el.firstChild)

相当于 $(el).append('html' | element)

1.  
   el.insertAdjacentHTML('beforeEnd', 'html');
2.  
   el.appendChild(element)

相当于 $(el).after('html' | element)

1.  
   el.insertAdjacentHTML('afterEnd', 'html');
2.  
   el.insertAdjacentElement('afterend', element)

相当于 $(el).addClass(className)

el.classList.add(className)

相当于 $(el).removeClass(className)

el.classList.remove(className)

相当于 $(el).toggleClass(className)

el.classList.toggle(className)

相当于 $(el).offset()

1.  
   var rect = el.getBoundingClientRect();
2.  
3.  
   {
4.  
   top: rect.top + document.body.scrollTop,
5.  
   left: rect.left + document.body.scrollLeft
6.  
   }

相当于 $(el).remove()

el.parentNode.removeChild(el)

相当于 $(el).on(eventName, eventHandler)

el.addEventListener(eventName, eventHandler)

相当于 $(el).off(eventName, eventHandler)

el.removeEventListener(eventName, eventHandler)

相当于 $(document).on(eventName, elementSelector, handler)

1.  
   document.addEventListener(eventName, function(e) {
2.  
   const handler = function(e) {
3.  
   console.log(this)
4.  
   console.log(e)
5.  
   }
6.  
   for (var target = e.target; target && target != this; target = target.parentNode) {
7.  
   if (target.matches(elementSelector)) {
8.  
   handler.call(target, e);
9.  
   break;
10.  
    }
11.  
    }
12.  
    }, false);