0

0

分享jQuery中noConflict()的用法

巴扎黑

巴扎黑

发布时间:2017-06-20 15:14:44

|

1089人浏览过

|

来源于php中文网

原创

这篇文章主要介绍了jquery中noconflict()用法,实例分析了noconflict()的功能、定义及相关使用技巧,需要的朋友可以参考下

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

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

一、"$"操作符

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

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

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

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

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


jQuery.noConflict([removeAll])

函数的说明:

人声去除
人声去除

用强大的AI算法将声音从音乐中分离出来

下载

缺省情况下,执行 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("p 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("p p").hide();  // 基于 jQuery 的代码
$("content").style.display = "none";// 基于其他库的 $() 代码

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


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

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
go语言 注释编码
go语言 注释编码

本专题整合了go语言注释、注释规范等等内容,阅读专题下面的文章了解更多详细内容。

2

2026.01.31

go语言 math包
go语言 math包

本专题整合了go语言math包相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

go语言输入函数
go语言输入函数

本专题整合了go语言输入相关教程内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

golang 循环遍历
golang 循环遍历

本专题整合了golang循环遍历相关教程,阅读专题下面的文章了解更多详细内容。

0

2026.01.31

Golang人工智能合集
Golang人工智能合集

本专题整合了Golang人工智能相关内容,阅读专题下面的文章了解更多详细内容。

1

2026.01.31

2026赚钱平台入口大全
2026赚钱平台入口大全

2026年最新赚钱平台入口汇总,涵盖任务众包、内容创作、电商运营、技能变现等多类正规渠道,助你轻松开启副业增收之路。阅读专题下面的文章了解更多详细内容。

76

2026.01.31

高干文在线阅读网站大全
高干文在线阅读网站大全

汇集热门1v1高干文免费阅读资源,涵盖都市言情、京味大院、军旅高干等经典题材,情节紧凑、人物鲜明。阅读专题下面的文章了解更多详细内容。

73

2026.01.31

无需付费的漫画app大全
无需付费的漫画app大全

想找真正免费又无套路的漫画App?本合集精选多款永久免费、资源丰富、无广告干扰的优质漫画应用,涵盖国漫、日漫、韩漫及经典老番,满足各类阅读需求。阅读专题下面的文章了解更多详细内容。

67

2026.01.31

漫画免费在线观看地址大全
漫画免费在线观看地址大全

想找免费又资源丰富的漫画网站?本合集精选2025-2026年热门平台,涵盖国漫、日漫、韩漫等多类型作品,支持高清流畅阅读与离线缓存。阅读专题下面的文章了解更多详细内容。

19

2026.01.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
jQuery 教程
jQuery 教程

共42课时 | 5.2万人学习

HTML+CSS基础与实战
HTML+CSS基础与实战

共132课时 | 10万人学习

tp6+adminlte搭建通用后台
tp6+adminlte搭建通用后台

共39课时 | 5.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号