解决jquery在多插件中$冲突问题---jQuery.noConflict()方法

最新推荐文章于 2024-08-04 16:33:59 发布

下雨了620

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量1.5k

点赞数

分类专栏： js 文章标签： jquery javascript js html

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery.noConflict()方法的定义和用法:

此方法可以将$的控制权转让给其他第一个实现它的函数库。

在实际应用中可能有这样的情况，那就是其他的js函数库也有对$的使用，这样的话可能导致与jQuery产生冲突，所以使用jQuery.noConflict()方法可以有效的防止此种冲突。

语法结构:

语法一:

jQuery.noConflict()

将$的控制权转让给其他第一个实现它的函数库，这个时候就不能够使用$，而是要使用jQuery。

代码实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  jQuery.noConflict();
  jQuery(".first").css("color","red");
  $(".second").css("color","green");
})
</script>
</head>
<body>
<div class="first">蚂蚁部落</div>
<div class="second">蚂蚁部落</div>
</body>
</html>

以上代码可以看出，$已经失效。

也可以为jQuery创建一个别名来使用jQuery库中的函数。例如：

var myjq=jQuery.noConflict();

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var myjq=jQuery.noConflict();
  myjq(".first").css("color","red");
  jQuery(".second").css("color","green");
})
</script>
</head>
<body>
<div class="first">蚂蚁部落</div>
<div class="second">蚂蚁部落</div>
</body>
</html>

代码中既可使用"别名"也可以使用"jQuery"。

语法二:

jQuery.noConflict(extreme)

参数列表:

参数	描述
extreme	布尔值true。可以将jQuery完全移到一个新的命名空间。

例如:

var myjq=jQuery.noConflict(true);

这个时候只能使用myjq来运用jQuery函数。

完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var myjq=jQuery.noConflict(true);
  myjq(".first").css("color","red");
  jQuery(".second").css("color","green");
})
</script>
</head>
<body>
<div class="first">蚂蚁部落</div>
<div class="second">蚂蚁部落</div>
</body>
</html>

由以上代码可以看出如果方法的参数true，那么"jQuery"也不能使用了，只能使用新的命名空间来引用jQuery函数。

下雨了620

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决jquery在多插件中$冲突问题---jQuery.noConflict()方法

jQuery.noConflict()方法的定义和用法:此方法可以将$的控制权转让给其他第一个实现它的函数库。在实际应用中可能有这样的情况，那就是其他的js函数库也有对$的使用，这样的话可能导致与jQuery产生冲突，所以使用jQuery.noConflict()方法可以有效的防止此种冲突。语法结构:语法一:jQuery.noConflict()将$的控制权
复制链接

扫一扫

专栏目录