jquery库与其他库冲突的问题解决-jquery.noConflict()

最新推荐文章于 2022-11-12 10:59:21 发布

xinyuxiaoxiao5460

最新推荐文章于 2022-11-12 10:59:21 发布

阅读量1.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文介绍了如何在同一个项目中同时使用jQuery和Prototype两个JavaScript库，通过不同方式确保两者兼容运行，避免$符号冲突，包括直接使用jQuery或采用jQuery.noConflict()方法。

摘要由CSDN通过智能技术生成

一、 jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：
<html>
< head>
< meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
< !--先导入jQuery-->
<script src="../../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>

<scripttype="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()方法将变量$的控制权让渡给其他库，有以下几种方式:

<scripttype="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>