zoukankan      html  css  js  c++  java
  • jQuery.noConflict() 函数

    jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权

    一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQuery("p")$("p")是等价的。由于变量$只有一个字符,并且特点鲜明,因此我们更加习惯使用$来操作jQuery库。

    不过,其他JS库也可能使用变量$来进行操作,例如Prototype库。这个时候两个库可能会由于变量$的控制权问题而发生冲突。

    此时,你可以使用该函数让出jQuery库对变量$的控制权,将该变量交给上一个实现它的JS库,之后我们只能使用变量jQuery来操作jQuery库。

    此外,使用该函数,还可以同时让出变量$和变量jQuery的控制权,从而实现多个不同版本的jQuery库共存(详情见下面的示例说明)。

    该函数属于全局jQuery对象。

    语法

    静态函数jQuery.noConflict()的语法如下:

    jQuery.noConflict( [ removeAll ] )

    参数

    参数描述
    removeAll 可选/Boolean类型是否彻底移交对变量jQuery的控制权,默认为false

    如果省略了参数removeAll或该参数不为true,则表示只让出对变量$的控制权;如果该参数为true,则表示同时让出变量$jQuery的控制权。

    返回值

    jQuery.noConflict()函数的返回值是jQuery类型,返回变量jQuery的引用。

    示例&说明

    1、以下是加载Prototype和jQuery库的情况:

    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
    // 让出对变量$的控制权
    jQuery.noConflict();

    // 使用jQuery进行DOM操作
    jQuery("#uname").hide();

    // 使用Prototype进行DOM操作
    $("myDiv").setStyle( {color: "#ffffff"} );
    </script>

    2、我们还可以使用其他自定义的变量名来操作jQuery:

    // 让出对变量$的控制权,并将jQuery赋给新的别名j
    var j = jQuery.noConflict();

    // 基于jQuery进行DOM操作(使用变量j)
    j("#uname").hide();

    // 基于Prototype进行DOM操作
    $("myDiv").setStyle( {color: "#ffffff"} );

    3、即使是多个库共存,我们也可以在jQuery.ready()的回调函数或其他自定义函数中将局部变量$作为jQuery的别名使用:

    // 让出jQuery库对变量$的控制权
    jQuery.noConflict();

    jQuery(document).ready(function($){
        // 使用局部变量$进行jQuery操作
        $("p").css("color", "");    
    });


    (function($){
        // 使用局部变量$进行jQuery操作
        $("ul li").addClass("item");    
    }(jQuery));

    4、如果要实现两个版本的jQuery库共存,我们可以编写如下代码:

    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
    // 让出jQuery-1.11.1对变量$和变量jQuery的控制权
    var j = jQuery.noConflict( true );

    document.writeln( j.fn.jquery ); // 1.11.1

    document.writeln( $.fn.jquery ); // 1.4.2
    document.writeln( jQuery.fn.jquery ); // 1.4.2

    /*
     * 如果前面的jQuery.noConflict()没有传入参数true,
     * 也就是说只让出变量$的控制,则$表示1.4.2,jQuery表示1.11.1
     * 此时,jQuery.fn.jquery为1.11.1
     */
     </script>

    5、三个版本的jQuery库共存,对应的jQuery示例代码如下:

    <script type="text/javascript" src="jquery-1.4.2.js"></script>
    <script type="text/javascript" src="jquery-1.8.3.js"></script>
    <script type="text/javascript" src="jquery-1.11.1.js"></script>
    <script type="text/javascript">
    // 让出jQuery-1.11.1对变量$和变量jQuery的控制权,使用变量j来控制
    var j = jQuery.noConflict( true );

    // 让出jQuery-1.8.3对变量$的控制权
    jQuery.noConflict();

    document.writeln( j.fn.jquery ); // 1.11.1
    document.writeln( jQuery.fn.jquery ); // 1.8.3
    document.writeln( $.fn.jquery ); // 1.4.2
    </script>

    注意:多个可能存在全局变量重名冲突的JS库,变量的实际控制权一般取决于JS库的加载顺序。以上面三个版本的jQuery库的示例代码为例,后加载的jQuery库的变量覆盖了之前版本的变量,因此每次让出变量的控制权,控制权就会交给上一个JS库。

  • 相关阅读:
    省选模拟27
    省选模拟26
    省选模拟25
    省选模拟23
    PHP 各个框架的优缺点(超详细)
    windows 下安装中文版Git
    支付宝APP支付里设置应用网关和授权回调地址是不必填的
    linux服务器下安装phpstudy 如何命令行进入mysql
    js金钱转大写
    多个 (li) 标签如何获取获取选中的里面的某个特定值??
  • 原文地址:https://www.cnblogs.com/tianxintian22/p/5015565.html
Copyright © 2011-2022 走看看