js替换jquery的方法

发表于 | 分类于
js替换jquery的方法

前言

现在jquery越来越没落了，但是我们的老项目还在用jquery，要更换就必须了解哪些和jquery等效的js方法。

对象合并

jquery

1
$.extend(true,a,b)

js

1
Object.assign(a,b)

获取元素

jquery

1
2
3
$("#aa");
$(".aa");
$("span");

js

1
2
3
document.querySelector("#aa");
document.querySelector(".aa");
document.querySelector("span");
  • querySelector 匹配指定 CSS 选择器的第一个元素。 如果没有找到，返回 null。如果指定了非法选择器则 抛出 SYNTAX_ERR 异常。

属性获取与赋值

jquery

1
2
$(".aa").attr("data-url");
$(".aa").attr("data-url","www.psvmc.cn");

js

1
2
document.querySelector(".aa").getAttribute("data-url");
document.querySelector(".aa").setAttribute("data-url","www.psvmc.cn");

样式

jquery

1
$(".aa").css({cursor: 'crosshair'});

js

1
document.querySelector(".aa").style.cursor='crosshair';

获取宽高

jquery

1
2
3
4
$(".aa").width;
$(".aa").height;
$("#aa").offset().left;
$("#aa").offset().top;

js

1
2
3
4
document.querySelector(".aa").offsetWidth
document.querySelector(".aa").offsetHeight
document.querySelector("#aa").offsetLeft
document.querySelector("#aa").offsetTop