Chrome开发者控制台Uncaught ReferenceError: $ is not defined错误排查与解决

这个问题我碰到过好多次了，本质上是**$符号的作用域冲突或被其他库覆盖**导致的：直接在控制台执行时，当时的全局$还指向jQuery，但把代码放到延迟执行的setTimeout或自定义函数里时，要么是函数作用域里没有正确引用$，要么是页面其他脚本（比如Prototype、MooTools这类也用$的库）已经把$的指向改了，所以就会报错。

给你几个实用的解决办法：

• 用jQuery全称代替$
  这是最稳妥的方式，因为不管$被谁占用，jQuery这个全局变量名是不会变的，直接用它就能调用jQuery的方法：

  setTimeout(function() {
    jQuery('#my-element').addClass('active');
  }, 1000);
  
  // 普通函数里也一样
  function handleElement() {
    jQuery('.target').text('Updated');
  }
  

• 用自执行函数绑定$到jQuery
  通过自执行匿名函数把jQuery作为参数传入，在函数内部就可以安心用$了，不会和外部的$冲突：

  (function($) {
    // 这里面的$就是jQuery的引用
    setTimeout(function() {
      $('div').fadeIn();
    }, 500);
  
    function myCustomFunc() {
      $('.list-item').hide();
    }
    myCustomFunc();
  })(jQuery);
  

• 手动重新绑定$（如果开启了noConflict）
  有些项目会用jQuery.noConflict()释放$的控制权，避免和其他库冲突，这时候你可以手动把$重新指向jQuery：

  // 先执行这行，把$绑定回jQuery
  var $ = jQuery.noConflict();
  
  // 之后不管是setTimeout还是普通函数，都能正常用$了
  setTimeout(function() {
    $('button').click();
  }, 1500);
  

如果还是不行，你可以在控制台先执行console.log($)和console.log(jQuery)看看输出，确认jQuery是否存在，以及$是不是被其他对象覆盖了——比如如果$输出的是一个DOM选择器函数而不是jQuery对象，那就是被其他库抢了$的使用权，用上面的方法就能解决。

内容的提问来源于stack exchange，提问作者Firat Eski