解决jQuery与Prototype等JavaScript框架冲突的办法！（已在项目中实践）

深入探讨JavaScript框架间的冲突及解决策略

最新推荐文章于 2025-09-10 16:16:57 发布

weixin_33712881

最新推荐文章于 2025-09-10 16:16:57 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/leeoo/blog/51015

本文详细解析了在引入jQuery、Prototype等JavaScript框架时可能出现的冲突问题，并提供了有效的解决方案，确保不同框架间的兼容性和顺利加载。

为什么80%的码农都做不了架构师？>>>

jQuery v1.4.2 + jquery.validate-1.7 + Prototype

以上几个对应的js文件由SiteMesh的default.jsp引入：

        <%-- 引入jQuery框架及其插件相关文件，注意将jQuery相关文件放到Prototype等其它JavaScript框架的前面引入，防止冲突 --%>
        <script type="text/javascript" src="<c:url value='/scripts/jquery/jquery-1.4.2.min.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/jquery/validate/jquery.validate-1.7.min.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/prototype.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/scriptaculous.js'/>"></script>
        <script type="text/javascript" src="<c:url value='/scripts/global.js'/>"></script>

在自己写的基于jQuery框架的validate插件的JavaScript验证文件中，以jQuery代替$符号，即可防止冲突啦！！！

v-login.js代码如下：

jQuery(document).ready(function(){
        jQuery("#loginForm").validate({
            // 设置验证规则，这里要用表单域的name属性值，不是用id属性值
            rules: {
                'j_username': {
                    required: true
                },
                'j_password': {
                    required: true
                }
            },

            // 验证提示信息（失败时）
            messages:{
                'j_username': {
                    required: "请输入用户名！"
                },
                'j_password': {
                    required: "请输入密码！"
                }
            },

            // 设置错误提示样式
            errorPlacement: function(error, element) {
                error.appendTo(element.parent());//
            },

            // 验证成功时执行
            success:
                    "valid"
         });
        debug: false // 参数为true，那么表单不会提交，只进行检查，方便开发时调试
    });