jquery多版本插件脚本报错$(…)is not a function

原创 2020-12-18 本文共1799个字，预计耗時5分钟 860次阅读

文章摘要：jquery多版本兼容，jquery多个插件出现命名$冲突解决办法，在加载多个jquery版本，或者网站里有多个基于jquery的脚本，使用$.extend扩展时会遇到$符被占用，从而报错的情况通过noConflict释放$后重新命名实现多...

网站在加载多个jquery版本，或者网站里有多个基于jquery的脚本，使用$.extend扩展时会遇到$符被占用，从而报错的情况。实例是在使用图片懒加载插件jquery.lazyload.js的时候，如果你在网站其他位置使用了其他的基于jquery的插件脚本，有可能报错信息：

fuzhi.html:12 Uncaught TypeError: $(...).lazyload is not a function
    at HTMLDocument.<anonymous> (fuzhi.html:12)
    at c (jquery.min.js:3)
    at Object.fireWith [as resolveWith] (jquery.min.js:3)
    at Function.ready (jquery.min.js:3)
    at HTMLDocument.H (jquery.min.js:3)

这个错误即是，lazyload脚本是基于jquery的，使用的时候使用了$符号，而在网站如果还是用基于jquery的插件时，默认也是使用$符，这样就冲突了。解决办法也很容易，要么使用lazyload的时候换个符号，要么在使用其他插件的之前将$符释放。

方法一：

使用lazyload时将$(function()改成jQuery(document).ready(function ($)，内部可以保存不变。

$(function() {
            $("img.lazy").lazyload({
                effect: "fadeIn"
            });
 });
//改为
jQuery(document).ready(function ($) {
$("img.lazy").lazyload({
                effect: "fadeIn"
            });
 });

方法二：

在使用其他插件的时候先使用noConflict()方法将$符释放，复制给一个自定义的名字，然后在函数内部在赋给其$，这样函数内部也可以保存不变

var jq = $.noConflict(); 
jq(document).ready(function($) {
  //函数体
})

网站多个jquery插件兼容解决办法实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery_lazyload/1.8.3/jquery.lazyload.js"></script>
    <script type="text/javascript">
        $(function() {  //  方法一，改成 jQuery(document).ready(function ($) {
            $("img.lazy").lazyload({
                effect: "fadeIn"
            });
        });
    </script>
</head>
<body>
    <div><a href="https://www.baidu.com">点击11</a></div>
    <div><a href="#">点击22</a></div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="code.js  这个是基于jquery的插件"></script>
<script>
    // 方法二：
    var jq = $.noConflict(); //释放$符号 并将后面加载的jquery版本命名为jq（相当于$）
    console.log(jq().jquery); //3.4  jq设置了后加载的jquery版本
    console.log($().jquery); //1.9 $给了之前的jquery版本，如果本来就没有之前版本，$会报错未定义
    jq(document).ready(function($) {  //函数内部从新赋值$ 内部仍然可以使用$
        console.log($().jquery); //3.4
        console.log(jq().jquery); //3.4
    }); </script>
</html>

本文地址：https://doc.ydqic.com/3372.html

版权免责申明
① 本站源码模板等资源SVIP用户永久不限量免费下载
② 所有资源来源于网络收集，如有侵权，请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流，请不要用于商业用途，否则后果自负。
④ 如果你有源码需要出售，可以联系管理详谈。
⑤ 本站提供的源码、模板、插件等等资源，都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内，为了大环境的良性发展，请尽可能的选择正版资源。
⑧ 网站资源绝不做任何二次加密或添加后门（原版加密除外）

常见问题F&Q