Discuz X2.5与jQuery的$冲突解决方法

dly · 发表于 2012-10-6 19:32:05

方法一：
jquery对浏览器兼容和实现某些功能非常方便，大家经常使用，jquery中的$（）函数与dx冲突，你引用jquery则dx中的部分js就报错了。看了看dx中这样定义:

function $(id) {return document.getElementById(id);
}

复制代码

jquery和prototype的$的冲突，尝试上面的方法都是测试有问题，后来根据下面方法测试通过：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>
<script type="text/javascript" type="text/javascript" src="prototype.js"></script>

复制代码

3、将原来使用的$方法名一律替换为jQuery名，如$("obj")替换为jQuery("obj")。
例如下面的一段代码, 混合了 jQuery和基于Prototype的 EasyValidation:

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

复制代码

方法二：

修改你用jquey实现的js文件，找到除去参数、变量前缀的 $，例如需要替换的内容为： $. $( 这些类型，直接将 $ 换成 jQuery , 记住，是将你写的或者找到的jq文件中的，和上述类型一样的 $ 统统换成 jQuery，下一步：在你引用所有jquery文件(jquery-1.2.4b.js和common.js)的时候, 按如下方法写：

<script src=”/static/js/jquery-1.2.4b.js” type=”text/javascript”></script>
<script src=”/static/js/common.js” type=”text/javascript”></script>
<script type=”text/javascript”>
调用的jquery代码(当中涉及和上述 $有关的，也需要替换成jQuery!!!)
</script>
<script type=”text/javascript”> //这里很重要，必须写的！
jQuery.noConflict();
</script>

复制代码

方法三：
解决方法1：
将jquery.js在common.js之前载入，不然jquery的$()函数会覆盖common.js的$()函数；然后用到jQuery的$()函数的地方都用jQuery()代替。
解决方法2：
将jquery.js在common.js之后载入，在调用jQuery的函数前使用一下代码：
var $$ = jQuery.noConflict();
然后使用$$()或jQuery()来代替jQuery原来的$()函数

方法四：
1.替换选择器函数
将原程序中的：

function $(id) {
return document.getElementById(id);
}

复制代码

替换为：

function $(id) {
if (typeof jQuery == 'undefined' || (typeof id == 'string' && document.getElementById(id))) {
return document.getElementById(id);
} else if (typeof id == 'object' || !/^\w*$/.exec(id) ||
/^(body|div|span|a|input|textarea|button|img|ul|li|ol|table|tr|th|td)$/.exec(id)){
return jQuery(id);
}
return null;
}

复制代码

做一个兼容，对于以前直接用字符串ID的调用依旧使用document.getElementById(id)去获取DOM对象；而如果传入的ID是对象，或者里面有特殊符号（如 # . : ^ 等 jQuery 选择器符号）或者是常用的html标签，就使用jQuery选择器去获取jQuery对象。
2.需要先加载jquery的库，然后加载声明这个兼容的 $ 函数的js文件，以覆盖掉jquery的 $ 函数。

<script language="javascript" type="text/javascript" src="source/script_jquery.js"></script>
<script language="javascript" type="text/javascript" src="source/script_common.js"></script>
…………

复制代码

假如有个TAG的ID是'ctrl_with_id'，使用 $('ctrl_with_id') 取得的是DOM的对象，使用$('#ctrl_with_id')可取得jQuery对象，互相不会冲突。
如此，原来程序中的 $ 函数依旧工作，而且同时可以使用 $ 作为jQuery的选择器。

方法五：
uchome 程序中 $ 函数与 jquery 冲突的解决办法
1.替换选择器函数
将原程序中的：

function $(id) {
return document.getElementById(id);
}

复制代码

替换为：

function $(id) {
if (typeof jQuery == 'undefined' || (typeof id == 'string' && document.getElementById(id))) {
return document.getElementById(id);
} else if (typeof id == 'object' || !/^\w*$/.exec(id) ||
/^(body|div|span|a|input|textarea|button|img|ul|li|ol|table|tr|th|td)$/.exec(id)){
return jQuery(id);
}
return null;
}

复制代码

做一个兼容，对于以前直接用字符串ID的调用依旧使用document.getElementById(id)去获取DOM对象；而如果传入的ID是对象，或者里面有特殊符号（如 # . : ^ 等 jQuery 选择器符号）或者是常用的html标签，就使用jQuery选择器去获取jQuery对象。

游客，如果您要查看本帖隐藏内容请回复

荷叶地汪 · 发表于 2014-9-28 12:31:18

这个可要看好好学习下哈！！！！

csacx · 发表于 2014-11-14 21:54:44

这可要好好学习

sdfiu · 发表于 2016-3-8 04:45:33

4874874784784874

[二次开发] Discuz X2.5与jQuery的$冲突解决方法

相关帖子