jQuery 中的 noConflict()属性
该函数属于全局的jQuery对象
jQuery.noConflict()函数用于让出jQuery库对变量$(对变量jQuery)的控制权
也可用于为 jQuery 变量规定新的自定义名称
注:在其他的JavaScript库中也使用$时 此方法存在
可以防止库之间的冲突 非常有用
使用的语法如下:
jQuery
.noConflict( [ removeAll ] )
参数removeAll:是否彻底移交对变量jQuery的控制权 可以传入Boolean值 默认值为false
如果省略了参数removeAll或该参数不为true 则表示只让出对变量$的控制权 如果该参数为true 则表示同时让出对变量$和jQuery的控制权
返回值:
函数的返回值是jQuery类型 返回变量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 的代码
6)如果jQuery库在其他库之前就导入了 那么可以直接使用‘jQuery’来做一些jQuery的工作 同时 可以使用$()方法作为其他库的快捷方式 这里无需调用jQuery。noConflict()函数
如下代码:
<p id="pp">Test-prototype(将被隐藏)</p>
<p>Test-jQuery(将被绑定点击事件)</p>
<!--先导入jQuery-->
<script src="../../script/jquery.js" type="text/javascript"></script>
<!--后导入其他库-->
<script src="lib/prototype.js" type="text/javascript"></script>
<script language="javascript">
jQuery(function(){
jQuery("p").click(function(){
alert(jQuery(this).text());
})
})
$("pp").style.display = "none";
</script>
如果要实现两个版本的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>
三个版本的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>