本篇博客不说琐碎的理论，让我们通过原生 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() 函数中填写一个参数即可，如下代码所示
扫描二维码关注公众号，回复：
8956239 查看本文章
// 获取注册事件
$("#btnShow").click(function ()
{
$("div").show(1000); // 显示 div
});
动态演示效果如下所示
当然， jQuery 是很强大的，这只是冰山一角而已。
ok，关于为什么要用 jQuery ，以及使用 jQuery 的好处，就简单说到这里。
如果这篇博客有幸帮到了您，欢迎点击下方链接，和更多志同道合的伙伴一起交流，一起进步。
结束语
