使用 jQuery 作为原生 JavaScript 的平替

$(’01’). 缘起 ()#

说实话，我从一开始就觉得 JavaScript 与 HTML、CSS 没有融合起来，写起来非常别扭和繁琐，于是在很长一段时间里，除非必须要使用 JavaScript，我都会想想其它替代办法。

比如说，我想要做一个弹窗，页面结构如下：

<html>
    <body>
        <button id="open">打开弹窗</button>
        <div id="window" style="background-color: #dddddd; width: 200px;height: 100px; margin-top: 5vw; margin-left: 5vw;">
            <span id="text">Hello</span><br>
            <button id="close">关闭</button>
        </div>
        <script>
            // 在这里写JavaScript...
        </script>
    </body>
</html>

如果使用原生 JavaScript，需要在 <script> 里这么写：

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('window').style.display = 'none';
    document.getElementById('open').addEventListener('click', function() {
        document.getElementById('window').style.display = '';
    });
    const closeButton = document.getElementById('close');
    const textElement = document.getElementById('text');
    const windowElement = document.getElementById('window');
    closeButton.addEventListener('mouseenter', function() {
        textElement.textContent = '不要关闭我呜呜呜';
        windowElement.style.backgroundColor = '#ffdddd';
    });
    closeButton.addEventListener('mouseleave', function() {
        textElement.textContent = 'Hello';
        windowElement.style.backgroundColor = '#dddddd';
    });
    closeButton.addEventListener('click', function() {
        windowElement.style.display = 'none';
    });
});

又臭又长，看都看的难受，别说写了。

因此当我在学校机房里的一本书里看到 jQuery 时，我都惊呆了，觉得 JavaScript 本来应该是这样的，是如此的优雅、简明扼要：

$(
    function(){
        $('#window').hide()
    }
)
$('#open').click(
    function(){
        $('#window').show()
    }
)
$('#close').mouseenter(
    function(){
        $('#text').text('不要关闭我呜呜呜')
        $('#window').css('background-color', '#ffdddd')
    }
)
$('#close').mouseleave(
    function(){
        $('#text').text('Hello')
        $('#window').css('background-color', '#dddddd')
    }
)
$('#close').click(
    function(){
        $('#window').hide()
    }
)

$(’02’). 引入 ()#

引入 jQuery 很简单，可以使用外部 CDN，例如使用字节的 CDN：

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.3/jquery.min.js"></script>

你也可以在这里下载文件并本地引入：https://code.jquery.com/jquery-3.7.1.min.js

<script src="jquery-3.7.1.min.js"></script>

$(’03’). 使用 ()#

jQuery 类似于 CSS，语法本身是很简单的，但吃积累。

几乎所有的语法遵循同一个规则：

$(选择器).触发条件(
    function(){
        $(选择器1).操作1(参数).操作2(参数)...
        $(选择器2).操作1(参数).操作2(参数)...
    }
)

例如在上文的例子中，其中有一段是这样的：

$('#open').click(
    function(){
        $('#window').show()
    }
)

这段代码很简单：如果 id 为 open 的元素被点击，就显示 id 为 window 的元素。其中选择器的语法也与 CSS 差不多。

不过需要注意的是，你可能会看到没有选择器的情况，就是：

$(
    function(){
        $('#window').hide()
    }
)

这其实是一个语法糖，它的原型为：

$(document).ready(
    function(){
       $('#window').hide()
    }
)

这个意思是说：当页面（document）加载完毕时，就隐藏 id 为 window 的元素。如果你想要在页面打开时立刻执行程序，就必须要写 $(document).ready(function(){}) 或 $(function(){})。

$(’04’). 为什么我要学 jQuery ()#

jQuery 是过时的，与 Vue、React 简直是不能比，虽然以前辉煌过一段时间，但时过境迁，现在除了政府网和老项目，也没人用 jQuery 了。

但我认为 jQuery 与 Vue、React 根本就不是一个赛道上的，我觉得更像 JavaScript 的语法糖，与其说 jQuery 是过时的，还不如说是原生 JavaScript 是过时的。

因此我觉得还是得学一下，可以当作 JavaScript 的平替，但如同原生 JavaScript 一样，遇到大量交互的单页、性能要求高等情况，还是相形见拙，只能交给更加现代的框架搞了。