解决velocity与jquery的冲突

2024-05-07 19:48

本文主要是介绍解决velocity与jquery的冲突,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1、使用jQuery代替$. 如:jQuery.ajax();

缺点:不适合扩展,一旦替换成第三方库时,那就麻烦大发

2、使用jQuery.noConflict。 如:var j = jQuery.noConflict(); j.ajax();

缺点:当使用jQuery的相关插件时,会使得插件失效哦!

3、wrap jQuery中的冲突方法。

如$.ajax()在Velocity中会冲突,则重新定义如下:

function dw(){}

dw.ajax=function(s){ jQuery.ajax(s); } dw.ajax();

方案3基本上解决了1、2中的缺点~~~故推荐使用第三种方法!

4、

定义一个 $JQ="$."

以后可以用 ${JQ}ajax().......

<script type="text/javascript">
  var PRICE_FORMAT = '&yen;%s';
  $(function(){//首页左侧分类菜单
    $(".category ul.menu").find("li").each(function() {$(this).hover(function() {var cat_id = $(this).attr("cat_id");
                        var menu = $(this).find("div[cat_menu_id='"+cat_id+"']");
                        menu.show();
                        $(this).addClass("hover");
                        var menu_height = menu.height();
                        if (menu_height < 60) menu.height(80);
                        menu_height = menu.height();
                        var li_top = $(this).position().top;
                        $(menu).css("top",-li_top + 38);
                      },
                      function() {$(this).removeClass("hover");
                        var cat_id = $(this).attr("cat_id");
                        $(this).find("div[cat_menu_id='"+cat_id+"']").hide();
                      });
            });
    $(".head-user-menu dl").hover(function() {$(this).addClass("hover");
            },
            function() {$(this).removeClass("hover");
            });
    $('.head-user-menu .my-mall').mouseover(function(){// 最近浏览的商品
      load_history_information();
      $(this).unbind('mouseover');
    });
    $('.head-user-menu .my-cart').mouseover(function(){// 运行加载购物车
      load_cart_information();
      $(this).unbind('mouseover');
    });
    $('#button').click(function(){if ($('#keyword').val() == '') {if ($('#keyword').attr('data-value') == '') {return false
        } else {window.location.href="http://b2b2c.shopnctest.com/test/shop/index.php?act=search&op=index&keyword="+$('#keyword').attr('data-value');
          return false;
        }}});
    $(".head-search-bar").hover(null,
            function() {$('#search-tip').hide();
            });
    // input ajax tips
    $('#keyword').focus(function(){$('#search-tip').show()}).autocomplete({//minLength:0,
      source: function (request, response) {$.getJSON('http://b2b2c.shopnctest.com/test/shop/index.php?act=search&op=auto_complete', request, function (data, status, xhr) {$('#top_search_box > ul').unwrap();
          response(data);
          if (status == 'success') {$('#search-tip').hide();
            $(".head-search-bar").unbind('mouseover');
            $('body > ul:last').wrap("<div id='top_search_box'></div>").css({'zIndex':'1000','width':'362px'});
          }});
      },
      select: function(ev,ui) {$('#keyword').val(ui.item.label);
        $('#top_search_form').submit();
      }});
    $('#search-his-del').on('click',function(){$.cookie('9204_his_sh',null,{path:'/'});$('#search-his-list').empty();});
  });
</script>
将$.改为jQuery就不会报错

  source: function (request, response) {jQuery.getJSON('http://b2b2c.shopnctest.com/test/shop/index.php?act=search&op=auto_complete', request, function (data, status, xhr) {$('#top_search_box > ul').unwrap();
      response(data);
      if (status == 'success') {$('#search-tip').hide();
        $(".head-search-bar").unbind('mouseover');
        $('body > ul:last').wrap("<div id='top_search_box'></div>").css({'zIndex':'1000','width':'362px'});
      }});
  },
  select: function(ev,ui) {$('#keyword').val(ui.item.label);
    $('#top_search_form').submit();
  }
});
$('#search-his-del').on('click',function(){jQuery.cookie('9204_his_sh',null,{path:'/'});$('#search-his-list').empty();});

这篇关于解决velocity与jquery的冲突的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/968224

相关文章

禁止HTML页面滚动的操作方法

《禁止HTML页面滚动的操作方法》:本文主要介绍了三种禁止HTML页面滚动的方法:通过CSS的overflow属性、使用JavaScript的滚动事件监听器以及使用CSS的position:fixed属性,每种方法都有其适用场景和优缺点,详细内容请阅读本文,希望能对你有所帮助... 在前端开发中,禁止htm

Vue3中的动态组件详解

《Vue3中的动态组件详解》本文介绍了Vue3中的动态组件,通过`component:is=动态组件名或组件对象/component`来实现根据条件动态渲染不同的组件,此外,还提到了使用`markRa... 目录vue3动态组件动态组件的基本使用第一种写法第二种写法性能优化解决方法总结Vue3动态组件动态

spring-boot-starter-thymeleaf加载外部html文件方式

《spring-boot-starter-thymeleaf加载外部html文件方式》本文介绍了在SpringMVC中使用Thymeleaf模板引擎加载外部HTML文件的方法,以及在SpringBoo... 目录1.Thymeleaf介绍2.springboot使用thymeleaf2.1.引入spring

IDEA编译报错“java: 常量字符串过长”的原因及解决方法

《IDEA编译报错“java:常量字符串过长”的原因及解决方法》今天在开发过程中,由于尝试将一个文件的Base64字符串设置为常量,结果导致IDEA编译的时候出现了如下报错java:常量字符串过长,... 目录一、问题描述二、问题原因2.1 理论角度2.2 源码角度三、解决方案解决方案①:StringBui

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

Python Jupyter Notebook导包报错问题及解决

《PythonJupyterNotebook导包报错问题及解决》在conda环境中安装包后,JupyterNotebook导入时出现ImportError,可能是由于包版本不对应或版本太高,解决方... 目录问题解决方法重新安装Jupyter NoteBook 更改Kernel总结问题在conda上安装了

Goland debug失效详细解决步骤(合集)

《Golanddebug失效详细解决步骤(合集)》今天用Goland开发时,打断点,以debug方式运行,发现程序并没有断住,程序跳过了断点,直接运行结束,网上搜寻了大量文章,最后得以解决,特此在这... 目录Bug:Goland debug失效详细解决步骤【合集】情况一:Go或Goland架构不对情况二:

解决jupyterLab打开后出现Config option `template_path`not recognized by `ExporterCollapsibleHeadings`问题

《解决jupyterLab打开后出现Configoption`template_path`notrecognizedby`ExporterCollapsibleHeadings`问题》在Ju... 目录jupyterLab打开后出现“templandroidate_path”相关问题这是 tensorflo