为何$(...).mask不是函数？我的jQuery掩码代码存在什么问题？

这个错误我之前也碰到过好几次，大概率是脚本加载、路径或者兼容性相关的问题，咱们一步步排查解决：

• 脚本加载顺序搞反了
  jquery.mask.js是依赖jQuery的插件，必须先让浏览器加载完jQuery核心库，再加载mask插件，最后再执行你的自定义代码。如果顺序反了，插件找不到jQuery的运行环境，自然注册不了mask方法。
  正确的加载顺序应该是这样的：

  <!-- 先加载jQuery核心库 -->
  <script type="text/javascript" src="./js/jquery-1.11.0.min.js"></script>
  <!-- 再加载mask插件 -->
  <script type="text/javascript" src="./js/jquery.mask.js"></script>
  <!-- 最后执行你的初始化代码 -->
  <script type="text/javascript">
    $(document).ready(function($){ 
      $(".time-input").mask("99:99"); 
    });
  </script>
  

  检查一下你的HTML里脚本标签的顺序，别搞反了。

• mask插件文件路径错误
  如果浏览器找不到jquery.mask.js文件，那肯定用不了mask方法。你可以打开浏览器的开发者工具（按F12），切换到「Network」标签，刷新页面，看看jquery.mask.js的请求状态。如果显示404，说明路径写错了或者文件根本不在这个位置。
  确认一下：文件是不是真的放在./js/目录下？文件名有没有拼写错误（比如是不是叫jquery.mask.min.js而不是jquery.mask.js？）

• jQuery和其他库的$符号冲突
  如果你的页面里还引入了其他JavaScript库（比如Prototype、Zepto），它们可能也会使用$作为全局变量，这就会把jQuery的$给覆盖掉。这时候虽然jQuery加载了，但$已经不是jQuery的引用了，调用$(...).mask自然会报错。
  可以试试这两种修复方式：

  1. 使用jQuery的noConflict模式，改用jQuery代替$：

     jQuery.noConflict();
     jQuery(document).ready(function(){ 
       jQuery(".time-input").mask("99:99"); 
     });
     

  2. 确认你的ready函数里的$参数确实指向jQuery（你已经这么写了，但如果外部有冲突的话，可以再确认下）。

• 插件版本和jQuery版本不兼容
  你用的是jQuery 1.11.0，属于比较老的版本了，如果当前的jquery.mask.js版本太新，可能会不兼容旧版jQuery。建议找一个适配jQuery 1.x版本的mask插件版本（比如早期的1.x系列版本），替换掉现在的插件文件试试。

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