常用JavaScript原生API

javascript

如今技术日新月异，各类框架库也是层次不穷。即便当年漫山红遍的JQuery（让开发者write less, do more，So Perfect!!）如今也有被替代的大势。但JS原生API写法依旧；并且有时候只不过小写一个Demo，或者产品中只有少量的前端效果或DOM操作，就去花时间&空间引入jQuery，或者React？不免有取宰牛之刀以杀鸡之嫌；故此了解下JS常用原生写法还是蛮有必要的。

直接看代码；以下是jQuery和JavaScript实现相同操作的等价代码：

选择元素

// jQuery  
var els = $('.el');  
//==========================================================//
// 原生方法  
var els = document.querySelectorAll('.el');  
// 函数法  
var $ = function (el) {  
  return document.querySelectorAll(el);  
}  
var els = $('.el');  

创建元素

// jQuery  
var newEl = $('<div/>');  
//==========================================================//
// 原生方法  
var newEl = document.createElement('div');  

添加/移除/切换类

// jQuery  
$('.el').addClass('class');  
$('.el').removeClass('class');  
$('.el').toggleClass('class');  
//==========================================================//
// 原生方法  
document.querySelector('.el').classList.add('class');  
document.querySelector('.el').classList.remove('class');  
document.querySelector('.el').classList.toggle('class');  

判断是否包含类

// jQuery
$('.el').hasClass('className');
$('.el').has('.className'); //也可以用来 判断是否包含某个元素
//==========================================================//
// 原生方法 
_hasClass(document.querySelector('.el'), className);
function _hasClass( elements,cName ){ 
    return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
}; 

添加事件监听器

// jQuery  
$('.el').on('event', function() {
});  
//==========================================================//  
// 原生方法  
[].forEach.call(document.querySelectorAll('.el'), function (el) {  
  el.addEventListener('event', function() { 
  }, false); 
});  

原生－DOM绑定事件－优化1参考HERE

//DOM绑定事件-之自执行
var BindEvent = (function () {
  if ('addEventListener' in document) {
    return function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    return function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    return function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
})();

原生－DOM绑定事件－优化2

//DOM绑定事件-之惰性加载(调用方去触发BindEvent之时才去做初始化)//
var BindEvent = function (dom, event, handle, ex) {
  if ('addEventListener' in document) {
    BindEvent = function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    BindEvent = function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    BindEvent = function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
  BindEvent(dom, event, handle, ex);
};

设置/获取属性

// jQuery  
$('.el').filter(':first').attr('key', 'value');  
$('.el').filter(':first').attr('key');  
//==========================================================// 
// 原生方法  
document.querySelector('.el').setAttribute('key', 'value');  
document.querySelector('.el').getAttribute('key');  

附加内容（Append）

// jQuery  
$('.el').append($('<div/>'));  
//==========================================================// 
// 原生方法  
document.querySelector('.el').appendChild(document.createElement('div')); 

克隆元素

// jQuery  
var clonedEl = $('.el').clone();  
//==========================================================// 
// 原生方法  
var clonedEl = document.querySelector('.el').cloneNode(true);  

移除元素

// jQuery  
$('.el').remove();  
//==========================================================// 
// 原生方法  
remove('.el');  
function remove(el) {  
  var toRemove = document.querySelector(el);  
  toRemove.parentNode.removeChild(toRemove);  
}  

获取父元素

// jQuery  
$('.el').parent();  
//==========================================================// 
// 原生方法  
document.querySelector('.el').parentNode;  

上一个/下一个元素

// jQuery  
$('.el').prev();  
$('.el').next();  
//==========================================================// 
// 原生方法  
document.querySelector('.el').previousElementSibling;  
document.querySelector('.el').nextElementSibling;  

修改CSS属性

总是通过Javascript修改和检索CSS属性，这样会比使用jQuery CSS函数更加简单快速，并且没有任何不必要的代码。

 //----设置CSS属性----
/* jQuery */
  $(el).css({
    background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
    width: "100px",
    height: "100px",
    display: "block"
  });
//==========================================================//
/* 原生 */
var el = document.querySelector(".main-content");
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

XHR或AJAX

// jQuery  
$.get('url', function (data) {  
});  
$.post('url', {data: data}, function (data) {  
});  
//==========================================================//
// 原生方法  
// get  
var xhr = new XMLHttpRequest();  
xhr.open('GET', url);  
xhr.onreadystatechange = function (data) {  
}  
xhr.send();  
// post  
var xhr = new XMLHttpRequest()  
xhr.open('POST', url);  
xhr.onreadystatechange = function (data) {  
}  
xhr.send({data: data}); 

参考文章：http://www.iteye.com/news/28503
英文原文：http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native