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的引用。

    示例&说明

    以下是加载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>

    运行代码 (以下代码请自行复制到演示页面运行,注意不要同时执行,请分别执行)

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

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

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

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

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

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

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


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

    如果要实现两个版本的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>

    三个版本的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库。

  • 相关阅读:
    HDU 5492 Find a path
    codeforce gym 100548H The Problem to Make You Happy
    Topcoder SRM 144 Lottery
    codeforce 165E Compatible Numbers
    codeforce gym 100307H Hack Protection
    区间DP总结
    UESTC 1321 柱爷的恋爱 (区间DP)
    HDU 4283 You Are the One (区间DP)
    HDU 2476 String painter (区间DP)
    UESTC 426 Food Delivery (区间DP)
  • 原文地址:https://www.cnblogs.com/lfxiao/p/7234341.html
Copyright © 2011-2022 走看看