当 jQuery 内部的 $ 被其他函数库覆盖

假设我们自己写了一个 js 函数库，ohter_lib.js，它包含了一个函数名为 $ 的函数。那么引入这个库后，这个库的 $ 将与 jQuery 中的 $ 发生冲突，jQuery 内部的 $ 会被覆盖。（注：后调用的库会覆盖先调用的库）

/*other_lib.js*/
function $(num) {alert('自定义库，用$作为函数名称' + num);
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{background: red;width: 100px;height: 100px;margin-top: 20px;}</style>
</head>
<body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><br><button id="btn1">隐藏</button><button id="btn2">改变颜色</button><!--先调用jQuery库，再调用其他函数库-->
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script src="js/other_lib.js"></script>
<script type="text/javascript">$(function () {$('#btn1').on('click',function () {$('#div1').hide();});$('#btn2').on('click',function () {$('#div2').css('background', 'green')$('#div3').css('background', 'blue')});});</script></body>
</html>

此时，页面已经无法运行 jQuery 的代码。

解决方案一：将所有 $ 替换为 jQuery

<script type="text/javascript">jQuery(function () {jQuery('#btn1').on('click',function () {jQuery('#div1').hide();});jQuery('#btn2').on('click',function () {jQuery('#div2').css('background', 'green')jQuery('#div3').css('background', 'blue')});});
</script>

解决方案二：借助匿名函数包裹执行

借助匿名函数包裹执行，执行时传递 jQuery 对象，内部正常使用 $

<script>window.onload = function () {(function ($) {$(function () {$('#btn1').on('click',function () {$('#div1').hide();});$('#btn2').on('click',function () {$('#div2').css('background', 'green')$('#div3').css('background', 'blue')});});})(jQuery)}
</script>

当其他函数库的 $ 被 jQuery 覆盖

同样是上面的 other_lib.js ，里面包含了一个函数名为 $ 的函数。这次我们先引用这个这个函数库，再调用 jQuery，那么这个函数库的 $ 被 jQuery 覆盖。

/*other_lib.js*/
function $(num) {alert('自定义库，用$作为函数名称' + num);
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>div{background: red;width: 100px;height: 100px;margin-top: 20px;}</style>
</head>
<body><div id="div1">div1</div><div id="div2">div2</div><div id="div3">div3</div><br><button id="btn1">隐藏</button><button id="btn2">改变颜色</button><!--先调用别的函数库再调用jQuery-->
<script src="js/other_lib.js"></script>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script><script>window.onload = function () {console.log($)};
</script></body>
</html>

此时控制台打印的是 jQuery 对象，而非我们定义的函数的输出，说明这个函数库的 $ 被 jQuery 覆盖了。

解决方案：解除 jQuery 对 $ 的引用

$.noConflict() 可以解除 jQuery 对 $ 的引用，并将引用赋给其他字符

<script>window.onload = function () {// 1.解除 jQuery 对 $ 的引用var _ = $.noConflict()_('#btn1').on('click',function () {_('#div1').hide();});_('#btn2').on('click',function () {_('#div2').css('background', 'green')_('#div3').css('background', 'blue')});console.log($)};
</script>

【jQuery笔记Part1】05-jQuery解决冲突相关推荐

【jQuery笔记Part1】06-jQuery对象与js对象转换
jQuery对象与js对象转换概念为什么要转换转化方法 JS对象 -> jQuery对象 jQuery对象 -> JS对象原理图 jQuery笔记目录概念 jQuery对象是通 ...
【jQuery笔记Part1】11-jQuery选择器
jQuery选择器基本选择器层级选择器属性选择器筛选选择器 siblings 案例 jQuery笔记目录基本选择器初始 html 页面: <!DOCTYPE html> < ...
【jQuery笔记Part1】10-jQuery操作html-获取设置
jQuery操作html-获取&设置获取内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTML 标记) val() - 设置或返回表 ...
【jQuery笔记Part1】09-jQuery操作css-尺寸
jQuery操作css-尺寸 width() height() innerWidth() innerHeight() outerWidth() outerHeight() outerWidth(tru ...
【jQuery笔记Part1】08-jQuery操作css-获取设置样式
jQuery操作css-css() 通过 css() 方法获取样式通过 css() 方法设置样式方法一:单一属性设置方法二:链式调用方法三:多个属性设置(最常用) 完整案例 jQuery笔记目 ...
【jQuery笔记Part1】07-jQuery操作css-添加删除切换类、开关灯泡案例
jQuery操作css-添加&删除&切换类 addClass() - 向被选元素添加一个或多个类 removeClass() - 从被选元素删除一个或多个类 toggleClass() ...
【jQuery笔记Part1】02-jQuery代码风格
jQuery代码风格 1. 代码风格 2. 基本语法格式示例 jQuery笔记目录 1. 代码风格在 jQuery 程序中,不管是页面元素的选择.内置的功能函数的调用,都是美元符号 $ 来起始的. ...
【jQuery笔记Part1】01-jQuery简介集成
jQuery简介&集成 JS的问题? jQuery 概念 jQuery 特点 jQuery 功能 jQuery 集成方式本地集成远程集成 jQuery笔记目录 JS的问题? onload ...
【jQuery笔记Part1】12-jQuery元素的角标
jQuery元素的角标常见的鼠标事件 mouseenter 鼠标指针穿过被选元素时 mouseleave 鼠标移出被选元素内部时 mouseover 鼠标指针穿过被选元素或其子元素时 mouseou ...

【jQuery笔记Part1】05-jQuery解决冲突

jQuery解决冲突