你不需要jQuery(四)

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. 查找/选择页面元素

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

// 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);

}

<ul>

    <li class="monsters">Nessy</li>

    <li class="monsters">Big foot</li>

    <li class="monsters">La chupacabra</li>

</ul>

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 <li>.

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');

});

<button>Enable zoom</button>

<button>Disable zoom</button>

<br><br>

Click on any of the names to color them green

<ul>

    <li>Chewbacca</li>

    <li>Han Solo</li>

    <li>Luke</li>

    <li>Boba fett</li>

</ul>

.green {
    color: green;
}

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

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

4. 对类和属性的操作

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

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

});

<div id='myDiv' class="square"></div>

<button>Display id</button>

<button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>

.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里，我们可以使用 textContent 和 innerHTML 两个属性，这两个属性其实并不是新出现的：

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 = "<button> Penguins are the best animals </button>";
    
});

<p id="myParagraph"><strong> Which are the best animals? </strong></p>

<button>Koalas</button>

<br>

<button>Penguins</button>

6. 循环数组

jQuery里提供了很多实验的方法，比如each() 和 map()，而在新版的JavaScript api里，我们有了原生的 forEach 和 map ，需要注意的是，它们参数的用法有些不同，并且在回调函数里 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——fetch，这个api采用了全新的 Promise 架构，使用起来更方便，更灵活，详细用法请参考《你不需要jQuery(三)：新AJAX方法fetch() 》。

总结

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