HTML Bootstrap页面引入jQuery后JS不生效，报$未定义错误

Uncaught ReferenceError: $ is not defined 翻译为 未捕获的引用错误：$ 未定义，该报错核心原因为 jQuery 库未在你的业务代码执行前完成加载，可按以下场景排查修复：

常见问题排查 #

• 脚本引入顺序错误
  必须保证 jquery-3.4.1.slim.min.js 的 <script> 标签，书写位置在你自己编写的业务 JS 文件的 <script> 标签之前，顺序颠倒会导致代码执行时 jQuery 还未完成注册，无法识别 $ 符号。
• jQuery 资源加载失败
  打开浏览器开发者工具的「网络」面板，搜索 jQuery 文件名，查看是否返回404状态。如果是本地文件路径填写错误，修正路径即可；如果是使用公共CDN资源加载失败，更换为本地jQuery文件即可。
• 代码执行时机早于DOM加载完成
  你的代码未包裹在DOM就绪回调中，浏览器解析到JS代码时页面DOM还未渲染完成、jQuery也未挂载到全局，需要将你的全部业务代码包裹在DOM就绪事件内，示例如下：

  // 固定写法，等待页面DOM加载完成后再执行内部代码
  $(document).ready(function() {
    $('#form-contato').submit(function(){
        var nome = $('#nome');
        var email = $('#email');
        var equipamento = $('#equipamento');
        var mensagem = $('#mensagem');
        var erro = $('.alert');
        var campo = $('#campo-erro');
  
        erro.addClass('d-none');
        $('.is-invalid').removeClass('is-invalid');
  
        // 校验姓名字段
        if (nome.val() == ''){
            erro.removeClass('d-none');
            campo.html('nome'); 
            nome.focus();
            nome.addClass('is-invalid')
            return false;
        }
  
        // 校验邮箱字段
        if (email.val() == ''){
            erro.removeClass('d-none');
            campo.html('email'); 
            email.focus();
            email.addClass('is-invalid')
            return false;
        }
  
        // 校验设备字段
        if (equipamento.val() == ''){
            erro.removeClass('d-none');
            campo.html('equipamento'); 
            equipamento.focus();
            equipamento.addClass('is-invalid')
            return false;
        }
  
        // 校验留言字段
        if (mensagem.val() == ''){
            erro.removeClass('d-none');
            campo.html('mensagem'); 
            mensagem.focus();
            mensagem.addClass('is-invalid')
            return false;
        }
  
        // 校验通过，提交表单
        return true;
    });
  });
  

• 多库符号冲突
  如果你同时引入了其他也使用$作为全局标识的JS库，会造成符号占用冲突，可以尝试把代码里的$替换为jQuery测试是否正常运行，比如将$('#form-contato')改为jQuery('#form-contato')，如果运行正常就是冲突问题，可通过$.noConflict()方法释放$的控制权，自定义全局标识即可。
• 异步加载属性导致加载滞后
  如果你给jQuery的<script>标签添加了async或者defer异步属性，会导致jQuery的加载和执行滞后于同步加载的业务代码，要么移除这两个异步属性，要么将业务代码绑定到window.onload事件中执行。

内容的提问来源于stack exchange，提问作者Henrique Araújo