为大家带来一篇原生js取代一些jquery方法的简单实现。觉得挺不错的，分享给大家，也给大家做个参考。
1.选取元素
// jquery
var els = $('.el');
// native
var els = document.queryselectorall('.el');
// shorthand
var $ = function (el) {
return document.queryselectorall(el);
}
queryselectorall方法返回的是nodelist对象，需要转换为数组。
mylist = array.prototype.slice.call(mynodelist)
2.创建元素
// jquery
var newel = $('<p/>');
// native
var newel = document.createelement('p');
3.添加事件
// jquery
$('.el').on('event', function() {
});
// native
[].foreach.call(document.queryselectorall('.el'), function (el) {
el.addeventlistener('event', function() {
}, false);
});
4.get/set属性
// jquery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
// native
document.queryselector('.el').setattribute('key', 'value');
document.queryselector('.el').getattribute('key');
5.添加和移除样式class
dom元素本身有一个可读写的classname属性，可以用来操作class。
html 5还提供一个classlist对象，功能更强大（ie 9不支持）。
// jquery
$('.el').addclass('class');
$('.el').removeclass('class');
$('.el').toggleclass('class');
// native
document.queryselector('.el').classlist.add('class');
document.queryselector('.el').classlist.remove('class');
document.queryselector('.el').classlist.toggle('class');
6.追加元素
尾部追加元素：
// jquery
$('.el').append($('<p/>'));
// native
document.queryselector('.el').appendchild(document.createelement('p'));
头部追加元素：
//jquery
$(‘.el').prepend('<p></p>')
//native
var parent = document.queryselector('.el');
parent.insertbefore("<p></p>",parent.childnodes[0])
7.克隆元素
// jquery
var clonedel = $('.el').clone();
// native
var clonedel = document.queryselector('.el').clonenode(true);
8.移除元素
remove
// jquery
$('.el').remove();
// native
remove('.el');
function remove(el) {
var toremove = document.queryselector(el);
toremove.parentnode.removechild(toremove);
}
9.获取父级元素
// jquery
$('.el').parent();
// native
document.queryselector('.el').parentnode;
10.获取上一个/下一个元素（prev/next element）
// jquery
$('.el').prev();
$('.el').next();
// native
document.queryselector('.el').previouselementsibling;
document.queryselector('.el').nextelementsibling;
11.xhr and ajax
// jquery
$.get('url', function (data) {
});
$.post('url', {data: data}, function (data) {
});
// native
// 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});
12.清空子元素
//jquery
$("#elementid").empty()
//native
var element = document.getelementbyid("elementid")
while(element.firstchild) element.removechild(element.firstchild);
13.检查是否有子元素
//jquery
if (!$("#elementid").is(":empty")){}
//native
if (document.getelementbyid("elementid").haschildnodes()){}
14.$(document).ready
dom加载完成，会触发domcontentloaded事件，等同于jquery的$(document).ready方法。
document.addeventlistener("domcontentloaded", function() {
// ...
});
15.数据储存
jquery对象可以储存数据。
$("body").data("foo", 52);
html 5有一个dataset对象，也有类似的功能（ie 10不支持），不过只能保存字符串。
element.dataset.user = json.stringify(user);
element.dataset.score = score;
16.动画
jquery的animate方法，用于生成动画效果。
$foo.animate('slow', { x: '+=10px' }
jquery的动画效果，很大部分基于dom。但是目前，css 3的动画远比dom强大，所以可以把动画效果写进css，然后通过操作dom元素的class，来展示动画。
foo.classlist.add('animate')
如果需要对动画使用回调函数，css 3也定义了相应的事件。
el.addeventlistener("webkittransitionend", transitionended);
el.addeventlistener("transitionend", transitionended);
以上就是如何用js原生替换jquery的16种方法的实例详解的详细内容。