| 标题 | jQuery中noConflict()用法实例分析 |
| 内容 | 这篇文章主要介绍了jQuery中noConflict()用法,实例分析了noConflict()的功能、定义及相关使用技巧,需要的朋友可以参考下 本文实例讲述了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程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。