解决jQuery多个版本，与其他js库冲突方法

jQuery多个版本或和其他js库冲突主要是常用的$符号的问题，这个问题 jquery早早就有给我们预留处理方法了，下面一起来看看解决办法。

1.同一页面jQuery多个版本或冲突解决方法。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8" /><title>jQuery测试页</title>
</head>
<body>
<!-- 引入1.6.4版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
<script> var jq164 = jQuery.noConflict(true); </script>
<!-- 引入1.4.2版的jq -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script> var jq142 = jQuery.noConflict(true); </script><script>
(function($){//此时的$是jQuery-1.6.4$('#');
})(jq164);
</script><script>
jq142(function($){//此时的$是jQuery-1.4.2$('#');
});
</script></body>
</html>

2.同一页面jQuery和其他js库冲突解决方法

jQuery noConflict() 方法
noConflict() 方法会释放会 $ 标识符的控制，这样其他脚本就可以使用它了。
jquery.js在prototype.js之前进行引入,如：

<script src="jquery.js" type="text/javascript"></script>
<script src="prototype.js" type="text/javascript"></script>
<p id="pp">test---prototype</p>
<p>test---jQuery</p>

2.1 当然，您仍然可以通过全名替代简写的方式来使用 jQuery：

<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js，全名可以不调用。
jQuery(function(){                    //使用jQueryjQuery("p").click(function(){alert( jQuery(this).text() );});
});
//此处不可以再写成$,此时的$代表prototype.js中定义的$符号。$("pp").style.display = 'none';        //使用prototype
</script>

2.2 您也可以创建自己的简写。noConflict() 可返回对 jQuery 的引用，您可以把它存入变量，以供稍后使用。请看这个例子：

<script type="text/javascript">
var $j = jQuery.noConflict();        //自定义一个比较短快捷方式
$j(function(){                        //使用jQuery$j("p").click(function(){alert( $j(this).text() );});
});$("pp").style.display = 'none';        //使用prototype
</script>

2.3 如果你的 jQuery 代码块使用简写，并且您不愿意改变这个快捷方式，那么您可以把简写，并且您不愿意改变这个快捷方式，那么您可以把符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外，依旧不得不使用 "jQuery"：

<script type="text/javascript">
jQuery.noConflict();     //将变量$的控制权让渡给prototype.js
jQuery(document).ready(function($){$("p").click(function(){        //继续使用 $ 方法alert( $(this).text() );});
});jQuery(function($){                    //使用jQuery$("p").click(function(){        //继续使用 $ 方法alert( $(this).text() );});
});
</script>

2.4 使用语句块：

<script type="text/javascript">
jQuery.noConflict();                //将变量$的控制权让渡给prototype.js
(function($){                        //定义匿名函数并设置形参为$$(function(){                    //匿名函数内部的$均为jQuery$("p").click(function(){    //继续使用 $ 方法alert($(this).text());});});
})(jQuery);                            //执行匿名函数且传递实参jQuery$("pp").style.display = 'none';        //使用prototype
</script>

这种使用语句块的方法非常有用，在我们自己写jquery插件时,应该都使用这种写法，因为我们不知道具体工作过程中是如何顺序引入各种js库的,而这种语句块的写法却能屏蔽冲突。

注意:
1.引用javascript类库时，把jQuery引用放在最后面，可以避免冲突。
2.特别要注意jQuery()代替$()时，jQuery是区分大小写的，因为javascript本身就是区分大小写的。

解决jQuery多个版本，与其他js库冲突方法相关推荐

jQuery避免$符和其他JS库冲突的方法对比
jQuery避免$符和其他JS库冲突的方法对比 1.如果jquery库在第三方库之后引用.这个时候jquery库会占用$. 解决办法:剔除$符号的使用权. <script type=" ...
jQuery是一个非常优秀的js库
若有侵权随时可以联系作者删除 jQuery学习目录一.前言二.学习目标三.优点分析四.jQuery基础知识 (一)jQuery(load和read的区别) (二)jQuery选择器 (1).j ...
使用Google CDN的JSAPI服务来提供加载各类JS库的方法
例如jQuery.Prototype库等 2012-02-17 09:17:56 | 56次阅读 | 评论:0 条 | itokit jQuery,让我们控制页面元素更加方便快捷,让我们在编写js的时 ...
jQuery库与其他JS库冲突的解决办法
关键字: javascript 现在的js库很多,而且各有所长.像我,就比较喜欢jQuery,但同时也会使用一下其他的js库,如YUI,DWR什么的.但是它们却时不时地相互闹些小矛盾,真是让人头痛.究 ...
JavaScript程序库jQuery学习笔记分享(二)jQuery对象和DOM操作，和其他js库冲突处理
今天我继续更新jQuery学习笔记,最近考试比较忙,也就更新的比较慢了,这里向大家说一声抱歉,嘻嘻. 让那不愉快的情绪过去吧,继续进行我们的jQuery之旅吧. 一:jQuery对象和DOM对象 1. ...
qs.js库使用方法
1.qs.js库说明 qs是一个url参数转化(parse和stringify)的js库. https://www.npmjs.com/package/qs 2.使用(以vue文件做示例) (1)基本 ...
updatepanel失效怎么办_【点滴积累】解决jQuery绑定事件在updatepanel更新后失效的方法...
背景接到了领导给的一个New Feature,为系统的菜单导航栏进行一些个性化的操作(鼠标移到导航菜单时下方出现子菜单,移到其他的菜单选项时显示该选项的子菜单,隐藏其他子菜单.其次就是当使用鼠标点击 ...
解决IE浏览器低版本兼容性问题的最快方法
解决IE8以下浏览器低版本的兼容性问题,最快的方法就是将以下代码放在网页的head标签内: <!--[if lte IE 8]> <script async>location. ...
[问题解决]解决编译时，Androidx和其他三方库冲突
在Android Studio中新建项目使用Androidx库,如果此时使用的第三方库中包含旧版Support库,会导致冲突报错. `Your project has set `android.use ...
cropbox php,jQuery用户头像裁剪插件cropbox.js实例分享
本文主要为大家详细介绍了jQuery用户头像裁剪插件cropbox.js的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 几乎每一个网页是必备图片上传,图片裁剪功能,这 ...

解决jQuery多个版本，与其他js库冲突方法

解决jQuery多个版本，与其他js库冲突方法相关推荐

最新文章

热门文章