在JSP中使用<jsp:include page="somethingPage.jsp"></jsp>来嵌套页面的时候，会出现jQuery之间的冲突

解决办法：

在需要嵌套的页面中有jQuery引入冲突问题的地方做如下处理：

var $jq = jQuery.noConflict();

$jq(document).ready(function(){

     $jq("select").sSelect();

});

在这个示例中，使用$jq来代替，即可解决冲突的问题。

原理：

由于jQuery以及 prototype.js，coypSelect.js都使用了美元符函数“$”作为选择器，在两者混合使用的时候$函数被重复定义了，结果导致其中一个框架不能使用。

方法一：

<script src="http://jquery.com/src/latest/"></script>

      <script type="text/javascript">

         JQ = $;  //rename $ function

     </script>

<script src="prototype.js"></script>

这样一来，可以使用JQ来代替jQuery里的$函数名，而prototype的$函数照常使用，像这样：

<script type="text/javascript">

  JQ(document).ready(function(){

   JQ("#test_jquery").html("this is jquery");

   $("test_prototype").innerHTML="this is prototype";

  });

 </script>

方法二——推荐方法（闭包法）

尽管这种办法在一定程度上解决了两者的冲突，但作为jQuery的死忠，我是万分不情愿改写$为JQ或其他替代的字符。反之Prototype的粉丝估计也会这样想。那么，是不是有另一种解决方案，让两种框架能和谐共处呢？现在流行和谐嘛！

<script type="text/javascript" src="jquery-1.2.6.js"></script>

<script type="text/javascript" src="prototype-1.6.0.2.js"></script>

<div id="test_jquery"></div>

   <div id="test_prototype"></div>

<script type="text/javascript">

<!--

(function($){

    $(document).ready(function(){

        alert($("#test_jquery").html("this is jqeury"));

    });

})(jQuery);

$("test_prototype").innerHTML="this is prototype";

//-->

</script>

经测试，jQuery与Prototpye工作均正常。唯一以往常不一样的是，我们要在以前写的Jquery外面加多一个外套：

(function($){

  //这里写Jquery代码

})(jQuery);

这个外套巧妙地利用函数局部变量的有效范围保证你可以安心地按原来的方式写Jquery代码

方法三：  jQuery库在其他库之前导入，直接使用jQuery(callback)方法如：

 <!--先导入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>

<script type="text/javascript">

jQuery(function(){   //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。

    jQuery("p").click(function(){

        alert( jQuery(this).text() );

    });

});

$("pp").style.display = 'none'; //使用prototype

</script>

方法四： jQuery库在其他库之后导入，使用jQuery.noConflict()方法将变量$的控制权让渡给其他库，有以下几种方式:

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>  

//代码二

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

在JSP中使用jQuery的冲突解决（收集整理）的更多相关文章

  1. 原生JS研究：学习jquery源码，收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  2. jsp中的jquery失效以及引入js失败的问题

    这段时间在试着看公司用的框架是怎么写的,看到项目中对jquery进一步封装的这一部分,所以自己试着写一些demo来模仿框架中的用法. 再一次的,又遇到了一个问题,jsp中引入js的问题,好久没有自己从 ...

  3. jQuery库冲突解决办法

    一次面试中面试官问到jQuery解决怎么冲突?虽然以前看过,但是我已经不记得了. 我的思路就是如果让我来设计,那我就用一个默认值$,不传参数,那就用$,最后就挂载在window.$上,传参数就用传入名 ...

  4. HashMap中的散列函数、冲突解决机制和rehash

    一.概述 散列算法有两个主要的实现方式:开散列和闭散列,HashMap采用开散列实现. HashMap中,键值对(key-value)在内部是以Entry(HashMap中的静态内部类)实例的方式存储 ...

  5. [置顶] JSP中使用taglib出错终极解决办法

    jsp中 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <c ...

  6. jsp中调用getOutputStream()产生冲突

    再用jsp进行图片的生成的时候,例如一些验证码,比例图的时候,在对图片进行输出调用 getOutputStream() 的时候会报该方法已经被调用的冲突. 例如如下的程序: <%@ page c ...

  7. jsp中引入jquery报错：Failed to load resource: the server responded with a status of 404 (Not Found)

    问题描述: 今天自己在搭建spring.springMVC.hibernate框架,搭建完成后,在引入jquery时,发现jquery不管用.我的解决顺序是: 1.检查路径,发现路径没错,另外需要注意 ...

  8. jquery.datepicker、jquery.validate、jquery.uploadify冲突解决

    Jquery 1.11.2 Jquery.validate 1.13.1 Jquery.Uploadify 3.2(flash版) Jquery.DatePicker 用的是Jquery-ui 1.1 ...

  9. Spring MVC page render时jsp中元素相对路径的解决办法

    前段时间做了用Spring Security实现的登录和访问权限控制的功能,但是page render使用的是InternalResourceResolver,即在spring的servlet配置文件 ...

随机推荐

  1. CUBRID学习笔记 19 sql语句1

    创建 欢迎转载 ,转载时请保留作者信息.本文版权归本人所有,如有任何问题,请与我联系wang2650@sohu.com . 过错 create table tableName (字段名 字段类型 pr ...

  2. XPah学习

    资料1: 来源:http://www.cnblogs.com/ChengDong/archive/2012/06/28/2567744.html 示例Xml: <?xml version=&qu ...

  3. JavaScript的作用域和提升机制

    JavaScript的作用域和提升机制 你知道下面的JavaScript代码执行时会输出什么吗? 1 2 3 4 5 6 7 8 var foo = 1; function bar() {     i ...

  4. Java多线程同步问题的探究

    一.线程的先来后到——问题的提出:为什么要有多线程同步?Java多线程同步的机制是什么? http://www.blogjava.net/zhangwei217245/archive/2010/03/ ...

  5. JCO事务管理

    /* * 标准对账单过账 * @account 标准对账单号 * @year 年度 */ public List<String> doAccountStatmentPost(String ...

  6. Android手机_软件安装目录

    1. /data/data ==> 应该是 数据存放的位置 /data/app ==> 应该是 程序存放的位置 2.

  7. 卷积FFT、NTT、FWT

    先简短几句话说说FFT.... 多项式可用系数和点值表示,n个点可确定一个次数小于n的多项式. 多项式乘积为 f(x)*g(x),显然若已知f(x), g(x)的点值,O(n)可求得多项式乘积的点值. ...

  8. css 常用样式命名规则

    大家在写css的时候,对一些html标签起一个合适的名字是个很头疼的事情,现在给大家分享项目中常用的名字供参考. 外套:wrap  ——用于最外层 头部:header  ——用于头部 主要内容:mai ...

  9. 【Todo】秒杀系统材料

    秒杀系统:Link <一个经验证可落地的秒杀系统实践思路> 主要依赖于Redis进行处理. http://geek.csdn.net/news/detail/59847   淘宝大秒系统设 ...

  10. SurfaceHolder.Callback

    Class Overview A client may implement this interface to receive information about changes to the sur ...