Jquery命名冲突解决的五种方案分享
因为许多 JavaScript 库使用 $ 作为函数或变量名，jquery也一样。其实$只是jquery的一个别名而已，假如我们需要使用 jquery 之外的另一 js 库，我们可以通过调用 $.noConflict() 向该库返回控制权。下面是收集到解决这一问题的五种方案，总有一种你会用得上的。
例一：
代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决1</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决2</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<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>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决3</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决4</title>
<!-- 引入 prototype -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
<!-- 引入 jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<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>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>冲突解决5</title>
<!--先导入jQuery -->
<script src="http://www.cnblogs.com/scripts/jquery-1.3.1.js" type="text/javascript"></script>
<!--后导入其他库 -->
<script src="prototype-1.6.0.3.js" type="text/javascript"></script>
</head>
<body>
<p id="pp">test---prototype</p>
<p >test---jQuery</p>
<script type="text/javascript">
jQuery(function(){ //直接使用 jQuery ,没有必要调用"jQuery.noConflict()"函数。
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = 'none'; //使用prototype
</script>
</body>
</html>
上述实例打包下载
相关推荐
-
jQuery $命名冲突解决方案汇总
最近遇到个问题,同时引用了jquery库和另外一个js库.当用$XX去调用js库函数时,发现失效了!于是找资料,原来是jquery命名冲突了.因为许多JavaScript 库使用$作为函数或变量名,jquery也一样.其实$只是jquery的一个别名而已,假如我们需要使用jquery 之外的另一js库,我们可以通过调用 $.noConflict() 向该库返回控制权.下面是收集到解决这一问题的五种方案,总有一种你会用得上的. 例一: 复制代码 代码如下: <!DOCTYPE html PUBLI
-
解决jquery中美元符号命名冲突问题
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突.下面以引入两个库文件 jquery.js和prototype.js为例来进行说明. 第一种情况:jquery.js在prototype.js之后进行引入,如: <</span> script src = " prototyp
-
如何解决Jquery库及其他库之间的$命名冲突
首先我们应该知道,在jquery中,$(美元符号)就是jquery的别名,也就是说使用$和使用jquery是一样的,在很多时候我们命名空间时,正是因为这个$而产生的冲突的发生.比如说:$('#xmlas')和JQuery('#xmlas') 虽然在写法上不同,但在实际上却是完全等同的. 要想解决这个冲突,其实最简单的方法就是使用不同的名称来命名,或者让执行代码认为是不同的命名空间即可. 一. jQuery库在其他库之前导入,直接使用jQuery(callback)方法如: 复制代码 代码如下:
-
JQuery的$命名冲突详细解析
在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg')的写法.然而,当我们引入多个js库后,在另外一个js库中也定义了$符号的话,那么我们在使用$符号时就发生了冲突.下面以引入两个库文件jquery.js和prototype.js为例来进行说明. 第一种情况:jquery.js在prototype.js之后进行引入,如:<script src="prototype.js" type=&quo
-
jQuery$命名冲突怎么办如何解决
其他一些 JavaScript 框架包括:MooTools.Backbone.Sammy.Cappuccino.Knockout.JavaScript MVC.Google Web Toolkit.Google Closure.Ember.Batman 以及 Ext JS. 其中某些框架也使用 $ 符号作为简写(就像 jQuery),如果您在用的两种不同的框架正在使用相同的简写符号,有可能导致脚本停止运行. jQuery 的团队考虑到了这个问题,并实现了 noConflict() 方法. 实例
-
Jquery命名冲突解决的五种方案分享
因为许多 JavaScript 库使用 $ 作为函数或变量名,jquery也一样.其实$只是jquery的一个别名而已,假如我们需要使用 jquery 之外的另一 js 库,我们可以通过调用 $.noConflict() 向该库返回控制权.下面是收集到解决这一问题的五种方案,总有一种你会用得上的. 例一: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w
-
JS判断对象属性是否存在的五种方案分享
目录 背景 检查属性是否存在 in Reflect.has() hasOwnProperty 构造函数法 对象字面量 缺点 覆盖报错 Object.prototype.hasOwnProperty() ES13(ES2022)Object.hasOwn() 总结 背景 在这篇Accessible Object.prototype.hasOwnProperty()提案中,提出了一个更简单的方法来检查对象时候具有特定的属性- Object.hasOwn(),主要目标是用来替代Object.proto
-
解决Java中SimpleDateFormat线程不安全的五种方案
目录 1.什么是线程不安全? 线程不安全的代码 2.解决方案 ① 将SimpleDateFormat变为局部变量 ② 使用synchronized加锁 ③ 使用Lock加锁 ④ 使用ThreadLocal ⑤ 使用DateTimeFormatter 3.线程不安全原因分析 4.各方案优缺点总结 1.什么是线程不安全? 线程不安全也叫非线程安全,是指多线程执行中,程序的执行结果和预期的结果不符的情况就叫做线程不安全. 线程不安全的代码 SimpleDateFormat 就是一个典型的线程不安全事例
-
Nginx 502 bad gateway错误解决的九种方案及原因
目录 前言 502系列错误代码 5XX系列错误代码 Nginx 502 Bad Gateway 错误的原因及解决方法 1.检查PHP基础设置 2.FastCGI进程是否已经启动 3.FastCGI worker进程数是否不够 4.FastCGI执行时间过长 5.FastCGI Buffer不够 6.FastCGI 缓冲区设置过小 7.代理缓冲区设置过小(使用了nginx反向代理的情况) 8.默认php-cgi的进程数设置过少 9.其它原因 总结 前言 502 Bad Gateway 是一种HTT
-
SpringBoot父子线程数据传递的五种方案介绍
目录 方案1.ThreadLocal+TaskDecorator 方案2.RequestContextHolder+TaskDecorator 方案3.MDC+TaskDecorator 方案4.InheritableThreadLocal 方案5.TransmittableThreadLocal 方案对比 简答说一下InheritableThreadLocal 总结 方案1.ThreadLocal+TaskDecorator 用户工具类 UserUtils /** *使用ThreadLocal
-
使用ASP.NET模板生成HTML静态页面的五种方案
ASP.NET模版生成HTML静态页面方案1: 复制代码 代码如下: /// < summary> /// 传入URL返回网页的html代码 /// < /summary> /// < param name="Url">URL< /param> /// < returns>< /returns> public static string getUrltoHtml(string Url) { errorMsg = &
-
输入法的回车与消息发送快捷键回车的冲突解决方法
问题:在中文输入法输入文字时按ENTER键:绑定keyup事件会将输入法中的英文文字输入到文字框并直接触发发送按钮 键盘事件: 当一个按键被pressed或者released,在每一个浏览器中都可能会触发三种键盘事件 keydown keypress keyup keydown事件发生在按键被按下的时候,接着触发keypress,松开按键的时候触发keyup事件 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发keydown.keyup,回车
-
Android Studio Gradle依赖冲突解决方法
前言 本文主要给大家介绍了Android Studio Gradle依赖冲突解决的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧 1. 查看依赖树 ./gradlew dependencies 2. 解决依赖冲突 一旦在构建中存在依赖冲突,开发人员需要决定哪个版本的库最终包含在构建中,有许多解决冲突的方法. 1. 逐个排除 compile('junit:junit:4.12'){ exclude group : 'org.hamcrest',module:'hamcre