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中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
Mar 14 Javascript
JavaScript实现快速排序(自已编写)
Dec 19 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
May 19 Javascript
js中settimeout方法加参数
Feb 28 Javascript
js点击事件链接的问题解决
Apr 25 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
jquery实现图片平滑滚动详解
Mar 22 jQuery
Angular2 http jsonp的实例详解
Aug 31 Javascript
axios post提交formdata的实例
Mar 16 Javascript
解决echarts echarts数据动态更新和dataZoom被重置问题
Jul 20 Javascript
用几道面试题来看JavaScript执行机制
Apr 30 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
PHP与MySQL交互使用详解
2006/10/09 PHP
php UTF8 文件的签名问题
2009/10/30 PHP
IIS下PHP连接数据库提示mysql undefined function mysql_connect()
2010/06/04 PHP
因str_replace导致的注入问题总结
2019/08/08 PHP
javascript 类方法定义还是有点区别
2009/04/15 Javascript
给Flash加一个超链接(推荐使用透明层)兼容主流浏览器
2013/06/09 Javascript
js正则表达exec与match的区别说明
2014/01/29 Javascript
node.js中的fs.renameSync方法使用说明
2014/12/16 Javascript
javascript结合fileReader 实现上传图片
2015/01/30 Javascript
JS非Alert实现网页右下角“未读信息”效果弹窗
2015/09/26 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
2016/01/26 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
AngularJs Understanding the Controller Component
2016/09/02 Javascript
js控制li的隐藏和显示实例代码
2016/10/15 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
JS函数本身的作用域实例分析
2020/03/16 Javascript
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python实现微信远程控制电脑
2018/02/22 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
Pytorch Tensor基本数学运算详解
2019/12/30 Python
Python如何读取、写入CSV数据
2020/07/28 Python
解决c++调用python中文乱码问题
2020/07/29 Python
Python创建临时文件和文件夹
2020/08/05 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
Intersport西班牙:在线体育商店
2019/11/06 全球购物
农民工工资发放承诺书
2014/03/31 职场文书
化学工程专业求职信
2014/08/10 职场文书
2014离婚协议书范文
2014/09/10 职场文书
幼儿园老师新年寄语2015
2014/12/08 职场文书
2014年优秀党员材料
2014/12/18 职场文书
话题作文之自信作文
2019/11/15 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
gojs实现蚂蚁线动画效果
2022/02/18 Javascript
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android