9.工具函数操作DOM《jquery实战》

9.2 通过 JQuery 使用其他库

$.noConflict( [removeAll ] )
$ 控制权释放给第三方库,允许页面同时使用 jQuery 和其他库。执行一个函数,jQuery 功能调用是使用 jQuery 标识符(window对象的jQuery属性)而不是 $ 标识符。

参数:removeAll
类型: Boolean
一个布尔值,判断是否从全局作用域中内去除所有jQuery变量(包括jQuery本身)。
  1. $jQuery 的简称,所有功能在调用 $.noConflict() 之后仍然可用,通过 window 对象的 jQuery 属性访问。可以定义一个缩写标识符,
var $j = jQuery;
  1. 假设需要同时放弃$和jQuery,则可以通过调用$.noConflict()工具函数实现,把返回值保存在一个全局属性里:
window.$new = $.noConflict(true);

一旦执行,可以使用 $new 属性来调用 jQuery 方法了(例如 $new('p').find('a')

立即调用函数表达式

一种经常看到的设计模式,Immediately-Invoked Function Expression(IIFE,立即调用函数表达式)

(function($) {
    //函数体代码
})(jQuery);

则不论其他外部函数是否定义了这个标识符,都可以在函数体内部安全使用 $ 标识符。

来看一个例子,

   
      

      
      
   

9.工具函数操作DOM《jquery实战》_第1张图片
重写$测试1

失败原因是重新定义了 $ 标识符。而且,按钮没有触发任何操作,因为在添加处理器之前 $被重新分配了。

下面修改代码

         try {
            (function($) {
                $('#button-test').on('click', function() {
                    alert('$ is an alias for jQuery');
                });
            })(jQuery);
         } catch (ex) {

唯一修改的是,IIFE包装了附加处理器代码,而且传递了 window.jQuery 属性给它。就能正常工作了。

现在来看如何恢复在jQuery调用 $.noConflict() 方法之前的 $ 的值。



   
      
      Using $.noConflict()
      
   
   
      

The output is printed on the console

9.3 操作javascript 对象和集合

你可能感兴趣的:(9.工具函数操作DOM《jquery实战》)