在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. Java方法

    所谓方法,就是用来解决一类问题的代码的有序组合,是一个功能模块. 一般情况下,定义一个方法的语法是: 其中: 1. 访问修饰符:方法允许被访问的权限范围, 可以是 public.protected.p ...

  2. POJ 3669 Meteor Shower（流星雨）

    POJ 3669 Meteor Shower(流星雨) Time Limit: 1000MS    Memory Limit: 65536K Description 题目描述 Bessie hears ...

  3. python介绍（转载）

    Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  4. XmlDocument To String

    一.从String xml到XmlDocument的: string xml = "<XML><Test>Hello World</Test></X ...

  5. bzoj 1208: [HNOI2004]宠物收养所 set

    1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 7328  Solved: 2892[Submit][Sta ...

  6. git学习笔记09-bug分支-自己的分支改到一半了-要去改bug怎么办？

    当你接到一个修复一个代号101的bug的任务时,很自然地,你想创建一个分支issue-101来修复它,但是,等等,当前正在dev上进行的工作还没有提交: 并不是你不想提交,而是工作只进行到一半,还没法 ...

  7. 利用JDK的中Proxy动态代理实现Spring的AOP技术

    首先给出设计模式静态代理与动态代理的学习: http://layznet.iteye.com/blog/1182924   讲的不错 然后我们实现AOP 就要求我们对委托的所有方法的调用实现拦截 代理 ...

  8. iOS - PassData

    前言 页面传值: 复合传值 单例传值 userDefaults 传值 代理传值 Block/闭包传值 1.复合传值 复合 - 正向传值 1.接收方,头文件中创建可存放传递值的属性变量 2.发送方,包含 ...

  9. Nginx基础知识之————什么是 Nginx？

    本课时主要给大家讲解什么是 Nginx 和 Nginx 的功能,Nginx 与其他服务器的性能比较和 Nginx 的优点总结的知识,并结合实例让学员深入理解 Nginx 和 Nginx 的功能以及 N ...

  10. [转载] 分析Linux内核创建一个新进程的过程

    http://blog.luoyuanhang.com/2015/07/27/%E5%88%86%E6%9E%90Linux%E5%86%85%E6%A0%B8%E5%88%9B%E5%BB%BA%E ...