我们对常用的jQuery方法及其等价的本地方法（1, 2, 3）的性能做了一些测试。
我知道您在想什么，本机方法显然比jQuery方法快，因为jQuery方法处理浏览器兼容性和其他东西。是的，我完全同意。写这篇文章并不反对jQuery的使用，但是如果您针对现代浏览器，使用本机方法将大大提高性能。

许多开发人员没有意识到他们使用的大多数jQuery方法都可以用本机方法或更轻量级的方法来代替。

注意：需要注意的是，下面的一些原生方法被HTML5引用，一些浏览器可能无法使用它。

选择器
jQuery的核心之一是取DOM元素非常方便，我们只需要输入CSS选择字符串，就可以得到匹配的元素，但在大多数情况下，我们可以使用简单的本机代码来达到相同的效果。
复制代码代码如下所示：
/ / ----让所有div ---------页
jQuery
$（）
原文
document.getelementsbytagname（div）
获取该类的所有元素
jQuery
$（我的类）
原文
document.queryselectorall（。我班）
主要的方法是更快。
document.getelementsbyclassname（我的班级）
css是由CSS元素选择的
jQuery
$（）。我班李：第一个孩子
原文
document.queryselectorall（。我班里：第一个孩子）
/ / ----获得指定类型的第一个元素。
jQuery
$（我的类）。（0）
原文
document.queryselector（。我班）

译者注：其实也存在一些问题。document.queryselectorall jQuery选择器是不同的。前者返回一个列表，则返回一个类对象数组。
DOM操作
jQuery在DOM操作中也经常使用，例如插入或删除元素。您会发现您需要编写额外的代码，当然，您可以编写自己的辅助函数，以便更容易使用。
复制代码代码如下所示：
插入元素
jQuery
$（文档主体）；
主要的断开方法
=文件。身体。innerHTML ；
主要的方法是为了更好地/
var = document.createdocumentfragment（片段）；
无功mydiv = document.createelement（div）；
mydiv.id =mydiv ；
VaR IM = document.createelement（IMG）；
im.src =我。gif；
mydiv.appendchild（IM）；
frag.appendchild（mydiv）；
document.body.appendchild（片段）；
前置元素
除了最后一行
document.body.insertbefore（片段文件。身体。第一个孩子）；

CSS类
在jQuery中，我们可以轻松地添加、删除和检查DOM元素的CSS类，幸运的是，本机方法的使用可以简单地完成。
复制代码代码如下所示：
获取DOM元素引用
var el = document.queryselector（。主要内容）；
添加了类----
jQuery
$（EL），AddClass（someclass ）；
本机方法
El.classList.add（someclass ）；
删除类
jQuery
$（EL），RemoveClass（someclass ）；
本机方法
el.classlist.remove（someclass ）；
类是否为
jQuery
如果（$（EL），HasClass（someclass ））
本机方法
如果（el.classlist.contains（someclass ））

修改CSS属性
CSS属性总是通过Javaｓｃｒｉｐｔ进行修改和检索，这将比使用jQuery CSS函数更简单、更快，而且没有多余的代码。
复制代码代码如下所示：
DOM元素引用
var el = document.queryselector（。主要内容）；
设置css属性，
jQuery
$（EL）Css（{
背景：# FF0000
盒子里的阴影：1px 1px 5px 5px红
宽度：100px
高度：100px
显示：块
}）；
原文
el.style.background =# FF0000；
el.style.width =100px ；
el.style.height =100px ；
el.style.display =块；
el.style.boxshadow =1px 1px 5px 5px红；