$(‘01’).缘起()
说实话，我从一开始就觉得JavaScript与HTML、CSS没有融合起来，写起来非常别扭和繁琐，于是在很长一段时间里，除非必须要使用JavaScript，我都会想想其它替代办法。
比如说，我想要做一个弹窗，页面结构如下：
<html> <body> <button id=“open”>打开弹窗</button> <div id=“window” > <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的元素。如果你想要在页面打开时立刻执行程序，就必须要写(function(){})。
$(‘04’).为什么我要学jQuery()
jQuery是过时的，与Vue、React简直是不能比，虽然以前辉煌过一段时间，但时过境迁，现在除了政府网和老项目，也没人用jQuery了。
但我认为jQuery与Vue、React根本就不是一个赛道上的，我觉得更像JavaScript的语法糖，与其说jQuery是过时的，还不如说是原生JavaScript是过时的。
因此我觉得还是得学一下，可以当作JavaScript的平替，但如同原生JavaScript一样，遇到大量交互的单页、性能要求高等情况，还是相形见拙，只能交给更加现代的框架搞了。