忘掉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~