【jQuery 教程系列第 1 篇】为什么要用 jQuery ? 使用 jQuery 的好处是什么？_你为什么要使用jquery?你觉得jquery有哪些好处-CSDN博客

本文链接：https://blog.csdn.net/qq_42351033/article/details/104087352

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

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

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

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

动态演示效果如下所示
在这里插入图片描述
HTML 代码如下

<body>
    <input id="btnShow" type="button" value="显示">
    <input id="btnAdd" type="button" value="添加内容">
    <div></div>
    <div></div>
</body>

CSS 代码如下

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

一：使用原生 js 实现

JavaScript 代码如下

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

        btnShow.onclick = function ()
        {
            for (var i = 0; i < divs.length; i++)
            {
                divs[i].style.display = "block"; // 显示 div
            }
        };

        btnAdd.onclick = function ()
        {
            for (var i = 0; i < divs.length; i++)
            {
                divs[i].innerText = "今天是大年初二"; // 为 div 添加内容
            }
        };
    </script>

二：使用 jQuery 实现

jQuery 代码如下

    <!-- 引用 jQuery -->
    <script src="../js/jquery-3.4.1.min.js"></script>
    <script>
        // jQuery 的入口函数标准
        $(document).ready(function ()
        {
            // 获取注册事件
            $("#btnShow").click(function ()
            {
                $("div").show(); // 显示 div
            });
            // 获取注册事件
            $("#btnAdd").click(function ()
            {
                $("div").text("今天是大年初二"); // 为 div 添加内容
            });
        });
    </script>

通过对比这两种方式，我们做出以下总结

JavaScript	jQuery
代码比较麻烦，需要遍历	通过 API 可直接实现循环效果
获取对象麻烦，代码还长	直接填写对象名称就行
存在兼容性问题	不存在兼容性问题

关于兼容性的问题我单独说明一下，在 js 代码中我们为 div 添加内容时用到了 innerText 方法，而这个方法在低版本的火狐浏览器是不支持的，它支持的是 textContent ，而 jQuery 是不存在兼容性这个问题的。

总结
上面举的这个例子只是一个很小的对比，但我们也可以看出来使用 jQuery 带给我们的方便之处。

比如我希望当点击"显示"按钮时，有一个动画效果，如果使用 js 的话，还需要引入 animate，而使用
jQuery 的话就不需要这么麻烦了，只需要在 show() 函数中填写一个参数即可，如下代码所示

    // 获取注册事件
    $("#btnShow").click(function ()
    {
        $("div").show(1000); // 显示 div
    });

动态演示效果如下所示
在这里插入图片描述
当然， jQuery 是很强大的，这只是冰山一角而已。

ok，关于为什么要用 jQuery ，以及使用 jQuery 的好处，就简单说到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语
技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。

最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。

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

一：使用原生 js 实现

二：使用 jQuery 实现

结束语

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