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

TANKING發表於2022-06-15
HTMLjQueryCSS

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...

相關文章