解决JQuery和其他库共存

最新推荐文章于 2023-04-25 13:19:27 发布

haroldphp

最新推荐文章于 2023-04-25 13:19:27 发布

阅读量80

点赞数

分类专栏： JavaScript 文章标签： jQuery JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/haroldphp/article/details/83846086

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

[size=medium][b]①jQuery在其他库加载之后[/b][/size]

这种情况下，将使用[color=green]JQuery.noConflict()[/color]函数来将$变量的控制权移交给其他JavaScript库。

例如：


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head>
<script type="text/javascript" src="./prototypes.js"></script>
<!--jQuery库在其他库加载之后-->
<script type="text/javascript" src="./JQuery.js"></script>
<!--通过noConflict函数-->
<script type="text/javascript">
//使用noConflict()方法
JQuery.noConflict();
JQuery(function(){
  JQuery("p").click(function(){
      alert(JQuery(this).text));
  });
});
</script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>

[b][size=medium]②JQuery在其他库导入之前[/size][/b]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<!--jQuery库在其他库加载之前-->
<script type="text/javascript" src="./JQuery.js"></script><
script type="text/javascript" src="./prototypes.js"></script>
<!--通过noConflict函数-->
<script type="text/javascript">
JQuery(function(){
 //直接使用jQuery对象，无需noConflict函数
  JQuery("p").click(function(){
      alert(JQuery(this).text());
  });
});
</script>
</head>
<body>
<p>Hello World!</p>
</body>
</html>