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 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
js 复制或插入Html的实现方法小结
May 19 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
javascript小数精度丢失的完美解决方法
May 31 Javascript
AngularJS中的promise用法分析
May 19 Javascript
微信小程序之多文件下载的简单封装示例
Jan 29 Javascript
MVVM框架下实现分页功能示例
Jun 14 Javascript
vue动态绑定class选中当前列表变色的方法示例
Dec 19 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
Dec 30 Javascript
JS实现深度优先搜索求解两点间最短路径
Jan 17 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 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中使用PDF文档功能
2006/10/09 PHP
简单说说PHP优化那些事(经验分享)
2014/11/27 PHP
php静态文件生成类实例分析
2015/01/03 PHP
PHP的Yii框架中过滤器相关的使用总结
2016/03/29 PHP
Zend Framework数据库操作方法实例总结
2016/12/11 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
纯javascript实现自动发送邮件
2015/10/21 Javascript
如何实现JavaScript动态加载CSS和JS文件
2020/12/28 Javascript
JavaScript中Function函数与Object对象的关系
2015/12/17 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
详解Node中导入模块require和import的区别
2017/08/11 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
2018/04/28 Javascript
nodejs实现一个word文档解析器思路详解
2018/08/14 NodeJs
Javascript通过控制类名更改样式
2019/05/24 Javascript
js实现提交前对列表数据的增删改查
2020/01/16 Javascript
Vue项目打包编译优化方案
2020/09/16 Javascript
Python基础之函数用法实例详解
2014/09/10 Python
python 中的list和array的不同之处及转换问题
2018/03/13 Python
shell命令行,一键创建 python 模板文件脚本方法
2018/03/20 Python
Python入门学习指南分享
2018/04/11 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
Python实现将字符串的首字母变为大写,其余都变为小写的方法
2019/06/11 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python Web框架之Django框架Form组件用法详解
2019/08/16 Python
Django框架 querySet功能解析
2019/09/04 Python
使用Python的datetime库处理时间(RPA流程)
2019/11/24 Python
生物技术专业研究生自荐信
2013/09/22 职场文书
农药学硕士毕业生自荐信
2013/09/25 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
体育课课后反思
2014/04/24 职场文书
圣诞节开幕词
2015/01/29 职场文书
高中教师个人总结
2015/02/10 职场文书
公司员工奖惩制度
2015/08/04 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript