• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • jQuery.noConflict()

    放弃jQuery控制$变量。

    jQuery.noConflict([removeAll ])
    • removeAll类型: Boolean。一个布尔值,判断是否从全局作用域中内去除所有jQuery变量(包括jQuery本身)。

    很多javascript库使用$作为一个函数或者变量名,正如jquery做的一样。在jQuery下$只是jQuery的一个别名,所以不使用$所有功能都是有效的。如果我们需要同时使用jQuery和其他javascript库,我们可以使用$.noConflict()$的控制权交给其他库。旧引用的$被保存在jQuery的初始化;noConflict()简单的恢复它们。

    如果由于某种原因,加载两个版本的jQuery(这是不推荐),第二个版本中调用$.noConflict(true)将返回全局的jQuery变量给第一个版本。

    <script type="text/javascript" src="other_lib.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $.noConflict();
      // Code that uses other library's $ can follow here.
    </script>
    

    这里有个技巧对于解决冲突特别有效。.ready()方法可以给 jQuery 对象取个别名,这样就能够在传给.ready()的回调函数的内部继续使用$ 而不用担心冲突(注:原因:.ready()是一个闭包):

    <script type="text/javascript" src="other_lib.js"></script>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
      $.noConflict();
      jQuery(document).ready(function($) {
        // Code that uses jQuery's $ can follow here.
      });
      // Code that uses other library's $ can follow here.
    </script>
    

    如果必要的话,我们可以释放jQuery名字,传递true作为一个参数给这个方法。这不是必须的,如果我们必须这样做的话(举个例子,如果我们在同一个页面上使用多个版本的jQuery库),我们必须考虑到大多数插件依靠jQuery存在的变量,这种情况下,可能导致插件不能正常操作。

    例子

    将$引用的对象映射回原始的对象。

    jQuery.noConflict();
    // Do something with jQuery
    jQuery("div p").hide();
    // Do something with another library's $()
    $("content").style.display = 'none';
    

    恢复使用别名$,然后创建并执行一个函数,在这个函数的作用域中仍然将$作为jQuery的别名来使用。在这个函数中,原来的$对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效。

    jQuery.noConflict();
    (function($) {
      $(function() {
        // more code using $ as alias to jQuery
      });
    })(jQuery);
    // other code using $ as an alias to the other library
    

    你可以通过jQuery.noConflict()ready约束为一小段代码

    var j = jQuery.noConflict();
    // Do something with jQuery
    j("div p").hide();
    // Do something with another library's $()
    $("content").style.display = 'none';
    

    创建一个新的别名用以在接下来的库中使用jQuery对象。

    var dom = {};
    dom.query = jQuery.noConflict(true);
    

    Result:

    // Do something with the new jQuery
    dom.query("div p").hide();
    // Do something with another library's $()
    $("content").style.display = 'none';
    // Do something with another version of jQuery
    jQuery("div > p").hide();
    

    Load two versions of jQuery(not recommended). Then, restore jQuery's globally scoped variables to the first loaded jQuery.

    <!DOCTYPE html>
    <html>
    <head>
      <script src="https://www.lanmper.cn/static/js/jquery-3.5.0.js"></script>
    </head>
    <body>
     
    <div id="log">
      <h3>Before $.noConflict(true)</h3>
    </div>
    <script src="//code.jquery.com/jquery-1.6.2.js"></script>
     
    <script>
    var $log = $( "#log" );
     
    $log.append( "2nd loaded jQuery version ($): " + $.fn.jquery + "<br>" );
     
    /*
    Restore globally scoped jQuery variables to the first version loaded
    (the newer version)
    */
    jq162 = jQuery.noConflict(true);
     
    $log.append( "<h3>After $.noConflict(true)</h3>" );
    $log.append( "1st loaded jQuery version ($): " + $.fn.jquery + "<br>" );
    $log.append( "2nd loaded jQuery version (jq162): " + jq162.fn.jquery + "<br>" );
    </script>
     
    </body>
    </html>
    

    上篇:jQuery.holdReady()

    下篇:toArray()