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 相关文章推荐
HTML TO JavaScript 转换
Jun 26 Javascript
window.parent与window.openner区别介绍
Apr 12 Javascript
禁止空格提交表单的js代码
Nov 17 Javascript
JS实现日期时间动态显示的方法
Dec 07 Javascript
JavaScript函数柯里化详解
Apr 29 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
node.js中debug模块的简单介绍与使用
Apr 25 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
vue和webpack打包项目相对路径修改的方法
Jun 15 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
jquery 键盘事件 keypress() keydown() keyup()用法总结
Oct 23 jQuery
JS常用正则表达式超全集(密码强度校验,金额校验,IE版本,IPv4,IPv6校验)
Feb 03 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
日本因肺炎疫情影响,这几部动漫推延播放!
2020/03/03 日漫
用PHP编程开发“虚拟域名”系统
2006/10/09 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
PHP入门教程之数学运算技巧总结
2016/09/11 PHP
jQuery+css+html实现页面遮罩弹出框
2013/03/21 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
node.js中的http.response.setHeader方法使用说明
2014/12/14 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
javascript中this关键字详解
2016/12/12 Javascript
jQuery html表格排序插件tablesorter使用方法详解
2017/02/10 Javascript
Bootstrap模态框插入视频的实现代码
2017/06/25 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
详解基于iview-ui的导航栏路径(面包屑)配置
2019/02/22 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
React服务端渲染原理解析与实践
2021/03/04 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
Python实现嵌套列表及字典并按某一元素去重复功能示例
2017/11/30 Python
使用python模拟高斯分布例子
2019/12/09 Python
Python socket连接中的粘包、精确传输问题实例分析
2020/03/24 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
matplotlib之pyplot模块坐标轴标签设置使用(xlabel()、ylabel())
2021/02/22 Python
HTML5+CSS3实例 :canvas 模拟实现电子彩票刮刮乐代码
2016/12/30 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
新西兰廉价汽车租赁:Snap Rentals
2018/09/14 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
秋季运动会演讲稿
2014/09/16 职场文书
实习推荐信格式模板
2015/03/27 职场文书
毕业生入职感言
2015/07/31 职场文书
严以律己学习心得体会
2016/01/13 职场文书
left join、inner join、right join的区别
2021/04/05 MySQL
Go语言特点及基本数据类型使用详解
2022/03/21 Golang