HTML DOM querySelectorAll() 代替 jquery的 $('') CSS选择器 - TANKING 创意开发者

HTML DOM querySelectorAll() 代替 jquery的 $('') CSS选择器

2022-08-18 1925 阅读 Javascript

querySelectorAll()方法返回文档中匹配指定CSS选择器的所有元素,其效果与jquery的$('')选择器一样,不同的就是querySelectorAll()方法是Js原生方法,无需引入jquery.min.js库。


jquery方法

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
    <div id="a">666</div>
    <script type="text/javascript">
        var a = $('#a').text();
        alert(a)
    </script>
</body>
</html>


querySelectorAll()方法

<!DOCTYPE html>
<html>
<head>
    <title>demo</title>
    <meta charset="utf-8">
</head>
<body>
    <div id="a">666</div>
    <script type="text/javascript">
        var a = document.querySelectorAll('#a');
        alert(a[0].innerText)
    </script>
</body>
</html>


为什么jquery会越来越少人用,甚至不少前端程序员开始嫌弃jquery,还是与原生Js的发展有关,原生Js操作Dom的API是越来越方便了。


jquery的Ajax操作,为我们省去了兼容浏览器方面的问题,并且也提供了简明的API去调用get和 post,让开发者从繁琐的兼容性与使用原生API上解脱出来。


但是现在,这个优势也已经非常微小了。不管是原生js的fetch API还是 axios,都为我们提供了强大的Ajax使用能力,并且axios还有拦截器这个优势。相较而言,jquery的Ajax确实已经无法相比了。