jQuery方法的本地JavaScript等效项：CSS和动画

最新推荐文章于 2024-09-14 18:52:56 发布

dingshi7798

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量86

点赞数

文章标签： javascript ViewUI

您真的需要jQuery吗？ 有时-特别是如果您想使用jQuery 1.x支持IE6 / 7/8。但是，现代浏览器API现在提供了我们在jQuery中理所当然的许多功能。在本文中，我们将研究与CSS相关的方法。

类操作

最常见的jQuery任务之一是将类应用于特定元素：

$("#myelement").addClass("myclass");

我们可以在本地JavaScript中实现相同的目的：

document.getElementById("myelement").className = "myclass";

这不是全部故事：

jQuery可以将类应用于任意数量的节点。
jQuery将新类追加到现有的类定义中，但是本机示例将覆盖它们。

在本机JavaScript中， className属性只是一个字符串。因此，我们需要一个函数来复制jQuery的工作方式，例如

function addClass(node, class) {
	if (!node.length) node = [node];
	for (var n = 0, m = node.length; n < m; n++) {
		if ((" " + node[n].className + " ").indexOf(" "+class+" ") >= 0) {
			node.className += " " + class;
		}
	}
}
// apply myclass to all nodes
addClass(document.getElementById("myelement"), "myclass");

尽管此代码比jQuery更快更小，但我们正在复制库中已有的内容-毫无意义。

幸运的是，现代浏览器现在提供了一个新的classList属性，该属性实现了DOMTokenList —应用于节点的所有类的类似数组的集合。可以使用以下属性：

length —应用的类名称的数量
item（ index ） —特定索引处的类名称
contains（ class ） —如果节点应用了该类，则返回true
add（ class ） —将新类应用于节点
remove（ class ） —从节点移除一个类
toggle（ class ） —删除或添加一个类（如果分别应用或不应用）

我们可以优先于笨拙的className属性使用它：

document.getElementById("myelement").classList.add("myclass");

IE9以外的大多数浏览器都支持classList。幸运的是，可以使用一些垫片，这些垫片可以有条件地加载到该浏览器中。

样式操纵

jQuery提供了许多应用特定样式的方法，例如

$("#myelement").css({
	color: "#c00",
	backgroundColor: "#eee",
	width: "200px",
	height: "100px",
	borderColor: "#f00"
});

本机等效项：

var m = document.getElementById("myelement"), c = m.style;
c.color = "#c00";
c.backgroundColor = "#eee";
c.width = "200px";
c.height = "100px";
c.borderColor = "#f00";

使用缓存的选择器进行了10,000次以上的迭代，jQuery代码在6,670毫秒内执行。本机JavaScript花费了330毫秒-快了20倍。

当然，除非需要以某种方式计算值，否则都不应该使用。在CSS中定义一类样式，然后将其名称应用于元素，效率更高。