在前端开发中，常常会遇到需要操作 DOM 元素的情况。而两个常用的方式是使用 jQuery 或者原生的 document.querySelectorAll，那么它们之间有什么区别呢？本文将对它们进行详细比较。
jQuery
jQuery 是一个广泛使用的 JavaScript 库，它封装了许多常用操作，如 DOM 操作、事件处理、Ajax 等等。通过 jQuery，我们可以更加方便地对 HTML 文档进行操作。
例如，如果我们想选取所有的 <p> 元素，可以这样写：
------
这里 $ 符号就是 jQuery 的选择器函数，它接受一个 CSS 选择器作为参数。除此之外，jQuery 还提供了丰富的 API，如 .addClass()、.removeClass() 等等，可以方便地对选中的元素进行操作。
然而，使用 jQuery 也有一些缺点。首先，由于其封装了大量常用操作，因此它的体积较大，加载速度相对较慢。其次，由于其封装了许多操作，因此在某些场景下，可能需要编写自己的插件或者修改现有插件来满足需求。
document.querySelectorAll
document.querySelectorAll 是原生的 DOM API，在支持 CSS3 选择器的浏览器中，它可以通过 CSS 选择器选取符合条件的元素。
例如，我们可以这样选取所有的 <p> 元素：
------------------------------
同时，它返回的是一个 NodeList 对象，可以通过下标来访问其中的元素。例如，要访问第一个 <p> 元素，可以这样写：
---------------------------------
与 jQuery 不同的是，document.querySelectorAll 并不提供对元素的操作方法，因此如果想对选中的元素进行操作，需要手动编写代码。
比较
接下来，我们将对 jQuery 和 document.querySelectorAll 进行比较。
性能
由于 jQuery 封装了大量常用操作，因此加载速度相对较慢。而 document.querySelectorAll 是原生的 DOM API，在现代浏览器中，其性能已经相当不错了。
API
jQuery 提供了丰富的 API，可以方便地对 DOM 元素进行操作。而 document.querySelectorAll 只提供了选取元素的功能，需要自己编写代码来实现操作。
学习成本
由于其封装了许多常用操作，使用 jQuery 可以很快上手，但需要学习其 API。而 document.querySelectorAll 虽然没有封装操作，但是只需学习一些基础的 DOM 操作即可。
指导意义
在实际开发中，应该根据具体需求来选择使用 jQuery 还是 document.querySelectorAll。如果需要快速实现常用操作，可以使用 jQuery；如果需要更好的性能或者自定义操作，可以使用 document.querySelectorAll。
另外，在项目中尽量减小 jQuery 的使用，因为它对于一个简单的页面而言，其实是有些“杀鸡焉用牛刀”的。
示例代码
--------- -----
------
------
----- ----------------
------------- -- ---------------------------------
------- -----------------------------------------------------------
-------
------
--------- ----------
--------- -----------
--------
-- -- ------ ----- --- --
-----------------------------
-- -- ------------------------- ----- --- --
---
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------