关键词：
参考技术A 我们针对常用的jQuery方法以及其等价原生方法的性能做了一些测试(1,2,
3)。
我知道你在想什么。原生方法明显要比jQuery方法快，因为jQuery方法要处理浏览器兼容以及其他一些事情。是的，我完全赞成。写这篇文章并不是出于反对使用jQuery，但如果你针对的是现代浏览器，那么使用原生方法会使性能有很大的提升。
许多开发者没有意识到大多数他们使用的jQuery方法可以使用原生方法，或者更轻量级的方法来代替。下面是一些代码示例，展示一些常用的jQuery方法，以及其等价原生方法。
译者注：需要注意下面有些原生方法是HTML5引用的，部分浏览器可能不能使用。
选择器
jQuery的核心之一就是能非常方便的取到DOM元素。我们只需输入CSS选择字符串，便可以得到匹配的元素。但在大多数情况下，我们可以用简单的原生代码达到同样的效果。
复制代码
代码如下:
//----得到页面的所有div---------
/*
jQuery
*/
$("div")
/*
原生
*/
document.getElementsByTagName("div")
//----得到所有指定class的元素---------
/*
jQuery
*/
$(".my-class")
/*
原生
*/
document.querySelectorAll(".my-class")
/*
更快的原生方法
*/
document.getElementsByClassName("my-class")
//----通过CSS选择得到元素----------
/*
jQuery
*/
$(".my-class
li:first-child")
/*
原生
*/
document.querySelectorAll(".my-class
li:first-child")
//----得到指定clsss的第一个元素----
/*
jQuery
*/
$(".my-class").get(0)
/*
原生
*/
document.querySelector(".my-class")
译者注：其实这里面是有些问题的，document.querySelectorAll和jQuery选择器还是有区别的，前者返回的是一个NodeList，而后者返回的是一个类数组对象。
DOM操作
jQuery还在DOM操作上频繁使用，例如插入或者删除元素。我们也可以使用原生方法来进行这些操作，你会发现这需要写额外的代码，当然也可以写自己的辅助函数来让使用起来更容易。下面是一些将元素插入到页面中的例子。
复制代码
代码如下:
//----插入元素----
/*
jQuery
*/
$(document.body).append("<div
id='myDiv'><img
src='im.gif'/></div>");
/*
蹩脚的原生方法
*/
document.body.innerHTML
+=
"<div
id='myDiv'><img
src='im.gif'/></div>";
/*
更好的原生方法
*/
var
frag
=
document.createDocumentFragment();
var
myDiv
=
document.createElement("div");
myDiv.id
=
"myDiv";
var
im
=
document.createElement("img");
im.src
=
"im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
//----前置元素----
//
除了最后一行
document.body.insertBefore(frag,
document.body.firstChild);
CSS
classes
在jQuery中，我们可以很容易对DOM元素添加、删除、检查它的CSS
class。幸运的是，利用原生方法也可以简单的办到。
复制代码
代码如下:
//
得到DOM元素的引用
var
el
=
document.querySelector(".main-content");
//----添加class------
/*
jQuery
*/
$(el).addClass("someClass");
/*
原生方法
*/
el.classList.add("someClass");
//----删除class-----
/*
jQuery
*/
$(el).removeClass("someClass");
/*
原生方法
*/
el.classList.remove("someClass");
//----是否是该class---
/*
jQuery
*/
if($(el).hasClass("someClass"))
/*
原生方法
*/
if(el.classList.contains("someClass"))
修改CSS属性
总是通过Javascript修改和检索CSS属性，这样会比使用jQuery
CSS函数更加简单快速，并且没有任何不必要的代码。
复制代码
代码如下:
//
得到DOM元素引用
var
el
=
document.querySelector(".main-content");
//----设置CSS属性----
/*
jQuery
*/
$(el).css(
background:
"#FF0000",
"box-shadow":
"1px
1px
5px
5px
red",
width:
"100px",
height:
"100px",
display:
"block"
);
/*
原生
*/
el.style.background
=
"#FF0000";
el.style.width
=
"100px";
el.style.height
=
"100px";
el.style.display
=
"block";
el.style.boxShadow
=
"1px
1px
5px
5px
red";
jQuery 的 width() 函数的 Javascript 等价物是啥？
】jQuery的width()函数的Javascript等价物是啥？【英文标题】：WhatistheJavascriptequivalentforjQuery\'swidth()function?jQuery的width()函数的Javascript等价物是什么？【发布时间】：2011-10-1422:37:29【问题描述】：我希望能够计算宽度css属性设置为\'aut... 查看详情
原生js写的ajax函数
参照JQuery中的ajax功能，用原生JS写了一个ajax，功能相对JQuery要少很多，不过基本功能都有，包括JSONP。调用的方式分为两种：1.ajax(url,{});2.ajax({});调用的方法参照JQuery的ajax，只是不需要写$.ajax，只需要写ajax就可以了。 代码... 查看详情
visualbasic函数“getref”的javascript等价物是什么？
这是我正在处理的代码示例setclientCode=getRef("ToggleCoDebtorUseDebtorLastName")我做了很多谷歌搜索，但是我一直找不到答案谢谢答案=是VBScript的GetRef 查看详情
原生js和jquery代码编写窗口捕捉函数和页面视觉差效果（scroll（）offsettop滚动监听的妙用）
想实现窗口滚动到一定位置时，部分网页的页面发生一些变化，但是手头没有合适的插件，所以就想到自己编写一个简易的方法，想到这个方法要有很高的自由度和适应性，在这，就尽量的削减其功能，若有错误的地方或者... 查看详情
jquery自学笔记(代码片段)
文章目录一、原生JavaScript与JQuery对比二、jQuery的概念及基本使用步骤三、jQuery的入口函数四、$的含义五、Dom对象和jQuery对象一、原生JavaScript与JQuery对比原生js的缺点1、不能添加多个入口函数(window.onload)，如果添加了多个... 查看详情
groovy集合遍历(调用集合的every方法判定集合中的所有元素是否符合闭包规则|=~运算符等价于contains函数|代码示例)(代码片段)
...出现一个元素不符合闭包规则,则返回false;Collection的every函数原型:/***用于确定给定谓词闭包是否有效(i.e.&nsbp;返回*<code>true</code>当所有的集合元素都符合闭包谓词).*集合的简单示例:*<pre>deflist=[3,4,5]*defgreaterThanT... 查看详情
jquery基础学习(代码片段)
1jQuery的基础官网地址：https://jquery.com/在线手册地址：https://jquery.cuishifeng.cn/1.1jQuery的版本不同的版本jQuery-3.6.0.js完整版、开发版，适合开发环境jquery-3.6.0.min.js压缩版、产品版(去掉了空格、换行，简化了变量名)&#x... 查看详情
匿名函数-lambda(代码片段)
匿名函数匿名函数：为了解决一些功能很简单的需求而设计的一句话函数（python对匿名函数支持有限，只有一些简单的条件下可以用匿名函数）匿名函数固定格式：func=lambda*args:args**2#func：函数名lambda：关键字args：参数args**2：... 查看详情
DB2 中的 datastage 转换函数的等价物是啥
】DB2中的datastage转换函数的等价物是啥【英文标题】：whatistheequivalentofdatastageconvertfunctioninDB2DB2中的datastage转换函数的等价物是什么【发布时间】：2020-04-2913:45:06【问题描述】：Convert函数返回一个变量的副本，其中变量中每次出... 查看详情
使用lambda的pythonmap函数的等价物(代码片段)
我想知道是否有可能使用自动返回类型推导功能编写Python函数map的C++等价物。我的想法是这样的：vector<int>input(1,2,3);autooutput=apply(input,[](intnum)returnnum*num;);//outputshouldbeavector1,4,9我知道std::transform，但在目前的情况下，编写一... 查看详情
Angular中访问DOM元素的“链接”函数的等价物是啥
】Angular中访问DOM元素的“链接”函数的等价物是啥【英文标题】：Whatistheequivalentof`link`functioninAngulartoaccessDOMelementsAngular中访问DOM元素的“链接”函数的等价物是什么【发布时间】：2018-02-2504:00:58【问题描述】：有一些示例在Angu... 查看详情
jQuery $.map 的 Angular 等价物？
】jQuery$.map的Angular等价物？【英文标题】：AngularequivalentofjQuery$.map?【发布时间】：2013-03-0222:34:30【问题描述】：我正在从依赖jQuery过渡到使用AngularJS构建应用程序。建议在numberofplaces中不要混合使用jQuery和Angular代码。我想念的... 查看详情
等价于类函数
】等价于类函数【英文标题】：Equivalenttoclassfunctions【发布时间】：2021-09-2522:54:27【问题描述】：我在Go中遇到了一段代码，typePersonstructIdintfunc(Person)SayHello()(string)return"Hello"这是否等同于Go中的类函数？这个的确切名称是什么？... 查看详情
jquery对象函数(代码片段)
1、JQuery对象函数写法格式简单示例：main代表对象名，main.roleName=(function() return$(‘#RoleName‘).val();)();表示为对象的roleName属性赋值。1$(document).ready(function()2MainManager.init();3);45varMainManager=window.MainMana 查看详情
java示例代码_从jQuery ajax success函数返回一个数组，并在循环中使用它
java示例代码_从jQuery ajax success函数返回一个数组，并在循环中使用它 查看详情
jquery中ajax请求的使用和四个步骤示例(代码片段)
ajax()方法用于执行AJAX（异步HTTP）请求，所有的jQueryAJAX方法都使用ajax()方法，该方法通常用于其他方法不能完成的请求。基本的语法是：$.ajax(name:value,name:value,…)下面是通常使用的示例：$.ajax(type:'POST',//规定请求的类型（G... 查看详情
原生javascript实现jquery代码效果对比
以下是jQuery和JavaScript实现相同操作的等价代码。 选择元素 Javascript代码 // jQuery var els = $(‘.el‘); // 原生方法 var els = d 查看详情
第五十课排序的工程应用示例(代码片段)
...应该既能排序静态数组类又能排序动态数组类。 这个函数返回原生数组的首地址。数组类需要新增成员函数array，排序类需要新增六个静态成员函数。Array.h添加array函数：1#ifndefARRAY_H2#defineARRAY_H34#include"Object.h"5#include"Exception.... 查看详情