忘掉jQuery,使用原生JavaScript

随着 JavaScript 原生 API 的完善,一些简单的操作完全可以用原生解决,手机端的一些简单页面,不要要复杂的类库,从而避免使用 jQuery 等类库来完成,减少代码量,提高页面加载速度。

选择DOM

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

// JavaScript API
var ele = querySelectAll('.ele');

// JavaScript function
var _qs = function(ele){
return querySelectAll('ele');
}
var ele = _qs('.ele');

创建DOM

//jQuery
var newEle = $('<div>content</div>');

//JavaScript
var newEle = document.createElement('<div>content</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('value');
//JavaScript
var _qs = function(ele){
return querySelectAll('ele');
}
var ele = _qs('.ele');
ele.setAttribute('key','value');
ele.getAttribute('key')

添加/移除/切换类名

//jQuery
$(".ele").addClass('class');//add class
$(".ele").removeClass('class');//remove class
$(".ele").toggleClass('class');//toggle class
//JavaScript
var _qs = function(ele){
return querySelectAll('ele');
}
var ele = _qs('.ele');
ele.classList.add('class');//add class
ele.classList.remove('class');//remove class
ele.classList.toggle('class');//toggle class

插入DOM

//jQuery
$(".ele").append(content, content, function)
//JavaScript
var _qs = function(ele){
return querySelectAll('ele');
}
var ele = _qs('.ele');
var eleX = document.createElement('<div>content</div>');
ele.appendChild(eleX);

克隆DOM

//jQuery
var cloneEle = $(".ele").clone();
//JavaScript
var cloneEle = document.queryselect('.ele').cloneNode(true);

移除DOM

//jQuery
$(".ele").remove();
//JavaScript
var remove = function(ele){
var toRmove = document.querySelector(ele);
toRmove.parentNode.removeChild(toRmove);
}
remove('.ele');

获取父/上一个/下一个元素

//jQuery
$(".ele").parent();//获取父元素
$(".ele").prev();//获取上一个元素
$(".ele").next();//获取下一个元素
//JavaScript
document.querySelector('.ele').parentNode;
document.querySelector('.ele').previousElementsibing();
document.querySelector('.ele').nextElementsibing();
坚持原创技术分享,您的支持将鼓励我继续创作!