原生js跟jquery 的对比

选择器

便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。

然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。

1.获取页面所有的div

 
 
/* jQuery */ 
  $("div") 
   
  /* native equivalent */ 
  document.getElementsByTagName("div") 

2.获取某类名相同的一群元素

 
 
/* jQuery */  
  $(".my-class") 
  
  /* native equivalent */ 
  document.querySelectorAll(".my-class") 
  
  /* FASTER native equivalent */ 
  document.getElementsByClassName("my-class") 

3.更复杂的一些选择器

 
 
/* jQuery */ 
  $(".my-class li:first-child") 
  
  /* native equivalent */ 
  document.querySelectorAll(".my-class li:first-child") 

 
 
/* jQuery */ 
  $(".my-class").get(0) 
  
  /* native equivalent */ 
  document.querySelector(".my-class") 

DOM操作

JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。当然，如果使用原生JS实现这些功能，代码量肯定是会有所增加的，不过我们也可以将这些功能封装成函数，下面是一些常用的DOM操作的原生JS实现。

1.插入HTML元素

 
 
/* jQuery */ 
  $(document.body).append("<div id='myDiv'><img src='im.gif'/></div>"); 
  
  /* CRAPPY native equivalent */ 
  document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>"; 
  
  /* MUCH BETTER native equivalent */ 
  var frag = document.createDocumentFragment(); 
  
  var myDiv = document.createElement("div"); 
  myDiv.id = "myDiv"; 
  
  var im = document.createElement("img"); 
  im.src = "im.gif"; 
  
  myDiv.appendChild(im); 
  frag.appendChild(myDiv); 
  
  document.body.appendChild(frag); 

CSS操作

在JQuery中可以轻松实现对css的操作，增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。

 
 
// get reference to DOM element 
  var el = document.querySelector(".main-content"); 
  
  //----Adding a class------ 
  
  /* jQuery */ 
  $(el).addClass("someClass"); 
  
  /* native equivalent */ 
  el.classList.add("someClass"); 
  
  //----Removing a class----- 
  
  /* jQuery */ 
  $(el).removeClass("someClass"); 
  
  /* native equivalent */ 
  el.classList.remove("someClass"); 
  
  //----Does it have class--- 
  
  /* jQuery */ 
  if($(el).hasClass("someClass")) 
  
  /* native equivalent */ 
  if(el.classList.contains("someClass")) 

当我们简单地逐个设置Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。而且，真的不会添加什么额外的代码。

 
 
// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----Setting multiple CSS properties---- 
  
  /* jQuery */ 
  $(el).css({ 
    background: "#FF0000", 
    "box-shadow": "1px 1px 5px 5px red", 
    width: "100px", 
    height: "100px", 
    display: "block" 
  }); 
  
  /* native equivalent */ 
  el.style.background = "#FF0000"; 
  el.style.width = "100px"; 
  el.style.height = "100px"; 
  el.style.display = "block"; 
  el.style.boxShadow = "1px 1px 5px 5px red"; 

show与hide

show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。

 
 
// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----show() or hide()---- 
  
  /* jQuery */ 
  $(el).show(); 
  $(el).hide(); 
  
  /* native equivalent */ 
  el.style.display = ''; 
  el.style.display = 'none'; 

事件绑定

 
 
// get reference to a DOM element 
  var el = document.querySelector(".main-content"); 
 
  //----Event Listener off---- 
  
  /* jQuery */ 
  $(el).off(eventName, eventHandler); 
  
  /* native equivalent */ 
  el.removeEventListener(eventName, eventHandler); 
 
 
  //----Event Listener  on---- 
  
  /* jQuery */ 
  $(el).on(eventName, eventHandler); 
  
  /* native equivalent */ 
  el.addEventListener(eventName, eventHandler);