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 相关文章推荐
动态创建样式表在各浏览器中的差异测试代码
Sep 13 Javascript
JavaScript:Div层拖动效果实例代码
Aug 06 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
jQuery多级手风琴菜单实例讲解
Oct 22 Javascript
js使用cookie记录用户名的方法
Nov 26 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
利用JS实现文字的聚合动画效果
Jan 22 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
prototype.js简单实现ajax功能示例
Oct 18 Javascript
详解vue中v-bind:style效果的自定义指令
Jan 21 Javascript
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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
跟我学Laravel之配置Laravel
2014/10/15 PHP
php生成带logo二维码方法小结
2016/04/08 PHP
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
JavaScript实现文字跟随鼠标特效
2015/08/06 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
JavaScript实现的简单Tab点击切换功能示例
2018/07/06 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
pandas全表查询定位某个值所在行列的方法
2018/04/12 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
selenium 安装与chromedriver安装的方法步骤
2019/06/12 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
运动鞋、足球鞋和慕尼黑球衣:Sport Münzinger
2019/08/26 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
致全体运动员广播稿
2014/02/01 职场文书
2014年向国旗敬礼活动方案
2014/09/27 职场文书
环境工程专业毕业生求职信
2014/09/30 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年车间安全管理工作总结
2015/05/13 职场文书
民警忠诚教育心得体会
2016/01/23 职场文书
2019年英语版感谢信(8篇)
2019/09/29 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
阿里云 Windows server 2019 配置FTP
2022/04/28 Servers
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android
Java获取字符串编码格式实现思路
2022/09/23 Java/Android