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 相关文章推荐
Jquery中删除元素的实现代码
Dec 29 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
JavaScript闭包实例讲解
Apr 22 Javascript
js使用post 方式打开新窗口
Feb 26 Javascript
JQuery中DOM事件绑定用法详解
Jun 13 Javascript
jQuery常用的一些技巧汇总
Mar 26 Javascript
快速获取/设置iframe内对象元素的几种js实现方法
May 20 Javascript
javascript运算符语法全面概述
Jul 14 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
JavaScript实战之带收放动画效果的导航菜单
Aug 16 Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 Javascript
vue 运用mock数据的示例代码
Nov 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
教你如何把一篇文章按要求分段
2006/10/09 PHP
PHP 分页原理分析,大家可以看看
2009/12/21 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
[原创]PHP实现逐行删除文件右侧空格的方法
2015/12/25 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
Windows平台PHP+IECapt实现网页批量截图并创建缩略图功能详解
2019/08/02 PHP
js 发个判断字符串是否为符合标准的函数
2009/04/27 Javascript
JavaScript 设计模式学习 Singleton
2009/07/27 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
基于vue.js的分页插件详解
2017/11/27 Javascript
详解Angular6学习笔记之主从组件
2018/09/05 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
用Python解决x的n次方问题
2019/02/08 Python
2020新版本pycharm+anaconda+opencv+pyqt环境配置学习笔记,亲测可用
2020/03/24 Python
如何使用python切换hosts文件
2020/04/29 Python
sklearn线性逻辑回归和非线性逻辑回归的实现
2020/06/09 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
如何用Django处理gzip数据流
2021/01/29 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
暖通工程师岗位职责
2014/06/12 职场文书
2014年加油站站长工作总结
2014/12/23 职场文书
滴水洞导游词
2015/02/10 职场文书
转变工作作风心得体会
2016/01/23 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
导游词之河姆渡遗址博物馆
2019/10/10 职场文书