忘掉jQuery，使用JavaScript原生API

如下是jQuery和JavaScript實現相同操做的等價代碼

選擇元素

//jQuery
var ele = $(".ele");

//javascript
var ele = document.querySelectAll('.ele');

//函數法
var $ = function(ele){
    return document.querySelectAll(ele);
}

var ele = $('.ele'); //調用

建立元素

//jquery
var newEle = $('<div>xxx</div>');

//javascript
var newEle = document.createElement('<div>xxx</div>');

添加事件監聽器

//jQuery
$('.ele').on('event',function(){
    
});

//javascript
[].forEach.call(document.querySelectAll('.ele'),function(ele){
    ele.addEventListener('event',function(){
    },false);
})

設置/獲取屬性

//jQuery
$('.ele').attr('key','value');
$('.ele').attr('key');

//javascript
document.querySelector('.ele').setAttribute('key','value');
document.querySelector('.ele').getAttribute('key');

添加/移除/切換類

//jQuery
$('.ele').addClass('class');
$('.ele').removeClass('class');
$('.ele').toggleClass('class');

//javascript
document.querySelector('.ele').classList.add('class');
document.querySelector('.ele').classList.remove('class');
document.querySelector('.ele').classList.toggle('class');

附加內容（Append）

//jquery
$('.ele').append('<div>xxx</div>');

//javascript
document.querySelector('.ele').appendChild(document.createElement('<div>xxx</div>'));

克隆元素

//jQuery
var cloneEle = $('.ele').clone();

//javascript
var cloneEle = document.querySelector('.ele').cloneNode(true);

移除元素

//jQuery
$('.ele').remove();

//javascript
remove('.ele');

function remove(ele){
    var toRemove = document.querySelector(ele);
    toRemove.parentNode.removeChile(toRemove);
}

獲取父元素

//jQuery
$('.ele').parent();

//javascript
document.querySelector('.ele').parentNode;

上一個/下一個元素

//jQuery
$('.ele').prev();
$('.ele').next();

//javascript
document.querySelector('.ele').previousElementsibling;
document.querySelector('.ele').nextElementSibling;

XHR或AJAX

//jQuery
$.get('url',function(data){
    
})
$.post('url',{data: data},function(){
    
})

//javascript
//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});

這些只是不多的一部分，不能等到哪一天變成只會用jQuery了， O(∩_∩)O~