在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. Servlet&jsp基础：第一部分

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  2. 使用@ContextConfiguration注解后，提示找不到配置文件

    intellij提示找不到配置文件 错误代码如下: 严重: Caught exception ] java.lang.IllegalStateException: Failed to load App ...

  3. 一致性 hash 算法（ consistent hashing ）

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...

  4. c++ string的实现。

    第三次做了.只是做个复习.偶然发现之前的版本有内存泄露.基本功还是不过关.这次应该没有内存泄漏了.虽然是个简单版本. 1)了解堆,栈,值copy. 2)几个常用的c的字符函数和c中的char 如何表示 ...

  5. sqlcmd 登录和执行语句。

    sqlcmd -U sa -P atc@2014 -S HK-DB01 -d msdb -Q "exec sp_start_job @job_name='3PL_OUT_TEST'" ...

  6. Spring字符集过滤器CharacterEncodingFilter

    Spring中的字符集过滤器可以很方便的为我们解决项目中出现的中文乱码问题,而且使用方法也很简单,只需要在web.xml文件中配置一下该过滤器,设置两个重要的参数(encoding和forceEnco ...

  7. UML建模

    1.包含<<include>> 包含是指当多个用例中存在相同的事件流时,可以把这些公共事件流抽象成公共用例,这个公共用例称之为抽象用例(跟类的概念有点相像,类是多个对象的抽象定 ...

  8. Python学习笔记6-字典

    定义 使用键值对, >>> person = {"name":"keven","age":15,"gender& ...

  9. python的最最最最最基本语法（3）

    模块:在Python中,一个.py文件就称之为一个模块(Module). 为了避免模块名冲突,Python又引入了按目录来组织模块的方法,称为包(Package).例如两个名不hello.py的模块分 ...

  10. uva 11324 The Largest Clique

    vjudge 上题目链接:uva 11324 scc + dp,根据大白书上的思路:" 同一个强连通分量中的点要么都选,要么不选.把强连通分量收缩点后得到SCC图,让每个SCC结点的权等于它 ...