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

为什么80%的码农都做不了架构师？>>>

不可否认，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

转载于:https://my.oschina.net/zybc/blog/3039549