天天看點

jquery和prototype沖突解決

問題背景: 想用 jQuery 做 AJAX 處理, 用基于 Prototype 的 EasyValidation 做表單驗證, 但是二者不能共存, 因為都用了同一個方法名: $().

解決:

另一種方式是: <script type=”text/javascript”>

      jQuery.noConflict();

</script> 

本人測試通過的方式:

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 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" class="required min-length-6 max-length-20 validate-alphanum" value="beansoft">

     *密碼:

      <input name="user.password" type="password" class="required min-length-6 max-length-20" value="123456" >

    *密碼(重複):

      <input name="password1" type="password" class="required equals-user.password" value="123456" >

            <input type='submit' value='Submit'/>

            <input type='reset' value='Reset'/>

        </form> 

複制代碼

本文轉自 wws5201985 51CTO部落格,原文連結:http://blog.51cto.com/wws5201985/737001,如需轉載請自行聯系原作者

繼續閱讀