jQuery是个好东西。它诞生于IE6在互联网称霸的那个时代。jQuery的存在让我们的代码能很好的兼容各种平台。

然而，到如今，浏览器技术已经取得了巨大的进步。我们可以自由的使用所有最新众多ES5/ES6提供的原生API，配合革命性的HTML5 API，我们对DOM的操作变得从未如此的容易。WEB开发人员突然发现，没有jQuery其实也能轻松高效的完成项目开发。

不要误会，jQuery仍然是一个强大的工具包，大多时候我们还是要优先选择它。然而，对于一些简单的任务，一些小项目，一个简单的页面，或者移动版网站上，我们使用简单的纯js也许更有效率。下面的10个技巧希望能给大家一些启发。

1. 监听页面加载完成事件

写jQuery代码时，我们通常首先做的是把代码包裹在$(document).ready()里，这样，当DOM加载完成，可以操作时，包裹的代码才会去执行。除了使用jQuery，我们还可以使用 DOMContentLoaded 事件代替，下面是用例：

/ Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.// You can then wrap your code in that function's brackets// and it will execute once loading is complete.document.addEventListener('DOMContentLoaded', function () {    // Our hawaiian greeting is displayed as soon as the page loads,    console.log('Aloha');});

　　

2. 查找/选择页面元素

曾经，我们如果想捕捉一个/一批元素，只能通过 ,  和  名称，jQuery给我提供了革命性的更具灵活性的基于css的查找方法。随着浏览器的进步，我们现在可以使用两个新型的原生JavaScript API – querySelector 和:

// We can use document.querySelector to get the first element that matches a certain criteria.// It's only argument is a string containing one or more CSS selectors.var lochNess = document.querySelector(".monsters");console.log("It's from Scotland - " + lochNess.textContent);// We can also get all elements of a certain type or class by using document.querySelectorAll.// This returns a NodeList of all the elements that fit our criteria.var scary = document.querySelectorAll(".monsters");console.log("Hide and seek champions: ");for (var i = 0; i < scary.length; i++) {    console.log(scary[i].innerHTML);}

　

     
    
      
Nessy
    
      
Big foot
    
      
La chupacabra
     

　　

3. 添加和移除事件监听器

事件监听是WEB应用里非常常见的操作。在过去，IE里的事件监听和其它浏览器的监听方法是不统一/不兼容的。但如今，我们只需要使用addEventListener就可以了:

var btn = document.querySelectorAll("button"),    list = document.querySelector("ul");// We call the addEventListener method on our desired event target(in this case a button).// This will start a listener that will wait until a click is generated on the element.btn[0].addEventListener("click", function () {    // When this button is clicked we want to enable zooming of our list.    // To do this we add an event listener to our list itself,    // so when the cursor hovers it, the enlarge function gets called.    list.addEventListener("mouseover", enlarge);});// To disable the zooming we can simply use removeEventListener.btn[1].addEventListener("click", function () {    // Removing event listeners doesn't work on anonymous functions, so always use a named one.    list.removeEventListener("mouseover", enlarge);});// Let's create our enlarge function.var enlarge = function () {    // Add class zoomed to the unordered list.    list.classList.add("zoomed");    // When the cursor leaves the list return to normal size by removing the class.    list.addEventListener("mouseout", function () {        list.classList.remove("zoomed")    });};// Now we want to be able to color the names by clicking them.// When a 'click' is registered on one of the list entries it should change its color to green.// Thanks to event delegation we can actually add an event listener to the whole parent object.// This way we don't have to add separate event listeners to each 
.list.addEventListener("click", function (e) {    // Make the coloring happen only to the clicked element by taking the target of the event.    e.target.classList.add('green');});

　　

Enable zoomDisable zoom
Click on any of the names to color them green
     
    
      
Chewbacca
    
      
Han Solo
    
      
Luke
    
      
Boba fett
     

　　

.green {    color: green;}.zoomed {    cursor: pointer;    font-size: 23px;}

　　

addEventListener 的用法看起来跟jQuery里的事件监听用法非常相似。

4. 对类和属性的操作

以前，执行对于页面元素css类的各种操作(查找、增加、删除等)，如果不用jQuery，那是一件非常麻烦的事情。这样的历史已经一去不复返了，这样要感谢 属性。而使用 ， 我们可对元素属性进行操作。

var btn = document.querySelectorAll("button"),    div = document.querySelector("#myDiv");btn[0].addEventListener("click", function () {    // Get any attribute easily.    console.log(div.id);});// Element.classList stores all classes of the element in the form of a DOMTokenList.var classes = div.classList;btn[1].addEventListener("click", function () {    console.log(classes);});btn[2].addEventListener("click", function () {    // 可以增加和移除某个类名    classes.add("red");});btn[3].addEventListener("click", function () {    // 可以翻转某个类名    classes.toggle("hidden");});

　　

     
Display idDisplay classesColor redToggle visibility

　　

.square {    width: 100px;    height: 100px;    margin-bottom: 20px;    border: 1px solid grey;    border-radius: 5px;}.hidden {    visibility: hidden;}.red {    background-color: red;}

　　

5. 获取或设置元素的内容

jQuery里有个非常方便的 text() 和 html() 方法，相对应的，在元素JavaScript里，我们可以使用  和  两个属性，这两个属性其实并不是新出现的：

var myText = document.querySelector("#myParagraph"),    btn = document.querySelectorAll("button");// We can easily get the text content of a node and all its descendants.var myContent = myText.textContent;console.log("textContent:  " + myContent);// When using textContent to alter the text of an element// it deletes the old content and replaces it with new.btn[0].addEventListener('click', function () {        myText.textContent = " Koalas are the best animals ";    });// If we want to grab all the HTML in a node (including the tags) we can use innerHTML.var myHtml = myText.innerHTML;console.log("innerHTML:  " + myHtml);// To change the html simply supply new content.// Of course we aren't limited to text only this time.btn[1].addEventListener('click', function () {        myText.innerHTML = " Penguins are the best animals ";    });

　　

 Which are the best animals? 
Koalas
Penguins

　　

6. 循环数组

jQuery里提供了很多实验的方法，比如each() 和 map()，而在新版的JavaScript api里，我们有了原生的  和  ，需要注意的是，它们参数的用法有些不同，并且在回调函数里 this 的代表性也有些不同。

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];// ForEach automatically iterates through an array.ninjaTurtles.forEach(function (entry) {    console.log(entry);});// The map method calls a function on every element of an array and creates a new array with the results.var lovesPizza = ninjaTurtles.map(function (entry) {    return entry.concat(" loves pizza!");});console.log(lovesPizza);

　　

7. AJAX

新版的JavaScript API里提供了一个全新的可以实现ajax的API——，这个api采用了全新的  架构，使用起来更方便，更灵活，详细用法请参考《》。

总结

如果你追求极简，不允许页面有半点臃肿，以更快的加载速度和更好的用户体验为目标，那么，你应该试试上面的技巧，不要因为一个很小的功能而滥用jQuery，浏览器在革新，JavaScript在进步，原生的API逐渐取代jQuery是潮流，WEB程序员应多关注这方面的知识技巧，不是吗？