在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. 12.Generics

    benifit: 1.make developers extremely productive is code reuse, which is the ability to derive a clas ...

  2. Webbrowser控件判断网页加载完毕的简单方法 (转)

    摘自:http://blog.csdn.net/cometnet/article/details/5261192 一般情况下,当ReadyState属性变成READYSTATE_COMPLETE时,W ...

  3. jQuery：show()方法

    show()方法是jQuery的方法,功能是显示元素,参数是时间,单位是毫秒,例如: Html: <div class="one" id="one"> ...

  4. XAML基础

    1.标记扩展 将一个对象的属性值依赖在其他其他对象的某个属性上 用法:标记属性的一般用法是:Attribute = Value,使用标记拓展,Value字符串是由一对花括号及其括起来的内容组成,XAM ...

  5. 大学生学习编程(PHP)

    在v2ex上看到一大三的求职实习,然后有人给出了建议,个人觉得也挺好,做个记录./  原帖地址 @ARjson问: 大三的学生党,求实习岗位,现居北京.后端PHP一年半开发经验,熟悉speedphp, ...

  6. Linux添加新硬盘自动挂载硬盘

    Linux添加新硬盘自动挂载硬盘的具体步骤 1.插入新硬盘,启动Linux服务器,使用fdisk -l 查看硬盘 #fdisk -l Disk /dev/sdb: 1000.2 GB, 1000204 ...

  7. JS自总结

    1.js获得当前元素   event.srcElement:   获取当前父元素   event.srcElement.parentElement   var rowIndex = e.parentE ...

  8. Linux crontab 定时任务

    http://linuxtools-rst.readthedocs.io/zh_CN/latest/tool/crontab.html 19. crontab 定时任务 通过crontab 命令,我们 ...

  9. [js]事件综合 整理

    原文链接:http://www.cnblogs.com/xxcanghai/p/5205998.html 事件流:页面接收事件的顺序,IE提出了事件冒泡流,Netscape提出了事件捕获流. 事件冒泡 ...

  10. Ubuntu 查看文件以及磁盘空间大小管理

    (1)查看文件大小  查看当前文件夹下所有文件大小(包括子文件夹)    du -sh   # du -h15M     ./package16K     ./.fontconfig4.0K    . ...