首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

jquery跟prototype冲突解决

2012-09-06 
jquery和prototype冲突解决问题背景: 想用 jQuery 做 AJAX 处理, 用基于 Prototype 的 EasyValidation 做

jquery和prototype冲突解决

问题背景: 想用 jQuery 做 AJAX 处理, 用基于 Prototype 的 EasyValidation 做表单验证, 但是二者不能共存, 因为都用了同一个方法名: $().

解决:

jquery和prototype冲突解决, 网上流传的一篇文章,我这里测试结果是错误的! http://ajaxbbs.net/blog/post/71/

另一种方式是:
<script type=”text/javascript”>
????? jQuery.noConflict();
</script>

参考: http://www.d5s.cn/archives/6, 但我这里测试也有问题!

本人测试通过的方式:

1、将jquery.js放到prototype.js前面(这个是必须的!)。
2、在jquery.js后面将$变量重命名。
方法如下:

<script type="text/javascript"? src="jquery.js"></script>
<script type="text/javascript">
var jQuery=$;
</script>

<script type="text/javascript" type="text/javascript" src="window.js"></script>
<!--上面这个window.js调用了jquery框架的方法-->
<script type="text/javascript" type="text/javascript" src="prototype.js"></script>

3、将原来使用的$方法名一律替换为jQuery名,如$("obj")替换为jQuery("obj")。

例如下面的一段代码, 混合了 jQuery和基于Prototype的 EasyValidation:

<!--? jquery, 注意加载顺序 -->
<script src="js/jquery-1.2.6.pack.js"></script>
<script type=”text/javascript”>
????? var jQuery=$;
</script>

<!-- 表单验证 -->
<script src="easy_validation/lib/prototype.js" type="text/javascript"></script>
<script src="easy_validation/lib/effects.js" type="text/javascript"></script>
<script src="easy_validation/src/validation_cn.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="easy_validation/styles/style_min.css" />

??? <div id="contents"></div>
? <script>
? jQuery(document).ready(function(){
??? //jQuery("#contents").load("test.jsp");
??? jQuery("#contents").load("test.jsp?username=BeanSoft")
? });
? </script>
????????? <!-- 为form增加required-validate class,标识需要验证form -->
??????? <form id='helloworld' action="#" class='required-validate'>
<input name="user.name" value="beansoft">
???? *密码:
????? <input name="user.password" type="password" value="123456" >

??? *密码(重复):
????? <input name="password1" type="password" value="123456" >

??????????? <input type='submit' value='Submit'/>
??????????? <input type='reset' value='Reset'/>
??????? </form>


?

热点排行