您的位置:1010cc时时彩经典版 > 1010cc时时彩客户端 > 1010cc时时彩经典版:Jquery命名争辩化解的多样方

1010cc时时彩经典版:Jquery命名争辩化解的多样方

发布时间:2019-09-01 07:46编辑:1010cc时时彩客户端浏览(67)

    jQuery $命名冲突解决方案汇总,jquery解决方案

    最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。

    例一:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决1</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js 
    jQuery(function(){                    //使用jQuery 
        jQuery("p").click(function(){ 
            alert( jQuery(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none';        //使用prototype 
    </script>
    </body>
    </html>

    例二:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决2</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <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>
    </body>
    </html>

    例三:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决3</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js 
    jQuery(function($){                    //使用jQuery 
        $("p").click(function(){        //继续使用 $ 方法 
            alert( $(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none';        //使用prototype 
    </script>
    </body>
    </html>

    例四:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决4</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <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>
    </body>
    </html>

    例五:

    复制代码 代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决5</title>
    <!--先导入jQuery -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <!--后导入其他库 -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 
        jQuery("p").click(function(){       
            alert( jQuery(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none'; //使用prototype 
    </script>
    </body>
    </html>

    看,原来解决问题的方法可不止一个两个呢,有需要的小伙伴们自己来取吧

    $命名冲突解决方案汇总,jquery解决方案 最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!...

     

    例三:

    复制代码 代码如下:

    帮客评论

    引言:
       最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$ 作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js 库,我们可以通过调用$.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。
     例一:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>冲突解决1</title>
     <!-- 引入prototype  -->
     <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
     <!-- 引入jQuery  -->
     <script src="" type="text/javascript"></script>
     </head>
     <body>
     <p id="pp">test---prototype</p>
     <p >test---jQuery</p>
     
    <script type="text/javascript">
     jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
     jQuery(function(){                    //使用jQuery
         jQuery("p").click(function(){
             alert( jQuery(this).text() );
         });
     });
     
    $("pp").style.display = 'none';        //使用prototype
     </script>
     
    </body>
     </html>
     
     例二:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>冲突解决2</title>
     <!-- 引入prototype  -->
     <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
     <!-- 引入jQuery  -->
     <script src="" type="text/javascript"></script>
     </head>
     <body>
     <p id="pp">test---prototype</p>
     <p >test---jQuery</p>
     
    <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>
     </body>
     </html>
     
     例三:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>冲突解决3</title>
     <!-- 引入prototype  -->
     <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
     <!-- 引入jQuery  -->
     <script src="" type="text/javascript"></script>
     </head>
     <body>
     <p id="pp">test---prototype</p>
     <p >test---jQuery</p>
     
    <script type="text/javascript">
     jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
     jQuery(function($){                    //使用jQuery
         $("p").click(function(){        //继续使用$ 方法
             alert( $(this).text() );
         });
     });
     
    $("pp").style.display = 'none';        //使用prototype
     </script>
     
    </body>
     </html>
     
     例四:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>冲突解决4</title>
     <!-- 引入prototype  -->
     <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
     <!-- 引入jQuery  -->
     <script src="" type="text/javascript"></script>
     </head>
     <body>
     <p id="pp">test---prototype</p>
     <p >test---jQuery</p>
     
    <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>
     
    </body>
     </html>
     
     例五:
     <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
     <html>
     <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <title>冲突解决5</title>
     <!--先导入jQuery -->
     <script src="" type="text/javascript"></script>
     <!--后导入其他库-->
     <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
     </head>
     <body>
     <p id="pp">test---prototype</p>
     <p >test---jQuery</p>
     
    <script type="text/javascript">
     jQuery(function(){   //直接使用jQuery ,没有必要调用"jQuery.noConflict()"函数。
         jQuery("p").click(function(){    
             alert( jQuery(this).text() );
         });
     });
     
    $("pp").style.display = 'none'; //使用prototype
     </script>
     </body>
     </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决1</title>
    <!-- 引入 prototype -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery -->
    <script src="" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
    jQuery(function(){ //使用jQuery
    jQuery("p").click(function(){
    alert( jQuery(this).text() );
    });
    });
    $("pp").style.display = 'none'; //使用prototype
    </script>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决5</title>
    <!--先导入jQuery -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <!--后导入其他库 -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 
        jQuery("p").click(function(){       
            alert( jQuery(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none'; //使用prototype 
    </script>
    </body>
    </html>

    相关文章

    相关搜索:

    今天看啥

    去帮问提问

    搜索技术库

    • jquery checkbox 勾选的bug问题解决方案与分析
    • 公告滚动显示插件,公告滚动插件
    • jQuery插件之Cookie,jquerycookie
    • 10款响应式的 jQuery UI 组件的代码和模块,j
    • JQ兼容性问题,jq兼容性
    • jquery $(window).height()取值等于$(document).height(

    相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

     

    复制代码 代码如下:

    您可能感兴趣的文章:

    • 解决jquery版本冲突的有效方法
    • jQuery多个版本和其他js库冲突的解决方法
    • jquery插件冲突(jquery.noconflict)解决方法分享
    • 解决jquery插件冲突的问题
    • 解决jQuery插件tipswindown与hintbox冲突
    • jQuery中 $ 符号的冲突问题及解决方案
    • bootstrap与Jquery UI 按钮样式冲突的解决办法
    • 关于两个jQuery(js)特效冲突的bug的解决办法
    • 完美解决jQuery符号$与其他javascript 库、框架冲突的问题
    • 避免jQuery名字冲突 noConflict()方法
    • jQuery解决$符号命名冲突
    • jQuery插件版本冲突的处理方法分析

    jQuery $命名冲突解决方案汇总

     最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了。因为许多JavaScript 库使用$作为函数或变量名,jquery也一样。其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案,总有一种你会用得上的。

    例一:

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决1</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js 
    jQuery(function(){                    //使用jQuery 
        jQuery("p").click(function(){ 
            alert( jQuery(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none';        //使用prototype 
    </script>
    </body>
    </html>

     

    例二:

     

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决2</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <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>
    </body>
    </html>

     

    例三:

     

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决3</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict();                //将变量$的控制权让渡给prototype.js 
    jQuery(function($){                    //使用jQuery 
        $("p").click(function(){        //继续使用 $ 方法 
            alert( $(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none';        //使用prototype 
    </script>
    </body>
    </html>

     

    例四:

     

    代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决4</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <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>
    </body>
    </html>

     

    例五:

     

     代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决5</title>
    <!--先导入jQuery -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    <!--后导入其他库 -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。 
        jQuery("p").click(function(){       
            alert( jQuery(this).text() ); 
        }); 
    }); 
    $("pp").style.display = 'none'; //使用prototype 
    </script>
    </body>
    </html> 

    $命名冲突解决方案汇总 最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原...

    最近遇到个问题,同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决3</title>
    <!-- 引入 prototype -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery -->
    <script src="" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <script type="text/javascript">
    jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
    jQuery(function($){ //使用jQuery
    $("p").click(function(){ //继续使用 $ 方法
    alert( $(this).text() );
    });
    });
    $("pp").style.display = 'none'; //使用prototype
    </script>
    </body>
    </html>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>冲突解决4</title>
    <!-- 引入 prototype  -->
    <script src="prototype-1.6.0.3.js" type="text/javascript"></script>
    <!-- 引入 jQuery  -->
    <script src="/scripts/jquery-1.3.1.js" type="text/javascript"></script>
    </head>
    <body>
    <p id="pp">test---prototype</p>
    <p >test---jQuery</p>
    <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>
    </body>
    </html>

    本文由1010cc时时彩经典版发布于1010cc时时彩客户端,转载请注明出处:1010cc时时彩经典版:Jquery命名争辩化解的多样方

    关键词: