当前位置:Web前端 > jquery> 正文

jQuery多个版本间,以及与其他js文件冲突的解决方法

时间:2016-8-13类别:Web前端

jQuery多个版本间,以及与其他js文件冲突的解决方法

jQuery多个版本间,以及与其他js文件冲突的解决方法

一、同一页面jQuery多个版本引起冲突的解决方法

 

  •  
  • HTML 代码   复制
  • 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>jQuery测试页</title>
    </head>
    <body>
    <!-- 引入1.6.4版的jq -->
    <script src="/jquery/1.6.4/jquery。js"></script>
    <script> var jq164 = jQuery.noConflict(true); </script>
    <!-- 引入1.4.2版的jq -->
    <script src="/jquery/1.4.2/jquery。js"></script>
    <script> var jq142 = jQuery.noConflict(true); </script>
    
    <script>
    (function($){
        //此时的$是jQuery-1.6.4
        $('#');
    })(jq164);
    </script>
     
    <script>
    jq142(function($){
        //此时的$是jQuery-1.4.2
        $('#');
    });
    </script>
        
    </body>
    </html>
    
    		
  •  

    二、同一页面jQuery和其他js文件库冲突的解决方法

     

    例如:如下html页面

     

  •  
  • HTML 代码   复制
  • 
    <script src="jquery。js" type="text/javascript"></script>
    
    <script src="prototype。js" type="text/javascript"></script>
    
    <p id="pp">test---prototype</p>
    <p>test---jQuery</p>
    
    		
  •  

    方式1、通过全名替代简写的方式来使用 jQuery

     

  •  
  • HTML 代码   复制
  • 
    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js,全名可以不调用。
    jQuery(function(){                    //使用jQuery
        jQuery("p").click(function(){
            alert( jQuery(this).text() );
        });
    });
    //此处不可以再写成$,此时的$代表prototype.js中定义的$符号。
    
    $("pp").style.display = 'none';        //使用prototype
    </script>
    
    		
  •  

    方式2、创建自己的简写

    noConflict() 可返回对 jQuery 的引用,您可以把它存入变量,以供稍后使用

     

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

    方式3、使用语句块

  •  
  •  
  • HTML 代码   复制
  • 
    <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>
    
    		
  •  

    标签:
    上一篇下一篇

    猜您喜欢

    热门推荐