Question

如何忘却jQuery，开始使用JavaScript原生API

Answer 1

忘却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});

Answer 2

首先，你要学会原生js，有啥忘不忘的，学会了可以选择不用JQ时就不用，效果自己写就成了。

Answer 3

1. 这个两种语言是不冲突的，jQuery只是JavaScript的一个类库；

2. 如果学会了JavaScript的原生开发，以后不管出现什么样的JavaScript的类库都可以轻松应对；

3. JavaScript的知识很丰富，继续努力