解决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

相关文章

Nginx 配置跨域的实现及常见问题解决

《Nginx配置跨域的实现及常见问题解决》本文主要介绍了Nginx配置跨域的实现及常见问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来... 目录1. 跨域1.1 同源策略1.2 跨域资源共享(CORS)2. Nginx 配置跨域的场景2.1

CSS place-items: center解析与用法详解

《CSSplace-items:center解析与用法详解》place-items:center;是一个强大的CSS简写属性,用于同时控制网格(Grid)和弹性盒(Flexbox)... place-items: center; 是一个强大的 css 简写属性,用于同时控制 网格(Grid) 和 弹性盒(F

CSS实现元素撑满剩余空间的五种方法

《CSS实现元素撑满剩余空间的五种方法》在日常开发中,我们经常需要让某个元素占据容器的剩余空间,本文将介绍5种不同的方法来实现这个需求,并分析各种方法的优缺点,感兴趣的朋友一起看看吧... css实现元素撑满剩余空间的5种方法 在日常开发中,我们经常需要让某个元素占据容器的剩余空间。这是一个常见的布局需求

CSS Anchor Positioning重新定义锚点定位的时代来临(最新推荐)

《CSSAnchorPositioning重新定义锚点定位的时代来临(最新推荐)》CSSAnchorPositioning是一项仍在草案中的新特性,由Chrome125开始提供原生支持需... 目录 css Anchor Positioning:重新定义「锚定定位」的时代来了! 什么是 Anchor Pos

CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比

《CSS中的Static、Relative、Absolute、Fixed、Sticky的应用与详细对比》CSS中的position属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布... css 中的 position 属性用于控制元素的定位方式,不同的定位方式会影响元素在页面中的布局和层叠关

HTML5 getUserMedia API网页录音实现指南示例小结

《HTML5getUserMediaAPI网页录音实现指南示例小结》本教程将指导你如何利用这一API,结合WebAudioAPI,实现网页录音功能,从获取音频流到处理和保存录音,整个过程将逐步... 目录1. html5 getUserMedia API简介1.1 API概念与历史1.2 功能与优势1.3

qt5cored.dll报错怎么解决? 电脑qt5cored.dll文件丢失修复技巧

《qt5cored.dll报错怎么解决?电脑qt5cored.dll文件丢失修复技巧》在进行软件安装或运行程序时,有时会遇到由于找不到qt5core.dll,无法继续执行代码,这个问题可能是由于该文... 遇到qt5cored.dll文件错误时,可能会导致基于 Qt 开发的应用程序无法正常运行或启动。这种错

全面解析HTML5中Checkbox标签

《全面解析HTML5中Checkbox标签》Checkbox是HTML5中非常重要的表单元素之一,通过合理使用其属性和样式自定义方法,可以为用户提供丰富多样的交互体验,这篇文章给大家介绍HTML5中C... 在html5中,Checkbox(复选框)是一种常用的表单元素,允许用户在一组选项中选择多个项目。本

HTML5 搜索框Search Box详解

《HTML5搜索框SearchBox详解》HTML5的搜索框是一个强大的工具,能够有效提升用户体验,通过结合自动补全功能和适当的样式,可以创建出既美观又实用的搜索界面,这篇文章给大家介绍HTML5... html5 搜索框(Search Box)详解搜索框是一个用于输入查询内容的控件,通常用于网站或应用程

SpringBoot排查和解决JSON解析错误(400 Bad Request)的方法

《SpringBoot排查和解决JSON解析错误(400BadRequest)的方法》在开发SpringBootRESTfulAPI时,客户端与服务端的数据交互通常使用JSON格式,然而,JSON... 目录问题背景1. 问题描述2. 错误分析解决方案1. 手动重新输入jsON2. 使用工具清理JSON3.