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 相关文章推荐
JS获取整个页面文档的实现代码
Dec 15 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
Vue2.x中的父子组件相互通信的实现方法
May 02 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
vue页面离开后执行函数的实例
Mar 13 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
微信小程序实现省市区三级地址选择
Jun 21 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 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
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php判断用户是否手机访问代码
2015/06/08 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php简单生成随机数的方法
2015/07/30 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP实现重载的常用方法实例详解
2017/10/18 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
JavaScript 指导方针
2007/04/05 Javascript
基于jQuery实现下拉框
2014/11/24 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Python中return语句用法实例分析
2015/08/04 Python
浅谈Python单向链表的实现
2015/12/24 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python多线程socket编程之多客户端接入
2017/09/12 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
python 删除非空文件夹的实例
2018/04/26 Python
python机器人运动范围问题的解答
2019/04/29 Python
PyQt5实现从主窗口打开子窗口的方法
2019/06/19 Python
Numpy数组array和矩阵matrix转换方法
2019/08/05 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Discard Protocol抛弃协议的作用是什么
2015/10/10 面试题
EJB需直接实现它的业务接口或Home接口吗,请简述理由
2016/11/23 面试题
商场消防安全责任书
2014/07/29 职场文书
四风问题查摆材料
2014/08/25 职场文书
房屋鉴定委托书范本
2014/09/23 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
MutationObserver在页面水印实现起到的作用详解
2022/07/07 Javascript