Jquery命名冲突解决的五种方案

最新推荐文章于 2020-08-05 11:38:14 发布
最新推荐文章于 2020-08-05 11:38:14 发布
阅读量520 收藏 1
点赞数
分类专栏： jquery

引言：

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

例一：

复制代码 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://www.cnblogs.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://www.cnblogs.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://www.cnblogs.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="http://www.cnblogs.com/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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决5</title>
<!--先导入jQuery -->
<script src="http://www.cnblogs.com/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>


转载自：http://www.cnblogs.com/ForEvErNoME/archive/2012/03/15/2398659.html
lijunlinlijunlin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery命名冲突解决的五种方案分享
10-28
最近遇到个问题，同时引用了jquery库和另外一个js库。当用$XX去调用js库函数时，发现失效了！于是找资料，原来是jquery命名冲突了
jQuery，解决命名冲突的问题
最新发布
我的博客简介
11-18 113
/ 打印jquery函数log'22222';// 打印jquery函数lognoConflicttrue'33333';// 打印jquery函数log'44444';log'55555';
详解Jquery的$命名冲突及对应解决方法
eagle的专栏
09-12 945
在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg')的写法。然而，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。 第一种情况：jquery.js在prototype.js
JQuery之解决命名冲突
07-09 124
jQuery 名称冲突： jQuery 使用 $ 符号作为 jQuery 的简介方式。 某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。 jQuery 使用名为 noConflict() 的方法来解决该问题。 var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号。<head&gt...
jQuery$命名冲突解决方法
LYBWWP
12-01 1157
其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、Batman 以及 Ext JS。 其中某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导
jQuery $命名冲突解决方案汇总
01-19
最近遇到个问题，同时引用了jquery库和另外一...下面是收集到解决这一问题的五种方案，总有一种你会用得上的。 例一： 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www
jQuery解决$符号命名冲突
11-23
通过使用上述任一方法，我们都可以确保jQuery的$符号与prototype.js的$符号互不干扰，从而解决命名冲突问题。在实际项目中，为了维护代码的可读性和可维护性，推荐使用jQuery语句块来隔离不同库的作用域，避免不必要...
解决jquery中$命名冲突的几种方法
zjl207的专栏
06-18 957
在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg')的写法。然而，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明。  第一种情况：jquery.js在prototype.js之
Jquery的$命名冲突详细解析
weixin_30814223的博客
02-10 346
在Jquery中，$是JQuery的别名，所有使用$的地方也都可以使用JQuery来替换，如$('#msg')等同于JQuery('#msg')的写法。然而，当我们引入多个js库后，在另外一个js库中也定义了$符号的话，那么我们在使用$符号时就发生了冲突。下面以引入两个库文件jquery.js和prototype.js为例来进行说明: 第一种情况jquery.js在prototype.js之后进行...
解决自定义$(id)的方法与jquery选择器$冲突的问题
10-25
最近网站改版，原来的js都是原生js，因为当前比较jquery而且他的组件也比较多，使用方便，所以我们也采用了jquery但跟原来的$(id)冲突，经过网络很多人的推荐我们选择了这个方法
如何解决Jquery库及其他库之间的$命名冲突
10-26
介绍了Jquery库及其他库之间的$命名冲突的解决方法，有需要的朋友可以参考一下
jQuery源码研究——解决命名冲突
xiaozhen0610的博客
08-05 251
在项目中难免不去使用多个插件，如此一来这些插件就有可能出现一样的名称，当出现同名变量时后一个将会覆盖上一个，这样的话我们就无法同时使用多个插件了。 当遇到这种情况我们可以手动去修改插件源码把它的名字改了，但这种方式是不明智的，假如说你使用的某个插件它的版本更新了，那么你还得再次去修改它的源码，再则随意去修改插件源码对团队来说是混乱不堪的，因此最好的方式应该是由插件自身来解决命名冲突，在jQuery中有一个noConflict方法，这个方法就是用来解决命名冲突的。 jQuery.noConflict `
JQuery与Prototype冲突解决方法
lirenyou的博客
07-03 193
刚进新的项目组，第一天就遇见一件很郁闷的事儿，头儿让用JQuery弄个提示框，好不容易弄了个JQuery的提示框，在自己的Test页面中，能够正常运行，但是放到项目里怎么也运行不了，使用firebug查看，发现使用$选取不到元素，很是奇怪，检查了一遍页面该引入的都引入了，就是找不到原因所在，研究了2个小时未果，找个人问了下，项目中以前用没用JQuery，答：“没用，但是用了Prototype。可能...
noConflict() 方法处理jQuery 命名冲突
小九的博客
12-30 658
某些框架也使用 $ 符号作为简写（就像 jQuery），如果您在用的两种不同的框架正在使用相同的简写符号，有可能导致脚本停止运行，下面有个不错的解决方法 其他一些 JavaScript 框架包括：MooTools、Backbone、Sammy、Cappuccino、Knockout、JavaScript MVC、Google Web Toolkit、Google Closure、Ember、
解决prototype.js与jquery.js两个js冲突的办法。
strive_bo的专栏
09-02 2569
今天在写代码时，在一个jsp页面中要用jquery去写，但是加入jquery后，页面中的内容就变样了，特别难看，仔细看了下原来还引入了prototype.js框架，突然就想到了肯定是和jqeury.js框架中的"$"冲突了，在网上找了一些资料，很快的解决问题了。 具体操作如下：
jquery 命名冲突解决方案
v5browser
05-02 79
学习技术网站上的文章，自己大概总结了一下！ 1.将$的控制权让给其他框架 &lt;script ype="text/javascript"&gt; jQuery.noConflict(); jQuery(function(){ jQuery("p").click(function(){ }) ; }); $("pp").st...
jQuery解决引用多个JavaScript库引起的$命名冲突的问题
yanglun1的专栏
08-03 1415
在某些情况下，我们可能会在一个页面中使用多个JavaScript库，由于多个库中都是用$标识符，因此我们需要一种解决该命名冲突的方法，jQuery的noConflict()方法很好的解决了这个问题。jQuery调用该方法会把对$标识符的控制权限让渡给其他库使用。   参考示例如下： script src="prototype.js">script> 引用的库1 -->
jquery命名空间
08-06
### 回答1： jQuery 命名空间是一个简称为 "$" 的全局 JavaScript 变量，用于指向 jQuery 对象。通过这个变量，我们可以访问 jQuery 的方法和属性，例如： ``` $(document).ready(function() { // 在文档加载完成后执行代码 }); ``` 在使用 jQuery 的时候，如果你的代码中出现了其他 JavaScript 库也使用 "$" 作为全局变量的话，就会发生冲突。为了避免这种情况，jQuery 提供了一个叫做 "noConflict" 的方法，可以将 jQuery 命名空间释放回来，以便其他 JavaScript 库使用。例如： ``` var jq = $.noConflict(); // 现在可以使用 jq 访问 jQuery 对象了 ``` ### 回答2： jQuery命名空间是一种将所有jQuery相关的功能和方法组织起来的方式。通过将所有的jQuery代码放在一个命名空间中，可以避免与其他JavaScript库或代码之间的冲突。 使用jQuery命名空间，可以将所有的jQuery代码包装在一个自定义的对象中，然后通过使用该对象来调用jQuery的方法和功能。这种做法有助于提高代码的可维护性和可复用性，因为代码的结构更加清晰，易于理解和管理。 在创建jQuery命名空间时，可以使用自定义的对象或命名空间作为一个全局变量，然后将jQuery的方法和功能添加到该对象中。例如，可以使用如下方式创建一个名为`myApp`的命名空间： ``` var myApp = {}; ``` 然后，可以将jQuery的方法和功能添加到该命名空间中，例如： ``` myApp.doSomething = function() { // 使用jQuery的方法 $("element").hide(); }; ``` 通过使用命名空间，可以更好地组织和管理jQuery代码。命名空间可以帮助防止全局变量的污染，并且可以更好地管理代码的作用域。此外，通过将相关的代码放在一个命名空间中，可以更轻松地查找和修改代码，同时也方便了团队协作和代码的复用。 总结起来，jQuery命名空间是一种将所有jQuery相关代码组织在一起的方式，它可以提高代码的可维护性和可复用性，避免与其他代码库的冲突，并使代码更加结构化和可管理。 ### 回答3： jQuery命名空间是指在使用jQuery库时给函数、方法、变量等命名时使用的前缀。它的作用是避免不同的库或代码之间的命名冲突，保证代码的可维护性和可扩展性。 在jQuery中，通过使用命名空间可以将一些特定的代码或功能集中到一个名称下，避免与其他代码产生冲突。一般来说，我们会将自己编写的代码都放在一个自定义的命名空间下，如： ``` var myNamespace = { myMethod: function() { // 代码实现 }, myProperty: 'some value' }; ``` 在上述代码中，myNamespace就是自定义的命名空间，而myMethod和myProperty则是属于该命名空间下的函数和变量。通过使用命名空间，我们可以确保这些函数和变量在全局范围内不会与其他代码冲突。 同时，使用命名空间还可以提高代码可读性和维护性。当我们在代码中看到`myNamespace.myMethod()`时，就可以很清楚地知道这是属于自定义命名空间的方法。而不同的命名空间之间也可以相互调用，在需要时可以方便地扩展和修改。 总之，jQuery命名空间是一种在使用jQuery库时用来避免命名冲突、提高代码可维护性和可扩展性的机制。通过定义自己的命名空间，并将相关的函数和变量放在其中，可以方便地组织和管理代码，确保代码的良好结构和可读性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值