在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. JavaScript Replace 多个字符

    <html> <head> <title></title> <script language="javascript"> ...

  2. 迷你sql profile，给缺少sql跟踪的朋友们

    如果你的数据库没有sqlprofile,看这里. 如果你没时间装sqlserver那一系列的东西,看看这里,也许能解决呢. 这是一个迷你版的sqlprofile ,在win7下测试,链接sqlserv ...

  3. iOS - UISlider

    前言 NS_CLASS_AVAILABLE_IOS(2_0) __TVOS_PROHIBITED @interface UISlider : UIControl <NSCoding> @a ...

  4. [转载] 每周推荐阅读 BFQ：实现IO的隔离共享与高吞吐访问

    磁盘IO和网络IO隔离与共享是混部应用中基本需求,从早些年的BVC到现在的Matrix,以及Galaxy,或者未来的BS/Mint混部都遇到类似的问题:由于无法有效实现IO级的隔离(包括吞吐隔离.延时 ...

  5. ajax 、ajax的交互模型、如何解决跨域问题

    1.ajax是什么? — AJAX全称为“AsynchronousJavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术. — 不是一种新技 ...

  6. JavaWeb学习总结（十二）--事务

    一.事务的介绍 1.1 什么是事务 银行转账!张三转10000块到李四的账户,这其实需要两条SQL语句: 给张三的账户减去10000元: 给李四的账户加上10000元. 如果在第一条SQL语句执行成功 ...

  7. Python学习笔记17—Tornado

    实例 #!/usr/bin/env Python #coding:utf-8 import tornado.httpserver import tornado.ioloop import tornad ...

  8. hdu 4055 && hdu 4489 动态规划

    hdu 4055: 一开始我想的递推方向想得很复杂,看了别人的博客后才醍醐灌顶: 参照他的思路和代码: #include<cstdio> #include<cstring> # ...

  9. jquery 获取鼠标位置

    //获取鼠标位置 $(function(){ $('body').mousemove(function(e) { e = e || window.event; __xx = e.pageX || e. ...

  10. 记录一下表格用poi的导出word

    也是网上找的代码http://53873039oycg.iteye.com/blog/2152009,但是横向合并单元格没成功.只能用很蠢的办法建立了好多table public void fillT ...