无为清净楼资源网

如何解决Jquery库及其他库之间的$命名冲突
网络编程 2024/11/18 佚名
3 2
无为清净楼资源网 Design By www.qnjia.com

首先我们应该知道，在jquery中，$（美元符号）就是jquery的别名，也就是说使用$和使用jquery是一样的，在很多时候我们命名空间时，正是因为这个$而产生的冲突的发生。比如说：$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同，但在实际上却是完全等同的。

要想解决这个冲突，其实最简单的方法就是使用不同的名称来命名，或者让执行代码认为是不同的命名空间即可。

一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：

复制代码 代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--先导入jQuery -->
<script src="/UploadFiles/2021-04-02/jquery-1.3.1.js"><!--后导入其他库 -->
<script src="prototype-1.6.0.3.js"></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.noConflict()方法将变量$的控制权让渡给其他库，有以下几种方式:

复制代码 代码如下:
<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>

代码二

复制代码 代码如下:
<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>

代码三

复制代码 代码如下:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});

$("pp").style.display = 'none'; //使用prototype
</script>


代码四

复制代码 代码如下:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery

$("pp").style.display = 'none'; //使用prototype

/*********************************************************************/
jQuery(document).ready(function(){ //一加载页面的时候就将权利让出去
jQuery.noConflict();
});
</script>

除了上面的方法之外，我们还可以采用第二种方法来解决冲突的问题，那就是最笨但最有效的解决方法：用自定义的命名空间来避免冲突。
比如说需要的项目名称为xmlas，那么我们原来的代码：

复制代码 代码如下:
$('contentArea').show()

就可以写成以下这种形式：

复制代码 代码如下:
XMLAS('contentArea').show()


3.在jquery代码中，当遇到冲突的时候我们可以使用$符号，这需要我们在ready事件中添上以下代码：

复制代码 代码如下:
jQuery(document).ready(function($) {
//你在这里可以放心的使用$了
});

当然，您也可以简写成下面的形式：

复制代码 代码如下:
jQuery(function($){
//这里为使用$的代码
});

由此，根据第一个方法来实现的完整代码如下：

复制代码 代码如下:
//jquery库与其他库冲突的完整解决办法
<script type="text/javascript" src="/UploadFiles/2021-04-02/photolist.js"><script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js"><script type="text/javascript">
$.noConflict();
jQuery(function($) {
//使用了$的jquery代码
});
//这里是你的其他js库代码
</script>

 

当然，你也可以对上面的完整代码进行一步的简化，简化代码如下：
复制代码 代码如下:
//简化后的代码
$.noConflict()(function(){
//这里是你的带$的jquery代码
});
//这里是其他库的代码

标签：
Jquery库,命名冲突
无为清净楼资源网 Design By www.qnjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
无为清净楼资源网 Design By www.qnjia.com
www.qnjia.com 无为清净楼资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接