不要过度依赖JQuery（一）

$('#test')  =>  document.getElementById('test');

$('.test')  =>  document.getElementsByClassName('test')

$('div')  =>  document.getElementsByTagName('div')

$('#test')
document.querySelector('#test')

$('#test div')  =>  document.querySelectorAll('#test div')

$('#test').find('span')  => document.querySelectorAll('#test span');

$('#test div').eq(0)[0]  =>  document.querySelectorAll('#test div')[0] 

$('html')  =>  document.documentElement
$('head')  =>  document.head
$('body')  =>  document.body

$('#test').length > 0  =>  document.getElementById('test') !== null

$('div').length > 0  => document.querySelectorAll('div').length > 0

$('div').each(function(i, elem) {})

function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for(var i = 0; i < elems.length; i++) {
      callback(elems[i], i);
    }
  }
}

var div = document.querySelectorAll('div');
forEach(div, function(elem, i){
});

$('#test').empty()  =>  document.getElementById('test').innerHTML = '';

$('div').is($('#test'))  =>  document.querySelector('div') === document.getElementById('test')

$('div').html()  =>  document.querySelecotr('div').innerHTML
$('div').text()  =>  var t = document.querySelector('div');
t.textContent  || t.innerText;

$('div').html('<span>abc</span>');  =>  document.querySelecotr('div').innerHTML = '<span>abc</span>';
$('div;).text('abc')  =>  document.querySelecotr('div').textContent = 'abc'

$('<div>').append($('#test').clone()).html() => document.getElementById('test').outerHTML

$('<div>').append($('#test').clone()).html('<span>abc</span>') => document.getElementById('test').outerHTML = '<span>abc</span>' 

$('input').val()  =>  document.querySelector('input').value

$('input').val('abc') => document.querySelector('input').value = 'abc'

$('#test').addClass('a')

function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } else {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById('test'), 'a');

$('#test').removeClass('a');

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

removeClass(document.getElementById('test'), 'a');

$('#test').hasClass('a')

function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
  }
}

hasClass(document.getElementById('test'), 'a');

$('<div>')  =>  document.createElement('div')

$('div').clone()  =>  document.querySelector('div').cloneNode(true)

$('div').append('<span></span>')

var span = document.createElement('span');
document.querySelector('div').appendChild(span);

$('<span>').insertBefore('#test'); 

var t = document.getElementById('test');
var span = document.createElement('span');
t.parentNode.insertBefore(span, t);

/*更简单的*/
t.insertAdjacentHTML('beforeBegin', '<span></span>');

$('<span>').insertAfter('#test')

function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}
var t = document.getElementById('test');   
var span = document.createElement('span');   
insertAfter(t, span);

/*更简单的*/
t.insertAdjacentHTML('afterEnd', '<span></span>');

$('#test').parent()  =>  document.getElementById('test').parentNode

$('#test').remove()  

var t = document.getElementById('test');
t.parentNode.removeChild(t);