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

    原文作者:3Sharp
    原文地址: https://segmentfault.com/a/1190000004149336
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞