(五)解决jQuery和其它库的冲突
在jQuery库中,几乎所有的插件都被限制在它的命名空间里。全局的对象都很好地存储在jQuery命名空间里,因此当把jQuery和其它javascript类库一起使用时,不会引起冲突.(注意:默认情况下,jQuery用$作为自身的缩写而已)
如果jQuery类库和别的类库冲突的话,可以使用jQuerynoConflict()函数来将变量$的控制权移交出给其它的javaScipt库。看下面小片断代码
<script type="text/javascript" src="../JS/JsCOM.js"></script>
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
假设JsCOM.js库中,有这样一个函数
function $(objName) {
if (document.getElementById) {
return eval('document.getElementById("' + objName + '")')
}
else {
return eval("document.all." + objName)
}
大家都知道jQuery里面也一个这样的函数,为了不引起冲突,我们将jQuery的变量$的控制权移交出给别的javascript库
jQuery.noConflict(); //将变量$的控制权移交给JsCOM.js
var $cr = jQuery("#cr"); //照样使用jQuery类库,只是用jQuery代替了原来的$而以。
var JsCOM_cr = $("cr"); //使用JsCOM.js类库
在这里可以把jQuery()函数作为jQuery对象的制造工厂.
在这里要注意几点
1.引用javascript类库时,一定要把jQuery引用放在最后面,就像上面一样,JsCOM.js的引用在jQuery引用的前面(具体原因我也不知,不过确实需要这样)
2.特别要注意jQuery()代替$()时,jQuery是区分大小写的,因为javascript本身就是区分大小写的(好像说这个有点多余,不过还是希望大家不要犯这种错误)
基本上根据上面的方法就可以解决jQuery和其它库的冲突问题了!
如果你觉得上面的方式不爽,每次都要打jQuery来代替$增加了您敲键盘的工作量,那请接着看。。
除上面之外,还有另一种选择。如果想确保jQuery不会与其它库冲突,但又想自定义一个快捷方式,可以进行如下操作;
var $j = jQuery.noConflict(); //自定一个快捷方式
var $cr = $j("#cr"); //使用jQuery类库,得用自定义快捷方式----$j;
var JsCOM_cr = $("cr"); //和上一段代码一样,使用的是JsCOM.js类库
如果您还有别的要求,想继续使用原先的$(),同时还需要与别的类库不冲突的话,还有两种解决方法
其一:
jQuery.noConflict(); //将变量$的控制权让给JsCOM.js
jQuery(function($)
{
$("p").click(function() //在函数内继续可以使用jquery类库的$()方法
{
alert($(this).text());
})
})
var JsCOM_cr = $("cr"); // 在函数外面,照样可以使用JsCOM.js的$()方法
其二:
jQuery.noConflict(); //将变量$的控件权移交给别的类库,使用jquery类库的$符号时,请使用jQuery("#id");
(function($) { //定义匿名函数并设置形参为$
$(function() { //匿名函数内部的$均为jQuery
$("div").click(function() {//继续使用$()方法
alert($(this).text());
})
})
})
(jQuery); //使用匿名函数且传递实参jQUery
alert($("cr")); //使用的是jsCOM.js类库中的$()函数
第二种方法应该是兼容旧的代码最好的方式,修改的代码是最少的!
不过如果是新写的jQuery代码,我还是比较喜欢使用刚开始讲的那种(jQuery.noConflict(),然后就使用jQuery("#id"),这种方式)
如果您的页面是先引用jQuery类库再引入别的类库的话,那么我们可以直接使用jQuery来做一些工作,同时,可以使用$()方法作为其它库的快捷方式。这里无需调用jQuery.noConflict()函数,请看下面代码
<script type="text/javascript" src="../jQuery/jquery-1.3.2-vsdoc2.js"></script>
<script type="text/javascript" src="../JS/JsCOM.js"></script>
jQuery().ready(function() { //无需调用jQuery.noConflict()函数
var $cr = jQuery("#cr");
$cr.click(function() {
if ($cr.is(":checked")) {
alert("感谢你的支持!你可以继续操作了..");
}
})
})
alert($("cr")); //使用的是jsCOM.js类库中的$()函数
好了,看了上面这么多种方法来解决冲突,这下你可以放心的在您的项目中引用jQuery了吧
来自:http://www.cnblogs.com/Ss_Andy/archive/2010/06/24/1764471.html
更多资源:http://www.cnblogs.com/piuba/archive/2013/07/26/3217256.html
(五)解决jQuery和其它库的冲突的更多相关文章
- 解决jquery与其他库的冲突
1.jquery在其他库之后导入 第一种: jQuery.noConflict();//将变量$的控制权限交给其他类库,即将$的控制权让渡给其他类库 jQuery(function(){ jQuery ...
- 解决jquery和其他库的冲突
一.jquery在其他库之后导入 (1)jQuery.noConflict(); //将变量的$控制权转交给其他库. jQuery(function(){ ...
- 解决jQuery和其他库冲突
<script> console.log($); // //jquery在其他库之前导入,直接使用jQuery()或 // var $replace = jQuery.noConflict ...
- iOS解决两个静态库的冲突 duplicate symbol
http://blog.163.com/023_dns/blog/static/118727366201391544630380/ 场景: 解决TencentOpenAPI.framework与Zba ...
- 解决jquery和prototype库冲突问题
在项目中同时引入了jquery.js和prototype.js两个文件,在方法调用时启了冲突. 我们在使用 jQuery 的过程中我们会频繁使用 $ 符号,$是JQuery的别名,所有使用$的地方也都 ...
- 解决jQuery多个版本,与其他js库冲突方法
jQuery多个版本或和其他js库冲突主要是常用的$符号的问题,这个问题 jquery早早就有给我们预留处理方法了,下面一起来看看解决办法. 1.同一页面jQuery多个版本或冲突解决方法. < ...
- jQuery库(noConflict)冲突解决机制
很多JSFramework库选择使用$符号作为一个函数或变量名,而在实际的项目开发,模板语言,则有可能"$"符号是模板语言keyword.例如Veclocity模板语言,$它是ke ...
- 解决jquery与zepto等其它库冲突兼容的问题
解决jquery与zepto等其它库冲突兼容的问题;(function ($) { }) (jQuery); ;(function ($) { }) (Zepto); 在Bootstrap ...
- (function($, window, document) {}) jQuery 调用解决与其他javascript库冲突的写法
将函数包在红色字体内部,可以解决$符号与其他插件的冲突. <script type="text/javascript"> (function($, window, do ...
随机推荐
- git pull命令模式
git pull 默认等于 git fetch + git mergegit pull --rebase 等于 git fetch + git rebasegit pull -–squash 等于 g ...
- 微信小程序微信支付流程
1.小程序调用wx.login获取登录凭证code wx.login(无请求参数)返回code(有效期5分钟) wx.login({ success:function(res){ //get res. ...
- 【bzoj4699】树上的最短路(树剖+线段树优化建图)
题意 给你一棵 $n$ 个点 $n-1$ 条边的树,每条边有一个通过时间.此外有 $m$ 个传送条件 $(x_1,y_1,x_2,y_2,c)$,表示从 $x_1$ 到 $x_2$ 的简单路径上的点可 ...
- kubernetes 之容器监控
[root@manager ~]# git clone https://github.com/kubernetes/heapster.git [root@manager ~]# cd heapster ...
- Mongodb学习(1)--- mongoose: Schema, Model, Entity
Schema : 一种以文件形式存储的数据库模型骨架,不具备数据库的操作能力 Model : 由 Schema 发布生成的模型,具有抽象属性和行为的数据库操作 Entity : 由 Model 创建的 ...
- 【16】vuex2.0 之 getter
有的组件中获取到 store 中的state, 需要对进行加工才能使用,computed 属性中就需要写操作函数,如果有多个组件中都需要进行这个操作,那么在各个组件中都写相同的函数,那就非常麻烦,这 ...
- 51 Nod 1678 lyk与gcd
1678 lyk与gcd 基准时间限制:2 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 这天,lyk又和gcd杠上了.它拥有一个n个数的数列,它想实现两种操作. 1:将 ai ...
- 写一个Foreach帮助类,在razor中使用
原文发布时间为:2011-05-05 -- 来源于本人的百度文章 [由搬家工具导入] A Better Razor Foreach Loop(razor delegate extension) htt ...
- MEF 注入[转载]
领域服务的时候,用到MEF的注入有参构造函数的方法,your master was attracted,打算稍微深挖一下,这篇来对此知识点做个总结. 一.知识点回顾 MEF作为IOC的方式之一,它的主 ...
- NIO、AIO学习历程
今天我们以一个常见的面试题作为开始:"谈谈你对IO与NIO的理解".要回答这个问题,我们首先我要了解几个概念: NIO 同步+非阻塞 IO(BIO) 同步+阻塞 AIO 异步+非阻 ...