JQuery冲突问题,以及含有jquery的框架与jquery冲突
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.12.1.js"></script>
<script type="text/javascript">
var lq = $.noConflict();
lq(document).ready(function(){
alert(lq("p").text());
});
</script>
<script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
<script type="text/javascript">
var rocky = $.noConflict();
rocky(document).ready(function(){
alert(rocky("p a").attr("href"));
});
</script>
</head>
<body>
这里本想测试含有jquery的框架或者用了$符号的框架之后和jquery冲突的问题,但是手头没有这这样的东西,就拿两个不同版本的jquery的版本来解释吧
核心是下面的网址
<p><a href="http://w3school.com.cn/jquery/jquery_noconflict.asp" target="_blank">如何在页面上同时使用 jQuery 和其他框架?</a></p>
我是这样想的,页面中所有的引入的js代码和当前页面写的,到页面都会加载到一起的,然后构成一个"文件",然后这个"文件"中的
方法是不能重复了,重复了就冲突了,就像两个jquery。
</body>
</html>
上面的 代码不支持低版本IE
效果图-第一个pop-ups
效果图 second pop-ups
和代码里写的一样
这里是如何使用两个jqury的,就是在每个jquery引用的紧后面写一句起别名的代码,如果一个起了别名,其实第二个是不用其别名的,就像两个人名字相同只要一个人改了名字两个就不相同了。
看实验
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript" src="../js/jquery-1.12.1.js"></script> <script type="text/javascript"> var lq = $.noConflict(); lq(document).ready(function(){ alert(lq("p").text()); }); </script> <script type="text/javascript" src="../js/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function(){ alert($("p a").attr("href")); }); </script> </head> <body> 这里本想测试含有jquery的框架或者用了$符号的框架之后和jquery冲突的问题,但是手头没有这这样的东西,就拿两个不同版本的jquery的版本来解释吧 核心是下面的网址 <p><a href="http://w3school.com.cn/jquery/jquery_noconflict.asp" target="_blank">如何在页面上同时使用 jQuery 和其他框架?</a></p> 我是这样想的,页面中所有的引入的js代码和当前页面写的,到页面都会加载到一起的,然后构成一个"文件",然后这个"文件"中的 方法是不能重复了,重复了就冲突了,就像两个jquery。 </body> </html>
结果和上面是一样的,就不上图了(强调,是请了浏览器缓存试的)
因为所有的js代码都会加载在一起,就像是所有的js代码都下写在了<script type="text/javascript" ></script>中间一样, ,此时如果有冲突,就会显现出来,起了一个别名就像是java中两个类名不同,但是方法名可以一样,可以同时出现在一个文件中一样。
在w3school上也讲了,也有例子,但是例子没有说明起别名的代码应该放置的具体位置。这个小例子应该可以说明的,