• 解决 jQuery 和其他库的冲突


    在 jQuery 库中,几乎所有的插件都被限制在它的命名空间里。通常,全局对象都被很好地存储在 jQuery 命名空间里,因此当把 jQuery 和其他 JavaScript 库(例如 Prototype、MooTools 或 YUI)一起使用时,不会引起冲突。

    注意:默认情况下,jQuery 用 $ 作为自身的快捷方式。

    1.jQuery库在其他库之后导入

    在其他库和 jQuery 库都被加载完毕后,可以在任何时候调用 jQuery.noConflict() 函数来将变量 $ 的控制权移交给其他 JavaScript 库。示例如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决1</title>
    <!-- 引入 prototype  -->
    <script src="lib/prototype.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">Test-prototype(将被隐藏)</p>
    <p >Test-jQuery(将被绑定单击事件)</p>
    <script type="text/javascript">
    jQuery.noConflict();                  //将变量$的控制权让渡给prototype.js
    jQuery(function(){                    //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        });
    });
    
    $("pp").style.display = 'none';       //使用prototype.js隐藏元素
    </script>
    
    </body>
    </html>

    然后,就可以在程序里将 jQuery() 函数作为 jQuery 对象的制造工厂。

    此外,还有另一种选择。如果想确保 jQuery 不会与其他库冲突,但又想自定义一个快捷方式,可以进行如下操作:

    <script type="text/javascript">
    var $j = jQuery.noConflict();         //自定义一个比较短快捷方式
    $j(function(){                        //使用jQuery
        $j("p").click(function(){
            alert( $j(this).text() );
        });
    });
    
    $("pp").style.display = 'none';       //使用prototype.js隐藏元素
    </script>

    可以自定义备用名称,例如 jq、$J、awesomequery 等。

    如果不想给 jQuery 自定义这些备用名称,还想使用 $ 而不管其他库的 $() 方法,同时又不想与其他库相冲突,那么可以使用以下两种解决方法。

    其一:

    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
    jQuery(function($){                 //使用jQuery
        $("p").click(function(){        //继续使用 $ 方法
            alert( $(this).text() );
        });
    });
    
    $("pp").style.display = 'none';     //使用prototype
    </script>

    其二:

    <script type="text/javascript">
    jQuery.noConflict();                 //将变量$的控制权让渡给prototype.js
    (function($){                        //定义匿名函数并设置形参为$
        $(function(){                    //匿名函数内部的$均为jQuery
            $("p").click(function(){     //继续使用 $ 方法
                alert($(this).text());
            });
        });
    })(jQuery);                          //执行匿名函数且传递实参jQuery
    
    $("pp").style.display = 'none';      //使用prototype
    </script>

    这应该是最理想的方式,因为可以通过改变最少的代码来实现全面的兼容性。

    2.jQuery库在其他库之前导入

    如果 jQuery 库在其他库之前就导入了,那么可以直接使用"jQuery”来做一些jQuery的工作。同时,可以使用 $() 方法作为其他库的快捷方式。这里无需调用 jQuery.noconflict() 函数。示例如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决5</title>
    <!-- 引入 jQuery  -->
    <script src="../../scripts/jquery.js" type="text/javascript"></script>
    <!-- 引入 prototype  -->
    <script src="lib/prototype.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">Test-prototype(将被隐藏)</p>
    <p >Test-jQuery(将被绑定单击事件)</p>
    
    <script type="text/javascript">
    jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
        jQuery("p").click(function(){      
            alert( jQuery(this).text() );
        });
    });
    
    $("pp").style.display = 'none'; //使用prototype
    </script>
    </body>
    </html>

    有了这些方法来解决冲突,就可以在项目中放心地引用 jQuery 了。

  • 相关阅读:
    动态规划专题(二)——树形DP
    动态规划专题(一)——状压DP
    位运算相关(二)——位运算的简单变换操作
    位运算相关(一)——位运算学习笔记
    2018.10.05 TOPOI提高组模拟赛 解题报告
    【BZOJ1088】[SCOI2005] 扫雷Mine(分类讨论)
    【洛谷1273】有线电视网(树上背包)
    【洛谷2264】情书(字符串水题)
    【洛谷4287】[SHOI2011] 双倍回文(Manacher算法经典题)
    【洛谷2051】[AHOI2009] 中国象棋(烦人的动态规划)
  • 原文地址:https://www.cnblogs.com/jwen1994/p/10802602.html
Copyright © 2020-2023  润新知