JQuery的$和其它JS发生冲突的快速解决方法

众所周知，jQuery是目前最流行的JS封装包，简化了很多复杂的JS程序，JQuery讲浏览器DOM树定义为$，通过$来获取各个子节点。

然后，JS插件并非只有JQuery，还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候，就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文：

我们都知道JQuery有一个函数，jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点

举例：

方法一：


代码如下:

<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>

方法二：

我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点


代码如下:

<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
</script>

赞 (0)

相关推荐

  • jquery插件冲突(jquery.noconflict)解决方法分享

    许多的 JS 框架类库都选择使用$符号作为函数或变量名,jQuery是其中最为典型的一个.在 jQuery 中,$ 符号只是 window.jQuery 对象的一个引用,因此即使 $ 被删除,window.jQuery 依然是保证整个类库完整性的坚强后盾.jQuery 的 API 设计充分考虑了多框架之间的引用冲突,我们可以使用 jQuery.noConflict 方法来轻松实现控制权的移交. jQuery.noConflict 方法包含一个可选的布尔参数[1],用以决定移交 $ 引用的同时是否

  • 加载jQuery后$冲突的解决办法

    加载jQuery后$冲突的解决办法

    网站开发中的javasript部分,现在的开发人员很少有再去手工写document.getElementById()的了吧,那还不得累死,你还真别说,getElementById还真不好写,字母还挺多又区分大小写,一不留神就写错了.因此一下诸如用$来实现document.getElemetnById()就常见了. 复制代码 代码如下: function $() { var elements = new Array(); for (var i = 0; i < arguments.length;

  • 找到了一篇jQuery与Prototype并存的冲突的解决方法

    以前好像在哪里看到过说jQuery与prototype存在冲突,但一直没在意.今天把自己用jquery框架写好的消息提示框特效放到公司原来的系统发现所有的消息提示效果都罢工了! 汗了半天还是没有发现原因,突然想到jquery与prototype的冲突问题,这才发现公司原来的系统很多页面都调用了prototype框架.知道了原因就想办法解决吧,总不至于让我脱离jquery重新写一遍吧,去网上狂搜了一番终于找到了一些解决办法,这就是: 1.将jquery.js放到prototype.js后面(这个是

  • jQuery库与其他JS库冲突的解决办法

    复制代码 代码如下: <script src="prototype.js"></script> <script src="jquery.js"></script> <script> jQuery.noConflict(); // Use jQuery via jQuery(-) jQuery(document).ready(function(){ jQuery("div").hide()

  • jQuery与其它库冲突的解决方法

    (注意:默认情况下,jQuery用$作为自身的缩写而以) 如果jQuery类库和别的类库冲突的话,可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库.看下面小片断代码 <script type="text/javascript" src="../JS/JsCOM.js"></script> <script type="text/javascript" src=&quo

  • jQuery避免$符和其他JS库冲突的方法对比

    jQuery中需要用到$符号,如果其他js库(例如大名鼎鼎的prototype)也定义了$符号,那么就会造成冲突,会影响到js代码的正常执行.jqeury提供了一些方案来避免这个问题,让我们来看看这几个方案有什么区别 方案1: 引入noConflict(),将$替换为其他符号 复制代码 代码如下: var $j = jQuery.noConflict(); $j(document).ready(function(){ $j("#btn1").click(function(){ aler

  • 解决jquery版本冲突的有效方法

    用过jQuery的朋友都知道jQuery不同版本会引发冲突,本文就此问题提出有效的解决方案如下: 案例:解决jQuery1.3.2和1.4.2的冲突.(本例已测试通过!) 第一步:在1.4.2的源代码的最后加上一句 : var $j4 = jQuery.noConflict(true); 之所以在源码这里加,而不是像大多数文章提的在要用到的时候加,这是因为很多基于1.4.2的插件都要加,在这里加可以避免过多插件加这句代码导致重复.这一句是将1.4.2的jQuery和$的引用权限全部放弃.也就是基

  • jquery与js函数冲突的两种解决方法

    如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法 其一: 复制代码 代码如下: jQuery.noConflict(); jQuery(function($) { $("p").click(function() //在函数内继续可以使用jquery类库的$()方法 { alert($(this).text()); }) }) var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$

  • 解决jquery插件冲突的问题

    今天做了一个例子,用jquery和jquery插件 lightbox做了图片浮动放大效果,没有任何问题. 然后再加了一个 导航栏的js,结构导航的js和图片浮动放大的js发生了冲突, 要么就只有导航栏的js有效,要么就只有图片浮动js有效. 结果上网搜了搜,解决办法有如下 jQuery.noConflict() 概述运行这个函数将变量$的控制权让渡给第一个实现它的那个库. 这有助于确保jQuery不会与其他库的$对象发生冲突. 在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例

  • 关于jQuery库冲突的完美解决办法

    关于jQuery库冲突的完美解决办法

    前言 一次面试中面试官问到jQuery和别的库冲突怎么解决?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名字,比如传入jq,那我就挂载在window.jq上. var myControl="jq"; (function(name){ var $=name ||"$"; //name存在$的值就是name的值,不存在或为null,$的值为字符串"$&q

随机推荐