尽量的使用原生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
});

复制代码

这里推荐一下个人前端学习交流圈：731771211，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。最新技术，与企业需求同步。好友都在里面学习交流，天天都会有大牛定时讲解前端技术!

点击：加入

四.清空节点内容:

上面的代码能够用以下代码替代:

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

复制代码

五.设置节点的内容:

$("div").htm("前端开发")

复制代码

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

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")


复制代码

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

复制代码