jQuery.noConflict() 函数
jQuery.noConflict()
函数用于让出jQuery库对变量$(和变量jQuery)的控制权。
一般情况下,在jQuery库中,变量$
是变量jQuery
的别名,它们之间是等价的,例如jQuery("p")
和$("p")
是等价的。由于变量$
只有一个字符,并且特点鲜明,因此我们更加习惯使用$
来操作jQuery库。
不过,其他JS库也可能使用变量$
来进行操作,例如Prototype库。这个时候两个库可能会由于变量$
的控制权问题而发生冲突。
此时,你可以使用该函数让出jQuery库对变量$
的控制权,将该变量交给上一个实现它的JS库,之后我们只能使用变量jQuery
来操作jQuery库。
此外,使用该函数,还可以同时让出变量$
和变量jQuery
的控制权,从而实现多个不同版本的jQuery库共存(详情见下面的示例说明)。
该函数属于全局jQuery
对象。
语法
静态函数jQuery.noConflict()
的语法如下:
jQuery.noConflict( [ removeAll ] )
参数
参数 | 描述 |
---|---|
removeAll | 可选/Boolean类型是否彻底移交对变量jQuery的控制权,默认为false 。 |
如果省略了参数removeAll
或该参数不为true
,则表示只让出对变量$
的控制权;如果该参数为true
,则表示同时让出变量$
和jQuery
的控制权。
返回值
jQuery.noConflict()
函数的返回值是jQuery类型,返回变量jQuery
的引用。
示例&说明
1、以下是加载Prototype和jQuery库的情况:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
// 让出对变量$的控制权
jQuery.noConflict(); // 使用jQuery进行DOM操作
jQuery("#uname").hide(); // 使用Prototype进行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );
</script>
2、我们还可以使用其他自定义的变量名来操作jQuery:
// 让出对变量$的控制权,并将jQuery赋给新的别名j
var j = jQuery.noConflict(); // 基于jQuery进行DOM操作(使用变量j)
j("#uname").hide(); // 基于Prototype进行DOM操作
$("myDiv").setStyle( {color: "#ffffff"} );
3、即使是多个库共存,我们也可以在jQuery.ready()
的回调函数或其他自定义函数中将局部变量$
作为jQuery的别名使用:
// 让出jQuery库对变量$的控制权
jQuery.noConflict(); jQuery(document).ready(function($){
// 使用局部变量$进行jQuery操作
$("p").css("color", "");
}); (function($){
// 使用局部变量$进行jQuery操作
$("ul li").addClass("item");
}(jQuery));
4、如果要实现两个版本的jQuery库共存,我们可以编写如下代码:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 让出jQuery-1.11.1对变量$和变量jQuery的控制权
var j = jQuery.noConflict( true ); document.writeln( j.fn.jquery ); // 1.11.1 document.writeln( $.fn.jquery ); // 1.4.2
document.writeln( jQuery.fn.jquery ); // 1.4.2 /*
* 如果前面的jQuery.noConflict()没有传入参数true,
* 也就是说只让出变量$的控制,则$表示1.4.2,jQuery表示1.11.1
* 此时,jQuery.fn.jquery为1.11.1
*/
</script>
5、三个版本的jQuery库共存,对应的jQuery示例代码如下:
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery-1.11.1.js"></script>
<script type="text/javascript">
// 让出jQuery-1.11.1对变量$和变量jQuery的控制权,使用变量j来控制
var j = jQuery.noConflict( true ); // 让出jQuery-1.8.3对变量$的控制权
jQuery.noConflict(); document.writeln( j.fn.jquery ); // 1.11.1
document.writeln( jQuery.fn.jquery ); // 1.8.3
document.writeln( $.fn.jquery ); // 1.4.2
</script>
注意:多个可能存在全局变量重名冲突的JS库,变量的实际控制权一般取决于JS库的加载顺序。以上面三个版本的jQuery库的示例代码为例,后加载的jQuery库的变量覆盖了之前版本的变量,因此每次让出变量的控制权,控制权就会交给上一个JS库。
jQuery.noConflict() 函数的更多相关文章
- jQuery.noConflict() 函数详解
jQuery.noConflict()函数用于让出jQuery库对变量$(和变量jQuery)的控制权. 一般情况下,在jQuery库中,变量$是变量jQuery的别名,它们之间是等价的,例如jQue ...
- jQuery.noConflict()防冲突机制
许多JS库都非常喜欢使用$作为函数.变量.有时候,由于页面复杂的历史问题,或者为了实现特定的功能,我们不得不在页面中引入多个JS库.今儿个来学习学习jQuery库是怎么解决$冲突问题.(jQuery- ...
- jquery库与其他库冲突的问题解决-jquery.noConflict()
在使用jQuery开发的时候,可能还会使用到其他的JS库,比如Prototype,但多库共存时可能会发生冲突:若是发生冲突后,可以通过以下几种方案进行解决: 一. jQuery库在其他库之前导入,直接 ...
- jQuery.noConflict()
转载:http://blog.163.com/mjuxiaom@126/blog/static/13397047120117324320858/ 运行这个函数将变量$的控制权让渡给第一个实现它的那个库 ...
- 三分钟玩转jQuery.noConflict()
jQuery是目前使用最广泛的前端框架之一,有大量的第三方库和插件基于它开发.为了避免全局命名空间污染,jQuery提供了jQuery.noConflict()方法解决变量冲突.这个方法,毫无疑问 ...
- jquery noConflict详解
noConflict是防止其他库也用了$作为全局变量而引起的冲突,我们看看jquery是怎么做的 首先jquery在代码的开始部分定义了2个私有变量: _jQuery = window.jQuery ...
- jQuery noConflict() 方法
如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaSc ...
- jQuery 核心函数 (十一)
函数 描述 jQuery() 接受一个字符串,其中包含了用于匹配元素集合的 CSS 选择器. jQuery.noConflict() 运行这个函数将变量 $ 的控制权让渡给第一个实现它的那个库.
- JQuery --- 第一期 (初识jQuery, JQuery核心函数和工具方法)
个人学习笔记 初识jQuery 1.我的第一个JQuery <!DOCTYPE html> <html lang="en"> <head> & ...
随机推荐
- ms sql 2005和2008收缩日志的方法
步骤1: 2005的sql 语句为:back up log 数据库名称 with no_log 目的:截断数据库日志 2008的sql 语句为:alter database 数据库名称 set rec ...
- 为什么要用 Bootstrap
[Bootstrap](http://hovertree.com/menu/bootstrap/) 是由两个 twitter 员工开发并开源的前端框架,非常火爆,而如此火爆自然有它的道理,在我们团队的 ...
- 精品干货丨APP常用导航框架
文章目的:在整体上把握移动端App的导航框架,理解每种导航所具有的优点.局限性和其所适用的范围. 文章用心:典型APP案例(源码:http://www.jinhusns.com/Products/Do ...
- ASP.NET MVC 网站开发总结(二)——一个或多个文件的异步或同步上传
简而言之,直接用代码展示如何实现文件的上传,这里需要使用到一个bootstrap的文件上传插件File Input(请自行下载). 前台页面: <!----> <!DOCTYPE h ...
- Go语言的编程范式
由于比较古怪的语言特性,感觉代码的封装性是一种不同的思路. 包管理的火热程度居然没有nodejs高,这是为什么 package form import ( "encoding/gob&quo ...
- 从零开始学Python第0周:Python基本介绍(部分内容来源于网络)
Python入门介绍 一,Python的基本介绍 (1)概要 Python是一种解释型,面向对象,动态数据类型的高级程序设计语言.常被广泛用于处理系统管理任务和web编程.现如今Python已经成为了 ...
- Scalaz(8)- typeclass:Monoid and Foldable
Monoid是种最简单的typeclass类型.我们先看看scalaz的Monoid typeclass定义:scalaz/Monoid.scala trait Monoid[F] extends S ...
- No.018:4Sum
问题: Given an array S of n integers, are there elements a, b, c, and d in S such that a + b + c + d = ...
- ASP.NET MVC Model绑定的简单应用
Model绑定是 MVC 框架根据 HTTP 请求数据创建 .NET 对象的一个过程. 一.简单类型 1.单一值
- Error: Error setting TTL index on collection : sessions
Error: Error setting TTL index on collection : sessions 一.步骤一: 这个问题一般是直接升级 mongodb和connect-mongo的版本为 ...