HTML DOM querySelectorAll() 代替 jquery的 $('') CSS選擇器

TANKING 發表於 2022-06-15
jQuery CSS

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確實已經無法相比了。

有關Fetch Api的,可以看我上一篇文章:https://segmentfault.com/a/11...