jQuery函数的等价原生函数代码示例

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery函数的等价原生函数代码示例相关的知识,希望对你有一定的参考价值。

参考技术A 我们针对常用的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";

以上是关于jQuery函数的等价原生函数代码示例的主要内容,如果未能解决你的问题,请参考以下文章

一次移动优化之旅

Android 应用开发动态权限管理示例 ( 使用原生代码实现 | 申请权限 | 判定权限申请结果 | 判定 “ 不再询问 “ 情况 )

Visual Basic函数“ GetRef”的Javascript等价物是什么?

jQuery hover()方法和jQuery toggle()方法用法示例

封装方法示例

JQ与JS等价代码