【jQuery 教程系列第 1 篇】为什么要用 jQuery ? 使用 jQuery 的好处是什么 ？

这是【jQuery 教程系列第 1 篇】，如果觉得有用的话，欢迎关注专栏。

本篇博客不说琐碎的理论，让我们通过原生 js 和 jQuery 这两种方式，去实现同一种效果，直观的去对比这两种方式的区别，从而说明为什么要用 jQuery，以及使用 jQuery 的好处 。

我们要实现什么样的效果 ？

要实现的效果很简单，就是当我们点击"显示"按钮时，将隐藏的 div 给显示出来，点击"添加内容"按钮时，为每个 div 添加一段内容。

动态演示效果如下所示 HTML 代码如下

CSS 代码如下

div {
    height: 100px;
    margin-top: 10px;
    background-color: pink;
    display: none;
}

一：使用原生 js 实现

JavaScript 代码如下

    
    	// 获取元素对象
        var btnShow = document.getElementById("btnShow");
        var btnAdd = document.getElementById("btnAdd");
        var divs = document.getElementsByTagName("div");

        btnShow.onclick = function ()
        {
            for (var i = 0; i