jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法。分享给大家供大家参考。具体分析如下:

jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库。这有助于确保jQuery不会与其他库的$对象发生冲突。在运行这个函数后,就只能使用jQuery变量访问jQuery对象。例如,在要用到$("div p")的地方,就必须换成jQuery("div p")。

一、"$"操作符

1、jQuery默认使用"$"操作符,prototype等其他框架也是是使用"$",于是,如果jQuery在其他库之后引入,那么jQuery将获得"$"使用权。这样的情况也很容易理解,毕竟JS是从上到下流式执行的。

2、如果在其他使用"$"的库之前引入jQuery,那么jQuery将不会占用"$"。

提示:在其他 JavaScript 库为其函数使用 $ 时,该方法很有用。

我们在jquery中获取变量都会使用到$,但是还有很多插件都是可以使用$这个符号了,如果我们同时要引用就会导致出现问题了,jquery为了防止这种事情发生就引入了noconflict()

二、jQuery.noConflict的定义
 
jQuery.noConflict 方法包含一个可选的布尔参数,用以决定移交 $ 引用的同时是否移交 jQuery 对象本身:

jQuery.noConflict([removeAll])

函数的说明:

缺省情况下,执行 noConflict 会将变量 $ 的控制权移交给第一个产生 $ 的库;当 removeAll 设置为 true 时,执行 noConflict 则会将 $ 和 jQuery 对象本身的控制权全部移交给第一个产生他们的库。
 
三、jQuery.noConflict源码分析
 
jQuery 源码开头,首先做的一件事情是这样的:

// Map over jQuery in case of overwrite
_jQuery = window.jQuery,
// Map over the $ in case of overwrite
_$ = window.$,

容易理解的是,jQuery 通过两个私有变量映射了 window 环境下的 jQuery 和 $ 两个对象,以防止变量被强行覆盖。一旦 noConflict 方法被调用,则通过 _jQuery, _$, jQuery, $ 四者之间的差异,来决定控制权的移交方式,具体的代码如下:

noConflict: function( deep ) {
 if ( window.$ === jQuery ) {
 window.$ = _$;
 }
 if ( deep && window.jQuery === jQuery ) {
 window.jQuery = _jQuery;
 }
 return jQuery;
}

再来看上面所说的参数设定问题,如果 deep 没有设置,_$ 覆盖 window.$,此时 jQuery 别名 $ 失效,但 jQuery 本身完好无损。如果有其他类库或代码重新定义了 $ 变量,它的控制权就完全交接出去了。反之如果 deep 设置为 true 的话,_jQuery 覆盖 window.jQuery,此时 $ 和 jQuery 都将失效。
这种操作的好处是,不管是框架混用还是 jQuery 多版本共存这种高度冲突的执行环境,由于 noConflict 方法提供的移交机制,以及本身返回未被覆盖的 jQuery 对象,完全能够通过变量映射的方式解决冲突。

四、jQuery.noConflict实例
 
1、将 $ 引用的对象映射回原始的对象:

jQuery.noConflict();
jQuery("div p").hide(); // 使用 jQuery
$("content").style.display = "none"; // 使用其他库的 $()

2、恢复使用别名 $,然后创建并执行一个函数,在这个函数的作用域中仍然将 $ 作为 jQuery 的别名来使用。在这个函数中,原来的 $ 对象是无效的。这个函数对于大多数不依赖于其他库的插件都十分有效:

jQuery.noConflict();
(function($) {
 $(function() {
  // 使用 $ 作为 jQuery 别名的代码
 });
})(jQuery);
... // 其他用 $ 作为别名的库的代码

3、可以将 jQuery.noConflict() 与简写的 ready 结合,使代码更紧凑:

jQuery.noConflict()(function(){
  // 使用 jQuery 的代码
});
... // 其他库使用 $ 做别名的代码

4、创建一个新的别名用以在接下来的库中使用 jQuery 对象:

var j = jQuery.noConflict();
j("div p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

5、完全将 jQuery 移到一个新的命名空间:

var dom = {};
dom.query = jQuery.noConflict(true);
//结果:
dom.query("div p").hide();  // 新 jQuery 的代码
$("content").style.display = "none";  // 另一个库 $() 的代码
jQuery("div > p").hide();  // 另一个版本 jQuery 的代码

希望本文所述对大家的jQuery程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery
, 用法
noConflict()
jquery.noconflict、jquerynoconflict.js、iframe用法实例、java枚举类的用法实例、java map用法 实例,以便于您获取更多的相关知识。

时间: 2024-09-04 13:31:17

jQuery中noConflict()用法实例分析_jquery的相关文章

jQuery中noConflict()用法实例分析

 这篇文章主要介绍了jQuery中noConflict()用法,实例分析了noConflict()的功能.定义及相关使用技巧,需要的朋友可以参考下     本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突

JQuery中serialize()用法实例分析_jquery

本文实例讲述了JQuery中serialize()用法.分享给大家供大家参考.具体分析如下: 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身.序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中.   语法: $(selector).serialize()   详细说明 1..seria

jQuery中animate用法实例分析_jquery

本文实例讲述了jQuery中animate用法.分享给大家供大家参考.具体如下: 这是一个简单的animate函数尝试.代码如下: <script type="text/javascript"> $(document).ready(function(){ $(".side-box h3").toggle(function(){ $(this).addClass("box-arrow"); $(this).next(".sid

jquery中change()用法实例分析_jquery

本文实例分析了jquery中change()的用法.分享给大家供大家参考.具体分析如下: change()当元素的值发生改变时,会发生 change 事件.该事件仅适用于文本域(text field),以及 textarea 和 select 元素. 当用于 select 元素时,change 事件会在选择某个选项时发生.当用于 text field 或 text area 时,该事件会在元素失去焦点时发生.  一.change的用法 1.触发 change 事件:触发被选元素的 change

jQuery中animate用法实例分析

 这篇文章主要介绍了jQuery中animate用法,实例分析了animate的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了jQuery中animate用法.分享给大家供大家参考.具体如下: 这是一个简单的animate函数尝试.代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <script type="text/javascript"> $(document).ready

JQuery中serialize()用法实例分析

 这篇文章主要介绍了JQuery中serialize()用法,实例分析了serialize()方法的功能.定义及相关使用技巧,需要的朋友可以参考下     本文实例讲述了JQuery中serialize()用法.分享给大家供大家参考.具体分析如下: 一.serialize()定义和用法: serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象.你可以选择一个或多个表单元素(比如input或文本框),或者 form 元素本身.

jQuery中DOM操作实例分析_jquery

本文实例讲述了jQuery中DOM操作的方法.分享给大家供大家参考.具体分析如下: 这里主要设计的dom操作包括:dom对象的创建(JS方式和jquery方式).属性的修改.样式的修改.动态绑定事件 代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery-1.3.

python中as用法实例分析

  这篇文章主要介绍了python中as用法,实例分析了as的功能及相关使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了python中as用法.分享给大家供大家参考.具体分析如下: ? 1 import some # some 为一个模组 如果想要改变被导入模组在当前模组中的名称,而不是sys.modules中的名称.可以使用import as,例如: ? 1 2 import some as other print(other.name) 和 ? 1 2 3 4 import

Javascript中innerHTML用法实例分析

 这篇文章主要介绍了Javascript中innerHTML用法,实例分析了实用innerHTML获取对应元素内容的使用技巧,需要的朋友可以参考下     本文实例讲述了Javascript中innerHTML用法.分享给大家供大家参考. 具体实现方法如下:   代码如下: <html> <head> <script type="text/javascript"> function t(){ var cont = document.getElemen