jQuery? JavaScriptネイティブAPIへの復帰

今では技術が日進月歩で、各種のフレームワークライブラリも階層的に優れている.当時、山が赤くなったJQuery(開発者write less, do more、So Perfect!!)でも、今では の大勢がある.しかし、JS原生APIの書き方は相変わらずです.また、Demoを1つ書くだけで、製品の中で少量のフロントエンド効果やDOM操作しかない場合、jQueryを導入したり、Reactを導入したりするのに時間&空間がかかりますか?牛を殺す刀を取って鶏を殺すきらいがある.
原文トップチェーン:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/
jQueryの優しい田舎で、彼女のjavascriptの原生を覚えていますか?セレクタ($)や似たようなものだけを使用する場合は、jQueryをロードする必要がありますか?だから、JSでよく使われる原生の書き方を知る必要があります.
[update-2015-12-07]jQueryを捨て、オリジナルJavaScriptを抱擁するのを見たことがある.jQueryは従来のDOM中心の開発モデルを代表しているが、現在複雑なページ開発が流行しているのはReactに代表されるデータ/状態中心の開発モデルである.React、Angular、Vueなどのフレームワークが流行し、直接DOMを操作するのは良いモードではなく、jQueryの使用シーンが大幅に減少した.
Talk is cheap.Show me the code.直接コードを見ます;以下は、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'); //                

//==========================================================//
//     (1)
_hasClass(document.querySelector('.el'), className);
function _hasClass( elements,cName ){ 
    return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
}; 

//     (2)
if(el.classList.contains("someClass")){}

イベントリスナーの追加

// 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