jQuery函数的等价原生函数代码示例


Posted in Javascript onMay 27, 2013

我们针对常用的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";
Javascript 相关文章推荐
javascript-TreeView父子联动效果保持节点状态一致
Aug 12 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
使用Javascript接收get传递的值的代码
Nov 30 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
JS中的Replace方法使用经验分享
May 20 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
最实用的jQuery分页插件
Oct 09 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
vue实现未登录跳转到登录页面的方法
Jul 17 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
微信小程序实现拍照和相册选取图片
May 09 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 #Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 #Javascript
js过滤HTML标签以及空格的思路及代码
May 24 #Javascript
jQuery实现表头固定效果的实例代码
May 24 #Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
May 23 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
使用Xdebug调试和优化PHP程序之[1]
2007/04/17 PHP
在Yii框架中使用PHP模板引擎Twig的例子
2014/06/13 PHP
实例讲解如何在PHP的Yii框架中进行错误和异常处理
2016/03/17 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
PHP.vs.JAVA
2016/04/29 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
PHP常用日期加减计算方法实例小结
2018/07/31 PHP
document.all还是document.getElementsByName?
2006/07/21 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jquery插件canvaspercent.js实现百分比圆饼效果
2017/07/18 jQuery
js原生方法被覆盖,从新赋值原生的方法
2018/01/02 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
VUE预渲染及遇到的坑
2018/09/03 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
基于python实现学生管理系统
2018/10/17 Python
python实现三维拟合的方法
2018/12/29 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Django如何实现上传图片功能
2019/08/16 Python
python爬虫实现获取下一页代码
2020/03/13 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
英国健身仓库:Bodybuilding Warehouse
2019/03/06 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
人事档案接收函
2014/01/12 职场文书
小学教师事迹材料
2014/01/13 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
初中班主任经验交流材料
2014/05/16 职场文书
pytorch中的model.eval()和BN层的使用
2021/05/22 Python
让文件路径提取变得更简单的Python Path库
2021/05/27 Python
Python之matplotlib绘制饼图
2022/04/13 Python