尽可能的使用原生js而不是jQuery

尽可能的使用原生js而不是jQuery属于前端实例代码，有关更多实例代码大家可以查看。

不可否认，jQuery是一款非常优秀的JavaScript库，极大的提高了前端开发效率。

有利就有弊，过度的依赖jQuery可能会带来代码执行效率低等问题；随着原生JavaScript版本的升级，现在很多内置的功能也能够完美的实现jQuery的对应功能，下面就简单做一下罗列，需要的朋友可以做一下参考。

一.元素查找:

（1）.通过id查找元素:

$("#ant")

jQuery的id选择器完全可以使用原生方法替代:

document.getElementById("ant")

（2）.通过class属性来查找元素:

$(".ant")

document.querySelector()和document.querySelectorAll()方法:

这两个方法可以实现强大的选择器功能，下面是几个简单代码:

//获取id属性值为ant的元素对象
document.querySelector("#ant");
//获取id属性值为ant下面的所有div元素集合
document.querySelectorAll("#ant div");

二.判断节点是否存在:

$("#ant").length > 0

上面的代码可以使用下面的代码替代:

document.getElementById("ant") !== null

三.节点遍历:

("div").each(function (index, elem) {
  //code
})

上面的代码可以采用下面的代码替代:

function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for (var index = 0; index < elems.length; index++) {
      callback(elems[index], index);
    }
  }
}
var div = document.querySelectorAll("div");
forEach(div, function(elem, index){
  //code
});

四.清空节点内容:

$("#ant").empty()

上面的代码可以用如下代码替代:

document.getElementById('test').innerHTML =""

五.设置节点的内容:

$("div").html("前端教程网")

上面的代码可以使用如下代码替代:

document.querySelecotr('div').innerHTML = "前端教程网";

再来看设置text文本内容:

$("div").text("前端教程网")

可以使用如下代码替代:

var odiv = document.querySelector("div");
odiv.textContent="前端教程网";

六.操作class属性:

（1）.新增class样式类:

$("#ant").addClass("class")

上面的代码可以用以下代码替代:

function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } else {
    elem.className += ' ' + className;
  }
}
addClass(document.getElementById("ant"), "class");

（2）.删除指定样式类:

$("#ant").removeClass("class");

上面的代码可以使用如下代码替代:

function removeClass(elem, className) {
  if(elem.classList) {
    elem.classList.remove(className);
  } else {
    elem.className=elem.className.replace(new RegExp('(^|\b)'+className.split(' ').join('|')+'(\b|$)','gi'),' ');
  }
}
removeClass(document.getElementById("ant"), "class");

（3）.判断是否包含指定的类:

$("#ant").hasClass("class");

上面的代码可以用以下代码替代:

function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp('(^| )' + className + '( |$)', 'gi').test(elem.className);
  }
}
hasClass(document.getElementById("ant"), "class");

七.节点操作:

（1）.创建节点:

$("<div>")

上面的代码可以用以下代码替代:

document.createElement("div")

（2）.复制节点:

$("div").clone()

上面的代码可以用以下代码替代:

document.querySelector("div").cloneNode(true)

（3）.插入节点:

$("div").append("<span></span>")

当然插入节点的方法有很多，以上代码可以用如下代码替代:

var span = document.createElement("span");
document.querySelector("div").appendChild(span);

在指定节点之前插入新的子节点:

$("<span>").insertBefore("#ant");

上面的代码可以用如下代码替代:

var t = document.getElementById("ant");
var span = document.createElement("span");
t.parentNode.insertBefore(span, t);

在指定节点后插入新的子节点:

$("<span>").insertAfter("#ant")

以上代码可以用下面的代码替代:

function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}
var t = document.getElementById("ant");
var span = document.createElement("span");   
insertAfter(t, span);

（4）.获取父节点:

$("#ant").parent()

上面的代码可以用以下代码替代:

document.getElementById("ant").parentNode